Personalizarea forumului in versiunea phpBB3

Coduri css pentru personalizarea forumului in versiunea phpbb3

CSS pentru personalizarea antetului(header-ului):

Cod:

.headerbar {
background-color: transparent;
background-image: url('LINK IMAGINE');
height: 170px;
background-position: top;
background-repeat: no-repeat;
}

Informatii:

Spoiler:

background-color=culoarea de fundal a antetului
background-image=imaginea de fundal a antetului
height=inaltimea antetului
background-position=pozitia fundalului(Alte pozitii posibile)
background-repeat=repetarea fundalului antetului(reapet pentru repetare si no-repeat pentru a nu se repeta)

---

Personalizarea fundalului forumului:

Cod:

body { 
background-color: #FFFFFF;
background-Image: url('LINK IMAGINE');
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center;
}

Informatii:

Spoiler:

background-color=culoarea de fundal
background-image=imaginea de fundal
background-repeat=repetarea fundalului(reapet pentru repetare si no-repeat pentru a nu se repeta)
background-attachment=atasarea fundalului(fixed pentru a o fixa si scroll pentru ca imaginea de fundal sa defileze odata cu restul paginii)
background-position=pozitia fundalului(Alte pozitii posibile)

---

Imaginea de fundal din interiorul cadrului forumului:

Cod:

#wrap {
background-attachment: fixed;
background-image: url('LINK IMAGINE');
background-repeat: repeat;
background-position: top center;
}

Informatii:

Spoiler:

background-attachment=atasarea fundalului(fixed pentru a o fixa si scroll pentru ca imaginea de fundal sa defileze odata cu restul paginii)
background-repeat=repetarea fundalului(reapet pentru repetare si no-repeat pentru a nu se repeta)
background-position=pozitia fundalului(Alte pozitii posibile)

---

Imagine de fundal la meniu(doar la meniu!):

Cod:

div#page-header div.navbar {
background-image: url('LINK IMAGINE');}


---

Transformarea meniului intr-un meniu dinamic(functioneaza doar daca aveti imagini in meniu):

Cod:

ul.linklist li a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 0.5;}

ul.linklist li a img:hover {
filter:alpha(opacity=100); 
-moz-opacity: 0.85; 
opacity: 1.0;
position: relative;
top: -2px;}

Informatii:

Spoiler:

ul.linklist li a img=imaginile inainte de a face contact cu cursorul
ul.linklist li a img:hover=imaginile dupa ce au facut contact cu cursorul
opacity=opacitate
ul.linklist li a img:hover=>top=nivelul de deplasare al imaginei la contactul cu cursorul

Acest cod nu functioneaza la Internet Explorer!

---

Personalizarea casutei de cautare:

Cod:

#search-box #keywords {
width: 95px;
background-color: #ffffff;
}

input.search {
background-image: url('http://illiweb.com/fa/prosilver/icon_textbox_search.gif');
background-repeat: no-repeat;
background-position: left 1px;
padding-left: 17px;
}

Informatii:

Spoiler:

#search-box #keywords:
width=latimea casutei de cuvinte cheie
background-color=imaginea de fundal a casutei de cuvinte cheie

input.search:
background-image=imaginea ce reprezinta lupa din casuta de cuvinte cheie
padding-left=spatiul in care se afla lupa din casuta de cuvinte cheie

---

Ascunderea casutei de cautare:

Cod:

#search{
display:none;
}

---

CSS pentru personalizarea mesajului de pe pagina de start:

Cod:

.introduction {
background-image: url('LINK IMAGINE');
background-repeat: repeat;
background-position: top center;
background-color: #ffffff;
color: #000000;}

.introduction .h3 {
background-image: url("LINK IMAGINE");
background-repeat: repeat;
background-position: top center;
background-color: #ffffff;
color: #000000;
padding: 5px;
border-bottom: 0px solid #000000;
}

Informatii

Spoiler:

.introduction(structura mesajului)
background-image=Imaginea de fundal.Daca faceti in asa fel incat sa nu se repete si pastrati pozitia fundalului, ii puteti pune fundal la titlu(care sa acopere inclusiv colturile mesajului)
background-repeat=repetarea fundalului (reapet pentru repetare si no-repeat pentru a nu se repeta)
background-position=pozitia fundalului(Alte pozitii posibile)
background-color=culoarea de fundal a mesajului de pe pagina de start
color=culoarea textului din mesajul de pe pagina de start

.introduction .h3(titlul mesajului)
background-image=Imaginea de fundal(aceasta nu atinge colturile mesajului)
background-repeat=repetarea fundalului(reapet pentru repetare si no-repeat pentru a nu se repeta)
background-position=pozitia fundalului(Alte pozitii posibile)
background-color=culoarea de fundal a titlului
color=culoarea titlului
padding=inaltimea spatiului destinat titlului
border-bottom=linia ce desparte titlul de restul mesajului(am selectat 0px,deci nu o sa apara).Puteti modifica culoarea ei tot de aici.[/b]

---

CSS pentru ascunderea Ultima vizita a fost Joi 16 Iul 2009 - 13:56 , Mesaje noi , Mesajele proprii , Mesaje la care nu s-a raspuns , Marcheaza toate forumurile ca fiind citite:

Cod:

.linklist {
display:none !important;}

.right, .rightside {
display:none !important;}

dd.lastpost span, ul.topiclist dd.searchby span, ul.topiclist dd.info span, ul.topiclist dd.time span, dd.redirect span,

dd.moderation span {display:none !important;}

---

Imagine de fundal la tabele:

Cod:

li.row {background-image: url('LINK IMAGINE');}

---

Hover la tabele:

Cod:

li.row:hover {
background: url('LINK IMAGINE');
background-position: center;
background-repeat: no-repeat;}

Informatii:

Spoiler:

background-position=pozitia fundalului(Alte pozitii posibile)
background-repeat=background-repeat=repetarea fundalului(reapet pentru repetare si no-repeat pentru a nu se repeta)

---

Personalizarea legendei:

Cod:

ul#picture_legend {
background-position: center;
background-repeat: no-repeat;
background-image: url('LINK IMAGINE');
text-align: center;
padding: 24px 0;}

Informatii:

Spoiler:

background-position=pozitia fundalului(Alte pozitii posibile)
background-repeat=repetarea fundalului(reapet pentru repetare si no-repeat pentru a nu se repeta)
text-align=pozitia legendei
padding=spatiul destinat pentru legenda

---

Personalizarea legendei mesajelor private:

Cod:

ul#privmsgs-menu {ul#picture_legend{
background-position: center;
background-repeat: no-repeat;
background-image: url('LINK IMAGINE');
text-align: CENTER;
padding: 24px 0;}

Informatii:

Spoiler:

background-position=pozitia fundalului(Alte pozitii posibile)
background-repeat=repetarea fundalului(reapet pentru repetare si no-repeat pentru a nu se repeta)
text-align=pozitia legendei
padding=spatiul destinat pentru legenda

---

Imaginea de fundal a link-urilor de copyright:

Cod:

div#page-footer ul.linklist {
background-image: url('LINK IMAGINE');
background-position: 0 100%;}

---

Imaginea de fundal a footer-ului:

Cod:

div#page-footer {
background-image: url('LINK IMAGINE');
background-position: bottom center;
background-repeat: no-repeat;
padding: 15px;}

Informatii:

Spoiler:

background-position=pozitia fundalului(Alte pozitii posibile)
background-repeat=repetarea fundalului(reapet pentru repetare si no-repeat pentru a nu se repeta)
padding=distanta dintre link-urile de copyright si imaginea de fundal a footer-ului

---

Personalizarea widget-urilor:

Cod:

.module {
background-image: url('LINK IMAGINE');
background-repeat: no-repeat;
background-position: top center;
border: 1px solid BLACK;}

.module .h3 {
color: white;}

Informatii:

Spoiler:

.module
background-image=Imaginea de fundal a titlurilor.Datorita pozitiei selectate,imaginea apare in susul widget-urilor,adica la titlu.
background-repeat=repetarea fundalului(reapet pentru repetare si no-repeat pentru a nu se repeta)
background-position=pozitia fundalului(Alte pozitii posibile)
border=conturul widget-urilor si culoarea acestuia
.module .h3
color=culoarea titlulilor widget-urilor

---

CSS pentru imaginea de fundal a unui mesaj:

Cod:

.post {
background-image: url('LINK IMAGINE');
background-repeat: repeat;
background-position: top center;
}

Informatii:

Spoiler:

background-repeat=repetarea fundalului(reapet pentru repetare si no-repeat pentru a nu se repeta)
background-position=pozitia fundalului(Alte pozitii posibile)

---

CSS pentru imaginea de fundal a casutei de postare:

Cod:

.ak_msgform_subject_right_td input, .ak_msgform_message_right_td textarea, textarea{
background-image:url('LINK IMAGINE');
background-repeat: repeat;
background-position: top center;
}

Informatii:

Spoiler:

background-repeat=repetarea fundalului(reapet pentru repetare si no-repeat pentru a nu se repeta)
background-position=pozitia fundalului(Alte pozitii posibile)

---

CSS pentru personalizarea codurilor si spoiler-urilor:

Cod:

dl.codebox {
padding: 3px;
background-color: lightyellow;
border: 1px solid #C9D2D8;
font-size: 1em;
}

dl.codebox dt {color: purple;}

.codebox dd {color: brown;}

dl.codebox code {color: darkgrey;}

Informatii:

Spoiler:

dl.codebox
padding=spatiul rezervat titlului codului/spoiler-ului
background-color=culoarea de fundal a codului/spoiler-ului
border=conturul codului/spoiler-ului si culoarea acestuia
font-size:marimea textului codului/spoiler-ului

dl.codebox dt
color=culoarea titlului codului/spoiler-ului

.codebox dd
color=culoarea textului spoiler-ului

dl.codebox code
color=culoarea textului codului

---

Personalizarea butoanelor de origine a forumului(ex:):

Cod:

a.button1, input.button1, a.button2, input.button2, button.button2 {
background-image: url('LINK IMAGINE');
background-repeat: repeat;
font-family: comic sans ms;
color: #000000;}

Informatii:

Spoiler:

background-repeat=repetarea fundalului(reapet pentru repetare si no-repeat pentru a nu se repeta)
font-family=fontul textului
color:culoarea textului

---

Modificarea butoanelor de origine a forumului la pozitionarea mause-ului pe deasupra:

Cod:

a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover {
background-image: url('LINK IMAGINE');
background-repeat: repeat;
}

---

Modificarea imaginei ce reprezinta paginile din dreptul unui topic cu mai multe pagini():

Cod:

.row .pagination {
background: url('LINK IMAGINE') 0 50% no-repeat;
}

---

Personalizarea informatiilor din profilul user-ului:

Cod:

.postprofile {
color: #000000;
text-align: center;}

Informatii:

Spoiler:

color=culoarea textului din profil
text-align=pozitia textului din profil(left center right)

---

Schimbarea culorii link-ului catre profilul membrului din profilul din mesaje:

Cod:

.postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {
color: #000000;}

---

Schimarea culorii/imaginei de fundal a chatbox-ului:

Cod:

body.chatbox {
   background-image: url('LINK IMAGINE');
   background-color: black;}

Informatii:

Spoiler:

background-image=imaginea de funal a chatbox-ului
background-color=culoarea de funal a chatbox-ului

---

Culoarea randurilor in care apar mesajele/autorul si ora postarii din chatbox:

Cod:

.chatbox_row_1 {
   padding: 4px;
   background-color: transparent;
   }
.chatbox_row_2 {
   padding: 4px;
   background-color: transparent;
   }

Informatii:

Spoiler:

.chatbox_row_1
padding=latimea spatiului destinat textului
background-color=culoarea de fundal a randului 1
.chatbox_row_2
padding=latimea spatiului destinat textului
background-color=culoarea de fundal a randului 2

---

Personalizarea titlului chatbox-ului:

Cod:

.chatbox-title,.chatbox-title a.chat-title {
color: #FFFFFF !important;
text-align: center;
font-size: 20px;}

Informatii:

Spoiler:

color=culoarea titlului chatbox-ului
text-align=pozitia titlului(left center right)
font-size=dimensiunea fontului titlului

---

Schimabrea imaginii de fundal a titlului chatbox-ului:

Cod:

#chatbox_header {
   background-image: url('LINK IMAGINE');}


---

Schimbarea imaginii de fundal a sectiunii de jos a chatbox-ului(cea in care se afla optiunile pentru mesaj si portiunea de trimitere a mesajului):

Cod:

#chatbox_footer {
   background-image: url('LINK IMAGINE');}

---

Adaugarea de colturi rotunjite la o anumita sectiune:

Cod:

.DENUMIRE SECTIUNE span.corners-top { background-image: url('LINK IMAGINE'); }
.DENUMIRE SECTIUNE span.corners-top span { background-image: url('LINK IMAGINE'); }
.DENUMIRE SECTIUNE span.corners-bottom { background-image: url('LINK IMAGINE'); }
.DENUMIRE SECTIUNE span.corners-bottom span { background-image: url('LINK IMAGINE'); }

Informatii:

Spoiler:

.DENUMIRE SECTIUNE span.corners-top=colturi stanga-sus
.DENUMIRE SECTIUNE span.corners-top span=colturi dreapta-sus
.DENUMIRE SECTIUNE span.corners-bottom=colturi stanga-jos
.DENUMIRE SECTIUNE span.corners-bottom span=colturi dreapta-hos

Sectiuni la care puteti adauga colturi rotunjite:
.headerbar = Header
.navbar = Bara de navigare
.forabg = Lista de forumuri
.forumbg = Lista de subiecte
.introduction = Mesajul de pe pagina de strat
.module = Widget-uri