Streaming live at 10am (PST)

How can I override theme builder styles?


#1

Hi,

I would like to override some of the styling options provided by the theme builder. As a test, I am trying to change the background-color of the header by placing this line of code at the bottom of the stylesheet..

.header_1 {background-color: #fff;}
#header {background-color: #fff;}

The background header however remains to be the pink colour I have set it to in the theme builder.

My aim is to actually change the header background to an image but just thought I'd simply try changing the colour first but having no luck >.<

Anyone able to point me in the right direction?

Cheers


#2

Hi Adam,

Rather than hand coding, Webflow provides a GUI to directly add html elements to the page, css properties to the html, and the ability to visually create pages using "proper coding techniques" behind the scenes automagically. Your "header_1" should be a class in the style panel, then simply go down to the color section within the interface and set it to white... You can add an ID tag to any element as well within the interface. The production + exported code will have your .header_1 class with a background-color: #fff property created for you in your css file. No need to attempt to do this with custom inline css code...

Watch the instructional videos from the tutorials link in the top right if your not familiar with the workflow/interface yet.

Also, you can't access the "stylesheet" directly in Webflow (not yet anyways - maybe one day?)... you can however add "inline" css into the head section of your html page as noted in your post if you need to... Just make sure you wrap it in <style>somecode</style> tags + put it in the top section of the "custom code" area within the sites management area.

You can also export the code, then directly manipulate the html, css, js files in your text editor if you need to. If you know html/css or are like myself, learning html/css - you'll be pleasantly surprised to find that it doesn't look like a bunch of computer barf wink

Hope that helps, good luck.


#3

Thanks a lot for that Mogeek! that helped a lot smile

I ended up adding a <style> section in the <head> of header.php so that the header customisation applies to all html pages.

Cheers!


#4