Divider between new articles? - Forum | JoomShaper
Solved SP Page Builder

Divider between new articles?

Asked by Dayle Lunn 1 year ago Last activity 1 year ago

Is there a way to get a Divider in place between articles on the "Articles" element within SP Page Builder - particularly in "side by side" view,

Thanks

Accepted answer

Marked as the solution
Ofi Khan Staff
1 year ago

There are no options but you can use CSS code.

Please use this CSS to
Template Options -> Custom Code -> Custom CSS

.sppb-addon-article-layout-side-wrapper {
    padding-bottom: 20px;
    border-bottom: 2px solid black;
}
.sppb-addon-article-layout-side-wrapper:last-of-type{
    padding-bottom: 0px;
    border: none;
}

5 more replies

Oldest first Newest first Most helpful
Ofi Khan Staff
1 year ago

Hello Dayle Lunn,

Thank you for reaching out to our technical support forum. I’m sorry to hear about the trouble you’re experiencing. Rest assured, I will look into this issue for you and work to resolve it as quickly as possible.

If you could kindly provide any additional information regarding the issue, it would greatly help me investigate and address it more efficiently. Please share a screenshot of your issue to understand it better. Take a screenshot and share via any platform. For example: Lightshot or Imgur

Best regards

Dayle Lunn Asked this
1 year ago

Hi, It's not really a problem, just a question. I want to know if I can add a Divider between news articles on the "Articles" element within SP Page Builder.

In other words to make this:
https://imgur.com/a/sT521iP

Look like this (or similar):
https://imgur.com/a/F5uce3G

Thanks

Dayle Lunn Asked this
1 year ago

Thanks, that's perfect!

Do you know if there is a way I can change the Read More link into a button? Or use a black background?

Paul Frankowski Senior Staff
1 year ago · edited

Also by using Custom CSS, for example:

.sppb-readmore {
  background: black; max-width: 130px;
  padding: 4px; margin-top: 5px; }

As you see a very basic styles.

Extra style for mouse hover status

a.sppb-readmore:focus, a.sppb-readmore:hover 
{background: white; color: black;}
Dayle Lunn Asked this
1 year ago

Perfect, thank you both

Log in to reply.