Css Part 3

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 3

Post by Freon22 »

This is part 3 on how to change the color layout of SMR. If you haven't read part 1 and 2 then it would be best for you go and read those two parts before reading this part.

At the end of part 2 I said we would adjust the border colors a little more. But you already know how to do that so lets leave it as is for now. Instead lets adjust the table background color then add a star background to see what it would look like. Here is our new MyCss.css file for starters I am just making the table back ground colors Black. Page was nice and gave us a very good link for picking colors ( http://www.colorpicker.com/ ). The color Black is Black LOL no color so its 000000 you can see below that I have changed only the td.mO tag with the #000000 black color. The reason is I want just the viewing part as black, I want the table headers to stay the same color as the body background color. Lets save the file and upload it to your server.

MyCss.css

Code: Select all

body
{
    background-color: #000020;
}
/* -------- Our new Table rules --------- */
th
{
	background: #000020;
}
td.footer_left
{
    border: medium solid #006882;
    background-color: #000020;
}
/* =td.footer_right */
td.footer_right
{
	border: solid #006882;
	background-color: #000020;	
}
table.standard
{
	border: 1px solid #006882;	
}
table.standard td, table.standard th
{
	border: 1px solid #006882;
}
td.m0
{
	border: solid #006882;
	background-color: #000000;    
}
/* --------- End of Our table rules ------- */
Now that you have uploaded it let login and see how it looks.

Image

Ok our table background is now black lets add a star background to it. Here is one that you can use just do a "save as" then upload it to your server.

Image

You can link any image you want to the game, you want a picture of an old car as your background image then ok thats cool. Whatever you want, but for this tutorial I want it to kind of look like we are looking out of a high tech viewing screen into space. Now to add a background image we need to add a rule for it in the td.mO tag it going to be background-image. We also have to tell it where the image is so it can fetch it. You do this by stating url() so the address to the image will go within the ( and ). This is how it would look for my image, background-image: url(http://video.smrealms.de/tutorial/star.gif); We now have a added rule that saids fetch this image and place it within the td.mO tag. There are more things you can add for background images like attachment and repeat but those are outside of this very limited tutorial.

MyCss.css

Code: Select all

body
{
    background-color: #000020;
}
/* -------- Our new Table rules --------- */
th
{
	background: #000020;
}
td.footer_left
{
    border: medium solid #006882;
    background-color: #000020;
}
/* =td.footer_right */
td.footer_right
{
	border: solid #006882;
	background-color: #000020;	
}
table.standard
{
	border: 1px solid #006882;	
}
table.standard td, table.standard th
{
	border: 1px solid #006882;
}
td.m0
{
	border: solid #006882;
	background-color: #000000;
    background-image: url(http://video.smrealms.de/tutorial/star.gif);
}
/* --------- End of Our table rules ------- */
Another thing I did was to leave the background color to black. The reason for this is for any reason the image failed to load I know that I will still have a black background. So lets save our MyCss.css file and upload it to see the change.

Image

Lets do some cool stuf do you see those buttons they are green with white colored fonts? The css rules for those are making them look like buttons. Lets change them so they don't look like buttons and change the hover effects to them. I love playing with things sometimes it better and sometimes its "O no what did I do!" The first thing we have to do is to find the styling rules for those links. Ok I will find them for you. :) Below you will see our MyCss.css file with the added styles from the SMR default.css file.

MyCss.css

Code: Select all

body
{
    background-color: #000020;
}
/* -------- Our new Table rules --------- */
th
{
	background: #000020;
}
td.footer_left
{
    border: medium solid #006882;
    background-color: #000020;
}
/* =td.footer_right */
td.footer_right
{
	border: solid #006882;
	background-color: #000020;	
}
table.standard
{
	border: 1px solid #006882;	
}
table.standard td, table.standard th
{
	border: 1px solid #006882;
}
td.m0
{
	border: solid #006882;
	background-color: #000000;
    background-image: url(http://video.smrealms.de/tutorial/star.gif);
}
/* --------- End of Our table rules ------- */

/* --------- Link Styles ------------- */
a.buttonA 
{
	font-size: inherit;
	text-decoration: none;
	height: 1.0em;
	display: inline;
	border: 2px solid;
	border-color: #A3CCA3 #2A6E2A #2A6E2A #A3CCA3;
	background-color: #0B8D35;
	color: #FFFFFF;
	white-space: nowrap;
}
a.buttonA:hover
{
	background-color: #0B8D35;
}
a.buttonA:active
{
	background-color: #0B8D35;
	border-color: #2A6E2A #A3CCA3 #A3CCA3 #2A6E2A;
}
/* --------- End Link Styles ----------- */
You can see above that SMR has lots of rules for the styling of those button links. I placed them within the comment Link Styles because we maybe adding more link styles later. Lets look at the a.buttonA style. Most those rules we will just remove them because we are not going to change them. But like the rule for borders, we don't want borders so we need to overwrite them. Below is our new MyCss.css file we removed all the styling rules in a.buttonA except for border: background-color: and color. The reason we left those is because we need to change them and for the border rule we need to set it to none. This way we don't have to worry about those border-color because without borders they mean nothing.

So for a.buttonA we set border: none; we will set the background-color to the same as our body background color and will leave the font color rule as White "FFFFFF". This way if you want to play with the font color its there.

Now lets move to the a.buttonA:hover tag. I set this to the same background color as in the a.buttonA tag. But if I wanted I could change the background color so when I moved my mouse over the link the color would change. But I want to do something else instead, I want to change the font-size and font color so when I move the mouse over the link they change. Look below and see how I am doing just that, I went to the colorpicker site that Page showed us and found a color and added it. I also added two new rules font-size and setting it to 125% on hover and font-weight setting it to bold. The last tag we have for the a.button is the a.buttonA:active now I am not sure why this in even here but since it is we need to change it so the background color doesn't change.

MyCss.css

Code: Select all

body
{
    background-color: #000020;
}
/* -------- Our new Table rules --------- */
th
{
	background: #000020;
}
td.footer_left
{
    border: medium solid #006882;
    background-color: #000020;
}
/* =td.footer_right */
td.footer_right
{
	border: solid #006882;
	background-color: #000020;	
}
table.standard
{
	border: 1px solid #006882;	
}
table.standard td, table.standard th
{
	border: 1px solid #006882;
}
td.m0
{
	border: solid #006882;
	background-color: #000000;
    background-image: url(http://video.smrealms.de/tutorial/star.gif);
}
/* --------- End of Our table rules ------- */

/* --------- Link Styles ------------- */
a.buttonA 
{	
	border: none;	
	background-color: #000020;
	color: #FFFFFF;
}
a.buttonA:hover
{
    font-size: 125%;
    font-weight: bold;
    color: #FC0505;
	background-color: #000020;
}
a.buttonA:active
{
	background-color: #000020;
}
/* --------- End Link Styles ----------- */
Above is our new MyCss.css file save and upload it to your server. Then login and see the different. Now pass your mouse over the Play Game link cool they get bigger, bolder and change colors. Well this is enough for part 3. There is more for us to do in part 4 until then cya.

Image
Last edited by Freon22 on Mon Feb 22, 2010 1:46 pm, edited 1 time in total.
N.ator
Beginner Spam Artist
Posts: 1611
Joined: Mon Aug 07, 2006 1:23 am
Location: Norway
Contact:

Re: Css Part 3

Post by N.ator »

again loving them! im definately going to change my layout now! :P :D
ImageImage
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Css Part 3

Post by Freon22 »

Thats cool, changing the layout really isn't that hard. But debuging your changes can be a little bit of a pain, not to bad. Like what did I do on the hover effect? I increased the font size by 25%, LOL way too much, and also on hover turned the font color Red. :) Not good changes, in Part 4 we are going to fix that right off also I removed the borders on the a.buttonA style. LOL Another not so good change. :) It seems the game uses the a.buttonA style in other links in the game. Sooo they really should have borders to outline them. I think instead of removing them we will adjust the border width and colors to see if that works.

One of the cool things you can do is play with a layout until you have it just how you like it then share a link to it with your friends. Also while you are creating your layout no one can see it but you. So you can try this color or that color. You can do a hover effect that changes the font family, size, color, even add or remove borders on hover. There is so much you can do and change, its really is cool that Page has set this up for us.

Anyway glad there are a few players that likes these tutorials so far.

btw: You know there are a few other cool things you can do also like using transparently and if you are using Firefox as your browser you can do some cool rounded corners. As long as you work within the frameworks of the IDs and Classes of the game then it your to change.
Post Reply