CSS Cheat Sheet

Welcome to Chibiwolf. We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.

Join our community!

If you're already a member please log in to your account to access all of our features:

CSS Cheat Sheet
Topic Started: Apr 17 2008, 11:43 AM (57 Views)
DarkCannon	Apr 17 2008, 11:43 AM Post #1
Willy Wolf Posts: 568 Group: Moderators Member #3 Joined: March 3, 2008	This is a cheat sheet on how to make your own CSS template for a website. Code: html { overflow-x: hidden; overflow-y: auto; } ==> Make no changes to this line -------------------------------------------------------------------------------- form { display:inline; } ==> Make no changes to this line -------------------------------------------------------------------------------- img { vertical-align:middle; border:0px } ==> Make no changes to this line -------------------------------------------------------------------------------- BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; margin:0px 10px 0px 10px;background-color:#FFF } ==> Change the font of the text outside the forum tables ==> Change the font size of the text outside the forum tables ==> Change the color of the text outside the forum tables ==> Change the margins of the forums 1st is the top, 2nd is the left, 3rd is the bottom and 4th is the right ==> Change the background color of the forum. Could also substitute background-image: url(INSERT URL HERE) for a picture/graphic -------------------------------------------------------------------------------- TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; } ==> Change the font of the text inside the forum frames ==> Change the font size of the text inside the forum frames ==> Change the color of the text inside the forum frames -------------------------------------------------------------------------------- a:link, a:visited, a:active { text-decoration: underline; color: #000 } ==> Change how the text looks for the hyperlinks ==> Change the color of the hyperlinks -------------------------------------------------------------------------------- a:hover { color: #465584; text-decoration:underline } ==> Change the color of the text when the mouse moves over it ==> Changes how the text looks when the mouse moves over it -------------------------------------------------------------------------------- fieldset.search { padding:6px; line-height:150% } ==> Make no changes to this line -------------------------------------------------------------------------------- label { cursor:pointer; } ==> Changes the type of pointer used -------------------------------------------------------------------------------- img.attach { border:2px outset #EEF2F7;padding:2px } ==> Changes the border width of an image attachment (xPX) and the color of the border -------------------------------------------------------------------------------- .googleroot { padding:6px; line-height:130% } ==> Not used at this time -------------------------------------------------------------------------------- .googlechild { padding:6px; margin-left:30px; line-height:130% } ==> Not used at this time -------------------------------------------------------------------------------- .googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; } ==> Not used at this time -------------------------------------------------------------------------------- .googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; } ==> Not used at this time -------------------------------------------------------------------------------- .googlepagelinks { font-size:1.1em; letter-spacing:1px } ==> Not used at this time -------------------------------------------------------------------------------- .googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 } ==> Not used at this time -------------------------------------------------------------------------------- li.helprow { padding:0px; margin:0px 0px 10px 0px } ==> Not used at this time -------------------------------------------------------------------------------- ul#help { padding:0px 0px 0px 15px } ==> Not used at this time -------------------------------------------------------------------------------- option.cat { font-weight:bold; } ==> Not used at this time -------------------------------------------------------------------------------- option.sub { font-weight:bold;color:#555 } ==> Not used at this time -------------------------------------------------------------------------------- .caldate { text-align:right;font-weight:bold;font-size:11px;color:#777;background-color:#DFE6EF;padding:4px;margin:0px } ==> Changes the font size of the dates in the calendar ==> Changes the font color of the dates in the calendar ==> Changes the background behind the dates in the calendar. Can substitute background-image: URL(URL HERE) for a picture/graphic -------------------------------------------------------------------------------- .warngood { color:green } ==> Not used at this time -------------------------------------------------------------------------------- .warnbad { color:red } ==> Not used at this time -------------------------------------------------------------------------------- #padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px } ==> Not used at this time -------------------------------------------------------------------------------- #profilename { font-size:28px; font-weight:bold; } ==> Size of the font for the title of the Profile Box -------------------------------------------------------------------------------- #calendarname { font-size:22px; font-weight:bold; } ==> Size of the font for the title of the Calendar -------------------------------------------------------------------------------- #photowrap { padding:6px; } ==> Not used at this time -------------------------------------------------------------------------------- #phototitle { font-size:24px; border-bottom:1px solid black } ==> Font size for the personal photo text ==> border size and color for the personal photo -------------------------------------------------------------------------------- #photoimg { text-align:center; margin-top:15px } ==> Not used at this time -------------------------------------------------------------------------------- #ucpmenu { line-height:150%;width:22%; border:1px solid #345487;background-color: #F5F9FD } ==> Border size and color of the right hand side of the User Control Panel (my controls) ==> Background color of the right hand side of the User control Panel (can have a picture/graphic substituted) -------------------------------------------------------------------------------- #ucpmenu p { padding:2px 5px 6px 9px;margin:0px; } ==> Not used at this time -------------------------------------------------------------------------------- #ucpcontent { background-color: #F5F9FD; border:1px solid #345487;line-height:150%; width:auto } ==> Border size and color of the left hand side of the User Control Panel (my controls) ==> Background color of the left hand side of the User control Panel (can have a picture/graphic substituted) -------------------------------------------------------------------------------- #ucpcontent p { padding:10px;margin:0px; } ==> Not used at this time -------------------------------------------------------------------------------- #ipsbanner { position:absolute;top:1px;right:5%; } ==> Not used at this time -------------------------------------------------------------------------------- #logostrip { border:1px solid #345487;background-color: #3860BB;background-image:url(http://invisionfree.com:54/style_images/1/tile_back.gif);padding:0px;margin:0px; } ==> Border size and color of the box around the board logo ==> Background color of the box around the board logo (delete if using a image) ==> Background image of the box around the board logo (delete if using just colors) -------------------------------------------------------------------------------- #submenu { border:1px solid #BCD0ED;background-color: #DFE6EF;font-size:10px;margin:3px 0px 3px 0px;color:#3A4F6C;font-weight:bold;} ==> Border size and color of the submenu box ==> Background color of the submenu box (can substitute a graphic/image in its place) ==> Font size of the submenu box ==> margins of the submenu box ==> Text color of the submenu box -------------------------------------------------------------------------------- #submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #3A4F6C; } ==> Changes the Font color of the links in the submenu box ==> Changes how the text looks when you mouse over the link ==> Changes the color of the links in the submenu box -------------------------------------------------------------------------------- #userlinks { border:1px solid #C2CFDF; background-color: #F0F5FA } ==> Changes the border and color of the user links bar ==> Changes the background color of the user links bar (can substitute a graphic/image for the color) -------------------------------------------------------------------------------- #navstrip { font-weight:bold;padding:6px 0px 6px 0px; } ==> Not used at this time -------------------------------------------------------------------------------- .activeuserstrip { background-color:#BCD0ED; padding:6px } ==> Changes the background color of the strips containing the calander, birthdays, and active users at the bottom of the main forum page (can substitute a picture/graphic) -------------------------------------------------------------------------------- .pformstrip { background-color: #D1DCEB; color:#3A4F6C;font-weight:bold;padding:7px;margin-top:1px } ==> Changes the background for the header rows in the user menu screen and the bottom of the main page ==> Changes the text color for the header rows in the user menu screen and the bottom of the main page -------------------------------------------------------------------------------- .pformleft { background-color: #F5F9FD; padding:6px; margin-top:1px;width:25%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; } ==> Changes the background color of the left side of the new post/reply page ==> Changes the border colors of the left side borders on the new post/reply page -------------------------------------------------------------------------------- .pformleftw { background-color: #F5F9FD; padding:6px; margin-top:1px;width:40%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; } ==> Changes the background color of the left side of the new post/reply page ==> Changes the border colors of the left side borders on the new post/reply page -------------------------------------------------------------------------------- .pformright { background-color: #F5F9FD; padding:6px; margin-top:1px;border-top:1px solid #C2CFDF; } ==> Changes the background color of the right side of the new post/reply page ==> Changes the border colors of the right side borders on the new post/reply page -------------------------------------------------------------------------------- .post1 { background-color: #F5F9FD } ==> Changes the background color of the even number posts -------------------------------------------------------------------------------- .post2 { background-color: #EEF2F7 } ==> Changes the background color of the odd number posts -------------------------------------------------------------------------------- .postlinksbar { background-color:#D1DCEB;padding:7px;margin-top:1px;font-size:10px; background-image: url(http://invisionfree.com:54/style_images/1/tile_sub.gif) } ==> Changes the font size in the board below the post name in the post view ==> Changes the color/image of the bar below the post name in the post view (if only color in this area remove the background image and if adding a picture/graphic remove the background-color) -------------------------------------------------------------------------------- .row1 { background-color: #F5F9FD } ==> Changes the background color of the Left hand side of the user profiles. -------------------------------------------------------------------------------- .row2 { background-color: #DFE6EF } ==> Changes the background color of the Right hand side of the main forums -------------------------------------------------------------------------------- .row3 { background-color: #EEF2F7 } ==> Changes the background color of the Right hand side of the user profiles. -------------------------------------------------------------------------------- .row4 { background-color: #E4EAF2 } ==> Changes the background color of the Left hand side of the main forums -------------------------------------------------------------------------------- .darkrow1 { background-color: #C2CFDF; color:#4C77B6; } ==> Changes the background color of the rows between posts, the bottom table in member list, empty spaces of the Calendar, and the bottom of the online list. ==> Changes the font color the bottom table in member list, empty spaces of the Calendar, and the bottom of the online list. -------------------------------------------------------------------------------- .darkrow2 { background-color: #BCD0ED; color:#3A4F6C; } ==> Changes the background color of the bottom of the main forums and the post list. ==> Changes the font color of the bottom of the main forums and the post list. -------------------------------------------------------------------------------- .darkrow3 { background-color: #D1DCEB; color:#3A4F6C; } ==> Changes the background color at the bottom of each post. ==> Changes the font color of the bottom at the bottom of each post. -------------------------------------------------------------------------------- .hlight { background-color: #DFE6EF } ==> Changes the background color of the even number private messages list. -------------------------------------------------------------------------------- .dlight { background-color: #EEF2F7 } ==> Changes the background color of the odd number private messages list. -------------------------------------------------------------------------------- .titlemedium { font-weight:bold; color:#3A4F6C; padding:7px; margin:0px; background-image: url(http://invisionfree.com:54/style_images/1/tile_sub.gif) } ==> Changes the text color in the forum rows which show the forum descriptions (forums, topics, replies, last post info). ==> Changes the text margins in the forum rows which show the forum descriptions (forums, topics, replies, last post info). ==> Changes the background of the the forum rows which show the forum descriptions (forums, topics, replies, last post info)... Can replace with background-color if you want a straight color. -------------------------------------------------------------------------------- .titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration: underline; color: #3A4F6C } ==> Changes the link decoration in the forum rows which show the forum descriptions (forums, topics, replies, last post info). ==> Changes the link colors in the forum rows which show the forum descriptions (forums, topics, replies, last post info). -------------------------------------------------------------------------------- .maintitle { vertical-align:middle;font-weight:bold; color:#FFF; letter-spacing:1px; padding:8px 0px 8px 5px; background-image: url(http://invisionfree.com:54/style_images/1/tile_back.gif) } ==> Changes the text color of the forum titles ==> Changes the background color of the forum titles (can have background-color substituted if just colors are desired) -------------------------------------------------------------------------------- .maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color: #FFF } ==> Changes the link decoration in the main forum titles ==> Changes the link color in the main forum titles -------------------------------------------------------------------------------- .maintitle a:hover { text-decoration: underline } ==> Changes the hover decoration of the links in the main forum titles -------------------------------------------------------------------------------- .plainborder { border:1px solid #345487;background-color:#F5F9FD } ==> Changes the color of the borders on the forums if pictures are not displayed ==> Changes the background of rows and tables if the gradient/pictures are not displayed -------------------------------------------------------------------------------- .tableborder { border:1px solid #345487;background-color:#FFF; padding:0px; margin:0px; width:100% } ==> Changes the outside borders of all the tables on the forum except for the user control panel, and new post/reply screens ==> Changes the inside borders of all the tables on the forum except for the user control panel, and new post/reply screens -------------------------------------------------------------------------------- .tablefill { border:1px solid #345487;background-color:#F5F9FD;padding:6px; } ==> Changes the border color of the smiley box on the new post/reply screen ==> Changes the background color of the smiley box on the new post/reply screen -------------------------------------------------------------------------------- .tablepad { background-color:#F5F9FD;padding:6px } ==> Changes the background color of the help files, and all redirect boxes (areas in the red) -------------------------------------------------------------------------------- .tablebasic { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px } ==> Can add "; color: COLOR CODE" to the end of this code to change the text color of the address card for a user ==> Can add "; background-color: COLOR CODE" to the end of this code to change the text color of the address card for a user -------------------------------------------------------------------------------- .wrapmini { float:left;line-height:1.5em;width:25% } ==> Not used at this time -------------------------------------------------------------------------------- .pagelinks { float:left;line-height:1.2em;width:35% } ==> Not used at this time -------------------------------------------------------------------------------- .desc { font-size:10px; color:#434951 } ==> Changes the font size of the forum descriptions ==> Changes the font color of the forum descriptions -------------------------------------------------------------------------------- .edit { font-size: 9px } ==> Changes the font size of the edited by line placed in the user posts after they are edited ==> Can add "; color: COLOR CODE" to the end of this code to change the text color of the edited by line placed in the user posts after they are edited -------------------------------------------------------------------------------- .signature { font-size: 10px; color: #339 } ==> Changes the text size of the users signature line ==> Changes the font color of the users signature line -------------------------------------------------------------------------------- .postdetails { font-size: 10px } ==> Changes the size of the time stamp of the posts and the user information on the left hand of each post ==> can add "; color: COLOR CODE" to this line to change the time stamp of the posts and the user information on the left hand of each post -------------------------------------------------------------------------------- .postcolor { font-size: 12px; line-height: 160% } ==> Changes the font size of the users posts ==> Can add "; color: color code" to this line to change the color of the users posts -------------------------------------------------------------------------------- .normalname { font-size: 12px; font-weight: bold; color: #003 } ==> Changes the font size of a users name in the post pages -------------------------------------------------------------------------------- .normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px } ==> Changes the link size of a users name in the post pages -------------------------------------------------------------------------------- .unreg { font-size: 11px; font-weight: bold; color: #900 } ==> Not used at this time -------------------------------------------------------------------------------- .searchlite { font-weight:bold; color:#F00; background-color:#FF0 } ==> Not used at this time -------------------------------------------------------------------------------- #QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px } ==> Changes the font inside the quote box in user posts ==> Changes the font size inside the quote box in user posts ==> Changes the font color inside the quote box in user posts ==> Changes the background color inside the quote box in user posts ==> Changes the border of the quote box in user posts -------------------------------------------------------------------------------- #CODE { font-family: Courier, Courier New, Verdana, Arial; font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px } ==> Changes the font inside the code box in user posts ==> Changes the font size inside the code box in user posts ==> Changes the font color inside the code box in user posts ==> Changes the background color inside the code box in user posts ==> Changes the border of the code box in user posts -------------------------------------------------------------------------------- .copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px } ==> Not used on InvisionFree Boards at this time -------------------------------------------------------------------------------- .codebuttons { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle } ==> Changes the font size of the BB buttons on the new/reply post page ==> Changes the font type of the BB buttons on the new/reply post page ==> Can add "; color: COLOR CODE" to the end of this code to change the text color of the BB buttons on the new/reply post page ==> Can add "; background-color: COLOR CODE" to the end of this code to change the text color of the BB buttons on the new/reply post page -------------------------------------------------------------------------------- .forminput, .textinput, .radiobutton, .checkbox { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle } ==> Changes the font size of the buttons, text input box, radio buttons and check boxes ==> Changes the font type of the buttons, text input box, radio buttons and check boxes ==> Can add "; color: COLOR CODE" to the end of this code to change the text color of the buttons, text input box, radio buttons and check boxes ==> Can add "; background-color: COLOR CODE" to the end of this code to change the text color of the buttons, text input box, radio buttons and check boxes -------------------------------------------------------------------------------- .thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #FFF;border-bottom:1px solid #FFF } ==> Changes the color of the lines in the active users area on the main page -------------------------------------------------------------------------------- .purple { color:purple;font-weight:bold } ==> Not used at this time -------------------------------------------------------------------------------- .red { color:red;font-weight:bold } ==> Not used at this time -------------------------------------------------------------------------------- .green { color:green;font-weight:bold } ==> Not used at this time -------------------------------------------------------------------------------- .blue { color:blue;font-weight:bold } ==> Not used at this time -------------------------------------------------------------------------------- .orange { color:#F90;font-weight:bold } ==> Not used at this time -------------------------------------------------------------------------------- From IF skin Zone
	[size=14]I AM A BUNNY! FEAR ME! I SHALL NIBBLE ON YOUR CARROTS! RAWR![/size]


<span style=salamander	Apr 17 2008, 11:53 AM Post #2
Petty Possum Posts: 406 Group: Members Member #6 Joined: March 6, 2008	IF sin zone has everything. I used this to make one but i suck.
	A word a word, A life for a word. Damn those romans were stupid!


Chibi	Apr 28 2008, 03:31 PM Post #3
Shmell mah finger Posts: 1,280 Group: Admins Member #1 Joined: February 28, 2008	F*** IT MAN! I have spent to much time making one. Im done with it. I made 4 of them and thats good enough.
	"I'd kill the Jews." -glare- "I'd not kill the Jews, no. I'd toss in a penny and watch them fight to the death. -snickering- I did the same with two Catholic priests but I tossed in a small boy!! And the winner, had to fight Michael Jackson!"%mh%-100%mh%


DarkCannon	Apr 29 2008, 03:00 PM Post #4
Willy Wolf Posts: 568 Group: Moderators Member #3 Joined: March 3, 2008	Well it takes time. Some people make only 1 in there life. You have 4 but you nrever even documented them in IF Skin Zone.
	[size=14]I AM A BUNNY! FEAR ME! I SHALL NIBBLE ON YOUR CARROTS! RAWR![/size]


Chibi	Apr 29 2008, 03:10 PM Post #5
Shmell mah finger Posts: 1,280 Group: Admins Member #1 Joined: February 28, 2008	Well i never use my account. Its back when i was called "Evil Pikachu."
	"I'd kill the Jews." -glare- "I'd not kill the Jews, no. I'd toss in a penny and watch them fight to the death. -snickering- I did the same with two Catholic priests but I tossed in a small boy!! And the winner, had to fight Michael Jackson!"%mh%-100%mh%


MusicUploader	Apr 30 2008, 06:58 PM Post #6
The Ownager Posts: 193 Group: Moderators Member #16 Joined: April 15, 2008	lol CSS is not even the hardest template to make i use to have one but i thought i would keep it simple went with a html one on my site but if you want to challenge urself try a flash template (swf + fla docs)
	I Loved Her So Much I Saw A Chance And Missed It Now Im Broken ┏┫　　\|　\|　　 ┣┓　　┏┓　 ┗┫━━　┃　━━┣┛　　┣┫　　┃　━━━━━　┃　┏┳┫┣┳┓　　┗━━┳━┳━━┛　┃　　　　┃　 ━━━━┃　┃　　　　┗━┳┳━┛ ━━━━┃　┗━━━━━━┛┃


MusicUploader	Apr 30 2008, 06:59 PM Post #7
The Ownager Posts: 193 Group: Moderators Member #16 Joined: April 15, 2008	lol CSS is not even the hardest template to make i use to have one but i thought i would keep it simple went with a html one on my site but if you want to challenge urself try a flash template (swf + fla docs)
	I Loved Her So Much I Saw A Chance And Missed It Now Im Broken ┏┫　　\|　\|　　 ┣┓　　┏┓　 ┗┫━━　┃　━━┣┛　　┣┫　　┃　━━━━━　┃　┏┳┫┣┳┓　　┗━━┳━┳━━┛　┃　　　　┃　 ━━━━┃　┃　　　　┗━┳┳━┛ ━━━━┃　┗━━━━━━┛┃


Chibi	May 2 2008, 08:41 AM Post #8
Shmell mah finger Posts: 1,280 Group: Admins Member #1 Joined: February 28, 2008	Um........no thanks
	"I'd kill the Jews." -glare- "I'd not kill the Jews, no. I'd toss in a penny and watch them fight to the death. -snickering- I did the same with two Catholic priests but I tossed in a small boy!! And the winner, had to fight Michael Jackson!"%mh%-100%mh%


<span style=axiom	Jul 4 2008, 12:38 PM Post #9
Stone Skipper Posts: 25 Group: Members Member #59 Joined: July 4, 2008	This is helpful to those who have never created a style sheet. I have made a few myself.
	CG Consulting IT Solutions http://crgriffin.com


<span style=Victor	Jul 6 2008, 08:02 PM Post #10
Stone Skipper Posts: 22 Group: Members Member #62 Joined: July 6, 2008	so what do i do with it?



Chibi	Jul 6 2008, 09:46 PM Post #11
Shmell mah finger Posts: 1,280 Group: Admins Member #1 Joined: February 28, 2008	Edit all of the spots using HEX color codes.
	"I'd kill the Jews." -glare- "I'd not kill the Jews, no. I'd toss in a penny and watch them fight to the death. -snickering- I did the same with two Catholic priests but I tossed in a small boy!! And the winner, had to fight Michael Jackson!"%mh%-100%mh%


<span style=ric161220	Jul 12 2008, 09:55 AM Post #12
Stone Skipper Posts: 15 Group: Members Member #64 Joined: July 12, 2008	I've just learned the basics of CSS so i think I may use this and see where it takes me. Thanks in advance.
	http://www.funkyandfree.co.uk - it's a freebies forum, and it's well funky!


« Previous Topic · Computer Talk · Next Topic »