Where does the CSS come from? Customization Procedures...


I used FireBug to check out my Studio Theme template's header background. When I look at layout.css I see:

#header-wrapper {<br />
height: 100px;<br />
z-index: 999;<br />

But when I inspect the header with Firebug I see a background color like so:

Where is that coming from?
What I would like to do is add a background image.


PS: I found some wrapper code in colours.css, but not header-wrapper...huh...looking forward to figuring this out.

  • dainis

    Still not sure where

    none repeat scroll 0 0 #272727

    is coming from for header-wrapper.

    Background CSS parameters are here, and the second one is background image:


    ---can you help me get background images behind these elements?
    ---I'll need to style the navigation menus with background images in certain themes as well, so with a few code examples and being shown where to go to do what, I'll be making modifications quickly.


    PS: If you visit: http://www.taoofyouth.atsis.com/ you'll see I tried to get a preliminary background image in like so

    #header-wrapper {<br />
    height: 100px;<br />
    z-index: 999;<br />
    background-image:url('http://www.taoofyouth.atsis.com/graphics/tao-of-youth-header.gif');<br />

    in child.css.

    went ahead and tried this too

    #header {<br />
    width: 980px;<br />
    margin-left: auto;<br />
    margin-right: auto;<br />
    text-align: center;<br />
    background-image:url('http://www.taoofyouth.atsis.com/graphics/tao-of-youth-header.gif');<br />

    because making the image a bit taller and having it behind the bp bar is a pretty nice option. :slight_smile:

  • dainis

    This tutorial is good for BuddyPress Default and possibly some other themes, but not Studio:


    I looked in functions.php to see if a header image is defined there, it is not.

    Setting the features slider seems to "mess up" the "Community Tab."

    Here's a screencast (video) of what I tried, I think it's about 94 seconds long:


  • Tammie

    @dainis: A screencast as we've said many times does not help us with regards to xhtml / css. Can we please have one thing we're trying to do also as this is several. First up colours are under library/styles/ depending on what one you've set. As for custom headers - turn on in settings as it's built into Studio. Not sure why you're following that tutorial as built in.

    I'd also say don't use gif's modern web design is best for pngs or jpgs. Gifs are not standard to use. No need to link about background parameters either we know what they mean and just use our format you'll be set but you may want to repeat x / y that's up to you.

  • dainis

    A screencast as we've said many times does not help us with regards to xhtml / css.

    hmm...did you really say that? I feel like I'm guessing when you'd find a screencast or screenshot useful. Sometimes you ask for them. Sometimes you tell me to not post them. I do not yet have a clear picture of how you would like to be communicated with and I am sincerely doing the best I can.

    Can we please have one thing we're trying to do also as this is several.

    We're not yet on the same page as to what is one topic and what isn't. That's fine for now. I'm a pro tech writer and know how to do topic-oriented writing, so at some point, I figure I'll understand what you see as one issue and what you see as several. Can you rest in knowing that I really am doing my best? First, I created two topics, which you told me were one. Now I've created one topic, which you've told me are several. I'm happy to have you dissect my requests as much as you like, but would like to be secure in not having my membership cancelled (being kicked out of WPMU DEV) while we find a way to communicate that works for both of us. I am building communities for very important and healing groups...and well...I don't want to go with an organization that will kick me out for posting screencasts...you know?

    Can you help me feel less threatened here?

    First up colours are under library/styles/ depending on what one you've set.

    I see the colors settings, what I am trying to do is give the sign up panel and the actual studio site header PNG background graphics.

    This image where I comment within your user documentation will clarify. It's not a "screencast," it's a screenshot, and I can't imagine how else to describe where I'm trying to place the graphic.


    Does this screenshot help?

    As for custom headers - turn on in settings as it's built into Studio.

    That header, according to your documentation, appears below the header I'm talking about. I'd like to add an background image where I've mentioned it and showed the screen shot. Your documentation seems to say that the custom header would appear below this "Studio header," and well...that won't work for the site I'm working on. Does that make sense?

    Not sure why you're following that tutorial as built in.

    Like I said, among other things, I'm a documentation and communications professional. So, I read manuals...also because I write them. I want to be fair to you and your team and make your support of me as fast and as easy as possible. I'm also attempting to show that I am in no way "unwilling" to read the manual or follow instructions, so I am showing good will by going through all the manuals I can. Also, without reading the manuals, I don't know what is in them beforehand...so going through them makes sense.

    Regarding the built in stuff...I've investigated that and can't get the background header graphic into the spot I'm talking about. If you tell me where to put it in CSS, I can do it. Also, if you tell me what additional CSS would be necessary to make sure the graphic works there and doesn't do any goofy things...then that would be great! Splendid actually.

    Can you tell me what CSS to put where so that the draft image I made appears behind the word studio?

    This should explain very clearly: http://screencast.com/t/V5qCsLbrwaX

    I'd also say don't use gif's modern web design is best for pngs or jpgs. Gifs are not standard to use. No need to link about background parameters either we know what they mean and just use our format you'll be set but you may want to repeat x / y that's up to you.

    Sounds like you are saying this feature is automatic, but I think it's automatic for the wrong header...not for the one I'm talking about...of course I would use that header for a site where it's appropriate...and I do see where you have the customization options.

    I'd really love for us to tune in to each other and find a happy way to communicate...and move forward.

    For example, once I understand how to do what I'm asking for here, I could create a screencast of me doing it...that could drive sales, increase user satisfaction, and increase internal efficiency...which is what documentation does :wink:


  • Tammie

    @dainis: I'm going to stop this right here before we go down the long winded roads. Bottom line something wrong with your site give us a link - if you feel like providing a screencast too fine. If you can't provide a link as a private site say and we can make other arrangements.

    Nobody is threatening you this is not a good thing to claim please treat us with respect and we will you.

    Screenshots again not helpful - you may not understand how coding works but a screenshot is like me saying to you as a writer 'see this book... oh you can't see it well never mind write that text exactly like that without seeing it'.

    To get the header to be in a different spot you will have to do a lot of CSS customisation. For instance:

    <?php $customheader_on = get_option(
                if ($customheader_on == "yes"){
                    <?php locate_template( array( '
    /library/components/customheader.php' ),
    true ); ?>
                <?php } ?>

    That's in header.php put where you want a custom header. What you want or not gets lost when you do these long posts though.

    Lets not get into the same page stuff you've already been spoken to by other forum members and not something I'm going to get involved in as here to support nothing more.

    I honestly think you need to consider if hiring a developer / front end xhtml / css person isn't a better use of your time as you are customising quite heavily this site. We have a job board if this is the case. Otherwise I have never not shown you how to do things.

    Don't worry we create videos this is a new theme and we've already created videos and passed them to you. We have videos covered thank you.

    I hope you draw a line as this is getting a little silly when nobody is not supporting you. I have asked Mason who is our support lead to review this thread also. I am a theme designer he can better deal with your claims of problems.

  • Mason

    Can't we all just get along? ;D

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

    The tricky bit is that, as you noted, this is not a simple edit. But it's not a simple theme either. It's meant to give you a nice clean interface with some great customization options, but under the hood there are many working parts that bring it altogether.

    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 {
    height: 100px;
    z-index: 999;
    background-image: url('http://exaple.com/image.gif')!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.


  • dainis

    OK, !important works, see here: http://www.microsoftesque.com/ (except now I'm not getting rid of the "studio" title, wasn't that just a simple checkbox?)

    This is the code I am using:

    #header-wrapper {<br />
    height: 100px;<br />
    z-index: 999;<br />
    background-image: url('http://www.microsoftesque.com/graphics/sample-studio-header-background-image.png')!important;<br />
    background-repeat: no-repeat !important;<br />
    background-position: center top !important;<br />

    These two images show where I'm going with this...I'm gathering I should start support topics for each part of this, namely:

    1. adding a background graphic to the studio log in panel that comes together as one image with the global header's graphic
    2. splitting the studio global header into two parts and adding login/registration within the header using email and password as the only information requested.
    3. making sure non-logged in visitors see the Studio panel expanded
    4. presenting the logged in visitor with their avatar, welcome "Name" and Logout buttons within the header

    I have two pics representing where I'm going with this. Looks like a salable mod to me...goes for registrations saving clicks, can look very slick, etc.

    I checked out theme options and found

    #header-wrapper {<br />
    background: <?php if($dev_studio_header_background_colour == ""){ ?><?php echo "#272727"; } else { ?><?php echo $dev_studio_header_background_colour; ?><?php } ?>;<br />

    Hmm, will your admin panel automatically add more options if I put them in, or would a mod here be more of a "hack?"

    If additions to theme-options.php populate the admin panel, then this could turn into a theme option pretty easily, no?


  • Mason

    Hiya Dainis,

    Looks like you've got it for the header-wrapper. Congrats!

    As to the rest of your customization needs, my honest recommendation would be to hire a developer or theme designer to do these for you - not because you can't learn to do it, but that this will take quite a bit of work and is a bit outside of what we have the ability to support you with.

    Items 1-4 would require a pretty large "rethinking" of how both the Studio theme presents information and how the plugin (built into this theme) operates. This would require a good knowledge in areas of HTML, CSS, and javascript and how they work together.

    As to editing/adding theme options, this could be done by adding the options to theme-options.php but you'd also have to add in the correct calls to your new variables within the plugin or header.php file so that they are appropriately displayed in the theme.

    Is all that pretty easy? Well, if you're an experienced web developer, I'd say yes. If you're just starting out it's gonna be a frustrating learn-as-ya-go scenario.

    That's about the best information I can give you. If there are specific questions (or of course if something isn't functioning correctly in the default theme) then we'll help as much as we can.

    Hope this helps a bit!


  • dainis

    Thanks so much MasonJames,

    I have a few priorities, and to avoid confusion, I'll continue my numbering from above:

    5) deploy a site that basically looks like alibrown.com. Page Nav above the header, header split in a picture on the left and a registration/login form on the right, then likely 3 columns beneath that with sidebarLeft, contentMiddle, and sidebarRight.
    5.1) That's why I posted this: https://premium.wpmudev.org/forums/topic/theme-with-top-nav-image-slider-on-left-of-header-and-opt-in-on-the-right however, planning for BuddyPress on this site makes me think, "well, I guess I can go with a BuddyPress site."
    5.1.1) I think most of the WPMU DEV themes allow me to turn off the BuddyBar, which I guess would be necesary.

    Regarding my experience level, I've worked on many complex IT and web projects in various capacities since 1991. One thing is that I've always had experts to rely on for critical technical info. When I've reached the edge of the envelope on my personal tech skills, one of my favorite ways to proceed is to work with a high-end expert via video skype while both of us have our hands in the code. For some projects, it's ok for me to hire someone to do something for me, however, for most, I prefer to work together live. The reason for that is because usually I can proceed very well on my own, but then there are these little tech snags where expert assistance makes it all possible (and well...achieving my desired result is next to impossible without the expert assistance).

    Quite often, especially when on a documentation and training project, it is my job to learn as much as possible from subject matter experts as quickly as possible, and that takes "tuning in" on both sides. Rarely, this can lead to posturing early on, as is what seems to be happening with Tammie, but usually everyone settles in very happily when roles and skills are clarified. I'd like to ask Tammie to settle in and go for "providing code snippets" as one of the best ways to support me.

    So that brings me here:
    6) Studio Theme is really awesome. Like really awesome. :slight_smile: To turn it into a list building machine, though, I think I'd need to at least figure out #1 and #3 above.
    6.1) (#3 above) Having the Studio panel expanded upon login is presented in the manual, but I couldn't find the exact "how to do it." Can you explain the procedure for me or give me the code snippet?
    6.2) (#1 above) Adding a background image to the expanded studio panel seems like a task I might be able to FireBug and modify my way to achieving, now that you've taught me about the !important method. I'd seen that in CSS before and was like "huh? what does this do?" and never went further.

    Next is tougher stuff that may also be lower priority, or that may have me move to a different theme altogether, at least for the current deployment of the site that needs to look like alibrown.com

    Which takes me to:

    2. splitting the studio global header into two parts and adding login/registration within the header using email and password as the only information requested.

    Now, I think the header is 980px, I'm not sure. As long as I can split the header into two parts, let's say 600px and 300px, then I can explore the option of sticking registration info into the header.

    The "code snippet" that will help me the most here to explore this option is one that cuts the header into two pieces, leaving me to do the rest. Ideally, the two pieces would be centered, 980px wide, and I would see about taking it from there.

    Can you give me such a code snippet?

    The neat thing here is that the presentation already changes upon login, and changing to a 50px by 50px avatar and moving the "Hi name" text and the "Logout" button seem like easy mods. So, the result might be a really hot, listbuilding machine with not a lot of effort.

    But that depends on my getting through these code snags, and getting just the right code snippet (that should take you very little time to provide), and then sending me on my way to do all the "work."

    How can I get those code snippets?
    --you can provide them here
    --i can work with someone via sype and pay per hour or minute or whatever and get them that way

    The point is for me to deploy what I want fast and for me to get those code snippets fast. That's why I am here. My chat support with Aaron went very very well, as he just chatted from his level of experience without negotiation, posturing, or any other hinderance to code snippet sharing.

    I am in no way shape or form asking you to do my work for me, however, I am asking for code snippet sharing, for cruising through my support posts and giving me appropriate code snippets that I can expand on...it can be as little as a skeleton and a reference to a manual...but the snag...the "critical snippets" ... those I really do need. Without emotional encumbrance, preferable in the spirit of fun...and either on a predictable schedule...or just fast.

    So, again, the reasoning, explanations, all that...that's less important to me than code snippets.

    Another thing to explore:
    If there is a theme design architecture that you use (the software involved), then I'd be happy to explore creating a parallel architecture so that I can just make quick changes. For example, if the software architecture is all in one place, like adobe CS5, then it seems pretty reasonable that I could create a duplicate of the theme, and, for example, deploy a theme with a different color set, background images, etc. quite easily...

    For now...keep them code snippets coming...the last solution was just the functional code with "!important" added...those kind of snippets are great...really really great!


  • Tammie

    @dainis: I'm not going to comment on much here but please don't ever claim you've not had code from me I've done just like everyone my best to support you but Mason will now deal with your issues as this is his thread now so lets take my name out of this please. It is exactly these claims you make that make supporting you to our best an issue so please reconsider your approach as we're all here to help users but we don't have to take such claims.

  • dainis

    OK, if you visit http://www.microsoftesque.com/ you'll see I'm able to put background images behind both the panel and the header...and I am able to customize the global header background color like this:

    #header-wrapper {
    height: 100px;
    z-index: 999;
    background: none repeat scroll 0 0 #1D1500 !important;
    background-image: url('http://www.microsoftesque.com/graphics/slice-1.png')!important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    #panel {
    background:none repeat scroll 0 0 #272727;
    background-image: url('http://www.microsoftesque.com/graphics/slice-2.png')!important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    border-top:1px solid #444444;

    Now, if you switch the sequence of background: and background-image:, this style will break. It's "first read, first displayed" around these parts.

    Next, it looks like the tab is a custom job, and to get the background consistent, I'd have to change about 3 images. It would be really cool if the tab just had it's appropriate portion of the panel background as its background (but rounded off), but that might be way too much coding for a bit of prettiness.

    One down and a few to go... :slight_smile:


    PS: My next priority is the Login Form. I'd prefer to get "login or register" in there. It might just be as simple as pasting the form in and styling it...not sure...

  • Mason

    Hiya Dainis,

    Looks great!

    As far as the login form goes, Wordpress has another "snippet" you can use:
    <?php wp_login_form(); ?>

    You can read up on it here:

    Actually the codex is a great place to quickly pull up a wealth of information on very specific things like this. Every time I spend some time there I learn something new.

    Best of luck!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.