Docs

[Lynda R]

Hi,
I have globally changed the content background color of the site by adding the following code to the custom css:
.site,.x-colophon.top{
background-color:#f9edce;
}
How can I now change the background color of default white elements to match my site background color, i.e. the fields on the widgets in the blog sidebar (see blog page at http://www.auroradesignstudio.com/newsite/blog or attached screen shot). Similarly, how would I change the background color of the tabs elements on the home page (see home page or attached screen shot).

I am using Renew and the most recent version of the x theme.
Lynda

[Prasant Rai]

Hello Lynda,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.x-iso-container-posts>.hentry .entry-wrap {
    background-color: #F9EDCE !important;
}

.widget ul li, .widget ol li {
    background-color: #F9EDCE !important;
}

Thanks.

[Lynda R]

Thanks. This worked for the widgets, but doesn’t seem to affect the background color of the tabbed elements on the home page. How do I call out that element?

Lynda

[Christopher]

Hi there,

Please add this :

.x-tab-content .x-tab-pane,.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover,.x-nav-tabs>li>a {
    background-color: #f9edce;
}

Hope it helps.

[Lynda R]

Thanks so much.
How would I change the border color of this element and the color of the font for the inactive tab (in this case “about”? I’ve implemented the code and you can see what I am talking about at: http://www.auroradesignstudio.com/newsite.

Lynda

[Prasant Rai]

Hello Lynda,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.x-nav-tabs {
    border: 2px solid #e5e5e5 !important;
}

.x-nav-tabs.left, .x-nav-tabs.right {
    border-right: none !important;
}

.x-nav-tabs>li>a {
    color: #000 !important;
}

Thanks.

[Lynda R]

To continue this thread about styling the tabs element on the following page:
http://www.auroradesignstudio.com/newsite

After reading some other posts on the subject I’ve got it mostly they way I want it if I could just eliminate the borders around all of the elements (tab navigation boxes and tab content pane) that is still showing. Here’s my code – what am I doing wrong?

.x-tab-content .x-tab-pane {
background-color: #ebd294;
}
/* Default State */
.x-nav-tabs>li>a {
background: #cbb580;
color: #617201
}
/* Active State */
.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover {
background-color: #ebd294;
}
.x-tab-content .x-tab-pane {
border: none;
}
.x-nav-tabs {
border: none;
}

Thanks for your help!

[Rue Nel]

Hello Again,

Thanks for the updates! To remove the borders in the tab navigation boxes and tab content pane, please also add the following custom css,

.x-nav-tabs.left, 
.x-nav-tabs.right,
.x-nav-tabs.left+.x-tab-content, 
.x-nav-tabs.right+.x-tab-content,
.x-nav-tabs.left>.x-nav-tabs-item, 
.x-nav-tabs.right>.x-nav-tabs-item,
.x-nav-tabs.left>li a {
    border: none !important;
}

Please let us know if this works out for you.

[Lynda R]

Thank you so much! That worked perfectly. In an effort to understand the syntax better, could you tell me what the + sign refers to in the .x-nav-tabs.left+?
Lynda

[John Ezra]

Hi there,

Thanks for updating the thread and you’re most welcome! The “+” symbol is the “adjacent sibling combinator” It simply combines simple selectors with the same parent as long as the second selector immediately follows the first.

You can visit this short explanation to learn more: http://techbrij.com/css-selector-adjacent-child-sibling

Hope this helps – thanks!

[Author]

Posts