[Support request] I would like to know how to customize the sidebar widget by adding css.

[miyan]

This is my first time, so I would appreciate it if you could let me know step

`.sidebar .widget .widget-title {
font-size: 1.1em!important;
margin-bottom: 15px!important;
background-color:
padding: 5px!important;
text-align: center;
color: #fff;
vertical-align: middle;
line-height: 1.66em;
font-weight: 600;
position: relative;
display: block;
letter-spacing: 1px;
}

.sidebar .widget .widget-title::before {
content: ”;
display: inline-block;
position: absolute;
bottom: -10px;
left: 50%;
height: 0;
width: 0;
margin-left: -10.5px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #2a2a2a;
}

[David]

Hi there,

can you share a link to your site where I can see the sidebar and that widget title ?

[miyan]

https://www.thewordcracker.com/en-us/

[David]

Do you have a site of your own with a Widget ? then I can see how that title is displayed and provide the correct CSS

[miyan]

Adding a CSS to the site does not implement it properly.

My site is the following site.

https://financeialnews.com/

[David]

Try this CSS:

.sidebar .widget h2 {
    font-size: 1.1em!important;
    margin-bottom: 15px!important;
    background-color: #1e73be;
    padding: 5px!important;
    text-align: center;
    color: #fff;
    vertical-align: middle;
    line-height: 1.66em;
    font-weight: 600;
    position: relative;
    display: block;
    letter-spacing: 1px;
}
.sidebar .widget h2::before {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -10px;
    left: 50%;
    height: 0;
    width: 0;
    margin-left: -10.5px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #1e73be;
}

[miyan]

Can’t you get rid of the side bars?
When adding widget, add CSS?

[David]

Can you explain a little more please ?

[miyan]

When you add the modified CSS, the widget is double-overlapped and the background is displayed as two.

Should I copy and insert the CSS when adding the widget?

[David]

See this Doc about using the Group block to keep the Title and the other content in the same space:

https://docs.generatepress.com/article/grouping-widgets/

[Author]

Posts