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 ------- */
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.
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 ------- */
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 ----------- */
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 ----------- */