Din dorinta de a va ajuta cu cateva coduri foarte utilizate si populare,sa incepem:
1.Codul css de fundal(este acelasi ca toate versiunile)
Pe baza unei imagini:
1.2.Background pe baza unei culori.
1.3.Background pe baza comuna culoare si imagine.
2.Latimea forumului.
2.1.Latimea forumului cu border.
2.2. Latimea forumului cu border,colturi rotunde si background
3.Header,de aici nu voi mai da exemple de background,border-etc.voi posta la sfarsitul tutorialului coduri de latime,border etc
4.Modificarea meniului
5.Modificarea link-urilor din meniu
6.Navigare in interiorul forumului
7.Titlu si fundal al categoriilor la index_box
8.Modificarea tabelelor
9.Cine este online
10.Legenda imaginilor de mesaje,mesaje noi,blocat
11.Modificare link-uri din forum
Cam atat pentru moment,majoritatea modificarilor ce vor urma sunt cu ajutorul templateurilor,acum voi posta coduri css pentru personalizarea lor.
1.background,background-color,background: #culoare url(imagine) - reprezinta fundalul
2.Border - este linia ce inconjoara un background su orice altceva dat de dvs
3.width: 800px; - latimea in pixeli.
4.width: 80%; latimea in functie de 100%(full)
5.height: 800px sau 80% - reprezinta latimea
6.padding: 5px; - reprezinta un spatiu invizibil
ex:
7.text-shadow: 0px 0px 2px white; -umbra la text alba
8.box-shadow: 0px 0px 2px black; -umbra la un tabel,div etc
9.text-decoration: none!important; elimina lina de sub un link
10: hover - atunci cand treceti cu mouse-ul peste un tabel sau link el se schimba
exemplu
1.Codul css de fundal(este acelasi ca toate versiunile)
Pe baza unei imagini:
Cod:
body{
background-image: url(link imagine);
1.2.Background pe baza unei culori.
Cod:
body{
background-color: #culoare;}
1.3.Background pe baza comuna culoare si imagine.
Cod:
body{
background: #culoare url(link imagine);}
2.Latimea forumului.
Cod:
.pun {
width: 800px;}
2.1.Latimea forumului cu border.
Cod:
.pun {
width: 800px;
border: 1px solid #000;}2.2. Latimea forumului cu border,colturi rotunde si background
Cod:
.pun {
width: 800px;
border: 1px solid #000;
border-radius: 5px;
webkit-border-radius: 5px;
moz-border-radius: 5px;
background: #222;}3.Header,de aici nu voi mai da exemple de background,border-etc.voi posta la sfarsitul tutorialului coduri de latime,border etc
Cod:
#pun-intro {
background-color: #296FA5;
background-image: url('http://2img.net/i/fa/empty.gif');
background-repeat: repeat-x;
border-bottom: 1px solid #296FA5;
margin: 0px;
padding: 1.5em 1em 1em;
text-align: left;
}4.Modificarea meniului
Cod:
#pun-head #pun-navlinks {
background-color: #18405E;
border-color: #DDD;
padding: 0.5em 1.1em 0.6em;
}5.Modificarea link-urilor din meniu
Cod:
a.mainmenu{
color: white!important;
text-decoration: none!important;
text-shadow: 0px 0px 2px black;6.Navigare in interiorul forumului
Cod:
.pun-crumbs {
coduri css;}7.Titlu si fundal al categoriilor la index_box
Cod:
.main .main-head {
background-color: #1F537B;
color: #DEDFDF;
font-weight: 400;
padding: 0.7em 1.3em;
}8.Modificarea tabelelor
Cod:
.pun table.table td {
background-color: #FBFBFB;
border-color: #DDD;
border-style: solid none none solid;
border-width: 1px;
line-height: 130%;
padding: 0.6em 0px 0.7em;
}
9.Cine este online
Cod:
#onlinelist {
background-color: #F4F4F4;
border-top: 1px dashed #CCC;
padding: 0.6em 1em;
}10.Legenda imaginilor de mesaje,mesaje noi,blocat
Cod:
ul#pun-legend, ul.pun-legend {
list-style-type: none;
margin-bottom: 20px;
text-align: center;
}11.Modificare link-uri din forum
Cod:
a:link{
color: blue;
text-decoration: none;}Cod:
a:hover{
color: black;}Cam atat pentru moment,majoritatea modificarilor ce vor urma sunt cu ajutorul templateurilor,acum voi posta coduri css pentru personalizarea lor.
1.background,background-color,background: #culoare url(imagine) - reprezinta fundalul
2.Border - este linia ce inconjoara un background su orice altceva dat de dvs
3.width: 800px; - latimea in pixeli.
4.width: 80%; latimea in functie de 100%(full)
5.height: 800px sau 80% - reprezinta latimea
6.padding: 5px; - reprezinta un spatiu invizibil
ex:
fara padding
cu padding 5px;
7.text-shadow: 0px 0px 2px white; -umbra la text alba
8.box-shadow: 0px 0px 2px black; -umbra la un tabel,div etc
9.text-decoration: none!important; elimina lina de sub un link
10: hover - atunci cand treceti cu mouse-ul peste un tabel sau link el se schimba
exemplu
fara hover
cu hover