Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.
Forum gratuit: forum de suport al utilizatorilor

Forum gratuit: ajutor și asistență pentru utilizatorii Forumgratuit. Creează și administrează un forum performant. Descoperă funcţionalităţile, tutorialele și ponturile de pe Forumul de suport!

Personalizarea forumului in versiunea phpBB3

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Vezi subiectul anterior Vezi subiectul urmator In jos

  • 0

Tutorial Personalizarea forumului in versiunea phpBB3

Mesaj Scris de darkspectre Lun Iul 20, 2009 1:51 pm

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:

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:

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:

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:

Personalizarea casutei de cautare:
Cod:
#search-box #keywords {
width: 95px;
background-color: #ffffff;
}

input.search {
background-image: url('http://2img.net/i/fa/prosilver/icon_textbox_search.gif');
background-repeat: no-repeat;
background-position: left 1px;
padding-left: 17px;
}
Informatii:
Spoiler:

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:

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:

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:

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:

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:

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:

CSS pentru imaginea de fundal a unui mesaj:
Cod:
.post {
background-image: url('LINK IMAGINE');
background-repeat: repeat;
background-position: top center;
}
Informatii:
Spoiler:

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:

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:

Personalizarea butoanelor de origine a forumului(ex:Personalizarea forumului in versiunea phpBB3 Altele10):
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:

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(Personalizarea forumului in versiunea phpBB3 Empty):
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:

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:

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:

Personalizarea titlului chatbox-ului:
Cod:
.chatbox-title,.chatbox-title a.chat-title {
color: #FFFFFF !important;
text-align: center;
font-size: 20px;}
Informatii:
Spoiler:

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:


Tutorial realizat de catre Darkspectre, actualizat de catre Petronel
Numai bine,
Echipa Forumgratuit


Ultima editare efectuata de catre darkspectre in Joi Iul 23, 2009 4:08 pm, editata de 1 ori
darkspectre

darkspectre
Membru activ

Mesaje : 2542
Varsta : 114
Localizare : auf mein land
Data înscrierii : 29/04/2008
Mulțumiri : 2
Internet Explorer

http://www.fg-coding.net
darkspectre a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Forum gratuit: forum de suport al utilizatorilor ::  Despre Forumgratuit ::   :: Tutoriale

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum