Danbooru

Custom CSS Thread

Posted under General

This is the XML data from the background-image data from your CSS decoded...

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<path fill="#fff" stroke="#06c" d="M1.5 4.518h5.982V10.5H1.5z"/>
<path d="M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z" fill="#06f"/>
<path d="M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z" fill="#fff"/>
</svg>

I know that SVGs are defined using coordinates, so it looks like it defines the shape of the icon so that it doesn't need to store the icon anywhere, i.e. it draws it on the fly...

Bonus points to anyone that can find a site that can take any icon, convert it to SVG, and then spit out something similar to the above, or at least the sequence of steps needed to accomplish it. This would allow almost any custom icon to be created.... (ツ)

sarusa said:
The one minor complaint I have with this is now the non-clipped pics hide the links, like 'Uploads' and 'Favorites' on the Account page.

Figured this out - z-scale only applies to positioned elements, and by default 'a's are static. But if we make the links position:relative but don't provide any offset they end up in the same place but now they're in the stacking order and can be placed above the zoomed pics.

This works great in combination with the rest of @evazion 's thumbnail zoom css:

.box a { position: relative; z-index: 200 }  /* Account page */
.paginator a { position: relative; z-index: 200 }  /* Page number links at bottom */

The above covers the only two links I was having issues with - the ones on the Account page and the Page number links at the bottom. If you have any others you want to apply this to, just add another selector.

This handles the top menu lines on gallery pages, but I find that too distracting for how little I need to use them:

menu a { position: relative; z-index: 200 }  /* top menus */

Finally, kudos to how well classed / id-ed all the html is these days. I remember years and years ago when you pretty much had to parse/search the entire page to figure out where you were, and doing something this clean would be impossible.

Updated

Replace the "Sticky" and "New" text in the forum topic listing with icons...

Sticky

span.stickied {
margin-left: 20px;
position: relative;
visibility: hidden;
font-size: 0%;
}
span.stickied::before {
content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%20486.3%20486.3%22%20style%3D%22enable-background%3Anew%200%200%20486.3%20486.3%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20style%3D%22fill%3A%233f6bc9%3B%22%20d%3D%22M243.15%2C0v104.4c44.11%2C0%2C80%2C35.88%2C80%2C80c0%2C44.11-35.89%2C80-80%2C80v221.9l146.43-184.1%0A%09%09c26.29-33.25%2C40.19-73.21%2C40.19-115.58C429.77%2C83.72%2C346.05%2C0%2C243.15%2C0z%22%2F%3E%0A%09%3Cpath%20style%3D%22fill%3A%23ffffff%3B%22%20d%3D%22M323.15%2C184.4c0-44.12-35.89-80-80-80v160C287.26%2C264.4%2C323.15%2C228.51%2C323.15%2C184.4z%22%2F%3E%0A%09%3Cpath%20style%3D%22fill%3A%230f3b99%3B%22%20d%3D%22M163.15%2C184.4c0-44.12%2C35.89-80%2C80-80V0C140.25%2C0%2C56.53%2C83.72%2C56.53%2C186.62%0A%09%09c0%2C42.37%2C13.9%2C82.33%2C40.23%2C115.62L243.15%2C486.3V264.4C199.04%2C264.4%2C163.15%2C228.51%2C163.15%2C184.4z%22%2F%3E%0A%09%3Cpath%20style%3D%22fill%3A%239fcbff%3B%22%20d%3D%22M163.15%2C184.4c0%2C44.11%2C35.89%2C80%2C80%2C80v-160C199.04%2C104.4%2C163.15%2C140.28%2C163.15%2C184.4z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E);
position: absolute;
left: -20px;
top: -7px;
visibility: visible;
}

New

span.new {
margin-left: 20px;
position: relative;
visibility: hidden;
font-size: 0%;
}
span.new::before {
content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%20286.054%20286.054%22%20style%3D%22enable-background%3Anew%200%200%20286.054%20286.054%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20style%3D%22fill%3A%23ff0000%3B%22%20d%3D%22M143.027%2C0C64.04%2C0%2C0%2C64.04%2C0%2C143.027c0%2C78.996%2C64.04%2C143.027%2C143.027%2C143.027%0A%09%09c78.996%2C0%2C143.027-64.022%2C143.027-143.027C286.054%2C64.04%2C222.022%2C0%2C143.027%2C0z%20M143.027%2C259.236%0A%09%09c-64.183%2C0-116.209-52.026-116.209-116.209S78.844%2C26.818%2C143.027%2C26.818s116.209%2C52.026%2C116.209%2C116.209%0A%09%09S207.21%2C259.236%2C143.027%2C259.236z%20M143.036%2C62.726c-10.244%2C0-17.995%2C5.346-17.995%2C13.981v79.201c0%2C8.644%2C7.75%2C13.972%2C17.995%2C13.972%0A%09%09c9.994%2C0%2C17.995-5.551%2C17.995-13.972V76.707C161.03%2C68.277%2C153.03%2C62.726%2C143.036%2C62.726z%20M143.036%2C187.723%0A%09%09c-9.842%2C0-17.852%2C8.01-17.852%2C17.86c0%2C9.833%2C8.01%2C17.843%2C17.852%2C17.843s17.843-8.01%2C17.843-17.843%0A%09%09C160.878%2C195.732%2C152.878%2C187.723%2C143.036%2C187.723z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E);
position: absolute;
left: -20px;
top: -7px;
visibility: visible;
}

For your own custom icons instead, you can use a png/jpg/gif as mentioned by itsonlyaname in forum #121623 above. Once the icon is URL encoded, copy and paste it into the content: line, after the url( portion and before the ); portion.

Alternatively, you can use SVGs which have the benefit of having data that is usually much smaller in size. I found the icons above at http://www.flaticon.com, but any other SVG repository on the web would do. Once the image is downloaded, you need to perform the following steps:

1. Open the SVG in a text editor. It should look like the following:

Example
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="15" height="15" viewBox="0 0 486.3 486.3" style="enable-background:new 0 0 486.3 486.3;" xml:space="preserve">
<g>
	<path style="fill:#3f6bc9;" d="M243.15,0v104.4c44.11,0,80,35.88,80,80c0,44.11-35.89,80-80,80v221.9l146.43-184.1
		c26.29-33.25,40.19-73.21,40.19-115.58C429.77,83.72,346.05,0,243.15,0z"/>
	<path style="fill:#ffffff;" d="M323.15,184.4c0-44.12-35.89-80-80-80v160C287.26,264.4,323.15,228.51,323.15,184.4z"/>
	<path style="fill:#0f3b99;" d="M163.15,184.4c0-44.12,35.89-80,80-80V0C140.25,0,56.53,83.72,56.53,186.62
		c0,42.37,13.9,82.33,40.23,115.62L243.15,486.3V264.4C199.04,264.4,163.15,228.51,163.15,184.4z"/>
	<path style="fill:#9fcbff;" d="M163.15,184.4c0,44.11,35.89,80,80,80v-160C199.04,104.4,163.15,140.28,163.15,184.4z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

2. The values width and height may need to be added or changed. For my icons, I use width="15" and height="15". (These values did not exist originally in the example above)

3. Copy and paste the text into a URL encoder, such as http://meyerweb.com/eric/tools/dencoder/, and have it encode the text.

4. Copy the encoded text, then paste it into the "content:" portion after the url(data:image/svg+xml, portion and before the ); portion.

Changing Colors

To change the color of an icon, adjust the fill values (RGB hex index) of the original SVG. These can either take the style of fill=#000000 or style="fill:000000;".

Bonus Content

Taking advantage of being able to embed icons instead of font characters, I modified my original code in forum #120491 to use an icon instead for super-voters.

Super-voters
.user-super-voter { background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2053.867%2053.867%22%20style%3D%22enable-background%3Anew%200%200%2053.867%2053.867%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpolygon%20style%3D%22fill%3A%23EFCE4A%3B%22%20points%3D%2226.934%2C1.318%2035.256%2C18.182%2053.867%2C20.887%2040.4%2C34.013%2043.579%2C52.549%2026.934%2C43.798%20%0D%0A%0910.288%2C52.549%2013.467%2C34.013%200%2C20.887%2018.611%2C18.182%20%22%2F%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3Cg%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E);   
  padding-left: 15px;
  background-repeat: no-repeat;
  background-position: center left;}

Icons can be added in many other places, as the following adds a pencil icon to most new/edit items.

New/Edit
a[href*="/edit"]::after,a[href$="edit"]::after,a[href*="/new"]::after,a[href$="new"]::after{
  font-size: 100%;
content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2053.255%2053.255%22%20style%3D%22enable-background%3Anew%200%200%2053.255%2053.255%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20style%3D%22fill%3A%23D75A4A%3B%22%20d%3D%22M39.598%2C2.343c3.124-3.124%2C8.19-3.124%2C11.314%2C0s3.124%2C8.19%2C0%2C11.314L39.598%2C2.343z%22%2F%3E%0A%3Cpolygon%20style%3D%22fill%3A%23ED8A19%3B%22%20points%3D%2242.426%2C17.899%2016.512%2C43.814%2015.982%2C48.587%2044.548%2C20.02%2044.548%2C20.02%20%22%2F%3E%0A%3Cpolygon%20style%3D%22fill%3A%23ED8A19%3B%22%20points%3D%2210.325%2C42.93%2015.098%2C42.4%2041.012%2C16.485%2036.77%2C12.243%2010.855%2C38.157%20%22%2F%3E%0A%3Cpolygon%20style%3D%22fill%3A%23ED8A19%3B%22%20points%3D%2235.356%2C10.829%2033.234%2C8.707%2033.234%2C8.707%204.668%2C37.273%209.441%2C36.743%20%22%2F%3E%0A%3Cpolygon%20style%3D%22fill%3A%23C7CAC7%3B%22%20points%3D%2248.79%2C15.778%2048.79%2C15.778%2050.912%2C13.657%2039.598%2C2.343%2037.476%2C4.465%2037.477%2C4.465%20%22%2F%3E%0A%3Cpolygon%20style%3D%22fill%3A%23C7CAC7%3B%22%20points%3D%2236.062%2C5.879%2036.062%2C5.879%2034.648%2C7.293%2034.648%2C7.293%2045.962%2C18.606%2045.962%2C18.606%20%0A%0947.376%2C17.192%2047.376%2C17.192%20%22%2F%3E%0A%3Cpath%20style%3D%22fill%3A%23FBCE9D%3B%22%20d%3D%22M14.424%2C44.488l-5.122%2C0.569c-0.036%2C0.004-0.073%2C0.006-0.109%2C0.006c0%2C0-0.001%2C0-0.001%2C0H9.192H9.192%0A%09c-0.001%2C0-0.001%2C0-0.001%2C0c-0.036%2C0-0.073-0.002-0.109-0.006c-0.039-0.004-0.071-0.026-0.108-0.035%0A%09c-0.072-0.017-0.141-0.035-0.207-0.067c-0.05-0.024-0.093-0.053-0.138-0.084c-0.057-0.04-0.109-0.083-0.157-0.134%0A%09c-0.038-0.04-0.069-0.081-0.1-0.127c-0.038-0.057-0.069-0.116-0.095-0.181c-0.022-0.054-0.038-0.107-0.05-0.165%0A%09c-0.007-0.032-0.024-0.059-0.028-0.092c-0.004-0.038%2C0.01-0.073%2C0.01-0.11c0-0.038-0.014-0.072-0.01-0.11l0.569-5.122l-5.122%2C0.569%0A%09c-0.037%2C0.004-0.075%2C0.006-0.111%2C0.006c-0.079%2C0-0.152-0.024-0.227-0.042L0.442%2C51.399l2.106-2.106c0.391-0.391%2C1.023-0.391%2C1.414%2C0%0A%09s0.391%2C1.023%2C0%2C1.414l-2.106%2C2.106l12.03-2.864c-0.026-0.109-0.043-0.222-0.03-0.339L14.424%2C44.488z%22%2F%3E%0A%3Cpath%20style%3D%22fill%3A%2338454F%3B%22%20d%3D%22M3.962%2C49.293c-0.391-0.391-1.023-0.391-1.414%2C0l-2.106%2C2.106L0%2C53.255l1.856-0.442l2.106-2.106%0A%09C4.352%2C50.316%2C4.352%2C49.684%2C3.962%2C49.293z%22%2F%3E%0A%3Cpolygon%20style%3D%22fill%3A%23F2ECBF%3B%22%20points%3D%2248.79%2C15.778%2037.477%2C4.465%2037.476%2C4.465%2036.062%2C5.879%2036.062%2C5.879%2047.376%2C17.192%20%0A%0947.376%2C17.192%2048.79%2C15.778%20%22%2F%3E%0A%3Cpath%20style%3D%22fill%3A%23EBBA16%3B%22%20d%3D%22M41.012%2C16.485L15.098%2C42.4l-4.773%2C0.53l0.53-4.773L36.77%2C12.243l-1.414-1.414L9.441%2C36.743%0A%09l-4.773%2C0.53l-1.133%2C1.133l-0.228%2C0.957c0.075%2C0.018%2C0.147%2C0.042%2C0.227%2C0.042c0.036%2C0%2C0.074-0.002%2C0.111-0.006l5.122-0.569%0A%09l-0.569%2C5.122c-0.004%2C0.038%2C0.01%2C0.073%2C0.01%2C0.11c0%2C0.038-0.014%2C0.072-0.01%2C0.11c0.004%2C0.033%2C0.021%2C0.06%2C0.028%2C0.092%0A%09c0.012%2C0.057%2C0.029%2C0.112%2C0.05%2C0.165c0.026%2C0.064%2C0.057%2C0.124%2C0.095%2C0.181c0.03%2C0.045%2C0.063%2C0.088%2C0.1%2C0.127%0A%09c0.047%2C0.05%2C0.1%2C0.094%2C0.157%2C0.134c0.044%2C0.031%2C0.089%2C0.061%2C0.138%2C0.084c0.065%2C0.031%2C0.135%2C0.05%2C0.207%2C0.067%0A%09c0.038%2C0.009%2C0.069%2C0.03%2C0.108%2C0.035c0.036%2C0.004%2C0.072%2C0.006%2C0.109%2C0.006h0.001h0h0.001h0.001c0%2C0%2C0.001%2C0%2C0.001%2C0h0%0A%09c0.035%2C0%2C0.072-0.002%2C0.109-0.006l5.122-0.569l-0.569%2C5.122c-0.013%2C0.118%2C0.004%2C0.23%2C0.03%2C0.339l0.963-0.229l1.133-1.132l0.53-4.773%0A%09l25.914-25.915L41.012%2C16.485z%22%2F%3E%0A%3Cpolygon%20style%3D%22fill%3A%23F2ECBF%3B%22%20points%3D%2245.962%2C18.606%2034.648%2C7.293%2034.648%2C7.293%2033.234%2C8.707%2033.234%2C8.707%2035.356%2C10.829%20%0A%0936.77%2C12.243%2041.012%2C16.485%2042.426%2C17.899%2044.548%2C20.02%2044.548%2C20.02%2045.962%2C18.606%20%22%2F%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E); 
padding-left: 5px;
}
Edit:
  • (2016-11-05)
    • Fixed bug in "new" and "sticky" CSS to use more specific span.new and span.sticky.
  • (2020-03-10)
    • Updated CSS class for sticky element
    • Adjusted the positioning of elements

Updated

I found the "Tag Alias Request" and "Tag Implication Request" links annoying on the Forum pages, so I wrote the following CSS to hide those links.

header#top menu li:nth-child(4) a[href*="tag_alias_request"],
header#top menu li:nth-child(5) a[href*="tag_implication_request"] {
    display: none;
}

Luckily, the ordering of elements works out so that they are only hidden on the Forum page, and not the Tag Alias or Tag Implication pages.

I wanted a way to visually distinguish my uploads from others, so I created the following...

article.post-preview[data-uploader="BrokenEagle98"] a {
    border: 2px solid darkgrey;
    padding: 2px;
}

div:not(#has-children-relationship-preview):not(#has-parent-relationship-preview) > article.post-preview[data-uploader="BrokenEagle98"], td > article.post-preview[data-uploader="BrokenEagle98"], #c-pools article.post-preview[data-uploader="BrokenEagle98"] {
    overflow: visible;   
}

To use it, just replace my username with your own.

Edit:
  • (2017-05-16) Fixed issue with overflow on second block in the post child preview.
  • (2017-05-27) Fixed issue with border overlap by switching to using <img> instead of <a>
    • Reverted since it overwrote all other borders
  • (2017-05-30)
    • Fixed another issue with overflow in parent/child preview
    • Fixed issue with post previews in pools and tables

Updated

Similar to BrokenEagle98's previous post, if someone wants to remove the two "Aliases" and "Implications" links on the navigation bar (didn't really find them necessary):

header#top .main li:nth-child(7) a[href*="/tag_aliases"],
header#top .main li:nth-child(8) a[href*="/tag_implications"] {
    display: none;
}

Great idea, I rarely use those links as well, and if I ever need to, I can always go to the Site Map.

Just a quick comment on your CSS code though. The "href" selectors are unneeded since the top menu is static and ".main" selects it instead of the sub-menu. Not the case for my code because the sub-menus are variable and there is no ".submenu" class to select the sub-menu instead of the main menu.

Also, I don't know why, but removing the "a" selector (as seen below) makes the spacing how it should be in the main menu. Otherwise, the "Tags" and "Pools" links were too close to each other and looked out-of-place...

header#top .main li:nth-child(7),
header#top .main li:nth-child(8){
    display: none;
}
Edit:

Figured out why I was getting spacing issues. I apply a negative padding and margin to make the menu items closer to each other.

Updated

BrokenEagle98 said:

Great idea, I rarely use those links as well, and if I ever need to, I can always go to the Site Map.

Just a quick comment on your CSS code though. The "href" selectors are unneeded since the top menu is static and ".main" selects it instead of the sub-menu. Not the case for my code because the sub-menus are variable and there is no ".submenu" class to select the sub-menu instead of the main menu.

Also, I don't know why, but removing the "a" selector (as seen below) makes the spacing how it should be in the main menu. Otherwise, the "Tags" and "Pools" links were too close to each other and looked out-of-place...

header#top .main li:nth-child(7),
header#top .main li:nth-child(8){
    display: none;
}

Could you maybe make a CSS that shows this report page (and not the pools, artists, tags, aliases and implications? They are very unimportant to me)

BrokenEagle98 said:

Also, I don't know why, but removing the "a" selector (as seen below) makes the spacing how it should be in the main menu. Otherwise, the "Tags" and "Pools" links were too close to each other and looked out-of-place...

header#top .main li:nth-child(7),
header#top .main li:nth-child(8){
    display: none;
}

Thanks. But I just removed the unnecessary parts like you have said and it's still exactly the same thing though. Maybe it's because of your screen resolution?

The following will colorize forum topics according to forum category, giving instant visual feedback on which topics may be more important, e.g. Bugs & Features (Category 2) are more important to me.

.forum-topic-category-0 td a[href^="/forum_topics"]:not(.last-page) {
    color:blue;
}
    
.forum-topic-category-1 td a[href^="/forum_topics"]:not(.last-page) {
    color:green;
}
    
.forum-topic-category-2 td a[href^="/forum_topics"]:not(.last-page) {
    color:red;
}
Edit:
  • Fixed bug where usernames were being colored as well. Added the [href^="/forum_topics"] to be more specific with selection.
  • Fixed bug where last page was being colored as well. Added :not(.last-page) to be more specific with selection.

Updated

The following is a template to adjust the stylings for the new moderator comments, in case you desire different visual stylings:

article.comment[data-is-sticky="true"] {
    background: #000;
    color: #0f0;
    font-weight: bold;
}

The above example makes the background black, the font color neon green, and the font-text bold.

Updated

Was asked by another to create a custom CSS that makes the notification of new posts on the forum a little bit more noticeable, and sharing it in case anyone else wants to use it.

a.forum-updated::before {
	content: "New ";
	color: darkgrey;
}
1 2 3 4 5 6 7 8 9 10 19