Color Changes

[vitadome]

Newbie here.

I'm trying to do some color changes to the navigation bars but have been unsuccessful.  I'm was just trying to manipulate the styles.css file just to see how it worked but I'm not able to see any changes.  I've read the documentation on this topic but I assume I'm missing something.  Any help is appreciated!  Thank you.

 

 

[wp4all]

Hi @vitadome,

go to whmcs/templates/six/css/custom.css

add : 

section#home-banner {
    margin: 0;
    padding: 50px 0 60px;
    background-color: #8BC34A;
    color: #fff;
}

and you will get :

the Background in green.

Please remember to flush the Browser cache or any other cache to see the result.

Greetings Christian

[vitadome]

Hi @wp4all

Thank you for this info... it worked for me!  My follow-up question is... how did you know where to find #home-banner?  Is there a cheat sheet listed somewhere?

[wp4all]

Hi @vitadome,

ähh no 😏.

You need to know how to find it . You can use the inspector of your Browser to identify your section.

Here is a short video how to do that :

How to use inspector

So identify your section make your changes and copy & paste the new CSS in to your custom.css.

Greetings Christian

 

Edited March 21, 2019 by wp4all

[wp4all]

Hi,

sorry have just seen that the compression was to high here is the video in 1080p

Inspector video

Greetings Christian

[vitadome]

Thanks so much!  I was able to learn and find my answers.  I appreciate your help!

[WHMCS ChrisD]

Hey @vitadome

You'll find some information on the themes and their layout at https://developers.whmcs.com/themes/

[OMbhh]

Hi 

I am newbee here, I followed the below steps to change the background color, but got no success. Is there anything I am missing. I also cleared the browser cache.

 

go to whmcs/templates/six/css/custom.css

add : 

section#home-banner {
    margin: 0;
    padding: 50px 0 60px;
    background-color: #8BC34A;
    color: #fff;
}

[wp4all]

Hi @OMbhh,

Is six the template that you use ?

Of curse it will only work if you use the right css for the right template 🙂

Have you checked the linked Video --> Inspector Video there you will see which css is to use for your changes.

If you hover over the part you wanna change you will get the full path to the css and the Line number.

Here it is style.min.css and the Line 91 in the document where you will find the css code.

Greetings Christian