In part 1 we set the main background color for the site to Blue. I said then that the Blue color looked sick, so the first thing we should do is fix that color. So lets make it a more of a blacker blue color and see how that looks. So first find the file you saved on your computer that you called MyCss.css and open it with Notepad.
MyCss.css
Code: Select all
body {
background-color: Blue;
}
MyCss.css
Code: Select all
body
{
background-color: #000020;
}
You can see we added more black to the blue making it a much darker color. At this point we should note a few things. In css when you create a style for a html tag or class you need to have an opening { bracket and a closing } bracket. Also at the end of each or your rules you need to end the line with a ; semicolon. You can also comment your code like so /* My Comments */ I also said in Part 1 that we were going to change the border colors. To do this we need to look at the table rules that SMR is using. Now don't get worryed when you see them below, Page has really done a great job of cleaning them up. Also we are only going to be changing a few rules most of this we will not be touching.
default.css
Code: Select all
/* -------- Table rules --------- */
/* =table default font size */
table
{
font-size: 100%;
}
/* =th default style for th tags */
th
{
background: #0A4E1D;
color: #80C870;
font-size: 110%;
text-align: center;
padding: 3px;
}
/* =td default style for td tags */
td
{
padding: 3px;
color: #FFFFFF;
font-variant: normal;
font-family: Arial, Sans-Serif;
vertical-align: middle;
}
/* =td.sector */
td.sector
{
padding: 0px;
height: 3.5em;
width: 4.5em;
text-align: center;
}
/* =td.footer_left */
td.footer_left
{
padding: 10px;
border: solid #0B8D35;
border-width: 0px 0px 1px 1px;
background-color: #06240E;
vertical-align: bottom;
text-align: left;
font-size: 75%;
white-space: nowrap;
}
/* =td.footer_right */
td.footer_right
{
padding: 10px;
border: solid #0B8D35;
border-width: 0px 1px 1px 0px;
background-color: #06240E;
vertical-align: bottom;
text-align: right;
font: 75% Arial, Sans-Serif;
white-space: nowrap;
}
table.standardnobord
{
border: 0px;
}
.standardnobord tr,.standardnobord td,.standardnobord th
{
border: 0px;
}
table.standard
{
border: 1px solid #0B8D35;
border-spacing: 0px;
}
table.standard td, table.standard th
{
border: 1px solid #0B8D35;
}
/* =.create td child, th also on line 110 */
.create td, th
{
padding: 3px;
border: 0px solid #0b8d35;
}
table.create {
border: 0px solid #0B8D35;
}
td.border_left
{
border-left-width: 3px;
}
td.border_right
{
border-right-width: 3px;
}
td.border_bottom
{
border-bottom-width: 3px;
}
td.border_top
{
border-top-width: 3px;
}
td.has_port
{
background-color: gray;
}
td.vert_cent
{
vertical-align: middle;
}
table.quote
{
border: 1px solid #0B8D35;
}
table.nobord td
{
border: none;
}
table.nohpad td
{
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}
td.button
{
padding: 0px;
text-align: center;
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
/***************************/
table.m
{
height: 100%;
width: 80em;
border-spacing: 0px;
padding: 0px;
}
td.l0
{
padding: 0px 10px 0px 0px;
vertical-align: top;
}
td.mb
{
width: 225px;
}
div.l1
{
text-align: right;
width: 10em;
}
td.m0
{
padding: 10px;
border: solid #0B8D35;
border-width: 1px 1px 0px 1px;
background-color: #06240E;
vertical-align: top;
width: 100%;
}
td.r0
{
padding: 0px 0px 0px 10px;
vertical-align: top;
text-align: left;
}
table.csl
{
width: 27em;
}
/* --------- End of table rules ------- */
MyCss.css
Code: Select all
body
{
background-color: #000020;
}
/* -------- Our new Table rules --------- */
th
{
background: #000020;
}
/* =td.footer_left */
td.footer_left
{
border: solid #0B8D35;
background-color: #000020;
}
/* =td.footer_right */
td.footer_right
{
border: solid #0B8D35;
background-color: #000020;
}
td.m0
{
border: solid #0B8D35;
background-color: #000020;
}
/* --------- End of Our table rules ------- */
Ok I see a few things that stand out to me one being those borders colors, the font colors and the table background color. I think it would be a little better if the table background color was an offset of the body background color. Just something to make it standout a little so we could change the table background color or we could add an image to the table background. We will try both ways in part 3 but for now lets work on the border colors a bit.
To change the border colors we will need to add a few more tags to our MyCss.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: #000020;
}
/* --------- End of Our table rules ------- */
Wow! that hurts my eyes some. We will need to adjust those borders in Part 3 and will also adjust the table background color and try a star background to see what looks best. Before I close you can see that our css file is growing and the game look different. We have done it without changing the way the game works or is played. The whole idea behind this is so you can change the way it looks for you.