Additional CSS codes for Skem Layouts

Skem9 Website Tutorials | Submited Nov 19, 2007

Written by: SB Designs

Contact buttons:

to move the buttons around add position:absolute; top:##px; left:##px; to each button in between the { } symbols. Change the ## symbols to accommodate your needs.



This is the code you will need to replace and/or move the contact buttons. (code is courtesy of Emmi (http://skem9.com/~150692). thanks girly for sharing this code on your profile. You rawk !!)

.Notes {replaces 3 contact buttons}

.contactTable {float:left;}

#ContactTable a img {float:left;margin: 20px 0 0 54px;display:none;}

a.add2buds
{display:block; width:130px; height:54px; background:url(http://skem9.com/images/Buddy_Up.jpg); background-repeat: no-repeat;}
a.blockbud
{display:block; width:130px; height:54px; background:url(http://skem9.com/images/block_me.gif ); background-repeat: no-repeat;}
a.messagebud
{display:block; width:130px; height:54px; background:url(http://skem9.com/images/MessageMe.jpg); background-repeat: no-repeat;}

Background images:

to make any background image not move place background-attachment:fixed; before the ending } symbol.



to repeat images:

repeat-x will make an image repeat horizontally only



repeat-y will make an image repeat vertically only



no-repeat will make an image not repeat at all



to add an image as a background to an area that doesn't have one add background:#000 url(url to pic here);

background-position:top center; background-repeat:no-repeat; in between the { } symbols. Change to values position

and/or repeat desired image



to make a background clear or see thru replace the color code (#000 for example) with the word transparent.






Scroll-Bars:



add the following code before the ending } symbol of the scrolling section (or body tag for entire layout) and change the colors to match your layout.

scrollbar-face-color:#fff;
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-shadow-color:#000;
scrollbar-darkshadow-color:#000;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;

to make a section scroll add height:###px; overflow:auto; inbetween the { } symbols of the area you

want to have scroll. Change the ## signs to desired height.




Miscellaneous Codes:

*
* to "hide" any area add display:none; in between the { } symbols.
*
* to move any section around add position:absolute; margin-top:##px; margin-left:##px; in between the { }
* symbols and change ## to accommodate your needs. you can remove either margin code if you only want to
* move it up/down or left/right.
*
* to change the color of text in any area that does NOT already have a color:#AAAAAA; code then just add it and
* change the AAAAAA to the color code you want the text to be.
*






Borders


to place a border around any section add border:color style ##px; inbetween the { and } tags of the section

you want.



Layout Tag

if you want to add a tag to your layouts so that you know who made them then add background:transparent url(url to small tag here ) right no-repeat; to the .linkBar {margin: 5px; line-height:25px; } code




CSS Elements


here are several CSS elements that you might recognize and the attributes that can be assigned to them. Quite often when you use one that is invalid for the element the browser will get confused and ignore it. the browser will then use the default settings for the layout.




Property Name


Value Name

font-style


normal
italic
oblique


font-variant


small-caps
normal

font-weight


normal
lighter
bold
bolder


font-size


smaller
larger
xx-small
x-small
small
medium
large
x-large
xx-large
*number*pt
*number*em
*number*px

color


HEX code
color name


word-spacing


normal
*number*px

line-height


normal
*number*px
*percentage*


letter-spacing


normal
*number*px

text-decoration


none
underline
overline
line-through
blink *not supported by IE*


text-transform


none
capitalize
uppercase
lowercase

text-align


left
center
right
justify


text-indent


*number*pt
*number*em
*number*px

direction


ltr
rtl


white-space


pre
nowrap

position


absolute
relative
static
fixed


top


*number*pt
*number*em
*number*px
*percentage*

left


*number*pt
*number*em
*number*px
*percentage*


bottom


*number*pt
*number*em
*number*px
*percentage*

right


*number*pt
*number*em
*number*px
*percentage*


overflow


visible
auto
none
scroll
hidden

width


auto
*number*em
*number*px
*percentage*


height


auto
*number*em
*number*px

visibility


visible
inherit
hide
hidden
show


cursor


auto
crosshair
hand
pointer
move
n-resize
ne-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
text
wait
help

padding
border-width
margin


*in order you can change the padding, border and margin on every side by the following pattern in px's, em's and percentages*
top right bottom left


border-color


HEX color code
color name
transparent
inherit

border-style


solid
dashed
dotted
double
groove
ridge
inset
outset
none


border-width


*number*px
*number*em
*percentage*

background-image


none
url("url_to_image")


background-repeat


no-repeat
repeat
repeat-x
repeat-y

background-attachment


fixed
scroll


background-position


top
center
right
bottom
left
*percentage*

background-color


HEX color code
color name
transparent


display


block
inline
list-item
table
table-cell
table-row
none

clear


left
right
none
both


float


left
right
none