Okay.. this one was confusing me, and I’m going to blame lack of sleep this week. Using theme panel I changed the font size for the sidebar headers (e.g., Categories) as I wanted them a little smaller (14px) and ALL CAPS. No problem. However, once the size is changed, the underline creates a space between the box background and the line rule (border).
Was trying to sort out which element to over-ride but how to over-ride with custom CSS to remove the white space. Changing the line-height has no effect (and speed booster is off).
Since some items have an h4 class, like <h4 class="block-title"><span>The Guru</span></h4> and some have simply <div class="block-title"> kinda confusing.
default seems to be
.block-title {
position: relative;
font-family:Montserrat,Helvetica,Arial,sans-serif;
border-bottom: 2px solid #4db2ec;
font-size: 20px;
margin: 0px 0px 26px 0px;
line-height: 32px;
font-weight: normal;
}changing the margin only changed the spacing after the section, not within the section. So, it looks like the theme panel line height doesn’t over-ride the style sheet?
( I changed default font in style.css, obviously )
So, changing the line height to line-height: 28px; from the custom CSS panel over-rode the spacing so the lines would touch.
This originally started as question while I was figuring it out; decided to post in case anybody else was having an issue on this one 🙂
Hi Christopher,
Thanks for sharing, glad you figured it out!
May I add that you could also modify the top and bottom padding to achieve this, also the line-height for the block titles could also be modified from theme panel then you could use the custom css to adjust the block title container if the theme panel setting doesn’t do it.
.td_block_wrap .block-title a, .td_block_wrap .block-title span, .td_block_wrap .block-title label {
padding: 5px 10px 5px 10px;
line-height: 24px;
}Thanks
Thanks, Lucian
what class should I change if I want to keep my “theme color” but change the backing color for the sidebar widgets (e.g., #333399 for main theme color, but #333333 for the sidebar elements)? This would be great option to add to the theme panel, as often folks want a brighter theme color, but something toned down for the sidebar.
Hi Christopher,
As you can see the div of the sidebar has just two classes span4 column_container and it’s a bit harder to target just the sidebar via css and change it’s background color as long as a div just like that is used in the footer also and changing the sidebar will get you changing the footer also, here is an example: http://screencast.com/t/rPW4QDKyh
You can do it tough by adding a specific class on each template you want to change the sidebar color then use that class to target the sidebar and change it’s color via custom css. Here is an example for the category page template: http://screencast.com/t/bTwprqfBwJ and the result: http://screencast.com/t/MNts8tpk
using this css:
.custom-sidebar-background {
background-color: lightgray;
}You can add this class for all templates and use it to change the sidebar’s background color.
Another thing that you should take into consideration is that the sidebar doesn’t have any padding so you would want to add some padding to it using the same class, but keep in mind that the some blocks may react not in an expected way to this padding because of the width.
Also, as you probably noticed, the post page sidebar has a class which you can use .td-post-sidebar
Regarding the option on panel for this we will leave this at everyone’s hand and use this method to achieve this. This option will be available though within our new theme which we are working on.
Hope this helps!
Thanks
HI, Lucian
I wasn’t talking so much about the entire sidebar, just the backing color of the blocks behind the text for each widget header.
For example the color of the text behind the header titles in the sidebar widgets seems to be controlled by the default/custom “site color” — however, in my case I want to use brighter color as default, but more muted for the sidebar text blocks/headers for the sidebar widgets, if that makes sense 🙂
Chris
Hi Chris,
I have got it now, sorry about this.
If you use a widgetised sidebar, you just edit the block and chose a color for block title and one for your text.
If you want to change the block title on an already created sidebar you can edit the block from appearance > widgets panel, you will have there the same option to change the block header color: http://screencast.com/t/fpEBVf8lvlN
Hope this helps!
Thanks
Right, but that doesn’t help with things like search box, a widget plugin such as showing RSS feed from our main site (outside of blog area), categories widget, etc., where there is no option to set color of block text or backing.
So the way it works now
1) default site-wide theme color; impacts menu and default color of sidebar widgets and comments widget areas, for the solid color behind the widget title block
2) you can change the color for featured content blocks, but then those are different from the “default” color block backing the widget title color backing
Perhaps it’s block-title span I need to over-ride?
Sorry. Usually I’m not this stupid. 🙂
(And I had uninstalled Chrome temporarily as I switched to the new 64 bit version but then some things like RoboForm not working, etc., and I need to go back to 32 bit version of Chrome until they get to v38; so can’t do the developer view hover on item find element trick…. suppose I should do that !)
Lucian
it occurs to me it might be easier for me to set the ‘default theme color’ which would control the sidebar widget color blocks behind the widget title text consistently, and then simply over-ride the menu color for the selected hover underline and drop downs?
If you could point me at CSS over-ride for those elements that would be awesome. 🙂
HI, I figured out what I needed.
You may consider this topic RESOLVED. 🙂
Hi Christopher,
Sorry for the delay, glad you have figured this out.
Thanks for your help!
Have a nice day!
