WordPress.org

Ready to get started?Download WordPress

Forums

Change the header color in oxygen (15 posts)

  1. Nadi Yoga
    Member
    Posted 1 year ago #

    Hello,

    How can I change the header color from black to white? I tried to change it in my style sheet but it doesn't work. Anybody an idea? Its says this:

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    /* Header
    -------------------------------------------------------------- */
    #header {
    	clear: both;
    	width: 100%;
    	float: left;
    	padding: 40px 0 0 0;
    }
    #branding {
    	float: left;
    	width: 45%;
    	overflow: hidden;
    }
    #site-title {
    	font-family: 'Abel', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    	font-size: 3em;	/* 36 / 12 = 3 */
    	line-height: 1em;
    	margin: 0 0 3px 0;
    	text-transform: uppercase;
    	word-wrap: break-word;
    }
    #site-title a {
    	color: #222;
    	border-bottom: none;
    }
    #header img { max-width: 100%; }
    #site-description {
    	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    	font-size: 0.9166666666666667em;	/* 11 / 12 = 0.9166666666666667 */
    	font-weight: normal;
    	line-height: 1.5em;
    	margin-bottom: 20px;
    	color: #bbb;
    	float: left;
    	width: 91.48936170212766%;
    	clear: both;
    }
    .breadcrumbs {
    	font-size: 0.9166666666666667em;
    	color: #aaa;
    	float: left;
    	width: 94.85%;
    	background: #f3f3f3;
    	padding: .25em .6em .35em .9em;
    	margin-bottom: 20px;
    	border-left: 10px solid #e9e9e9;
    }
    .breadcrumbs a, .breadcrumbs a:visited { color: #777; }
    .breadcrumbs a:hover { color: #000; }
    #sidebar-header {
    	overflow: hidden;
    	float: right;
    	width: 49.78723404255319%;	/* 468 / 940 = 0.4978723404255319 */
    	height: 60px;
    	margin-bottom: 20px;
    }
  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    You may want to assign a new style within a new stylesheet of a Child Theme or Custom CSS plugin, whereby you would override the current style or add new styles.

    Do you want to change some particular text's colour in the header, or perhaps the background colour of the header?

  3. Nadi Yoga
    Member
    Posted 1 year ago #

    Hey Andrew,

    Thanks for you reply. I just want to change the color of the header text.If I use Custom CSS, should I write this and then adjust the color?

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    #site-title a {
    color: #222;
    border-bottom: none;
    }
  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes Nadi, try that, although you don't need to repeat styles you don't want to change.

  5. Nadi Yoga
    Member
    Posted 1 year ago #

    Yey! It worked!!! Thank you so much!

  6. Nadi Yoga
    Member
    Posted 1 year ago #

    Now another question: I also need to make the font size of the text in the pages bigger. Can I also use the Custom CSS for this? And what part do I need to take from my style sheet, as there are so many notifications of font sizes.. Should I take this part and change the em?

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    body {
    	margin: 0;
    	font: 0.75em/1.75em 'Helvetica Neue', Helvetica, Arial, sans-serif;	/* 12 / 16 = 0.75;  21 / 12 = 1.75 */
    	color: #444;
    	background: #fff;
    	padding: 0;
    }
  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can use the Custom CSS plugin for any CSS change.

    I recommend Google Chrome's built-in Inspect Element feature that allows you to easily find which styles are applying to which element. All you need do is right click the page element (when viewing the website), then select 'Inspect Element' and on the right you should see the CSS applied to that element. You can also find the HTML structure of the page on the left.

    If you have multiple instances of font size declarations, you may not be able to override those styles with a generic body selector. You may instead need to use the same selectors used in the stylesheet.
    http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

  8. pwhstacy
    Member
    Posted 1 year ago #

    Hello,

    Yes, I am agree with above post, you can use custom CSS plugins for any CSS changes..

  9. Nadi Yoga
    Member
    Posted 1 year ago #

    Very helpful thanks! Font is adjusted!
    The next question is that I made a primary menu and right under it, a white bar appears with the menu links in it. How can I erase this?

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you Inspect Element'd it to find which element it's being applied to and which style is used?

    For example, it could be a background image of the primary menu this menu's container, or a border-bottom.

  11. Nadi Yoga
    Member
    Posted 1 year ago #

    It's a breadcrumb. I tried to change the last four in Custum CSS: from background to border-left, but it doesn't have an effect. How does it work?

    .breadcrumbs {
    font-size: 0.9166666666666667em;
    color: #aaa;
    float: left;
    width: 94.85%;
    background: #f3f3f3;
    padding: .25em .6em .35em .9em;
    margin-bottom: 20px;
    border-left: 10px solid #e9e9e9;
    }
    .breadcrumbs a, .breadcrumbs a:visited { color: #777; }
    .breadcrumbs a:hover { color: #000; }
    #sidebar-header {
    overflow: hidden;
    float: right;
    width: 49.78723404255319%; /* 468 / 940 = 0.4978723404255319 */
    height: 60px;
    margin-bottom: 20px;
    }

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    The next question is that I made a primary menu and right under it, a white bar appears with the menu links in it. How can I erase this?

    If you just want the background colour removed, you could try,

    .breadcrumbs {
     background: transparent;
    }

    Or if you want the entire breadcrumb navigation removed,

    .breadcrumbs {
     display: none;
    }

    http://www.w3schools.com/cssref/pr_class_display.asp

  13. Nadi Yoga
    Member
    Posted 1 year ago #

    And again: thank you, this is so helpful!!
    Now my next question: How can I change the link url of my pages? I see there is some code in there that shouldn't but can't figure out how to get in there.

  14. Nadi Yoga
    Member
    Posted 1 year ago #

    Hello,

    Another question: before all my posts an im.archive-thumbnail.featured (in the elements it says: hentry img featured and hentry archive thumbnail) appears which looks like big white bars on my page. Is it possible to remove them, or can I add a color to it so it matches the background color?
    Thanks in advance for replying!

  15. Nadi Yoga
    Member
    Posted 1 year ago #

    It also says .hentry img.featured color rgb (13,154,74)
    Tried a couple of things, but doens't seem to work. Anybody an idea?

Topic Closed

This topic has been closed to new replies.

About this Topic