• GoDaddy Community
  • Websites + Marketing | Website Builders
  • Websites + Marketing | Website Builders

    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 

    Overwrite the CSS in the Site-Wide Code for a form and blog feed



    I have been trying to look around the web and have asked the support people for website builder 7 for ages now. I'm finally giving in and making my own topic that I hope gets answered. 


    I chose a theme for my website, but now that I have put the color scheme I want in, I can't seem to change the colors in the defaulted theme I chose. They say you can overwrite the theme's colors and css in the Site-Wide Code section in the Site Settings, but I am having such a hard time figuring out what CSS I need in order to do just that.


    Basically... I need to find out what to put in where to make the contact form's labels (Name, Email, Message, etc) to be white instead of gray as it does not show up on the background color I have. The same goes for the blog feed. The default is orange which looks hideous against the forest green background I have. 


    Please let me know if you can help me. I'm so tired of talking to the "helpful" support chat people because they either give you codes that do not work or claim that it's not their fault it doesn't work and that we need to go to w3schools to find the correct code... 


    Thank you! Hope to hear from you lovely people soon!

    6 REPLIES 6
    Community Manager

    Welcome to GoDaddy Community, @SpyroShurtagul


    Great question! You can usually use CSS coding within the site-wide code section to override what the theme already has in place. The builder wasn't designed with making CSS changes in mind though. Having a working knowledge of how CSS is used will increase your odds of success, so learning the basics through something like W3 Schools is a solid suggestion.  Here are a few tips I can give to helping you find the right thing to change and making it stick. 

    • Make sure you encapsulate your CSS script in a <style></style> tag set. 
    • Find the right value to change by using your browsers "Inspect" feature. You can usually access this by Right clicking on the page. You can use Ctrl+Shift+I to open this on FireFox or Chrome. 
    • FireFox specifically has a 3D view that you can enable in it's inspector that can be very helpful in finding the exact item that needs to be changed. 

    Does anyone else have insight they can share on making CSS changes in Website Builder?


    JesseW - GoDaddy | Community Manager | 24/7 support available at x.co/247support | Remember to choose a solution and give kudos.

    @JesseW I have used w3schools many times, but they just don't have the information I need. They are helpful when telling you how to build something with CSS, but when the site's theme is already built, it's confusing to know what to even put in the Site-Wide Code section. For instance, am I simply making a new form in that code or am I changing styles? If I'm changing styles, I would need to know the name that the theme chose to call the form and its labels. But since that isn't accessible, it's almost impossible to do.


    I thank you for the insight on how to Inspect elements on Chrome. In the builder, it wasn't allowing me to right click like you said because I would always be right clicking on the building program which would just lead me to the icons to change page settings or the background. I'll definitely use the command now that I know about it. 


    Hopefully getting to inspect the elements will lead me to the correct naming that they gave the labels when creating the theme in the first place, but we'll see. I was pretty sure inspecting something only showed the HTML - not the CSS (which would have the information I'm looking for.) 


    As for CSS itself, I do know it. I did put it in the style tags. It even colors itself as I did it correctly. I honestly think the real problem is just knowing the name of the tags/divs used in the theme's default css. If anybody knows it, please share. I think it's ridiculous that once you pick a theme for a site, you can't change the theme's colors. I thought that was a basic necessity. You can't tell people to choose a theme and not let them know that the colors matter in the choice. It never has on any website I've ever been on. This is the first time I haven't been able to change colors...


    I appreciate any help on this matter and I'll let you all know if I find something out in my discoveries. Thanks!

    @SpyroShurtagul It can definitely be tricky to work out. The inspector feature I'm referring to is different than just viewing the source of the page. The inspector is part of developer tools in the browser. Most of the time , once you find a CSS section you want to try to change, you can change it in the inspector area and see the live update on the page. Also, for best results, I would only try using that on a published page. It may not work while using it in the editor. Also, some CSS changes will only appear after publishing. Good luck! 


    JesseW - GoDaddy | Community Manager | 24/7 support available at x.co/247support | Remember to choose a solution and give kudos.

    I'm trying to do the same thing the original poster asked. I'm not a novice to web development just novice to the website builder software. Signed up for it because my business partner and she needs to be able to make changes when I don't have time. So was a bit surprised that I could select a theme but not make global changes to theme colors. Typically I'd have a .css file referenced in each page. I'm looking at the Site Wide Code settings and am I understanding correctly that if I put css code in there it adds it to the end of the header tag and therefore being last overwrites the previous styles tags? Usually I'd play and test that theory out but don't have tons of time and will already need to determine the tags to overwrite (though looks pretty straightforward). Want to confirm also that if my business partner makes changes within the site builder software it won't overwrite those tags I've added there unless she chooses a different theme, right? It would be great if there were a list of style tags used if not just giving the option to change global colors (hint hint GoDaddy). 

    Hi @shooclaire. Thanks for being part of GoDaddy Community!


    I'm not sure if the CSS changes in Site-wide code would overwrite what's in the actual CSS files for the builder. Most of the time I've seen CSS changes there work, so that may be. If you find a class or ID that doesn't seem to change, you can always try using '!important ' to override any other rules. 


    As for changes getting overwritten, that shouldn't happen as long as the theme isn't changed or if the Site-wide code itself isn't somehow changed. 


    JesseW - GoDaddy | Community Manager | 24/7 support available at x.co/247support | Remember to choose a solution and give kudos.

    I got around this by creating a black box and placing it behind my contact form which has white text.

    My page is white...so couldn't see headings on my contact form.

    Looks good.