AKO : Si spraviť vlastné css,-ko ? (návod all in one)

Ako si spraviť vlastné css,-ko ? (návod all in one)
V týchto dvoch návodoch sa dočítate ako si
spraviť vlastné css,-ko od zmeny pozadia, cez zmenu menu až po zmenenie birdz loga...

Dúfam že sa vám bude môj blog páčiť, ENJOY IT (-:

Pustíme si nejakú dobrú hudbu a môžme začať



Tak začneme od tých najzákladnejších...


Ako si zmeniť pozadie a pozadie webky.


Ak si chceš dať ako pozadie iba farbu (kód na tvoju obľúbenú farbu zistíš
TU) :

BODY {background-color tu daj html color kód;}

A ak si chceš dať nejaký obrázok ako background :

BODY {background: url("tu napíš url adresu obrázka ktorý si chceš dať ako background (pozadie) ktorý si dal na nejaký image hosting server (napr.: ja používam imageshack.com)") 0px 0px;}

Ak chceš aby sa pri scrollovaní nehýbaly daj po 0px fixed :

BODY {background: url("tu napíš url adresu obrázka ktorý si chceš dať ako background (pozadie) ktorý si dal na nejaký image hosting server (napr.: ja používam imageshack.com)") 0px 0px;}



Ako si zmeniť pozadie webky ?

Postupujeme rovnako ako pri pozadí :

Iba farba :

#mojawebka {background-color:color code;}

Obrázok :

#mojawebka {background: url("url adress");}

a ak chceš aby bolo pozadie webky priesvitné :

#mojawebka {background: transparent;}

Ako si zmeniť písmo na webke :

#mojawebka {color xxxxxx;font: Xpx "tu napíš font (typ písma) aký chceš použiť",aj tu znova napíš font písma aký chceš použiť;}

color = farba (color code (vyššie)
Xpx = veľkosť písma v pixeloch (namiesto X napíš číslo (veľkosť)
font = typ písma (just google it )

Ako si zmeniť nadpisy na webke ?

.moje h3 {font-family: (tu napíš typ písma (fontu);font-size: Xpx;text-align: left;background: #(farba pozadia, ak ho tam nechceš napíš TRANSPARENT);color: #FFFFFF;border: (veľkosť rámčeku, ako ho tam nechceš napíš NONE)Xpx double (farba rámčeku, ako ho tam nechceš napíš TRANSPARENT)#color code;}


Ako zmeniť rámček okolo webky :


#mojawebka {border: Xpx sem napíš štýl rámčeku #xxxxxx;}

Štýly rámčekov :

-dotted
-dashed
-groove"
-ridge
-inset
-outset

Pozadie pod avatarom :

Ak chceš mať ako pozadie pod avatarom obrázok :

.avatar {background-image: url("url adress (napr.: z imageshack.com)");}

Alebo farbu :

.avatar {background-color: #color code;background-image: none;}

Alebo ak tam nechceš pozadie :

.avatar {background-image: none;}


Nadpisy :

Ak čítate od začiatku, tak nieje čo vysvetlovať :

#mojawebka h2.obtek {color: #color code;font-family: font/typ písma;}

#mojawebka h2 {color: #color code;font-family: font/typ písma;}

To čo už vieme, nebudem rozpisovať a vysvetlovať (nechce sa mi písať )

Online podľa abecedy :

.ktoonline {
color: #color code !important;}

.ktoonline a {
color: #color code !important;}

Alebo priesvitné :

.ktoonline {
color: transparent !important;}

.ktoonline a {
color: transparent !important;}

Tajné číslo :

/*tajne cislo*/
.transparent {
color color code;}

Ak chceme aby bolo o rámčekované :

border: Xpx (typ) #color code

A ak chceme aby tam nebolo :

/*tajne cislo*/
.transparent {
color:none;}


Pranostiky/dátum :

.novydatum {font: typ Xpx typ fontu;color colorcode;}

Alebo ak nechceme strihať z monitora (proste aby išlo het

.novydatum {display:none;}


Pozadie about me (výška, vek, váha, atď...)

#mojetelo td, .mojstav, .skinnavyber {
background-color color code pozadia;
border: Xpx #color code typ orámčekovania;
color: #color code rámčeka;}


Ak chceme aby zmizla tzv. pätička :

#novyfooter {display:none;}
#dcopyright{display:none;}



Pozadie komentárov :

#mojawebka .novykoment {color color code;background: #color code;border: Xpx type border #color code;}



Pozadie fotoalbumov

.album {background-color: #color code;border: xpx typ rámika #color code;}


Linky (nie kuchynské , ale odkazy, resp. to čo máte v ľavom menu) :

#mojawebka a {color color code;font: Xpx "typ fontu (písma)",typ fontu;}
#mojawebka a:hover {color color code;font: Xpx "typ fontu (písma)",typ fontu;}


"Birdz webky" :

#hlavicka #birdzlista h1 {font px font/typ písma ;color color code;}

Alebo ak chceme aby to zmozlo :p

#hlavicka #birdzlista h1 {display:none;}


Nick :


#mojahlavicka a.webkovynick {font:typ fontu (písma) Xpx typ fontu (písma);color color code;}

Aneb (všetci vieme o čom to je :

#mojahlavicka a.webkovynick {display: none;}


Pozadie komentov (premýšľam či sa tam dá dať aj obrázok..., neskôr doplním :

textarea#clanok {
background-color: #color code;
color: #color code - rám;}

.novykoment textarea {
background-color: #color code !important;
color: #color code - rámček !important;}

Alebo :

textarea#clanok {
background-color: transparent;
color: #transparent;}

textarea#textarea {
background-color: transparent;
color: #transparent;}


Tlačítka (add to friends, become a fan, vysvedčenie)

Obrázok ako background tlačítka :

#mojahlavicka button.buttonik {background-image:tu dáte url obrázka;
background-color: none ;border: Xpx typ rámčeku #color code !important;}

button.buttonik b {font: none 0px none !important;color: #transparent;}

Iba farba, vlastne písmo a rámček :

#mojahlavicka button.buttonik {background-image:none;background-color: #color code;
border: Xpx solid #color code !important;}

button.buttonik b {font: typ fontu (písma) Xpx typ fontu (písma) !important;
color: #color code;}

Alebo všetko preč :

#mojahlavicka button.buttonik {background-image:none;background-color: transparent;
border: 0px none transparent !important;}

button.buttonik b {font: none 0px none !important;
color: transparent;}


Kamaráti (rámik) :

.results {border-top: Xpx typ rámčeku #color code;}
#mojawebka .novauputavka img, #mojawebka .results li a img {border: Xpx Typ rámčeku #color code;}
.priatelko a img.vpr {border: Xpx typ rámčeku #color code;}


Pásiky v ľavom menu :

.vlavom {border-top: typ rámčeku #color code;}

Alebo orámčekovať celé a aj s backroundom :

.vlavom {background-color color code; typ rámčeku: Xpx #color code typ rámčeku; color: #color code;}

or url


Nadpisy v ľavom menu :


h3 {font-family: Trebuchet MS !important;
font-size: Xpx;text-align: zarovnenie left/center/right;
background: #color code;color: #color code;
border: Xpx typ rámčeku #color code;}


Ako si dať iné logo alebo ho zrušiť :


#hlavickalogo {background-color: none;}

#hlavickalogo {background-color: url: url adress;}


Ako zrušiť status area :


#novystav {display: none !important}

...taktiež si tam môžte dať niečo iné...

#novystav {background: url( » cdn.solidfiles.net//i/f86f.jpg);... }


Ako zmeniť bublinu čo vyskakuje pri nájazde myškou na meno usera (uživateľa) :

#bublina {overflow: hidden; height: Xpx;}
.bublina {background: url(URL ADRESS) top left/center/right}



Hodnotenie/rating blogov (hviezdičky) :

#hviezdicky {background: url("url adress");}


Úprava menu :

#menu {background-image: url("url adress")}

Ako zrušiť birdz lištu :

#birdzlista h1 {display:none;}
or url adress...



--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------

Takže to je odomňa všetko, dúfam že ste vydržali a dúfam že vám môj blog pomohol a že sa vám páči....

Odmenou je pekné a hlavne vlastne css,-ko...
....a aj táto skladba



Sincirelly scourgeinspiration...
Have a nice day ☺

--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------

Rating poteší

By Sourge Inspiration

--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------



POZRI AJ INÉ BLOGY OD TOHTO UŽIVATEĽA !



--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------

 Blog

5 0 0 0 0

Komentuj

8 komentov k blogu