Jul -- Meta: Stupid forum CSS tricks

Register - Login
Views: 99393350	Main - Memberlist - Active users - Calendar - Wiki - IRC Chat - Online users Ranks - Rules/FAQ - Stats - Latest Posts - Color Chart - Smilies	04-24-22 10:24:32 AM

Jul - Meta - Stupid forum CSS tricks

Next newer thread | Next older thread

Xkeeper

Level: 263

Posts: 23261/25343
EXP: 296722330
For next: 2238123

Since: 07-03-07

Pronouns: they/them/????????

Since last post: 9 days
Last activity: 3 days

Posted on 02-01-18 06:15:35 AM

Link | Quote

span.pagelinks {

    opacity: .2;

    transition: all .3s  ease-in;

}


td:hover > span.pagelinks, td:focus-within > span.pagelinks {

    opacity: 1;

    transition: all 0.1s ease-in;

}

This mostly hides the page links on forums, making the appearance a lot cleaner.

Only works if you use inline page links, though.

____________________
(Lv 242 with 220583340 EXP)

maple
Member
Level: 24

Posts: 127/153
EXP: 74645
For next: 3480

Since: 01-19-18

From: a linode vps

Since last post: 4.2 years
Last activity: 3.8 years

Posted on 02-01-18 06:09:52 PM

Link | Quote

stupid forum css tricks: most of my post layout

____________________
visit maple's website

Tarale
Catgirl
C:\ DOS
C:\ DOS RUN
RUN DOS RUN
Level: 89

Posts: 1535/2030
EXP: 6714424
For next: 201477

Since: 07-23-07

Pronouns: she/her

Since last post: 2.0 years
Last activity: 1.6 years

Posted on 02-10-18 07:46:55 AM (last edited by Tarale at 02-10-18 07:47:06 AM)

Link | Quote

I have .pagelinks displayed block at the moment, with the decreased opacity, kind of looks alright.

Kind of messing around in Stylish because i want to see if I can remember how to CSS. The short answer is "no, not really".

____________________
Tarale.net

Rachel Mae

Creature of Chaos
Level: 141

Posts: 5821/5929
EXP: 33576461
For next: 543553

Since: 07-03-07

Pronouns: she/her
From: Foxglen

Since last post: 12 days
Last activity: 7 hours

Posted on 02-13-18 06:50:58 AM

Link | Quote

Originally posted by Tarale
Kind of messing around in Stylish because i want to see if I can remember how to CSS. The short answer is "no, not really".

It's amazing how all the CSS stuff I learned in school ~10 years ago just slid riiiiiiiiight out of my brain as soon as I graduated. Honestly, I'm not sure I retained anything from that class at all (aside from the useless CERTIFIED INTERNET WEBMASTER certificate).

____________________

Next newer thread | Next older thread

Jul - Meta - Stupid forum CSS tricks

Rusted Logic

Warning: You are using TidyHTML mode! Pages MAY and probably WILL break. To disable, click here or append 'xxx-off=1' to the URL!

Capturing turf before it was cool (click to hide in future page loads)

27 database queries.

Query execution time:	0.098552 seconds
Script execution time:	0.009386 seconds
Total render time:	0.107938 seconds

TidyHTML vomit below

line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 119 column 11 - Warning: <form> isn't allowed in <table> elements
line 118 column 10 - Info: <table> previously mentioned
line 120 column 11 - Warning: missing <tr>
line 120 column 119 - Warning: missing </font> before </td>
line 124 column 16 - Warning: plain text isn't allowed in <tr> elements
line 120 column 11 - Info: <tr> previously mentioned
line 125 column 68 - Warning: missing </nobr> before </td>
line 141 column 68 - Warning: missing </nobr> before <tr>
line 147 column 35 - Warning: missing <tr>
line 147 column 50 - Warning: missing </font> before </td>
line 148 column 37 - Warning: unescaped & or unknown entity "&id"
line 147 column 176 - Warning: missing </font> before </table>
line 149 column 35 - Warning: missing <tr>
line 149 column 50 - Warning: missing </font> before </td>
line 149 column 91 - Warning: missing </font> before </table>
line 156 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 158 column 9 - Warning: missing <tr>
line 176 column 13 - Warning: missing <tr>
line 177 column 102 - Warning: unescaped & or unknown entity "&postid"
line 179 column 74 - Warning: <style> isn't allowed in <td> elements
line 179 column 9 - Info: <td> previously mentioned
line 194 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 196 column 9 - Warning: missing <tr>
line 214 column 13 - Warning: missing <tr>
line 215 column 102 - Warning: unescaped & or unknown entity "&postid"
line 217 column 74 - Warning: <style> isn't allowed in <td> elements
line 217 column 9 - Info: <td> previously mentioned
line 217 column 429 - Warning: missing </a> before </div>
line 220 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 222 column 9 - Warning: missing <tr>
line 240 column 13 - Warning: missing <tr>
line 241 column 102 - Warning: unescaped & or unknown entity "&postid"
line 243 column 74 - Warning: <style> isn't allowed in <td> elements
line 243 column 9 - Info: <td> previously mentioned
line 248 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 250 column 9 - Warning: missing <tr>
line 268 column 13 - Warning: missing <tr>
line 269 column 102 - Warning: unescaped & or unknown entity "&postid"
line 271 column 301 - Warning: missing </font> before <blockquote>
line 271 column 366 - Warning: inserting implicit <font>
line 271 column 366 - Warning: missing </font> before <hr>
line 271 column 429 - Warning: inserting implicit <font>
line 271 column 429 - Warning: missing </font> before <hr>
line 272 column 1 - Warning: inserting implicit <font>
line 275 column 17 - Warning: missing <tr>
line 275 column 17 - Warning: discarding unexpected <table>
line 278 column 35 - Warning: missing <tr>
line 278 column 50 - Warning: missing </font> before </td>
line 278 column 91 - Warning: missing </font> before </table>
line 280 column 35 - Warning: missing <tr>
line 280 column 50 - Warning: missing </font> before </td>
line 281 column 37 - Warning: unescaped & or unknown entity "&id"
line 280 column 176 - Warning: missing </font> before </table>
line 282 column 17 - Warning: discarding unexpected </textarea>
line 282 column 28 - Warning: discarding unexpected </form>
line 282 column 35 - Warning: discarding unexpected </embed>
line 282 column 43 - Warning: discarding unexpected </noembed>
line 282 column 53 - Warning: discarding unexpected </noscript>
line 282 column 64 - Warning: discarding unexpected </noembed>
line 282 column 74 - Warning: discarding unexpected </embed>
line 282 column 82 - Warning: discarding unexpected </table>
line 282 column 90 - Warning: discarding unexpected </table>
line 284 column 9 - Warning: missing </font> before <table>
line 296 column 25 - Warning: discarding unexpected </font>
line 305 column 37 - Warning: discarding unexpected </font>
line 283 column 1 - Warning: missing </center>
line 120 column 63 - Warning: <img> lacks "alt" attribute
line 125 column 19 - Warning: <td> attribute "width" has invalid value "120px"
line 125 column 93 - Warning: <img> lacks "alt" attribute
line 141 column 19 - Warning: <td> attribute "width" has invalid value "120px"
line 141 column 98 - Warning: <img> lacks "alt" attribute
line 148 column 44 - Warning: <img> proprietary attribute value "absmiddle"
line 148 column 142 - Warning: <img> proprietary attribute value "absmiddle"
line 148 column 246 - Warning: <img> proprietary attribute value "absmiddle"
line 161 column 23 - Warning: <img> lacks "alt" attribute
line 161 column 64 - Warning: <img> lacks "alt" attribute
line 161 column 113 - Warning: <img> lacks "alt" attribute
line 161 column 163 - Warning: <img> lacks "alt" attribute
line 162 column 11 - Warning: <img> lacks "alt" attribute
line 172 column 15 - Warning: <img> lacks "alt" attribute
line 199 column 22 - Warning: <img> lacks "alt" attribute
line 199 column 63 - Warning: <img> lacks "alt" attribute
line 199 column 112 - Warning: <img> lacks "alt" attribute
line 199 column 162 - Warning: <img> lacks "alt" attribute
line 200 column 11 - Warning: <img> lacks "alt" attribute
line 210 column 15 - Warning: <img> lacks "alt" attribute
line 225 column 22 - Warning: <img> lacks "alt" attribute
line 225 column 63 - Warning: <img> lacks "alt" attribute
line 225 column 112 - Warning: <img> lacks "alt" attribute
line 225 column 162 - Warning: <img> lacks "alt" attribute
line 226 column 11 - Warning: <img> lacks "alt" attribute
line 236 column 15 - Warning: <img> lacks "alt" attribute
line 252 column 11 - Warning: <img> lacks "alt" attribute
line 253 column 23 - Warning: <img> lacks "alt" attribute
line 253 column 64 - Warning: <img> lacks "alt" attribute
line 253 column 113 - Warning: <img> lacks "alt" attribute
line 253 column 163 - Warning: <img> lacks "alt" attribute
line 254 column 11 - Warning: <img> lacks "alt" attribute
line 264 column 15 - Warning: <img> lacks "alt" attribute
line 272 column 1952 - Warning: <img> lacks "alt" attribute
line 281 column 44 - Warning: <img> proprietary attribute value "absmiddle"
line 281 column 142 - Warning: <img> proprietary attribute value "absmiddle"
line 281 column 246 - Warning: <img> proprietary attribute value "absmiddle"
line 290 column 25 - Warning: <img> lacks "alt" attribute
line 295 column 267 - Warning: <img> lacks "alt" attribute
line 149 column 50 - Warning: trimming empty <font>
line 217 column 310 - Warning: trimming empty <span>
line 271 column 301 - Warning: trimming empty <font>
line 272 column 1129 - Warning: trimming empty <span>
line 272 column 1462 - Warning: trimming empty <span>
line 275 column 17 - Warning: trimming empty <tr>
line 278 column 50 - Warning: trimming empty <font>
line 125 column 68 - Warning: <nobr> is not approved by W3C
line 141 column 68 - Warning: <nobr> is not approved by W3C
line 177 column 27 - Warning: <nobr> is not approved by W3C
line 215 column 27 - Warning: <nobr> is not approved by W3C
line 241 column 27 - Warning: <nobr> is not approved by W3C
line 269 column 27 - Warning: <nobr> is not approved by W3C
line 271 column 74 - Warning: <table> proprietary attribute "height"
Info: Document content looks like HTML5
Info: No system identifier in emitted doctype
Tidy found 115 warnings and 0 errors!

The alt attribute should be used to give a short description
of an image; longer descriptions should be given with the
longdesc attribute which takes a URL linked to the description.
These measures are needed for people using non-graphical browsers.

For further advice on how to make your pages accessible
see http://www.w3.org/WAI/GL.
You are recommended to use CSS to specify the font and
properties such as its size and color. This will reduce
the size of HTML files and make them easier to maintain
compared with using <FONT> elements.

You are recommended to use CSS to control line wrapping.
Use "white-space: nowrap" to inhibit wrapping in place
of inserting <NOBR>...</NOBR> into the markup.

About HTML Tidy: https://github.com/htacg/tidy-html5
Bug reports and comments: https://github.com/htacg/tidy-html5/issues
Official mailing list: https://lists.w3.org/Archives/Public/public-htacg/
Latest HTML specification: http://dev.w3.org/html5/spec-author-view/
Validate your HTML documents: http://validator.w3.org/nu/
Lobby your company to join the W3C: http://www.w3.org/Consortium

Do you speak a language other than English, or a different variant of
English? Consider helping us to localize HTML Tidy. For details please see
https://github.com/htacg/tidy-html5/blob/master/README/LOCALIZE.md