[Resolved] Set widget border color

Home Forums Support Set widget border color

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1440031
    Joyce

    Hi Team,

    I am planning to add border color to sidebar widget. I google and find that I can add border css on “widget”. However, since my body background color is the same as the widget border color. So after adding “border: 1px solid blue;” , I cannot see the widget border color clearly. Increasing px from 1px to 10px is NOT ideal.

    I wonder if the following can be done, adding one more div within <aside> tag and add border css in this additional

    works perfectly.

    <aside id=”archives-2″ class=”widget inner-padding widget_archive”>

    <h2 class=”widget-title”>Archives</h2>

    </aside>

    Thanks,
    Joyce

    #1440048
    Leo
    Staff
    Customer Support

    Hi there,

    Not sure if I fully understand.

    Any chance you can link us to the site in question?

    You can edit the original topic and use the private URL field.

    Let me know 🙂

    #1440054
    Joyce

    Sorry I wonder if I can add one more

    within <aside> to set border color.
    I know how to add customized styling for <aside>, thanks.

    <aside id="archives-2" class="widget inner-padding widget_archive">
    <div style="border: 1px solid blue;">
        <h2 class="widget-title">Archives</h2>
    	<ul><li>February 2020</li></li></ul>
    </div>
    </aside>
    #1440055
    Leo
    Staff
    Customer Support

    Can you link me to the page in question?

    I feel like we only need to use some CSS for this.

    #1440070
    Joyce

    a

    #1440419
    David
    Staff
    Customer Support

    Hi there,

    there isn’t the HTML or a filter to add the HTML your require to do that.
    Instead you could try this CSS to add the border to a pseudo element:

    .sidebar .widget {
        position: relative;
    }
    .sidebar .widget:before {
        content: '';
        display: block;
        position: absolute;
        top: 40px;
        right: 40px;
        bottom: 40px;
        left: 40px;
        border: 1px solid #000;
        pointer-events: none;
    }
    #1440964
    Joyce

    Thanks David, it works

    #1441260
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.