Forum:
Hello there everyone. For the past few weeks I have been devoting a portion of my time to understanding CSS, and by extension, userstyles. With this site being an allusion to 2008 MySpace I found it applicable to create a post for those wishing to create userstyles which can aid in bringing back older versions of websites. My userstyles will be linked in the base of this post. Note that one should at least have a base level understanding of CSS before reading this post. In addition, this aid was designed with Chromium in mind. I am not aware of any quirks of Firefox or Opera, and will therefore not be able to aid in matters pertaining to those browsers
Part A: Identifying an HTML Element's CSS selector
1. Use the keyboard command ctrl + shift + i to bring up inspect element. This will be your new best friend from now on.
2. Click on the arrow-square button in the top left which should now be highlighted a light blue color.
3. Click on the element within the page you wish to alter. This should find the portion of html code in the Inspect element tab which built the element alongside any related CSS.
4. Hover over the highlighted blue html code. This should display the css selector to be used in code with this example syntax:
selector {
code: code;
}
Note that periods are used to attribute a class to an element whilst pound symbols are used to attribute ID's to a class.
Part B: Deleting modern portions of websites
When you have your portion of the website you wish to delete (Say a modern advertisement division) with the example selector of 'div.addportion' you should type your CSS as follows:
div.addportion {
display: none;
}
If it does not work properly, add '!important' to the end of the display line ('display: none !important;'). This should override any element style which might be preventing you from not displaying it.
Part C: Replacing Images
This is the second most critical element in developing classic themes (Second to display: none;) as it could be used to replace logos or headers. To replace an image with the example selector div#moderncrappylogo.dumb you could type as follows:
div#moderncrappylogo.dumb {
background: url(http://www.archive.org/oldcoollogo.jpg) no-repeat !important;
}
Part D: Closing and References
I did not touch upon more complicated but rewarding Userstyle features like Pseudo Elements, but there are other basic systems which would be important to learn. Replacing fonts with 'font-family', replacing font color with 'color', and changing body widths and margins. I have atached seven of my classic themes below so that you can use them as a resource for the creation of your own themes. Be warned, however, that I was not one hundered percent dilligent in my labeling and some fiddling may be required to understand how they function. They are linked below. God bless.
https://userstyles.world/style/7956/espn-classic
https://userstyles.world/style/7953/fanfiction-net-classic
https://userstyles.world/style/7893/amazon-classic
https://userstyles.world/style/7782/cool-math-classic
https://userstyles.world/style/7726/dreamcast-talk-classic
https://userstyles.world/style/7701/godaddy-classic
https://userstyles.world/style/7654/ebay-classic
Report Topic
