[Resolved] Color underline on latest blog posts on frontpage

[Thomas]

Hi

I dont know if its within the scope of the support, i guess its not really so i can pay a little if you could help me put a line like this https://menneskeret.dk/ the 3 blog posts on the frontpage, have an orange line under it. I want something like that on the site postet in the “your website url” field.

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

try there, yeah its a little out of our scope 🙂 but you can try this CSS:

.void-grid .entry-title {
    position: relative;
    display: inline-block !important;
    line-height: 1.4em;
    padding-bottom: 20px !important;
}
.void-grid .entry-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left:0;
    width: 50%;
    height: 5px;
    background-color: red;
}

If you wanted the line centred to go with the title and post meta you can do this:

.void-grid .entry-title {
    position: relative;
    display: inline-block !important;
    line-height: 1.4em;
    padding-bottom: 20px !important;
}

.void-grid .entry-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    right: 25%;
    height: 5px;
    background-color: red;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

Thats so freaking awesome, thankyou. Direct me to a paypal link if you want little for it 🙂

[David]

Glad to be of assistance 🙂

If you wish to donate to GP development you can via this – not required but all is gratefully received:

https://generatepress.com/ongoing-development/

Alternatively you may just want to leave us a nice review 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

Just donated 10, and i already left 5 stars on WP 🙂

The line is also showing on the blogpost page where all blog posts are showing, is it possibel to just show the line on the frontpage ?

[David]

Awesome – thank you that is really appreciated.

So we can make the CSS selectors more specific so this line:

.void-grid .entry-title { becomes .home .void-grid .entry-title {

and likewise:

.void-grid .entry-title:after { becomes .home .void-grid .entry-title:after {

home is a class that is attached the body of the home page.
The alternative to using the home class is to edit the Elementor section the posts are in and on the Advance tab give it a custom class e.g. post-underline

Then your selectors would look like: .post-underline .void-grid .entry-title:after { etc.

The advantage of this method is if you want to use it elsewhere you just need to add the post-underline class to that section.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Thomas]

Thats so awesome, i just learned something new now, thanks A lot 🙂

[David]

Even better – glad to be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts