Css Part 4

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 4

Post by Freon22 »

This is part 4 on how to change the color layout of SMR. If you have not read part 1, 2, and 3 it would be best for you go and read those three parts before reading this part.

At the end of part 3 we had removed the borders from the a.buttonA links and we had increased the font size by 25% on the a.buttonA:hover. While I was viewing the other pages within SMR I seen that the a.buttonA is used in other pages and should have a border also increasing the font size by 25% in the hover effect is to much. Before we start on other things we need to correct our mistakes. Open your copy of MyCss.css and scroll down to the a.buttonA and make the following corrections.

Code: Select all

/* --------- Link Styles ------------- */
a.buttonA
{
    border: 1px solid;
	border-color: #006882;    
    background-color: #000020;
    color: #FFFFFF;
}
a.buttonA:hover
{
    background-color: #0B8D35;
}
a.buttonA:active
{
	background-color: #000020;	
}
/* --------- End Link Styles ----------- */
This is what we just did, if you set both MyCss.css and SMR default.css along side each other they look like this.

Image

Our MyCss.css is on the left and SMR default.css is on the right. You can see that they have the border set to 2px width. What we are going to do is adjust it to 1px and for the hover effect we removed the font-size: 125%; and just did a change background color instead. Lets save our MyCss.css file and upload it. Login to SMR and instead of us just looking at the Join Game page lets enter a game and see what we have.

Image

I can see a few thing right off that needs changing. The H1 header at the top is green "Current Sector: 1820 (Omar)" and we are going to leave it green. But right under that H1 header is a div calling the bar1 class. Which is giving it the border color, lets look at that Class.

Code: Select all

div.bar1
{
	border: 1px solid #0B8D35;
	padding: 5px;
}
There is the SMR div.bar1 class, they are saying that they want the border to be 1px wide, solid, and the color Green. They are also saying they want the padding to be 5px width on all sides. Most of this class is fine all we want to change here is the border color. Lets open up our MyCss.css and add the new class.

Code: Select all

body
{
    background-color: #000020;
}
/* -------- Our new Table rules --------- */
th
{
	background: #000020;
}
/* =td.footer_left */
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 ------- */

/* --------- Classes ---------------- */
div.bar1
{
    border-color: #006882;	
}
/* --------- End Classes ---------------- */

/* --------- Link Styles ------------- */
a.buttonA
{
    border: 1px solid;
	border-color: #006882;    
    background-color: #000020;
    color: #FFFFFF;
}
a.buttonA:hover
{
    background-color: #0B8D35;
}
a.buttonA:active
{
	background-color: #000020;	
}
/* --------- End Link Styles ----------- */
Seeing how all I want to do is change the border color and nothing else. I am just going to add a border-color: #006882; within the div.bar1 { }. That changed the border color but the background is still green. The background color for bar1 is a little trickier to find what they have done below is use what is called a Contextual selectors.

Code: Select all

div.bar1 div
{
	padding: 2px;
	background-color: #0B8D35;
	text-align: center;
}
A contextual selectors is where you have two or more selectors separated by a whitespace. What it is saying is whenever you find a div tag within a div tag calling the bar1 class apply this styling. We could get into parents, child, grandchild, and great grandchild but again its outside the scope of this tutorial. The only reason I am saying anything about it so you have a little understanding of what is happening here. So lets add this contextual selector to our MyCss.css file but we will only overwrite the background color.

Code: Select all

body
{
    background-color: #000020;
}
/* -------- Our new Table rules --------- */
th
{
	background: #000020;
}
/* =td.footer_left */
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 ------- */

/* --------- Classes ---------------- */
div.bar1
{
    border-color: #006882;	
}
div.bar1 div
{
	background-color: #006882;
}
/* --------- End Classes ---------------- */

/* --------- Link Styles ------------- */
a.buttonA
{
    border: 1px solid;
	border-color: #006882;    
    background-color: #000020;
    color: #FFFFFF;
}
a.buttonA:hover
{
    background-color: #0B8D35;
}
a.buttonA:active
{
	background-color: #000020;	
}
/* --------- End Link Styles ----------- */
What we did to the div.bar1 div is we changed the background color to the same color as the border color. This will help it to stand out and I think it looks ok. :) Now lets save, upload, and login to see what it looks like.

Image

I think this is enough for this part in part 5 we are going to change the ??? I will call it the steering wheel! When you are in Current Sector it is the sector links that allows you to move from one sector to the next. Then we will clean up the background color for the game voting links at the bottom. Last if we have the time we will look at the textarea and fix that so it goes along with our blue theme. If you would like you see firsthand how this looks you can copy the link below and add it to your Preferences page within the game. Tutorial part one tells you how to do this.

http://video.smrealms.de/tutorial/MyCss.css

Until next time take care and have fun playing SMR.
Post Reply