Custom CSS Thread

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.... (ツ)

Reply

itsonlyaname

over 8 years ago

Using data-URI is probably simpler.

Have icon in jpg/png/gif, (recommended, use some image compressor site), feed into image-to-data site.
info: https://css-tricks.com/data-uris/

Reply

sarusa

over 8 years ago

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 over 8 years ago

Reply

BrokenEagle98

over 8 years ago

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 almost 5 years ago

Reply

BrokenEagle98

over 8 years ago

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.

Reply

BrokenEagle98

over 8 years ago

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 over 7 years ago

Reply

Nitrogen09

over 8 years ago

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;
}

Reply

BrokenEagle98

over 8 years ago

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 over 8 years ago

Reply

user 460797

over 8 years ago

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)

Reply

Nitrogen09

over 8 years ago

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?

Reply

BrokenEagle98

over 8 years ago

Yeah, maybe...? It could also be a browser thing... or maybe a conflict with some of my other custom CSS settings...

Whatever works though... I had to remove the "a" selectors, but other might not have to...

Reply

BrokenEagle98

over 8 years ago

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 over 8 years ago

Reply

Catgrills

about 8 years ago

hey guys, currently working on a danbooru css, here a preview : http://i.imgur.com/qD6ITOm.jpg

Reply

Nitrogen09

about 8 years ago

For users with approval permission, if anyone want to get rid of the constant "You haven't moderated any posts in awhile" notice (adressing forum #123734), simply use this:

#mod-notice { display:none }

Reply

BrokenEagle98

about 8 years ago

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 about 8 years ago

Reply

BrokenEagle98

about 8 years ago

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;
}

Reply

DeusExCalamus

about 8 years ago

Can someone take the old danbooru grey theme and make sure its compatible with the current site?

Reply

user 460797

about 8 years ago

Is there a way to hide notes?
Because they really are distracting when I was about to tag post #1596649 since it's tagged with tagme.

Reply

.grey

about 8 years ago

You can just click on the image to hide them, I believe.

Reply

user 460797

about 8 years ago

Oh that's new to me. Thank you!

Reply