header phpbb2 la fel ca punbb si phpbb3

Salut sunt fraNNNta si astazi am sa va invat cum sa creati un header pe phpbb2 la fel ca punbb sau phpbb3.Se pare ca multa lume a crezut ca este imposibil dar nici macar nu au incercat

La sfarsit o sa pun previzualizarea si print screen
Hai sa incepem
Pasul 1: Avem nevoie de doua imagini pentru header si meniu
Imagine header -> [You must be registered and logged in to see this image.]
imagine meniu -> [You must be registered and logged in to see this image.]
Eu am ales doua imagini la intamplare negre (chiar daca ele par urate asteptati rezultatul final)
Avem imaginile acum:

pasul 2: intram iin Panou de administrare/afisare/templateuri/general/overal_header si cautam acest cod

Code:

<table width="100%" cellspacing="0" cellpadding="0" border="0">

Si il inlocuiti cu acest cod

Code:

  <table class="headerbar" width="100%" cellspacing="0" cellpadding="0" border="0">
           


Salvati si publicati templateul.
Pasul 3: Intram in panou de administrare/afisare/culori/CSS
si personalizam headerul cu acest cod

Code:


    .headerbar {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-image: url(http://i42.servimg.com/u/f42/14/12/03/12/133.png);
    border: 1px solid black;
box-shadow: 0px 0px 2px white inset}

In cod am adaugat imaginea de mai sus,un border negru,colturi si o umbra interioara de 2px alba care da un aspect mult mai placut
[/code]


Pasul 4: Personalizarea meniului

Intram din nou in Panou de administrare/afisare/templateuri/general/overal_header

si cautam acest cod

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">

Acum in inlocuim cu acesta

Code:

  <table class="navbarr" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
         

Salvati si publicati templateul

Pasul 5: intram iar in CSS si personalizam fundalul meniului cu imaginea de mai su cu acest cod

Code:


  .navbarr {
  padding-left: 10px;
    background-image: url(http://i42.servimg.com/u/f42/14/12/03/12/231.png);
    margin-top: 10px;
    border: 1px solid black;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
position: relative;
bottom: 11px;
height: 27px

}

Pasul 6: Pesonalizarea meniului

Adaugam in CSS acest cod

Code:



a.mainmenu{
  background: #252525;
  border: 1px solid black;
 -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;
  box-shadow: 0px 0px 2px white inset;
  padding: 2px;
color: white!important}


Si ca meniul sa fie putin mai interesant ii un hover

Code:


a.mainmenu:hover{
  background: #141414;
  border: 1px solid black;
 -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;
  box-shadow: 0px 0px 2px white inset;
  padding: 2px;
color: white!important}
 

Legenda meniu :
background: #141414; - reprezinta fundalul
border: 1px solid black; - linia neagra ce inconjoara fundalul
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; - Rotunjeste colturile
box-shadow: 0px 0px 2px white inset; - umbra interioara a meniului
padding: 2px; - spatiul dintre text si border
color: white!important - culoarea textului din meniu


Previzualizare: [You must be registered and logged in to see this link.]
Print screen :
[You must be registered and logged in to see this link.]


Sper ca v-a fost de folos[/quote]