I have never been a fan of the Avada pagination feature for posts because the controls are just too limited, but after doing some work creating a skewed version, I realized that CSS could be used to give it a look that might be more interesting to readers. This applies to the Text + Preview option in the pagination element.

The Wrapper

The first step was to give the preview card the look I wanted. This was fairly simple. I did assign an ID to the element so that the default would be available where necessary.

The Title (.fusion-item-title)

By default, the title is set not to wrap, which is not useful in many cases. These styles allow the title text to wrap and limit the width of the space available. The text color is based on the background color in the previous step to maintain the color contrast.

The Featured Image (.fusion-item-media img)

These styles give it a 1/1 aspect ratio (square), set to size to cover, and the border-radius gives it a round appearance. I also reversed the row-reverse on the “Next” article so that the image is on the left.

Previous and Next

The styles add text after and remove the arrows. This is not ideal, and hopefully, a future release will give these better structure and styling options.

The CSS

Here is the complete CSS for this implementation.

#paginator .fusion-pagination-preview-wrapper  {
background-image: linear-gradient(45deg,var(--awb-color8),var(--awb-color4));
padding:1.5rem;
width: 400px;
border-radius: 8px;
box-shadow: 0px 10px 20px -10px rgba(31,31,31,0.3);
}
#paginator .fusion-item-title {
padding: .5em .75em;
white-space:unset!important; 
overflow: hidden;
text-overflow:unset;
max-width: 300px;
display: block;
text-align: left;
color:var(--awb-color2)!important;
}
#paginator .fusion-item-media img{
  max-width: 80px;
  object-fit: cover;
  aspect-ratio: 1;
  border-radius: 50%;
}
#paginator .fusion-tb-previous a,#paginator .fusion-tb-next a{
  text-transform: uppercase;
  font-weight: 600!important;
  padding: .6rem .4rem;
  width: max-content;
border-bottom: 1px solid #313131 ;
}
#paginator .fusion-tb-next a::after{
  position: unset;
  transform: none;
}
#paginator .fusion-tb-previous a::before{
  content: "";
  position: unset;
  transform: none;
}
#paginator .fusion-tb-previous a::after,#paginator .fusion-tb-next a::after{
content: "Article";
font-family: tenon;
margin-left:.8ex;
display: inline-block;
}
#paginator .fusion-tb-next .fusion-pagination-preview-wrapper{
  flex-direction: row;
}

Originally published on Feb. 20, 2023

In this story

white and blue abstract paintingAccordion Cards
New Avada-based website

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022

  • Read Targeting the Boxes

    Targeting the Boxes

    I put together a quick demo to highlight the containers that do not have settings, but that can be targeted with CSS.

    November 3, 2022