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 ----------- */
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.
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;
}
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 ----------- */
Code: Select all
div.bar1 div
{
padding: 2px;
background-color: #0B8D35;
text-align: center;
}
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 ----------- */
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.