[Resolved] Title decorations

[ch1800]

I moved a site to GP from a previous installation using another theme and everything works now fine, thanks to this awesome support.

The only thing I still miss from the previous theme is those lines below widget titles and in between each item that were making the sidebar columns nicer to scroll:

https://cloudup.com/cVHCJ66u5Ko

Is it possible to add those line decorations here with some CSS or else?

[David]

Hi there,

try this CSS:

.sidebar .widget {
    display: flex;
    flex-direction: column;
}

.sidebar .widget .widget-title {
    display: inline-block;
    align-self: center;
    border-bottom: 2px solid yellow;
}

.sidebar .widget ul li {
    border-bottom: 1px solid #ccc;
}

[ch1800]

Pure magic!

Is there a way to have this display: inline-block; to align in center?
I mean exactly the same, the line being same length as title, but center aligned.
I find it so nice that I want to replicate it for titles at homepage, with local CSS only for that page and h1.

[David]

Update the CSS above to add the flex for centering the title and more meaningful selectors.

[ch1800]

Awesome, thanks again David – we are good for while with this one!

[David]

Glad to be of help

[Author]

Posts