[OUTDATED] ★ Tetra's CSS Guide ★
|
Posted 2021-11-09 20:54:12 (edited)
it gives me an "invalid CSS file" error. :< I'm not quite sure what I did wrong, as I'm very new to this, but I don't see to see any spelling errors or missing brackets (checked using the CSS linter, fixed red errors) Any help is greatly appreciated <3 |
 DucksDefyGravity #38017 |
|
Posted 2021-11-09 20:59:41
Hello, the "linking the file" section is outdated as the guide has been written long before the HTML update provided the CSS Files field. For today, the only difference is that you must paste just the URL itself into the CSS Files field. Instead of the link rel stylesheet fancystuff all you need to do is stop at the "uploading the file" section and use the CSS link itself, which should look like an ordinary browser link but with .css appended to the end of it. |
 *barks at you* #202 |
|
Posted 2021-11-09 21:02:14 (edited)
Ohhh- that makes a lot of sense now! ^^ Thank you so much! :) I'll try it and hope it works. :D Update: No longer getting the error message, but it won't show up on my den page, still determined to find my error. ^^ This is what I have so far: link :) |
DucksDefyGravity #38017 |
|
Posted 2021-11-09 21:17:23
Visiting the link as-is sends me to a login prompt, which is what Wolvden is being directed to when you feed them this link. Simply use dl instead and the CSS should show. |
*barks at you* #202 |
|
Posted 2021-11-09 21:21:59
" https://dl.dropboxusercontent.com/s/b4ewlnr7bbj265z/TES.css?dl=0 " still to no avail. :P Is it possible it won't show because it needs the !important modifier? |
DucksDefyGravity #38017 |
|
Posted 2021-11-09 21:30:16
I'm not sure if you've been using the Stylus editor, but the color-coded interface can help you discern between what will be invisible to the browser and what won't. Example:  By default, unless using a different theme, comments are shown in a brownish color. Notice that the brackets are black and the selectors are in color; those indicate what the browser actually sees. The exclamation marks tell you that the rule is empty, so what the browser is reading between the functional brackets is just emptiness.  Now with the commenting removed around the property-value pairs, the warning exclamations disappear and the text is in color, signifying that the browser can read what's inside the brackets without returning empty styling. Notice that the description sentences above are still commented. Commenting is otherwise reserved for when you wanna just write personalized notes on a portion of code to keep track of its purposes; in this case, these sentences would be very invalid if the browser were to read them, so they're left invisible, meant only for personal recordkeeping and such. |
*barks at you* #202 |
|
Posted 2021-11-09 21:34:36 (edited)
I'll have to go over all of it and rearrange well.. everything xD Thank you so much for all the help!! ^w^ Update #2: It works! :) |
DucksDefyGravity #38017 |
|
Posted 2021-11-11 17:13:42
After messing with opacity, I've finally managed to change the main color box (which is normally a dark grey on dark mode) to show my background image, but it changed the opacity on well, everything. As seen in a screenshot here: link Here's the current code ^^ link Any help or tips is greatly appreciated ;w; |
DucksDefyGravity #38017 |
|
Posted 2021-11-13 00:20:37
If you wished to change the background opacity of #main without changing that of the rest of the content, that's done using the background property and by taking advantage of RGBA color code, like so: background: rgba(0, 0, 0, 0.5); This makes the background of #main a semitransparent black. For a semitransparent white, this would be: background: rgba(255, 255, 255, 0.5); And so on. |
*barks at you* #202 |
|
Posted 2021-11-13 11:17:55
As much as I love spooky ghosts, an only transparent background would be much better xD Thank you so much for all the help and patience. ^^ |
DucksDefyGravity #38017 |