This code is for adding a list of stats connected by a row of dot leaders to a standard page. It’s intended for a muse about page, but could be repurposed for many other uses. It’s also designed to blend well with other elements on the page, such as full paragraphs, titles, etc.
Minor tweaks will be needed to display properly on your theme, so this is recommended for people who are moderately comfortable going into their blog’s code and finding various values. Basic styling is included, and can be easily customized to suit your theme.
This code will only work on themes with a solid color post background. Post backgrounds with gradients, images, or transparency will unfortunately not work properly.
First, go into your theme’s main HTML and paste the code linked here just above </style>. Instructions are included in this code, where colors and size values will need to be adjusted in several places.
Then, on a standard layout page, click Edit HTML and use the following template to structure your stats list:
<div class=“statlist”>
<div class=“stat”>
<div class=“l”>Label</div>
<div class=“r”>Thing</div>
</div>
<div class=“stat”>
<div class=“l”>Label</div>
<div class=“r”>Thing</div>
</div>
<div class=“stat”>
<div class=“l”>Label</div>
<div class=“r”>Thing</div>
</div>
</div>
The “stat” class can be repeatedly endlessly to add more items to the list. Multiple statlists can be added to a single page in different sections, if so desired. Note: If you copy and paste this template into your code, you may need to retype the quotation marks before it functions properly.
Please like or reblog this post if you find it useful.
You may edit this code however you wish for personal use. However, do not repost or use in any paid commission work without my permission.
Do not claim this code as your own.
If you see this page and like what I do, consider buying me a ko-fi!
