Changing Colour Of Header

Homepage › Community Forums › Epik Theme Support › Changing Colour Of Header

Tagged: , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 26, 2014 at 8:53 am #13267
    robmob
    Customer

      Hi

      I am using Epik on my site http://www.digitalmarketingtoolkit.com – I would like to keep the orange as the overall theme colour with a teal background but have a couple of issues and I do not understand CSS.

      1) How do I change just the header background colour to white and keep the overall theme colour of orange incl the nav bar.

      2) How do I change the colour of the sidebar links to white – they are currently orange on teal which is difficult to read

      Many thanks

      Rob

      July 27, 2014 at 7:44 pm #13272
      Wes
      Moderator

        This may sound a little confusing if you’re not familiar with CSS, but to change the header background color, you would need to change the .head-wrap (which is the div that surrounds the header and adds the color you see). This can be found around line 3372 in your style.css file, or you can search (ctrl + F on PC or command + F on a Mac) for the following – 

        .epik-orange .head-wrap,
.epik-orange .welcome,
.epik-orange .home-feature-bg-dark,
.epik-orange .author-box,
.epik-orange .footer-widgets {
	background: #ff7e00;
	color: #eee;
}

        As you’ll notice we have bundled multiple parts of the css into one to save space. If you need to separate a section like the .epik-orange .head-wrap, to add a separate color (rather than having them all use the exact same color like above), then you can remove the first line – .epik-orange .head-wrap and add it on it’s own line like this – 

        .epik-orange .head-wrap {
    background-color: #fff;
}

        That will separate the header (for the Orange Color Scheme) so the background color you add will only affect it and not the other parts of the theme. If you do that, you’ll need to change all of the css in your logo and your nav sections to a different color, since it is currently white and the new background will be white as well.

        August 2, 2014 at 12:06 pm #13343
        robmob
        Customer

          Wes thank you for your reply.

          I managed to do the change an get to start to understand CSS. What I didn’t appreciate is that the nav section is not a seperate nav bar that I had been used to in other sites but appears to be part of the header.

          I was looking to replicate something similar to http://www.jonloomer.com/ with a seperate orange nav bar.

          Is this a simple thing that can be done from the dashboard i.e an option that can be turned on or off, or does it need some separate coding?

          Also in terms of the change of colour for the text links in the side bar I note when using the inspect element and turning off the css for that element it turns off the colour on most links. Where do I find the css entry just for the side bar text links.

          Apologies if these are basic questions but I am learning as I go with this.

          Thanks

          Rob

          August 4, 2014 at 9:53 pm #13363
          Wes
          Moderator

            You can use the Primary Widget area if you don’t want to use the “header-right” widget area. You can enable this in your WordPress menu. The Primary Widget menu will show up in the same place as the example link you posted above.

            If you want to change the sidebar links, you can add something like this to your css file – 

            .epik-orange .sidebar a {
	color: #fff;
}

            You’ll be able to adjust the color to whatever you need.

          • Author
            Posts
          Viewing 4 posts - 1 through 4 (of 4 total)
          • You must be logged in to reply to this topic.