This is not related to Avada, but since I use RankMath, I thought I would share it here. 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 is something that I have wanted for a long time and was just about to look for another solution when this was released. Unfortunately, this is very much a version .5 implementation (in my opinion), and I hope there will be enough feedback to get them to make some improvements, but I digress. This post is to share the CSS I am using to add some layout to an otherwise long, boring list of links.

My Styles

With hundreds of links, there needed to be a way to present a bit more visual layout, so I opted for a multi-column layout. I then styled the parent page so the break was more visual. The last thing I did was add a visual highlight to the sitemap categories. Check out the sitemap.

The CSS

Here are all the styles used on that page. Since this uses the rank math classes, it should be portable to any site, and the only thing that needs to change is the color variables that are unique to this site.

ul.rank-math-html-sitemap__list:not(ul.rank-math-html-sitemap__list ul){
  column-count:4;
  column-width:300px;
  column-gap:3rem;
  list-style:none;
  padding:0;
}
.rank-math-html-sitemap__title{
  position:relative;
   width:max-content;
  padding:0 32px;
    color:var(--awb-color6);
}
.rank-math-html-sitemap__title::before{
 content:"";
  position:absolute;
  /*change to color to match your style */
  background-color:rgba(250, 166, 18, .7);
  bottom:0;
    /*change the height to meet your needst*/
  height:40%;
  width:100%;
  left:0;
  z-index:-1;
}
.rank-math-html-sitemap__list li{
  margin-bottom:8px;
}
.rank-math-html-sitemap__date{
  display:block;
  font-size:.9rem;
}
.rank-math-html-sitemap__list li:has(+ul){
  font-weight:600!important;
  border-radius:8px;
  background-color:var(--awb-color6);
  color:var(--awb-color7);
  padding:8px 16px;
   width:max-content;
}
.rank-math-html-sitemap__list li:has(+ul) a {
  color:var(--awb-color7);
  text-decoration:underline
}
ul.rank-math-html-sitemap__list ul{
  list-style: disc;
}
.rank-math-html-sitemap__list li:has(+ul)::before{
  content:"Parent Page: ";
  font-weight:600;
}
.highlighter--basic {
  position:relative;
  width:max-content;
  /* Only if you want to add length left and right */
  padding:0 8px;
}
.highlighter--basic::after{
  content:"";
  position:absolute;
  /*change to color to match your style */
  background-color:rgba(220, 36, 125,.2);
  bottom:0;
    /*change the height to meet your needst*/
  height:40%;
  width:100%;
  left:0;
  z-index:-1;
}

Originally published on Dec. 11, 2022

In this story

Avada: Beyond the original theme
black typewriter on green tableThe State of WordPress

Leave a Reply

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

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • Read New Avada-based website

    I am launching a new website using Avada taking advantage of the lessons learned over the past two years of builder evaluations.

    March 5, 2023

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • 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