Hey @shabbelle,
Hope you’re well today.
Our plugin Custom Sidebars, is not for visual changes. It provides features for changing sidebars based on some conditions, but you can’t set any visual things. It inherits styles from your theme.
So if your theme doesn’t provide any visual change tool only way is looks like custom CSS. If you have any question that I can help about Custom Sidebars, I would happy to help.
Cheers,
Oguz
please help me target the widget titles. Theme is Divi, visual builder is DiviBuilder. I can target Divi’s widget titles and style as I please with .widgettitle like this:
.sidebar-styling .widgettitle {
font-size: 14px;
height: 33px;
line-height: 33px;
border-bottom: 3px solid #e33067;
margin-bottom: 14px;}
/* sidebar search bar */
.sidebar-styling .widget_search #searchsubmit {background-color: #e33067;}
.sidebar-styling .widget_search input#searchsubmit {color: #fff;}
.sidebar-styling .widget_search input#s {border: 1px solid #e33067;}
HOWEVER, using Chrome inspector I cannot find how to target the custom sidebars plugin widget title element. help?
Hey @shabbelle,
Hope you’re well.
If you didn’t use edit custom wrappers it shouldn’t change sidebar HTML codes. But maybe you can try same thing to add same title HTML structure. First you need to click edit from custom sidebar;
Then click “Advanced – Edit custom wrapper code” option;
Then place this to “Before Title” area;
<h2 class="widgettitle">
And place this to “After Title” area;
</h2>
I hope these help!
Cheers,
Oguz
ah yes that works. And please how do I assign the HTML for the search widget? When I use chrome inspector and click on the word “search” in the widget I see “label.screen-reader-text”. And the css I was given is
/* sidebar search bar */
.sidebar-styling .widget_search #searchsubmit {background-color: #e33067;}
.sidebar-styling .widget_search input#searchsubmit {color: #fff;}
.sidebar-styling .widget_search input#s {border: 1px solid #e33067;}
How do I assign the search class? thanks.
Hey @shabbelle,
Hope you’re well.
Actually, your theme should do them but I don’t understand why it doesn’t. Anyway you can add these codes into “Before Widget” area;
<div id="%1$s" class="widget %2$s">
And this “After Widget” area;
</div>
This will wrap widgets individually with proper id and classes.
Cheers,
Oguz
Hi Oguz,
Thank you and hope you’re well too.
I don’t know why the theme is not communicating with the plugin. It’s Divi 3.0.106 by Elegant Themes and I’m running WordPress 4.9.4.
Anyways, thank you for providing that last code it does want I want and I love how my custom sidebars are looking.
