Posted by CSS Guide | How to Live Preview / Edit

rugaard (#349759)

Sweetheart
View Forum Posts


Posted on
2023-12-19 15:14:25
This is how I personally preview my CSS and edit my CSS live without applying it via import and linking the code thru Dropbox on my den profile.

(Sorry in advance for no images!!!, this should hopefully be clearly explained well enough to be useful without them.)

By doing this method other players will not see you editing your code and you can spend all the time you'd like using this extension to make edits.

First you will need an extension for your web browser, I've included two links, one for Firefox based web browers and chromium based web browsers (Vivaldi, Opera (& GX ed.), Chrome.).

Extension for Firefox based browsers

Extension For Chromium based browser

1: Write / Get CSS. You WILL need a link that includes the code for the CSS, not the import link to github or dropbox or etc, the code itself.

2: Go to your den and activate / click on the icon for the Live CSS viewer.

Sometimes your browser will not automatically add your extensions to your side bar, some will be found in a collapsed menu, see guides for your browser on how to add extensions on your top-bar.

Note: For Chrominum based browsers like Vivaldi and Opera you will have to enable extensions and the ability to install extensions from the chrome store.

3: Copy and paste your code into you Live CSS viewer pop up window. You should be able to resize this window for easier viewing of the code.

Note: I HIGHLY suggest editing your code in an IDE client that lets you highlight and see your syntax such as VS Code or even Atom (an open source IDE client). There are also open source forks of VS Code. It's easier to make extensive edits to your CSS in an IDE and copy and paste it to preview properly on whatever page you are making css to apply to.

When you are happy with your CSS, then you can copy your CSS from the live preview box or your last edits that you pasted to the box and then upload and import like any other code. If you are using someone elses code and just want to see what it would look like on your profile, you simply can just apply their code to your profile as usual.




Hrt Icon 0 players like this post! Like?


No replies have been posted yet.





Memory Used: 623.56 KB - Queries: 0 - Query Time: 0.00000 - Total Time: 0.00334s