Post Module Questions: Remove Separator & Change Read More to Button

Beaver Builder
1

Hey, I am working with the Post module today for a friend’s site. I want to display a single post, and I achieved this by setting “Posts Per Page” to 1, and the “Pagination Style” to none… I am wondering:

  1. Is it possible to remove the separator at the bottom of the post?

  2. Is there a way for me to turn the “read more” link into a button?

http://www.faithprint.net

2

Hi Katie,

  1. To remove the separator, add the CSS below to your custom CSS.
.fl-post-feed-post {
    border: 0;
}

However, this will affect all post modules you use. Therefore, if you do not want this to happen and you wish to only affect the post modules on that page. I recommend you add a class to each module under the Post module settings > Advanced > Class . If you add a class name rmv-border Then use the CSS below instead, it will only affect the modules that have this class name.

.rmv-border .fl-post-feed-post {
    border: 0;
}
  1. You can not replace it with a button. However, you can style the read more link using CSS and transform it into a button.

Add the following CSS and it will give you a basic button style.

a.fl-post-feed-more {
    background-color: red;
    padding: 8px 22px;
    border-radius: 6px;
}
a.fl-post-feed-more:hover {
    background-color: green;
}

You can set the link color using the Column Settings for each module. The CSS above will again like #1 affect all post modules. If you do not wish for this to happen, like #1, you will want to add a class name. Do the same as I mentioned in #1 but use something like btn-readmore.

Then use the following CSS:

.btn-readmore a.fl-post-feed-more {
    background-color: red;
    padding: 8px 22px;
    border-radius: 6px;
}
.btn-readmore a.fl-post-feed-more:hover {
    background-color: green;
}

Please, be aware that this is basic styling and you may want to adjust it to your liking.

Thanks,
Danny

3

Thanks a lot, Danny, both those solutions work really well! Is it possible to add something to the CSS that would also center the button? I did not use the class name for this step.

As always, great support from you guys!!

4

Hey Katie,

Try the CSS snippet below and see if it works. Take note though that I just added a bit to Danny’s code above. :slight_smile:

a.fl-post-feed-more {
  background-color: #58144a;
  padding: 12px 26px;
  border-radius: 2px;
  width: 150px;
  text-align: center;
  position: relative;
  left: 50%;
  margin-left: -75px;
}

Ben

5

Worked perfect; thanks for the always outstanding support!!

6

No problem, Katie. Happy to help!

Thanks,
Danny