Layouts, Patterns and Tutorials

Learn To Manage Your Own CSS

switpotato

Date: Sunday, 2008-11-30, 3:36 Am | Message # 1

Admin

Group: Admin

Messages: 690

Status: Offline

I made this tutorials when i was only a newbie in css/ coding
im so eager to share it and never updated it since then
but the content is still 100% applicable till now...

hope this tips will help .. incase friendster change some id or class
u wont go gaga and panic... why some / all codes aint working
view the source locate what they changed ..
replace ur old id or class..

ok this what i do in creating those tweak...

1. view the source of ordinary friendster page..

# stands for the id
. for class

2. pay attention with the bold fonts..

thats our ordinary css that we usually insert to css box
the one we generated using coubancouncil
we alter some of its properties using our xternal css file

eg:

Quote

.commonbox {border-width: 3px; border-color: #BC9A9A; border-style: solid; background-color: #000000}

we add

Quote

.commonbox {text-align:center!important; background-image: url();background-attachment: fixed;
background-repeat: repeat;background-position: center left;}

final result

Quote

.commonbox {border-width: 3px; border-color: #BC9A9A; border-style: solid;
background-color: #000000;text-align:center!important; background-image: url();
background-attachment: fixed;
background-repeat: repeat;background-position: center left;}

eg.2.

Quote

.usercontent a:link {color: #BC9A9A;}
.usercontent a:hover {color: #BC9A9A;}

if u will insert some link hover efex look what will happnd
i use this site for some efex
http://www.satanspace.com/basic/hover.php

Quote

filter:Glow(color=COLOR,strength=4);height:0px;
filter:Wave(strength=4);height:0px;

i just copy some properties and add

Quote

.usercontent a:link {color: #BC9A9A;filter:Glow(color=#33CCFF ,strength=4);height:0px; }
.usercontent a:hover {color: #BC9A9A;filter:Wave(strength=4);height:0px;}

result the upper is usercontent a:link the bottom is efex upon hover

If U Have Any Query
not related to LINKER issue..
Please Use Forum Board
Dont PM Me

switpotato

Date: Sunday, 2008-11-30, 3:37 Am | Message # 2

Admin

Group: Admin

Messages: 690

Status: Offline

3.browse down with ur viewed source...
take note of some bold fonts and color..
those wer xtra ids and class that we either apply tweaking or juz simply hide

eg:

Quote

#f_logo {display:none! important;}

again i use # for id
if some of the codes dont work try to insert !important

same procedure can b applied to the rest of the id and class..
add and omit juz xperiment with it...

4. for more property view the css of friendster located at the top...
again it wont harm u... xperiment.. with those one at a time...
BUT BE SURE U DOING IT USING UR XTERNaL FILE.... all u have to do with ur
dummy page is to refresh to view the result...

juz a small favor
if no one here posted new codes dont go gaga
and pls... for some gud hearted peepz out there just post if u
able to tweak or discover something
feel free to post ur codes ... no one will make fun of u not unless
someone really deliberately trying to discourage u... wink