Studio theme - child.css header-wrapper style doesn't change display

Studio theme,
I'm trying to add a background image to the header. By header I mean the section where the buttons and logo are located. An element inspection shows that to be the #header-wrapper div element.
I've modified the #header-wrapper statement and put it in the /studio-child/_inc/css/child.css file and I see no change. It appears the "custom styling" for the header overrides the css styling. I tried leaving the header color blank but it just puts the default black color for the header.
fyi here is the statement I put in the child.css file:
#header-wrapper {
background: #ae2f27 url(images/header_back.png) no-repeat;

yes, I also uploaded an image to the images folder in _inc/css/

any help?

  • Mason


    Taking a look at this there's a couple ways you could override the values and get the customization you're looking for.

    To override the color property for #header-wrapper completely for an image you'll have to either use
    the "!important" property or actually edit theme-options.php. Neither are an "elegant" solution, but if you use the first property in the child folder's style.css file you can continue with any theme updates.

    Change what you have to this:

    #header-wrapper {
    background: #ae2f27 url(images/header_back.png) no-repeat!important;

    And you should be good to go. I would note though that using the !important property isn't considered a best practice. It interrupts the normal flow of CSS which can be a pain to trouble-shoot down the road. If it's just a one time thing (as in this case) then I don't see it as a big problem.

    Just something to think about as it could cause problems for anyone who comes along after you and has to tweak the code.

  • bkeller99

    Well, now I'm confused.
    I assume you are referring to the "default.css" selection in the preset style section of themes option. Because I am not actually editing a file called default.css ( didn't see one). I don't want the preset colors, so the only other selection was "default.css"

    If you don't use that and copy the CSS autogenerated in the header you can just use the child.

    I have know idea what you are saying here.

    Let me re-state what I am trying to do and then you can tell me what selections and files I should edit.
    I want to add a background image to the #header-wrapper, but I like selecting the layout, text and navigation colors from "custom stylilng". So if I can't have both of these things and elect to have the ability to use a background header image which files should I edit so that I don't mess with the the themes core files.

  • Tammie

    @bkeller99: I'm confusing things sorry. I'd select blue.css that should set you up with a basic theme style you just add css. The way it works is default.css add some CSS before the end of your header so it allows you to use the theme options colour pickers. Now if you are doing things using the child theme then you don't have to worry about this. So just select blue.css and take from there.

    Now it you want to use child and also want to use a custom style you could take the code default.css outputs in the header and add that also to the child.cs OR you can use the !important flag.