I have searched the forum about this topic but none of the answers seem to do exactly what I want.
Changing the color for the normal blocks (in pages) is easily done. However I can´t seem to be able to target correctly and give the right code for changing just the background color on the blocks in the sidebar.
I want to change to color of the background (behind the text, the rest should keep being white) and the 2px horizontal line. Using block 2 and block 3. Realize all these block will change background-color when the changes is applied.
How do I do it with custom CSS?
Hi,
You can use Widgetised Sidebar block and try to target with .wpb_widgetised_column like this: http://screencast.com/t/9Rw9pCPqXLjz – http://screencast.com/t/Iqa3Sn3SmWE
I’m not sure what you are trying to change, the screenshots from above are only an example how to target block in the sidebar. Also for post if you want to change something in the sidebar you can use .td-post-sidebar class.
Hope this helps!
Hi,
If you want to use a general css code for all blocks title please try this custom css in Theme Panel > Custom Css: http://screencast.com/t/lQcssd2Kh
.wpb_widgetised_column .block-title a,.wpb_widgetised_column .block-title span{
background-color: #222222;
}
.wpb_widgetised_column .block-title{
border-color: #222222;
}
Also for some blocks this can be changed from it settings for example Social Counter: http://screencast.com/t/Zg8HaGZ2wWf
Hope this helps!
Thank you! That did it for the front page. However it does not seem to target the sidebars on the post-pages (even though it is the same sidebar!). In the code I can see that the .wpb_widgetised_coulumn only exists on the homepage. On all the other pages the sidebar resides within a div called “span4 column_conatiner td-post-sidebar” (as seen in the picture).
Is there a way to target that one as well? Since I would like the same colorscheme in the sidebar on all pages.
Hi,
For your post sidebar just replace .wpb_widgetised_column with .td-post-sidebar like this
.td-post-sidebar .block-title a,.td-post-sidebar .block-title span{
background-color: #222222 !important;
}
.td-post-sidebar .block-title{
border-color: #222222;
}
Thanks!
Thank you, worked like a charm.
I now though noticed that when in category-view there is yet another type of container for the sidebar loaded.
span4 column_container
When i target this with .span4.column_container all the columns used in the footer also get targeted and go black.
I can´t really see a way to actually just target the sidebar in categories-view, without also changing the color of the footer ones. :-/
Hi,
Please try this custom css and see if works:
.category .td-page-wrap .span4.column_container .block-title span{
background-color: #222222;
}
.category .td-page-wrap .span4.column_container .block-title{
border-color: #222222;
}
Thanks!
Thanks, that does work. Added an extra a for the links as well.
However just realized it didn´t effect the search results where the colors still stay native (blue). I´m guessing there is a way to target that too, however it would be neat with some kind of general argument that is present in all the sidebar versions to target.
But guess the theme isn´t really built that way.
Hi,
Like you can see above I added category class to this apply only on categories pages and apply this on unwanted templates. You can try to remove .category and you will see that this it will be aplied also on search page.
But to be sure that the code it wont apply anywhere else you can add this only for search page: http://screencast.com/t/JbduJZkffMpl
.search .td-page-wrap .span4.column_container .block-title span{
background-color: #222222;
}
.search .td-page-wrap .span4.column_container .block-title{
border-color: #222222;
}
Also like I said above tagdiv blocks have this option to change title’s background: http://screencast.com/t/Zg8HaGZ2wWf the problem is with wordpress widget but also this can be targeted individually with their class: http://screencast.com/t/ctpCnmtc5q
Hope this helps!
Brilliant! And sorry for my ignorance about actually being able to change the color right från the widgets-section. Ta bad there isn´t a color selector for the text-field widget. But I can live with targeting that via CSS.
Thank you so much for your patience.
If all developers could be as devoted to their products as you guys 🙂
