How to change the color of the "must read box", the black line above your menu and the DW Focus tab color

Felix Krüger
asked 10 years ago

Hi there.
I found helpful hints how to change the color of the footer. However, I couldn’t figure out how to manipulate the header. So I have 3 things I hope someone can help me with.
1. change the color of the “must read box”
If you can tell me too where the code is to change “must read box” to something different I would appreciate it ^^
2. change the black line above the drop down menu (the one that almost connects to the “must read box” on the top right corner going all the way to the right of the site
3. Manipulate the DW Focus tab. On default the bar is black and if I hover over it, it turns blue. Is there a way to change those colors?

The code I ned and detailed step by step instructions would be very helpful since I am just getting started with wordpress and the design of my blog.
Hopefully hear from one of you guys soon. ^^

3 Answers

DominicStaff
answered 10 years ago

Hello Felix !
1. To change the “must read article” box, you can log in to Dashboard > Appearance > Customize > General Setting, add the following code to the “Custom wp_head() code:”

 <style>
  .desktop .top-news  {
         background: #...;
}
.desktop .top-news > a {
         color: #...;
}
</style>

2. To change the border above the drop down menu of the DW Focus, you can add the following code to the “Custom wp_head() code:”

 <style>
.navbar .navbar-inner {
 border-top-color: #...;
}
</style>

3. To change the DW Focus: Tabs color, you can add the following code to the “Custom wp_head() code: “
<style>
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
background: #….. !important;
}
.nav-tabs > .active > a:before, .nav-tabs > .active > a:hover:before {
border-top-color: #…;
} .nav-tabs > li > a:hover {
border-color: #…;
background-color: #…!important;
}
</style>
Hope this helps !

Felix Krüger
replied 10 years ago

Thank you very much for that fast reply Dominic. I was rather surprised to hear back from you so quickly. Really appreciate it!

Back to my problem.
Turned out that 1 and 2 worked great.

Unfortunately, 3 doesn’t seem to change anything. Tried it out several times with different color codes but won’t work.

If I can’t change the DW Focus Tabs. Maybe there is a way to change the color of the DW News slider?

DominicStaff
answered 10 years ago

Hi Felix !
Issue3: please send me your site for further checking.
– If you want to change the slider you can add the following code :

 <style>
.news-slider {
   background: #....;
}
.news-slider .carousel-list .other-entry li.active a, .news-slider .carousel-list .other-entry li:hover a {
    background: #....;
    color: #...;
}
.news-slider .carousel-list .other-entry a {
    border-bottom-color: #...;
}

.news-slider .carousel-list h3:before, .news-slider .carousel-list h3:after {
    border-top-color: #...;
}
.news-slider .carousel-list h3 {
    border-bottom-color: #...;
}

.news-slider .carousel-nav li {
    background: #...;
    border-color: #...;
}
</style>

Hope this helps !

Christian Archange
replied 10 years ago

Hello Dominic how can i change the color of the Black footer area ?

DominicStaff
answered 10 years ago

Hi,
To change the color of the black footer area, you can do as the following:
1. Install the Jetpack by WordPress.com plugin.
2. Setting Jetpack then enable the Custom CSS feature.
3. Move through Appearance > Editor Css, add the following code:

 #colophon.dark .container {
    background: #....;
    border-color: #....;
}
#colophon.dark #site-tools {
    border-bottom-color: #...;
    border-top-color: #...;
}
#colophon.dark #sidebar-footer .widget:before {
    background:  #.....;
}
#colophon.dark #site-info {
    border-color: #...;
}
#colophon.dark .footer-shadown {
    border-bottom-color: #....;
}

Hope this helps !