By Stephen Walker

Updated Feb. 21, 2023

103 words

Reading time: 0.5 min.

Share

The default RSS feed has limited options for styling and includes bullets and underlines. This gives the default RSS feed widget a more polished appearance.

Without CSS

With CSS

/* RSS Feed */
.rss-feed .widget_rss li a:before {
  content:""!important;
}
.rss-feed .widget_rss li {
  display:flex!important;
  flex-direction:column;
  font-weight:500!important; 
  line-height:1.5;
  border-bottom:none!important;
}
.rss-feed .widget_rss li a{
  font-family: var(--h3_typography-font-family);
  font-weight:600!important;
  text-decoration:underline;
  text-underline-position: under;
  transition: all linear .3s;
  order:1;
  font-size:1.4rem;
}
.rss-feed .widget_rss li a:hover,.fusion-title :is(h3,h4,h4) a:hover{
  text-decoration-thickness: 1px;
  color:var(--awb-custom_color_12)!important;
}
.rss-feed  .rss-date{
  font-size:.9rem;
  text-transform:uppercase;
  order:0;
}

Originally published on Feb. 21, 2023

Basic Toggle
Social Sharing

Leave a Reply

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

RELATED Snippets

  • Avada, CSS, JavaScript

    Fixed Floating Container

    This creates a floating container. More to come.

  • Avada, CSS

    Get your image to fill the space

    This is a style I recently used on my blog post title bar to have the feature image fill the column without having to use a background image.

  • Avada, CSS

    Table of Contents Border

    I have seen some tables of contents around the web that use what appears as a left border, and the border color changes when highlighted. This feature is missing from the current version of Avada, so I created CSS styling to do this. It works best with a single-level list. […]

  • Avada

    Social Sharing

    The social sharing element has some styles that prevent stacking them in a column. This CSS will resolve this. Just assign the class to each instance.

  • Avada

    Basic Toggle

    The Toggle Element styling leaves a bit to be desired as it applies hover effects to the entire block and not just the header and the panel. This should override that behavior but still takes advantage of the settings, thanks to the use of CSS variables. Example

  • Avada, CSS

    Skew Pagination Preview

    Another example of using a skewed background, this time targeting the pagination preview. Additionally, this limits the width of the preview and allows the text to wrap. Lastly, a clip-path is used to give the featured image a skewed appearance.