change color of the client area blocks

[tangogc]

anyone could help me with an example on how to change the background color of the 4 blocks of the client area in version 8.1 six template please ?

thanks a lot

 

 

Edited January 30, 2021 by tangogc

[bear]

Though someone will likely be along shortly with specific instructions, you can find this yourself. Using a browser like Firefox (also present in others), while viewing the page hit the F12 key on your keyboard. That should open the inspector. Left side is a button that,  when clicked, can be positioned over an element on the page. Click that element, it will show in the code block what that is and the CSS that likely controls it. 
Learn that, and you can find most anything that's editable, without having to wait. 🙂

[tangogc]

Thanks Bear alredy done before open the post and I was able to identify only the line and not the background.

 

I hope someone will help me with a css example to change the backgroud

[bear]

I'm not on the latest version, but using that method I can see the CSS for our slightly older version is "tile" and "tiles" (defined as transparent). Using that tool, you should be able to highlight the line, then by moving  your mouse slightly, the content, and lastly the box that contains it. When it highlights the whole containing box, click. 

[brian!]

11 hours ago, bear said:

Though someone will likely be along shortly with specific instructions, you can find this yourself.

you rang? 🤪

2 hours ago, tangogc said:

I hope someone will help me with a css example to change the background

.tiles .tile {
    background-color: #ffffe0;
    border-right: 1px solid #fafad2;
}

or course, you could colour them individually with CSS if you wanted to... 🌈

[bear]

In, slightly before Brian!.

[tangogc]

aaa dear guys as I envy you, but slowly and with your help I learn too. Thank you 🙂

with the suggested tools I located the code in all.min.css file but I am not sure if I have modify all.min.css hould I use all.css?

I don't understand, however, how to modify them individually, it seems to me that in this way you can modify everyone's background and not individually

Another help or an example please?

 

thanks in advance

[brian!]

16 minutes ago, bear said:

In, slightly before Brian!.

you rascal. 😎

I tend to bulk post my replies in one go if can help it - otherwise I get involved in replying to multiple threads at the same time - and that way lies madness.. and getting nothing done! 🤪

7 minutes ago, tangogc said:

with the suggested tools I located the code in all.min.css file but I am not sure if I have modify all.min.css hould I use all.css?

don't edit the core css files - they will get overwritten during a WHMCS update.

8 minutes ago, tangogc said:

I don't understand, however, how to modify them individually, it seems to me that in this way you can modify everyone's background and not individually

https://developers.whmcs.com/themes/css-styling/

Quote

If you want to make changes to any of the CSS that is applied by default, we recommend making those customisations inside of the /css/custom.css file.

if you're using the Six theme, and haveren't renamed or made a child of it, then you can add your code to /templates/six/css/custom.css - literally you just copy & paste the CSS code I posted above and save.... however, if using Six, remember to keep a copy of this custom.css file as it will get overwritten during an update.

[tangogc]

39 minutes ago, brian! said:

you rascal. 😎

I tend to bulk post my replies in one go if can help it - otherwise I get involved in replying to multiple threads at the same time - and that way lies madness.. and getting nothing done! 🤪

don't edit the core css files - they will get overwritten during a WHMCS update.

https://developers.whmcs.com/themes/css-styling/

if you're using the Six theme, and haveren't renamed or made a child of it, then you can add your code to /templates/six/css/custom.css - literally you just copy & paste the CSS code I posted above and save.... however, if using Six, remember to keep a copy of this custom.css file as it will get overwritten during an update.

I Brian I confirm I work on the childs

could you make me an example on how modify individually so I can get ideas

[brian!]

1 minute ago, tangogc said:

could you make me an example on how modify individually so I can get ideas

.tiles .tile:nth-child(1) { background-color: #f0f8ff; }
.tiles .tile:nth-child(1) .fa-cube {color: #5bc0de; }
.tiles .tile:nth-child(2) { background-color: #d8fcdb; }
.tiles .tile:nth-child(2) .fa-globe,
.tiles .tile:nth-child(2) .fa-shopping-cart,
.tiles .tile:nth-child(2) .fa-file-alt {color: #5cb85c; }
.tiles .tile:nth-child(3) { background-color: #ffe7e7; }
.tiles .tile:nth-child(3) .fa-comments {color: #d9534f; }
.tiles .tile:nth-child(4) { background-color: #fff7e7; }
.tiles .tile:nth-child(4) .fa-credit-card {color: #f0ad4e; }

 

[tangogc]

1 hour ago, brian! said:

you rascal. 😎

I tend to bulk post my replies in one go if can help it - otherwise I get involved in replying to multiple threads at the same time - and that way lies madness.. and getting nothing done! 🤪

don't edit the core css files - they will get overwritten during a WHMCS update.

https://developers.whmcs.com/themes/css-styling/

if you're using the Six theme, and haveren't renamed or made a child of it, then you can add your code to /templates/six/css/custom.css - literally you just copy & paste the CSS code I posted above and save.... however, if using Six, remember to keep a copy of this custom.css file as it will get overwritten during an update.

Once upon a time there was a community where medals were awarded

thank you so much it works perfectly