Css Part 2

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 2

Post by Freon22 »

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

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;
}
You can see we had used the common color name of Blue. To get more control over the color we will be using hexadecimal codes for color from this point on. So change the MyCss.css body to what is below.

MyCss.css

Code: Select all

body
{
    background-color: #000020;
}
Now save it and upload it to whatever "free upload site" you had picked. You do not have to change anything on the SMR "Preferences" page because your link address has not changed. Lets login into the the game and see the change.

Image

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 ------- */
Its easy to pick out the border rules whenever you see "border: solid #0B8D35;" you know he is styling a border. In some of the tags you will see "border: 1px solid #0B8D35;" You may ask why does this one have a 1px and the other don't. Its because in the other ones he is setting the border thickest or size as independent rules so he can get more control over the border. But in this tutorial we are not going to mess with the border size just the color. Now if you look again at the first image you will see that the background color of the table does not match the background color of the body tag. Lets fix that you will see below that I have left in the border rules because we will be changing those in a bit.

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 ------- */
Save your MyCss.css file and upload it to your server. Now login and see the changes.

Image

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 ------- */
You can see above that I added a few more tags from SMR default.css file and changed the border colors. Lets look!

Image

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.
Last edited by Freon22 on Mon Feb 22, 2010 1:39 pm, edited 1 time in total.
Page
SMR Coder
Posts: 1779
Joined: Sat Dec 07, 2002 9:17 pm

Re: Css Part 2

Post by Page »

For those who don't understand hex colour codes you can use a site like http://www.colorpicker.com/ (there's plenty of others too, was just the first my search found) which lets you pick a colour graphically and gives you the hex code.

If you want a bit more explanation the hex code is in the form #RRGGBB, with FF as the maximum value for each colour (FF is 255), so #FF0000 is full red and no green/blue. If it's in the form of #RGB like #F00 you just repeat each symbol and it works out as #FF0000.
You can also specify the colour code using rgb(red, green, blue) with values from 0-255, if that makes more sense to you (personally I prefer the hex version as it's more concise)
N.ator
Beginner Spam Artist
Posts: 1611
Joined: Mon Aug 07, 2006 1:23 am
Location: Norway
Contact:

Re: Css Part 2

Post by N.ator »

Freon22 your the man dude!

Im loving these tutorials!

by the end of your tutorial the css is actually starting to look nice and give a new feel to the game!!


What i think we should do is once we established probably 5 different css's we upload them to the game, and under prefrences you have the option to just enable the new css, instead of uploading it... For people that have absolutely no clue how to use css they will still be able to use css backgrounds with this method.


- for your next tutorial, show how to enable a background.. maybe a nice star background?
ImageImage
Page
SMR Coder
Posts: 1779
Joined: Sat Dec 07, 2002 9:17 pm

Re: Css Part 2

Post by Page »

N.ator wrote: What i think we should do is once we established probably 5 different css's we upload them to the game, and under prefrences you have the option to just enable the new css, instead of uploading it... For people that have absolutely no clue how to use css they will still be able to use css backgrounds with this method.


- for your next tutorial, show how to enable a background.. maybe a nice star background?
Both have already been done for beta :P (Although only the new layout has more than one colour scheme, and it was thrown together fairly quickly by me, just to show it works :) )
N.ator
Beginner Spam Artist
Posts: 1611
Joined: Mon Aug 07, 2006 1:23 am
Location: Norway
Contact:

Re: Css Part 2

Post by N.ator »

i just check it out and it looks fairly good..

i think for the defualt template we should have a couple different colors. navy blue, etc
ImageImage
Page
SMR Coder
Posts: 1779
Joined: Sat Dec 07, 2002 9:17 pm

Re: Css Part 2

Post by Page »

It's easy to add them, it just requires that they get created and I'm not known for my artistic skill ;)
Freon22
Beginner Spam Artist
Posts: 3278
Joined: Wed Apr 17, 2002 10:09 pm
Location: USA
Contact:

Re: Css Part 2

Post by Freon22 »

I don't know Page you've done a good job in beta so your artistic skills is A-Ok.

Thanks N.ator I am wanting the layout in this tutorial to look good. But its not the main thing, I know that some of the players in the game could come up with some really cool looking color layouts. I think the only reason we have not seen any is because they just don't know css and don't know how to find the tags that needs to be changed. At the end of the tutorial we should have a semi-complete list of the tags that can be changed. I am having fun writing the tutorial and should have it complete with 6 parts maybe less.
Post Reply