Archived topic
Set widget border color
7 replies · Started by Joyce on September 11, 2020
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
<aside id="archives-2" class="widget inner-padding widget_archive">
</aside>
Thanks,
Joyce
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 :)
Sorry I wonder if I can add one more
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>Can you link me to the page in question?
I feel like we only need to use some CSS for this.
a
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;
}Thanks David, it works
You're welcome
