This page is about changing the way a web site looks, and is for users of the Firefox browser and other Mozilla based browsers that can use add ons. You will need to install two add ons to make skinning web sites possible.
So why change the way a web site looks? Well, my favorite use of it so far has been to make hard to read forums with tiny text easier to read. You can change the background image of a page to one of your liking. You can even put your own pictures on web pages if you know how with these tools.
The first add on to install is one called Stylish. This is the add on that makes it possible to specify style sheets for web sites on your computer that override the web site's style sheets.
The other add on you will need is called Web Developer. With this add on you willl be able to view the web site's own style sheet so you can determine what can be changed. It does many, many more things that are helpful if you develop web sites yourself, but for skinning web sites you will only need to use a couple of it's tools.
The last thing you will need is a bit of knowledge. You will need to study CSS and HTML so you know what the settings are that you can change. The best place to learn this quickly is at W3C Schools. Go through their CSS Tutorial, and HTML Tutorial and you should be up to speed on how to set your own web site styles with Stylish.
As a quick simple tutorial I will show you how to change the background color on my web site. First, here is one of my style sheets which sets the way different elements on my site are to appear.
body {
background-color: rgb(255,204,204);
font-family: "Times New Roman", Times, serif;
font-size: 20px;
color: black;
}
a:link {color: #0000FF}
a:visited {color: #00FF00}
a:hover {color: #FF0000}
a:active {color: #0000FF}
#theclock {
background-color: #0000FF !important;
color: white !important;
position:absolute;
left:0px;
top:0px;
border-style: solid;
border-width: 5px;
border-color: #00FF00;
padding: 1px 5px;
z-index:1
height: 25px;
width: auto;
}
td.Intro {
background-color: #FFFFFF;
vertical-align: top;
margin:5px;
padding-left:10px;
border-style: solid;
border-width: 1px
}
td.Right {
background-color: rgb(0, 204, 204);
vertical-align: top;
border-style: solid;
border-width: 1px
}
td.disclaimer {
font-size: 14px;
border-style: solid;
border-width: 1px
}
td.footer {
vertical-align: top;
text-align: center;
border-style: solid;
border-width: 1px
}
table.main {
width: 100%;
text-align: left;
border-style: solid;
border-width: 1px;
font-size: 20px;
}
td.adblock {
background-color: #FFFFFF;
width: 160px;
vertical-align: top;
border-style: solid;
border-width: 1px
}
td.mylinks {
vertical-align: top;
font-size: 20px;
border-style: solid;
border-width: 1px
}
div.codebox {
background-color: white;
width: auto;
height: 200px;
overflow: scroll
}
div.errormsg {
color: rgb(255, 0, 0);
}
span.error {
color: rgb(255, 0, 0);
}
To make changes you will first need to open Stylish. In the lower right corner of your Firefox web browser is a small icon for Stylish. Click this icon, and point to "Write Style", then select "for this URL". This brings up the style sheet editor you will use to create modifications to a site.
The first thing you will notice in my style sheet above is the setting in the first section labeled body. These settings apply to an entire page unless overridden by further rules about individual elements of the page. Here I have set the background color for the pages, the font size, the font, and the last setting color applies to the text color.
To see which elements are which on the page itself, use the Web Developer toolbar. From it's menus select the Information menu, then select "Display Id & Class Details." Now you will note on the web page that you can now see the names of different elements on the page. This will help you match up the elements with the correct settings in the style sheet.
Since most web pages won't be nice enough to post the contents of their style sheet on their pages like I have above you can once again use the Web Developer toolbar to see it. Use the menu "CSS" and select "View CSS". This will load the web sites style sheet into a new tab in Firefox.
Let's suppose you don't like the background color of my web site. To change it, copy the section "body" from my style sheet to the Stylish editor window you have open. A section starts with an element name and ends with the closing } The settings themselves for an element go between a pair of {} Now remove all the settings except for background-color, and change the color to one you like. Then add "!important" to the setting to make sure it overrides the pages style sheet. An example of what you should have in the stylish editor is below. [NOTE: I have not changed the color value, I leave that up to you.]
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.rayslinks.com") {
body {
background-color: rgb(255,204,204) !important;
}
}
Note that there are three different ways of specifying color codes in style sheets. The one in the example above is the rgb method. To see more on color codes go to HTML Color Names on the W3C Schools site. That page shows the plain English color names you can specify in any setting to do with colors in CSS.
If that's all you wanted to change you can now click the "Preview" button in the Stylish editor to see your changes, then click "Save" if you want to keep them. Note that once you click "Save", the Stylish editor closes. I wish they would have made it so the editor stays open in case you want to make more changes, but for some perverse reason they make it close, and you have to re-open it if you want to make more changes after saving.
I've found that the easiest way to find out how to use any CSS setting is to use the Search box which is on every page at the W3C Schools. Just type in the setting name, and you will be presented with a list of links on how to use that setting.
By the way, Stylish allows you to change the way the Firefox browser itself looks. You can create a style that applies to the browser itself like the following example which changes the color of the text in the main menus of Firefox.
menu[label="Tools"],menu[label="History"],menu[label="Help"],
menu[label="Bookmarks"],menu[label="Edit"],menu[label="View"],
menu[label="File"]{
color: #0000FF !important;
}
To put this one into Stylish, select Write Styles, Blank Style from it's menu. Paste in the code, give it a name, and save it. It will make the menu text color blue.
Once you have Stylish you will also be able to browse or search the UserStyles.org web site for pre-made styles that you can add to Stylish. They have styles already made for web sites, applications, and global styles which apply to all web sites. If you are having trouble using Stylish visit the Stylish Forum to get help.
Once you create a style you like for a web site, or make a skin for Firefox, you can upload your new style to UserStyles.org. To do this automatically, open the Style Manager and use it to open the style you have created. On the style editor window will be a link that says "Post this style to userstyles.org". Clicking it automatically creates a page on UserStyles.org for your style and uploads your style to the web where other people can download it. If you provide your PayPal email address it will even create a PayPal donation button on your styles page that people can use to pay you if they think your style is worth it.
By the way, web developers can implement alternate styles by specifying more than one style sheet in their documents, and creating two or more style sheets with different settings in them. I've used this ability combined with Javascript to create Skins for my web site that users can set to their preferences.
Like
this page? Link to it from your own website; just
copy/paste this HTML:
