Howdy Gents,
I know the tagDiv widgets are stylable, but is there any way to set a different background color and text color for all widget titles?
And even better, is there a way to style a border around all widget titles? And of course, its color too.
Thank you.
Hi,
You can try to change the color for all block titles(this will change it also for content blocks, footer blocks…): http://screencast.com/t/mlfdxXXPHb
.block-title > a, .block-title > span {
background-color: green !important;
color: #222222 !important;
border: 1px solid red;
}
If you don’t want this you will have to target titles for each widget where you want to change it.
Thanks!
Hi Alin,
Thank you for the custom CSS. Works great.
I have amended it as follows:
.block-title > a, .block-title > span {
background-color: #ffffff !important;
color: #1c1c1c !important;
border: 1px solid #1c1c1c;
border-radius: 0px !important
}
.td-footer-container .block-title > a, .td-footer-container .block-title > span{
background-color:#686868 !important;
color: #ffffff !important;
border: 1px solid #ffffff;
}
This squares the borders and brings the titles into same color style as the blocks and the footer. (I trust I did this right?)
It works beautifully on “Posts”.
However, it appears that on “Pages”, the width of the page is actually set to be more narrow than the width of “Posts”. Thus the top of the borders on my Footer titles disappear on “Pages” but work fine on “Posts”.
See the differences here:
I noticed something a few days ago when my text padding on “Pages” gave me more white space in the margins on mobile devices than my “Posts” did.
White space is a desirable effect when it comes to typography, but I was unable to replicate this effect in “Posts”. Didn’t realize at the time why.
Is there some way to have the boxing of “Posts” and “Pages” to be the same? I am kind of surprised that they are not by default. Am I missing a setting in VC?
And if not, I will need a fix for the borders of my footer titles on “Pages” that does not ruin the borders on “Posts”.
Edit:
I don’t know if you guys have ever noticed this, but the tops of your backgrounds in your Footer Block Titles are clipped off on “Pages” even before we amended this style.
That is, your “Pages” are not only not as wide as your “Posts”, but also your “Pages” footer is not as tall as your “Posts” footer.
Hi,
The footer size is the same on page and also on post, but on the page is this custom css on row(this is applied for Visual Composer rows – also in footer it is a row) that’s why it cuts the top border for your widgets titles – http://screencast.com/t/NiUi1zjjv
You can try this custom css to remove overflow for the row from the footer container – http://screencast.com/t/qiueilst
.td-footer-container .td-pb-row {
overflow: initial;
}
Or you can add some top margin for widgets from the footer – http://screencast.com/t/aKLwLHRg
.td-footer-container .widget_pages, .td-footer-container .widget_meta {
margin-top: 2px;
}
Page footer – http://screencast.com/t/Xs6EDCPW6pX
Post footer – http://screencast.com/t/EOC8sLe0akj
Thanks!
Hi,
I have no idea where that custom CSS came from, it doesn’t show in my Custom CSS panel, nor is it anything I wrote.
Where would it come from? Is it necessary?
Sorry, I should also add a couple of other problems I can’t figure out…
First is that the Pie Chart that is on the Page link above strangely displays “NaN” in its center for a brief moment before displaying the correct text. Does this for me on both Windows 7 and Android; don’t know about other browsers.
Also on Android mobile the text in the center of the Pie chart sits below center.
And finally, the main menu on Android does not display the correct font, but for some reason its sub menus do.
Sorry to be a pain, but I am learning lots from you guys!
Hi,
I did not said that you have added that css…it comes from theme’s css and it is added on rows necessary on pages. See more about overflow property – http://www.w3schools.com/cssref/pr_pos_overflow.asp
I have also tested this and NaN appear because you have to enter a value to the “Pie label value” like on Pie value ("Input integer value for label. If empty "Pie value" will be used.") so you have not entered a value there – 77% of all material – is not a value, try 77 and see if you still have that issue (or leave that field empty so it will take “Pie value”).
Make sure that you have set font family also for mobile menu – http://screencast.com/t/uvmDqEwLCe
Thanks!
Dude, of course the mobile menu settings are there, how else would the submenus be working? And yes I know the mobile main menu is a separate setting, but it is the line immediately above sub menu. Pretty hard to miss. So, sorry no it is not working.
The fix for the Pie Chart is resolved with respect to “NaN”.
However it is still displaying below center on Android.
Thank you, Alin, and have a great weekend!
Hi,
Please deactivate all plugins , leave just Visual Composer active, clear cache and check again if you still have this issue with fonts. Also try to change and resave the font for mobile menu items. I also checked this and did not found any issues on mobiles.
If you still have this issue please send an email at contact@tagdiv.com and provide wp-access so we can take a look. Paste also a link to this topic so we can know who you are.
Also I have checked that pie chart on android and did not found issue. On which device and browser did you checked?
Thanks!
The pie chart on Android browser seems to have fixed itself some time in the last 24 hours, not sure how, but please consider it resolved. Wasn’t a cache issue as I clear caches frequently.
Will attempt the fix on the mobile menus.
Hi,
I’ve replied you via email!
Thanks
