Personalizarea forumului in versiunea phpBB3

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Personalizarea forumului in versiunea phpBB3

Mesaj Scris de darkspectre la data de Lun 20 Iul - 13:51

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


Ultima editare efectuata de catre darkspectre in Joi 23 Iul - 16:08, editata de 1 ori

darkspectre
Membru activ

masculin

Mesaje : 2549
Varsta : 107
Localizare : auf mein land
Data de inscriere : 29/04/2008
Multumiri : 2
Niciun avertisment

http://www.fg-coding.net

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum