**URGENT** Technical Questions Regarding CSS

I have several questions regarding changing the colors of certain sections of the DW Focus Theme:

1. I am attempting to change the color of the whole footer, and it is giving me the following issue, as depicted in the screen capture below:

Screenshot

Here is the CSS Code that I have inserted into the custom header section:

<style>
body {
background-attachment: fixed;
background-repeat: none;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
}
}
#colophon #site-tools {
border-top-color: #4289a9;
border-bottom-color: #4289a9;
background-color:#00A3EF;
}

#colophon.dark .container {
border-top-color: #4289a9;
border-bottom-color: #4289a9;
background: #00A3EF;
}

#colophon #site-tools .breadcrumbs li {
color: #000000;
}

.news-slider {
background: #00A3EF;
}

.news-slider .carousel-list .other-entry li.active a, .news-slider .carousel-list .other-entry li:hover a {
background: #a8a4a1;

/*–category text */
.news-slider .carousel .carousel-inner .entry-category {
background : #00A3EF;
}

</style>

Could you please provide me with the proper CSS reference that will need to be used to change the WHOLE footer to the referenced color?

QUESTION 2 – What is the CSS Code to change the background color of the following:

Main navigation menu background
Drop down background

QUESTION 3 – What is the CSS code to change the color of the BORDERS of the main navigation menu and the borders between the sidebar and main content?

QUESTION 4 –

The above screen shot demonstrates one of my menu settings for the main menu bar. when you mouse over the main menu, as shown in the next screen shot, it drops down and shows the menu items, including the ones with child sub menu items, but when you mouse over the the sub menu item, the child menu item does not show on mouse over. HOW can I fix this so that the child menu items of the sub menu will show on mouse over like a standard wordpress menu?

ANY assistance you can give me on this matter, as quickly as feasibly possible, will be greatly appreciated.

1 Answers

DominicStaff
answered 11 years ago

1. To change the color of the whole footer. you can add the following code:


<style>
#colophon.dark .container {
background: #...;
border-color: #...;
}

#colophon #site-tools {
border-top-color: #...;
}
#colophon.dark #site-tools {
border-bottom-color: #...;
}

#colophon.dark #sidebar-footer .widget:before {
background: #...;
}

#colophon.dark .footer-shadown {
border-bottom-color: #...;
}

#colophon.dark #site-info {
border-color: #...;
}

/**Content/
#colophon.dark a {
color: #...;
}
#colophon.dark a:hover {
color: #...;
}
</style>

2.
– To change the background color of Main navigation menu background and Drop down background. you can add the following code:

<style>
.navbar .navbar-inner {
background: #...;
}

.navbar .nav .menu-item-object-category .sub-mega-wrap {
background: #...;
}
</style>

3. To change the border color of the navigation. Please add the following code:


<style>
.navbar .nav li {
border-left-color: #...;
}

.navbar .nav .menu-parent-item:hover .sub-mega-wrap {
border-color: #...;
}

.navbar .nav .menu-item-object-category .sub-mega-wrap:before {
background: #...;
}

.navbar .nav .menu-item-object-category .sub-mega-wrap .subcat li {
border-top-color: #...;
}

.home #primary .widget .tab-content:before, .home #primary .widget .tab-content:after {
background: #...;
}

.widget.news-category .other-entry li {
border-top-color: #...;
}

.widget.news-category .category-title {
border-top-color: #...;
}

#secondary .widget.latest-news .hentry {
border-top-color: #...;
}

#secondary .widget {
border-top-color: #...;
}
</style>

4.
We are willing to support you for basic theme issues and bug fixes. However, unfortunately, this request is beyond that because our theme does not support this problem yet at the moment.