By Stephen Walker

Styling Gutenberg posts in Avada

Share

In earlier posts, I have mentioned that I am transitioning post creation to the Gutenberg editor. If you haven’t tried the editor, please do, it is such a time saver and after five minutes, going back to the legacy editor will be painful – at least mentally.

One of the issues of this transition is how to get the Avada layout to allow the advantages of Gutenberg blocks to lay nicely with the textual content. I have tried a variety of fixes, but I think I finally have the correct combination.

Modern CSS to the rescue

The ability to use modern CSS is such a benefit these days. The often-maligned Internet Explorer is finally gone — or at least no longer supported. By using “:is()” in CSS we can now target specific portions of our content.

The solution (right now)

The latest solution uses the layout builder and applying the .article class to the column with the content element. Here is the CSS:

.article :is(h1,h2,h3,h4,h5,p,li){
  
  max-width:45rem;
  margin:1rem auto
}

.article p a , .article li a{
    text-decoration:underline!important;
  
}

.article p  a:hover, .article li a:hover{
    text-decoration:none!important;
    cursor:pointer;
  	outline: 3px solid transparent;
    color: #0F2131;
    background-color:rgba(252, 199, 94,.6);
    box-shadow: 0 -2px rgba(252, 199, 94,.6), 0 3px #0F2131;
}

This restrains the textual content to the industry’s ideal reading width (based on font size) but allows all the other elements and blocks to use the built-in layouts. Some research into floated images still needs to be done as these do not layout correctly.

Originally published on December 18, 2021

Most Advanced WordPress Form Builder

Leave a Reply

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

RELATED ARTICLES

  • Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

  • 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.

  • Food Menu

    This is a style for creating a food menu whit a dashed line between the item and the price.

  • Horizontal Scrolling Columns and Column Overlays

    This weekend I put together to examples as a result of requests and conversations on the Facebook group.

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.