x

Changing footer colour to white

Can someone plase take a look at the screen grab showing the footer and relevent _global.less section.

Tried everything, driving me made

And yes, I've read the other related posts and tried all...no joy.

Really appriciate it if someone could help.image

917 Views
Message 1 of 4
Report
1 Best Answer

Best Answer

You'll have to determine which color variation on that theme you are using. In the Site Editor, when you click on Theme in the top navigation bar, you should see a set of circular theme color variation buttons. The one you selected will be highlighted in some fashion (e.g., a white border). Take note of your selected theme color.

Now, in your screenshot, below the "main.less" file, you'll see the color variation less files (variables.less, variables_blue.less, variables_green.less, etc.). Let's say you chose the blue color variation for your theme. Look in the "variables_blue.less" file for the footer background color less variable "@color-footer-background" and you should see the current color specification. For example, if the footer background for the blue theme variation is set to something like #404040 (a shade of dark grey), in the "variables_blue.less" file, you should see a line where the footer background variable is set to that color --> "@color-footer-background: #404040;" To change this to white, change the color hexcode from #404040 to #ffffff.

View Best Answer >

904 Views
Message 5 of 4
Report
3 REPLIES 3

Best Answer

You'll have to determine which color variation on that theme you are using. In the Site Editor, when you click on Theme in the top navigation bar, you should see a set of circular theme color variation buttons. The one you selected will be highlighted in some fashion (e.g., a white border). Take note of your selected theme color.

Now, in your screenshot, below the "main.less" file, you'll see the color variation less files (variables.less, variables_blue.less, variables_green.less, etc.). Let's say you chose the blue color variation for your theme. Look in the "variables_blue.less" file for the footer background color less variable "@color-footer-background" and you should see the current color specification. For example, if the footer background for the blue theme variation is set to something like #404040 (a shade of dark grey), in the "variables_blue.less" file, you should see a line where the footer background variable is set to that color --> "@color-footer-background: #404040;" To change this to white, change the color hexcode from #404040 to #ffffff.

905 Views
Message 5 of 4
Report

Paul, I'm trying out you suggestions tonight.

Thanks again for the indepth knowledge share. Really appriciate it.

I'll report back how it went.

BR David.

901 Views
Message 5 of 4
Report

2 mins later... 100% success Paul!

Outstanding stuff.

900 Views
Message 5 of 4
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.