• Resolved shabbelle

    (@shabbelle)


    ONE. How do I style the title font and the description font? I’d like to make the widget titles larger and/or darker than the description font.

    TWO. How do I add a horizontal divider line or more space/padding between each section in my sidebar? It looks unattractive all the same font size and stacked so close on top each other.

    THREE. How do I add different background colors to each of the widget areas in my sidebar? I see how to set a background color to the entire sidebar area but wondering how to control individual widgets.

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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

    Thread Starter shabbelle

    (@shabbelle)

    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

    Thread Starter shabbelle

    (@shabbelle)

    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

    Thread Starter shabbelle

    (@shabbelle)

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘title font size’ is closed to new replies.