CSS changes in superhero theme (mainly header)

  • saitonexus · Member ·

    Hello wordpress people! This is my first time posting in these forums. I tried searching for other threads/info relating to my issue, but am still stumped. I have the Superhero theme, and purchased the CSS design upgrade. Mainly, this was so I could stop the scrolling header in Superhero (the one thing I didn’t like about it). I found instructions on how to use CSS customization to do that ages ago, and that worked fine.

    Recently, though, I decided to change up the colors and header image of my blog, and cannot for the life of me figure out how to change the colors of the header text (site title and description) or header background color. I did find this thread through searching, and tried copying the text from the 5th post down into my CSS editor (the poster was offering that to the OP, who was asking – among other things – the same thing I am). But the site title refused to change; my selected colors would sort of “flash” briefly when I hover my mouse over the title, but that’s it. And I have NO idea what to put to change the header background color. Clearly I’m missing something, heh.

    I’ve looked at some basic CSS tutorials, and they have helped me to understand some of the concepts behind how CSS editing works, but I’ve still been unable to figure out how to make the above changes happen. Any help is appreciated!

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    You are going to have to use the !important attribute to override them such as this: 

    .site-title a {
    color: #1e73be !important;
}

    If you want to change the hover color on the site title, use this: 

    .site-title a:hover {
    color: #CC0000 !important;
}

    Site description would be here: 

    .site-description {
    color: #818181;
}

    Background color for the header area would be here: 

    #masthead-wrap {
    background-color: #262626;
}
  • saitonexus · Member ·

    Thanks so much! I knew I was missing something, heh.

    Couple other questions about CSS modifications.

    One: is there any way to make it so links are underlined? I searched for this and found some references to “text decoration” as a property that could be changed (allowing things like underlining), but I’m not sure what to put to specifically make it affect links but no other text. With my current colors, links aren’t as distinct against normal text, so it’d be good if they were underlined.

    Also, it seems like what needs to be put to create a given effect differs depending on what theme is being used. Is that generally correct?

    Two: how could I go about changing the size of the header area itself and the image in it? As you can see if you look at my blog, there’s already a lot of horizontal space between the image and the “Home” link. Is it possible to create different arrangements, i.e., for example, have a thin, long image that stretches across the whole header, with the navigation links all below it in a line? Or vice versa: create a taller image and stack up the nav links in a sort of “box” arrangement next to it. Not sure what code I need to use (aside from, I’d assume, “#masthead-something-something”).

    I’m slowly trying to learn more about this stuff with tutorials and such, but I’m very new to all this, so the specifics tend to still elude me. Thanks again in advance for any help!

  • hallluke · Member ·

    You’re correct in saying that the CSS is dependent on the theme you are using. If you switch themes some of the more general CSS might still be applied but it’s never guaranteed, and the more specific things you want to do the less likely it is to be transferable.

    Here’s some CSS that will make all your links underlined (except ones that your theme has specifically said not to underline, like the site title and main navigation menu), it also looks nice if you remove this rule for your post titles (so that it’s similar to your site title), try it out:

    a {
  text-decoration:underline;
}

.entry-title a {
  text-decoration:none;
}

    If you have a look at the CSS support page it provides you with some good starting points for learning more!

  • saitonexus · Member ·

    Thanks! Both you and the previous reply were extremely helpful. Now my links are underlined – and thanks for the tip about keeping the post titles from being underlined, that’s definitely better.

    And! I figured out how to change the masthead size, and increase the max height of the header image, so yay.

    So NOW I just need to figure out how to change the properties of the main navigation links (“Home”, “About”, etc), because right now with the increased header and image size, they look kind of weird. (Note, I put the header and image size back to normal till I figure this out, so if you go to my blog and everything looks fine, that’s why).

    I have looked through some of the tutorials here and will continue to do so, but sometimes it can be hard for a complete CSS/HTML newbie such as myself to take an abstract “this is how thing X works within a CSS editor” concept and turn it into “here is what you actually need to write in the CSS editor to create this specific effect in your WordPress theme.” Can anyone possibly point me in the right direction for playing around with the size/position/appearance of those navigation links? I can see some things relating to the nav menu in the Superhero CSS sheet here, but I’m not sure what to add/tweak/etc to play around with the menu items (assuming it’s even really possible).

    Sorry to keep asking new questions, but I figure, might as well as long as they come to me. Thanks again for any and all help!

  • hallluke · Member ·

    Here’s one way to move the menu below the header section:

    .main-navigation {
  float:none;
  clear:both;
  width:100%;
}

.main-navigation ul {
  text-align:left;
  padding:10px 0;
}

#masthead {
  margin-bottom:0;
}
  • conversationsnewyorkblog · Member ·

    Hey Folks,
    I hope you don’t mind me piggybacking on your conversation, but I think you folks may have the answers I’m looking for.

    Can you please let me know how to change the color of the TAGLINE the Menu options in the Header of the SUPERHERO theme? I paid for the Customization upgrade but changing the palette has no effect. I’m assuming I will need some CSS code, but I’m a CSS newbie and scared to heck of messing something up.

    THANKS

  • thesacredpath · Member ·

    @conversationsnewyorkblog, to change the tagline color in Superhero, add the following custom CSS and edit the color code as desired. 

    .site-description {
    color: #818181;
    font-size: 0.9em;
}

    To change the base color (grey) of the menu items (non-hovered), add the following and edit as desired. 

    .main-navigation a {
    color: #818181;
}
  • conversationsnewyorkblog · Member ·

    Thanks so much TSP! Great help.

  • thesacredpath · Member ·

    You are welcome.

  • The topic ‘CSS changes in superhero theme (mainly header)’ is closed to new replies.