Skip to content

Add character renders.

Valerio Lyndon edited this page Mar 26, 2023 · 2 revisions

You are here: Home > Clarity > Add character renders.


This mod adds two optional character renders on the left and right of the list. Do note that the renders will not be properly visible at low resolutions. I recommend having at least a 1600x900 monitor to add renders, as they purposefully do not intersect the center list area.

Preview

Installation (two renders)

  1. Place the code from this link at the bottom of your CSS.

CODE

  1. Replace either of the "URLHERE" sections with the direct link to the image you want. If you do not want one of the renders then you can leave the URL text untouched.

Help with image hosting

  1. OPTIONAL. You can also change the background-positions to something else or add a background-size if you find your render is positioned incorrectly.

Installation (two renders per category)

  1. Place the code from this link at the bottom of your CSS.

CODE

  1. Find the two none texts for each category within the newly pasted code. Each category and render is clearly labelled with the render codes right after the category:
/* completed */
--render-left: none right bottom / contain;
--render-right: none left bottom / contain;
  1. Change the left and/or right variables as desired. These variables represent a normal CSS background property.
  • The "none" text can be changed to a CSS url: url(https://example.com/image.png)
  • The left bottom/right bottom are the position of the image relative to the render container.
  • The contain is the size.