Change the header color in oxygen

  • Nadi Yoga

    (@nadi-yoga)


    11 years, 7 months 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;
}
Viewing 14 replies - 1 through 14 (of 14 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 7 months 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?

    Thread Starter Nadi Yoga

    (@nadi-yoga)

    11 years, 7 months 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;
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 7 months ago

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

    Thread Starter Nadi Yoga

    (@nadi-yoga)

    11 years, 7 months ago

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

    Thread Starter Nadi Yoga

    (@nadi-yoga)

    11 years, 7 months 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;
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 7 months 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/

    pwhstacy

    (@pwhstacy)

    11 years, 7 months ago

    Hello,

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

    Thread Starter Nadi Yoga

    (@nadi-yoga)

    11 years, 7 months 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?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 7 months 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.

    Thread Starter Nadi Yoga

    (@nadi-yoga)

    11 years, 7 months 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;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 7 months 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

    Thread Starter Nadi Yoga

    (@nadi-yoga)

    11 years, 7 months 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.

    Thread Starter Nadi Yoga

    (@nadi-yoga)

    11 years, 7 months 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!

    Thread Starter Nadi Yoga

    (@nadi-yoga)

    11 years, 7 months 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?

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Change the header color in oxygen’ is closed to new replies.