Css Part 1

This is a place for Newbies to get help on anything they're not sure about. Don't be afraid to ask!
Post Reply
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Css Part 1

Post by Freon22 »

Have you ever wanted the change the color layout in the game? If so then here is a easy tutorial on how to do just that. Page has done some really cool things that allows the user to have more control over how they view the game. I think some players don't take advantage of this because they simply don't understand css and how to do it.

So lets get started, first you will need a few things. The most important is someplace to put the css file that we are going to create. Try google'ing for "free upload sites" there are tons of them on the net that will give you 1 to 10 megabytes of free storage. Next some people think you need some costly software to create css or even html files. Well you don't you can use a program that is on just about every computer. In fact its what I am going to use for this tutorial "Notepad".

With these two thing we can change the way that SMR looks for us. So first lets open up Notepad and change the background color for the whole site. We can specify using the common english name or the hexadecimal format. But for starter we will just use the common name, So you know the hexadecimal for blue is #0000ff. Now save this file as MyCss.css make sure you have the .css extension at the end.

Code: Select all

body {
    background-color: Blue;
}
Its time to upload this file to whatever "free upload site" you picked and copy the link address.

Now log into SMR game and on the left side click on Preferences.

Image

Scroll down the page until you see the text "Change CSS Link" now in the textbox type or paste the address to your MyCss.css file.

Image

Below the "Change CSS Link" you will see another text "Enable Default CSS" and it will have a Yes or No leave it to Yes. The reason you want to leave it to Yes is so that the default stylesheet is also loaded. If you want to completely rewite the whole css file and you know what you are doing then you would want to disable the default. But we don't want to disable the default stylesheet so leave it to Yes. Then click the "Change CSS Options" link to see what you have done.

Image

All we have done is change the default background color in the body tag. Don't like the color then you can change it to a new color and upload it. Or you can just remove the link in the Preference page and you are back to the pure SMR default stylesheet. So anyway what we did was we rewrote or added a new rule in the body tag. We did not do away with whatever SMR has in the default stylesheet. The default stylesheet body tag looks like this.

Code: Select all

body
{
	background: #0B2121;
	font-family: Arial, Sans-Serif;
	font-variant: normal;
	margin: 10px 0px 0px 0px;
	padding: 0px;
	color: #FFFFFF;
}
You can see that they had a shorthand background rule of color #0B2121 what we did was to overrule their rule :-). This is part 1 of a few parts to teach you how the change the game looks in the next part we will look at how to change the borders within the game.
btw: I think that blue is sick looking color for a background. LOL
Last edited by Freon22 on Mon Feb 22, 2010 1:37 pm, edited 2 times in total.
N.ator
Beginner Spam Artist
Posts: 1611
Joined: Mon Aug 07, 2006 1:23 am
Location: Norway
Contact:

Re: Css part 1

Post by N.ator »

very nice!

We should make a new thread where everyone post there themes up so people can use them etc.
ImageImage
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Css part 1

Post by Freon22 »

Thanks for the comment, Maybe an Admin will start a forum called SMR Tutorials. This way players can post their own tutorials on how to do things within the game. This may help to promote active on the web board which would be a good thing. The change css file has been in the game for sometime now, I waited to see what players would come up with.

But no one has really posted anything on their css so maybe it because they don't know how. So its why I am posting these tutorials on how to change the game look. At the end of these tutorials everyone will have a complete list of all the html elements and classes that they can change colors and borders on. Along the way they we pickup some understanding of how css works.

In the next part the first thing I am going to do is change that blue color to something better, then we will look at tables, background images, borders. I think that will be all I will be able to get into part 2. In part 3 we will be looking at fonts which will take up that part. Anyway it should be fun and I hope players will begain to use something that very few online games allows their players to do. Change the way the game looks!
RCK
Beginner Spam Artist
Posts: 2686
Joined: Tue Feb 03, 2004 4:09 pm
Location: Ontario, Canada
Contact:

Re: Css Part 1

Post by RCK »

I'll see about getting it done, Has to be either spock, bob or baalz to do it though.
RCK
Beginner Spam Artist
Posts: 2686
Joined: Tue Feb 03, 2004 4:09 pm
Location: Ontario, Canada
Contact:

Re: Css Part 1

Post by RCK »

Apparently I lied, I can do it to, will do it from work if its quiet.
Post Reply