Hover Menu Bar

Buna seara,

As dori si eu un cod CSS pentru PHPBB3 pentru meniul de navigare . Am nevoie ca in momentul cand o persoana se afla cu   pointer-ul mouse-ului peste o imagine in meniu acestei persoane sa ii arate alta imagine . Ceva gen cum este la meniul din acest forum numai ca in loc de chenarul ce apare aici eu vreau sa apara alta imagine pentru butonul respectiv .
Sau daca nu se poate sa imi oferiti o metoda prin care sa pot modifica fontul meniului respectiv sa adaug un hover tip chenar transparent fara border .Multumesc anticipat pentru raspuns

Aveţi un meniu anume care îl doriţi sau un model ?

Gen meniul acestui forum numai ca eu vreau sa folosesc alt tip de font http://narnia.forums-rpg.com/forum

Vrei acel meniu de acolo ? O sa trebuiasca link de la forumul dv .

Acesta este link-ul forumului meu : http://khronosroseclan.forumotion.com/
Da vreau meniu ca acel forum numai ca vreau sa folosesc alt tip de font, acest tip de font http://www.1001fonts.com/voice-activated-bb-font.html

Buna seara,

Va recomand sa va alegeti un font de aici, dupa care o sa va ofer codul necesar cerut de dvs.
https://fonts.google.com.

Acesta este fontul ales https://fonts.google.com/specimen/Audiowide

Buna seara,
Intrati in:
Panou de administrare => Afisare => Imagini si culori => Culori => Foaie de stil css

Si adaugati:

Cod:


@import url('https://fonts.googleapis.com/css?family=Audiowide');
a.mainmenu:nth-child(1):hover {
    font-size: 0;
}

a.mainmenu:nth-child(1):hover:before {
    content: "Home";
    font-family: 'Audiowide', cursive;
    font-size: 24px;
}

Si spuneti-mi daca este ok asa? Sau doriti un alt efect.
Am facut doar pentru butonul Acasa ("Home")

Daca se poate sa fie din prima scrisul la aceeasi marime iar culoarea sa fie ceva mai opaca gen forumul de mai sus ar fi perfect . Daca doriti v-as putea oferi intreg  css-ul forumului respectiv .
Edit:
Acesta e css forumului respectiv :

Cod:

.overlay {
    margin-top:100px;
    width:130px;
    height:180px;
    background-color:black;
    opacity:0;
}
body {
background-repeat: repeat;
  text-align:left;
}

a { text-decoration: none; }
a:hover{
    text-decoration: none !important;
    color : #ffffff;
    }

img {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}


body
{
  opacity: 0.83
   
}

.name{
font-weight: lighter;
font-size: 12px;
 letter-spacing: -1px;
text-decoration: none;
font-family: Verdana;
    text-transform: lowercase;
      color: transparent;
 


}


.name:hover {
font-family: Verdana;
  font-size: 12px;
  text-transform: lowercase;
 letter-spacing: 1px;
  font-weight: lighter;
    background-image:url('')
}



.avatar.mini, .avatar.mini img {
height: 100px;
width: 72px;
}


.forumlink {
font:14px arial;
font-style: italic;
text-align:  center;
text-transform: lowercase;
letter-spacing: 1px;
line-height:150%;
text-shadow: 2px 2px 2px #;
}

.forumlink:hover {
  background-image:url('');
 
}



a.mainmenu{
text-decoration: none;
text-transform: uppercase;
font: 12px verdana; 
text-shadow: 2px 2px 2px #;
color :
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
 
transition: background 1s;
-webkit-transition: background 1000ms;
-moz-transition: background 1000ms;
-o-transition: background 1000ms;

   
}


a.mainmenu:hover {
  font-style: italic;
background: transparent;
background: url() repeat;
/* TRANSISITION */
transition: background 1000ms;
-webkit-transition: background 1000ms;
-moz-transition: background 1000ms;
-o-transition: background 1000ms;
}



a.cattitle {
display:block;
font: 18px Bad Script;
color: #7a6565;
font-style: bold;
font-weight: normal;
text-align: center;
text-transform: lowercase;
letter-spacing: 1px;
line-height:25%;
text-shadow: 1px 1px 0px #;
}



.bodyline{
  -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15x;}

a img {
border: none;
position: left;
}

img:hover
{opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}

.bodyline {
opacity:1.0;
filter:alpha(opacity=100);
background-image: url();
background-repeat: repeat;
}

a.gen, a.genmed, a.gensmall {
text-decoration: none;
text-transform: uppercase;
font: 12px calibri; 
text-shadow: 1px 1px 0px #;
color : #8b746f;

}

a.gen, a.genmed, a.gensmall:hover {
  background-image:url('');
  font-style: italic;
}


@font-face {
  font-family: 'Bad Script';
  font-style: normal;
  font-weight: 400;
  src: local('Bad Script Regular'), local('BadScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/badscript/v2/rL_b2ND61EQmMOJ8CRr1fhsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}



@font-face {
  font-family: 'Handlee';
  font-style: normal;
  font-weight: 400;
  src: local('Handlee Regular'), local('Handlee-Regular'), url(http://themes.googleusercontent.com/static/fonts/handlee/v2/6AfIXNH5pZ1Jj_pfExPOWQ.woff) format('woff');
}

td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides {
border-image: initial;
height: 20px;
}

.postdetails.poster-profile span.label {
white-space: nowrap;
font: 11px helvetica; 
}

a.topictitle{
text-decoration: initial;
font: 12px orator std;
text-transform: lowercase;}

    /* MISE EN FORME DES CATEGORIES ET FORUMS */

    .cate_titre
    {
      clear: both;
      height: 100px;
      margin-top: 50px;
    }
    .catetitre_bloc
    {
    position: relative;
    z-index: 1;
    display: block;
    width: 70%;
    height: 18px;
    margin-left: auto;
    margin-right : auto;
   
    }
    .catetitre_content
    {
    position: absolute;
    z-index: 2;
    display: block;
    width: 950px;
    margin-left: auto;
      margin-right: auto;
      margin-top: -40px;
    text-align: center;
    padding: 2px;
      border-bottom: 3px dotted #191817;
    }
    .catetitre
    {
    color: #454545;
    font-family: arial;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #000000;
    }

    .forum_bloc
    {
      width: 950px;
      margin-left: auto;
      margin-right: auto;
      margin-top: -30px;
    }
    .forum
    {
    float: left;
    width: 450px;
    height: 250px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 50px;
    }
    a.forumlink
    {
      position: relative;
      z-index: 1;
      display: block;
      width: 50%;
      color: #454545;
      text-align: left;
    font-family: arial;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0px 0px 0px #000000;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    a.forumlink:hover
    {
      letter-spacing: 4px;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .forum_contenu
    {
      position: relative;
      z-index: 1;
      width: 98%;
      height: 90%;
      padding: 4px;
      margin-left: auto;
      margin-right: auto;
      margin-top: -8px;
      background-color: ;
      border-left: 5px dotted #191817;
      border-right: 5px dotted #191817;
      border-bottom: 5px dotted #191817;
      border-top: 5px dotted #191817;
    }
    .description
    {
      display: block;
      width: 260px;
      margin: auto;
      height: 80px;
      overflow: hidden;
      border: 5px solid #9c9c9c;
      box-shadow: 1px 1px 1px #191817;
      -moz-box-shadow: 1px 1px 1px #191817;
      -htm-box-shadow: 1px 1px 1px #191817;
      -webkit-box-shadow: 1px 1px 1px #191817;
      -o-box-shadow: 1px 1px 1px #191817;
    }
    .description_contenu
    {
      position: absolute;
      display: block;
      width: 251px;
      height: 71px;
      overflow: auto;
      background-color: #191817;
      font-size: 12px;
      color: #9c9c9c;
      text-align: center;
      padding: 5px;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .description_contenu:hover
    {
      opacity: 0.8;
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      filter: alpha(opacity=80);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .icone_stats
    {
      width: 300px;
      margin: auto;
      margin-top: -30px;
    }
    .stats_lastpost
    {
      display: block;
      width: 160px;
      height: 80px;
      margin-left: 10px;
      background-color: ;
      border: 1px solid #b5b5b5;
      padding: 5px;
      text-align: center;
    }
    .stats
    {
      display: block;
      margin-bottom: 5px;
      border-bottom: 1px dotted #b5b5b5;
      padding-bottom: 5px;
      font-size: 12px;
      color: #8f8f8f;
    }
    .lastpost
    {
      display: block;
      font-size: 12px;
    }
    .sforum
    {
      position: relative;
      z-index: 3;
      display: block;
      height: 0;
        background: #191817;
      color: #b5b5b5;
      overflow: hidden;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .ouverture_sousforum
    {
      position: relative;
      z-index: 3;
      display: block;
      float: right;
      width: 120px;
      margin-right: 20px;
      background: #191817;
      color: #b5b5b5;
      font-size: 12px;
      text-align: center;
      padding: 4px;
      -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    }
    .sous_forum:hover .sforum
    {
      height: 50px;
      background: #191817;
      color: #b5b5b5;
      padding: 4px;
      overflow: auto;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .sous_forum a
    {
      color: #b5b5b5 !important;
      text-shadow: 1px 1px 0px #000000;
    }
    .sous_forum a:hover
    {
      color: #ffffff !important;
    }

    .qeel_titre
    {
      width: 890px;
      height: 100px;
      background: url(#);
    }
    .qeel
    {
      width: 890px;
      height: 400px;
      background: url(#);
    }
    .qeel_table
    {
      width: 612px;
      margin: auto;
    }
    .colonne
    {
      position: absolute;
      z-index: 1;
      width: 200px;
      height: 300px;
      overflow: auto;
      margin-top: 0px;
      margin-left: 0px;
      background: #4b4545;
      border: 5px solid #3f4d55;
      box-shadow: 0px 0px 0px #0d1418;
      -moz-box-shadow: 0px 0px 0px #0d1418;
      -o-box-shadow: 0px 0px 0px #0d1418;
      -htm-box-shadow: 0px 0px 0px #0d1418;
      -webkit-box-shadow: 0px 0px 0px #0d1418;
      font-size: 12px;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(opacity=50);
      transition: 1s;
      -moz-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -o-transition: 1s;
    }
    .colonne:hover
    {
      position: absolute;
      z-index: 99;
      width: 300px;
      height: 400px;
      margin-top: -50px;
      margin-left: -50px;
      background: #4b4545;
      border: 1px solid #3f4d55;
      box-shadow: 0px 0px 5px #0d1418;
      -moz-box-shadow: 0px 0px 5px #0d1418;
      -o-box-shadow: 0px 0px 5px #0d1418;
      -htm-box-shadow: 0px 0px 5px #0d1418;
      -webkit-box-shadow: 0px 0px 5px #0d1418;
      font-size: 12px;
      opacity: 0.8;
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      filter: alpha(opacity=80);
      transition: 1s;
      -moz-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -o-transition: 1s;
    }
    .qeel_contenu
    {
      display: block;
      text-align: justify;
      padding: 10px;
    }

        .avatar_mess
    {
      display: block;
      width: 200px;
      height: 320px;
      margin-left: -10px;
      margin-right: 10px;
      overflow: hidden;
      background: #272726;
      border: 5px solid #3e1d19;
      transform: rotate(-5deg);
      -moz-transform: rotate(-5deg);
      -o-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      -htm-transform: rotate(-5deg);
      -webkit-transform: rotate(-5deg);
      box-shadow: 1px 1px 6px #000000;
      -moz-box-shadow: 1px 1px 6px #000000;
      -o-box-shadow: 1px 1px 6px #000000;
      -htm-box-shadow: 1px 1px 6px #000000;
      -webkit-box-shadow: 1px 1px 6px #000000;
          transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .avatar_mess:hover
    {
      margin-left: 5px;
      transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -htm-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
          transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .profil_mess
    {
      position: absolute;
      display: block;
      width: 190px;
      height: 310px;
      margin: auto;
      padding: 5px;
      overflow: auto;
      background: #202020 ;
      color: ;
      font-size: 12px;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
          transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .profil_mess:hover
    {
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
          transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .pseudo_mess
    {
      display: block;
      position: relative;
      z-index: 2;
      width: 190px;
      margin-top: -15px;
      margin-left: 10px;
      text-align: center;
      font-size: 12px;
      font-family: arial;
      font-weight: ;
      text-shadow:  ;
      background: #202020  ;
      padding-top: 5px;
      border-left: 3px solid #371e1a;
      border-right: 3px solid #371e1a;
      border-top: 1px solid #371e1a;
      border-bottom: 1px solid #371e1a;
      box-shadow: ;
      -moz-box-shadow:  ;
      -o-box-shadow:  ;
      -htm-box-shadow:  ;
      -webkit-box-shadow:  ;
    }


    /* PAGE ACCUEIL FORME 1 */

    #f1_accueil
    {
      width: 800px;
      height: 500px;
      margin: auto;
      background: url(http://img15.hostingpics.net/pics/891324imageexemplePA.jpg);
      text-shadow: none !important;
    }
    #f1_accueil a
    {
      color: #ba8550 !important;
      text-shadow: none !important;
    }
    #f1_accueil a:hover
    {
      color: #e58f3a !important;
      text-shadow: none !important;
    }
    .f1_col1
    {
      width: 300px;
      vertical-align: top;
    }
    .f1_contexte
    {
      width: 220px;
      height: 300px;
      overflow: auto;
      margin-top: 100px;
      margin-left: 65px;
      text-align: justify;
      color: #7e6144;
      text-shadow: 1px 1px 0px #ffffff;
    }
    .f1_bloconglets
    {
      margin-top: 80px;
    }
    .f1_onglet1, .f1_onglet2, .f1_onglet3
    {
      display: inline-block;
      width: 110px;
      height: 50px;
    }
    .f1_onglet1
    {
      margin-left: 50px;
      margin-right: 25px;
    }
    .f1_onglet2
    {
      margin-right: 30px;
    }
    .f1_contenu1, .f1_contenu2, .f1_contenu3
    {
      position: absolute;
      width: 0px;
      height: 220px;
      margin-top: 40px;
      padding-top: 40px;
      overflow: hidden;
      font-size: 12px;
      color: #7e6144;
    }
    .f1_contenu1
    {
      margin-left: -10px;
    }
    .f1_contenu2
    {
      margin-left: -149px;
    }
    .f1_contenu3
    {
      margin-left: -294px;
    }
    .f1_onglet1:hover .f1_contenu1, .f1_onglet2:hover .f1_contenu2, .f1_onglet3:hover .f1_contenu3
    {
      width: 400px;
    }
    .f1_liens
    {
      display: block;
      text-align: center;
    }
    .f1_liens a
    {
      font-size: 16px;
      font-weight: bold;
    }
    .f1_news, .f1_friends
    {
      width: 200px;
      height: 200px;
      overflow: hidden;
      text-align: justify;
    }
    .f1_credits, .f1_topsites
    {
      height: 150px;
      border-left: 1px solid #d19962;
      margin-left: 5px;
      padding: 5px;
      text-align: center;
    }
    .f1_staff1, .f1_staff2, .f1_staff3
    {
      display: block;
      width: 50px;
      height: 50px;
      background: url() #d19962;
      margin-bottom: 20px;
      margin-top: 20px;
      border: 1px solid #d19962;
    }
    .f1_staffcontenu1, .f1_staffcontenu2, .f1_staffcontenu3
    {
      position: absolute;
      width: 0px;
      height: 150px;
      background: #ffffff;
      margin-left: 80px;
      overflow: hidden;
    }
    .f1_staffcontenu2
    {
      margin-top: -72px;
    }
    .f1_staffcontenu3
    {
      margin-top: -144px;
    }
    .f1_staff1:hover .f1_staffcontenu1, .f1_staff2:hover .f1_staffcontenu2, .f1_staff3:hover .f1_staffcontenu3
    {
      width: 300px;
      border: 1px solid #d19962;
    }

   
 
    /* PAGE ACCUEIL MOZAIK */

    #mozaik
    {
      width: 660px;
      height: 260px;
      margin: auto;
    }
    #mozaik a
    {
      font-weight: bold;
      color: #575757 !important;
      text-decoration: none !important;
    }
    #mozaik a:hover
    {
      color: #3a3a3a;
      text-decoration: none !important;
    }
    #mozaik_top
    {
      position: relative;
      z-index: 1;
      width: 30px;
      height: 238px;
      overflow: hidden;
      margin-top: 10px;
      float: left;
      background: #b9b9b9;
      border: 1px solid #d6d6d6;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_top:hover
    {
      position: relative;
      z-index: 999;
      width: 330px;
      background: #d6d6d6;
      border: 1px solid #e3e3e3;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_credits
    {
      position: relative;
      z-index: 1;
      width: 30px;
      height: 238px;
      overflow: hidden;
      margin-top: 10px;
      float: right;
      background: #b9b9b9;
      border: 1px solid #d6d6d6;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_credits:hover
    {
      position: relative;
      z-index: 999;
      width: 330px;
      background: #d6d6d6;
      border: 1px solid #e3e3e3;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titretop
    {
      display: block;
      width: 30px;
      height: 238px;
      float: left;
      overflow: hidden;
      background-color: transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_top:hover .mozaik_titretop
    {
      background-color: #9e9e9e;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titrecredits
    {
      display: block;
      width: 30px;
      height: 238px;
      float: right;
      overflow: hidden;
      background-color: transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_credits:hover .mozaik_titrecredits
    {
      background-color: #9e9e9e;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_accueil
    {
      width: 600px;
      height: 240px;
      margin: auto;
      padding: 10px;
      text-align: justify;
    }
    #mozaik1
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #dcd3ce;
      border-left: 3px solid #9e3535;
      box-shadow: 2px 2px 2px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik1:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      background: #dcdcdc;
      border-left: 0px solid #9e3535;
      box-shadow: 2px 2px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik2
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #af6342;
      border-right: 3px solid #3b5d94;
      box-shadow: 2px 2px 2px #000000;
      margin-left: 300px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik2:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      margin-left: 0px;
      background: #dcdcdc;
      border-right: 0px solid #3b5d94;
      box-shadow: 2px 2px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik3
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #392823;
      border-left: 3px solid #392823;
      box-shadow: 2px 2px 2px #000000;
      margin-top: 120px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik3:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      margin-top: 0px;
      background: #dcdcdc;
      border-left: 0px solid #392823;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik4
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #d7d1a0;
      border-right: 3px solid #c4863b;
      box-shadow: 0px 0px 0px #000000;
      margin-left: 300px;
      margin-top: 120px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik4:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      margin-left: 0px;
      margin-top: 0px;
      background: #dcdcdc;
      border-right: 0px solid #c4863b;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }

    .mozaik_titre1
    {
      width: 300px;
      height: 120px;
      background: url(http://feb.imghost.us/Fmk9.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik1:hover .mozaik_titre1
    {
      width: 600px;
      height: 60px;
      background: url(http://feb.imghost.us/Fmk9.png) top left no-repeat #dcd3ce;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titre2
    {
      width: 300px;
      height: 120px;
      background: url(http://feb.imghost.us/FmX3.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik2:hover .mozaik_titre2
    {
      width: 600px;
      height: 60px;
      background: url(http://feb.imghost.us/FmX3.png) top left no-repeat #9c452a;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titre3
    {
      width: 300px;
      height: 120px;
      background: url(http://feb.imghost.us/GAcy.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik3:hover .mozaik_titre3
    {
      width: 600px;
      height: 60px;
      background: url(http://feb.imghost.us/GAcy.png) top left no-repeat #392823;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titre4
    {
      width: 300px;
      height: 120px;
      background: url(http://feb.imghost.us/FmcN.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik4:hover .mozaik_titre4
    {
      width: 600px;
      height: 60px;
      background: url(http://feb.imghost.us/FmcN.png) top left no-repeat #c4863b;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }

    .mozaik_contenu
    {
      width: 98%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      height: 160px;
      overflow: auto;
      font-size: 12px;
      color: #7d7d7d;
      text-shadow: 1px 1px 0px #f1f1f1;
    }
    .mozaik_contenu2
    {
      width: 280px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      height: 220px;
      overflow: auto;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      text-align: center;
      color: #7d7d7d;
      text-shadow: 1px 1px 0px #f1f1f1;
    }
    .mozaik_contenu3
    {
      width: 280px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      height: 220px;
      overflow: auto;
      font-size: 12px;
      font-style: italic;
      text-align: left;
      color: #7d7d7d;
      text-shadow: 1px 1px 0px #f1f1f1;
    }
    .mozaik_illu
    {
      width: 150px;
      float: left;
      border: 5px solid #ffffff;
      margin: 5px;
    }
    .mozaik_news
    {
      margin: 5px;
      padding-bottom: 5px;
      border-bottom: 1px solid #3b5d94;
    }
    .mozaik_datenews
    {
      display: inline-block;
      font-size: 12px;
      font-weight: bold;
      color: #3b5d94;
      margin-right: 20px;
    }
    .mozaik_avatar
    {
      position: relative;
      z-index: 1;
      display: inline-block;
      width: 80px;
      height: 150px;
      overflow: hidden;
      border: 2px solid #9e9e9e;
      box-shadow: 2px 2px 2px #000000;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(opacity=50);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatar:hover
    {
      position: relative;
      z-index: 999;
      display: inline-block;
      width: 150px;
      height: 150px;
      overflow: hidden;
      border: 2px solid #9e9e9e;
      box-shadow: 0px 0px 5px #000000;
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatardescr
    {
      display: block;
      background: url(http://img15.hostingpics.net/pics/301068noir50.png);
      margin-top: 150px;
      height: 150px;
      overflow: auto;
      color: #e4e4e4;
      font-size: 12px;
      line-height: 12px;
      text-shadow: 1px 1px 0px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatar:hover .mozaik_avatardescr
    {
      margin-top: 130px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatardescr:hover
    {
      margin-top: 0px !important;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatartitre
    {
      display: block;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .mozaik_predef
    {
      clear: both;
      display: block;
      height: 60px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_predef:hover
    {
      display: block;
      height: 60px;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_predef a
    {
      text-transform: uppercase;
      color: #52400a !important;
      text-decoration: none !important;
      text-shadow: 1px 1px 0px #ffffff;
    }
    .mozaik_predef a:hover
    {
      text-decoration: none !important;
    }
    .predef_icone
    {
      display: block;
      float: left;
      width: 50px;
      height 50px;
      overflow: hidden;
      margin: 5px;
      border: 2px solid #9e9e9e;
    }
    .predef_icone img
    {
      width: 50px;
    }
    .predef_nom
    {
      display: block;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      color: #937723;
    }

    #navig
    {
      width: 950px;
      margin: auto;
      text-align: center;
    }

    /* ONGLET DEVOILE EN CLIC */

    #target_onglet, #target_onglet2
    {
      position: fixed;
    }
    #onglet_clic
    {
      position: fixed;
      z-index: 999;
      width: 342px;
      height: 200px;
      margin-left: -310px;
      margin-top: 100px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    #onglet_contenu
    {
      width: 290px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      height: 190px;
      color: #1e466c;
      font-size: 12px;
    }
    .onglet_clic_navigation
    {
      display: block;
      float: right;
      width: 40px;
      height: 120px;
      overflow: hidden;
      background: url(http://img15.hostingpics.net/pics/974397ongletouvrir.png);
      margin-top: 40px;
    }
    .onglet_ouvrir
    {
      position: absolute;
      z-index: 3;
    }
    .onglet_fermer
    {
      position: absolute;
      z-index: 2;
    }
    #onglet_clic_contenu
    {
      width: 300px;
      height: 200px;
      overflow: hidden;
      background: #72a3cc;
      border: 1px solid #2f6ea5;
    }
    #target_onglet:target #onglet_clic
    {
      margin-left: -10px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    #target_onglet:target .onglet_ouvrir
    {
      z-index: 1;
    }
    #target_onglet2:target #onglet_clic
    {
      margin-left: -310px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

Buna dimineata,cautati acest cod in overal_header

Cod:

<div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>


Il stergeti si il inlocuiti cu acesta:

Cod:

<center> <meniu class="fornarnia" {MENU_POSITION}"{MENU_NOWRAP}">
                      <a href="/forum">Acasa </a>
                          <a href="/faq">Faq</a>
                          <a href="/memberlist">Membri </a>
                          <a class="mainmenu" href="/search" onclick="showhide(document.getElementById('search_menu')); return false;">Cautare </a>
                                       <!-- BEGIN switch_user_logged_in -->
                      <a href="/privmsg?folder=inbox">{PRIVATE_MESSAGE_INFO}</a>
                     
                          <a href="/profile?mode=editprofile">Profil</a>
                                         <!-- END switch_user_logged_in -->
                         <!-- BEGIN switch_user_logged_out -->
                            <a href="/login">Conectare </a>
                     
                            <a href="/login?logout">Inregistrare</a>
                         <!-- END switch_user_logged_out -->
                     
                         <!-- BEGIN switch_user_logged_in -->
                      <a href="/login?logout">Deconectare</a>
                         <!-- END switch_user_logged_in -->
                          </meniu>
                          </center>

Salvati si publicati template-ul.
Apoi in css acest cod

Cod:

   
@import url('https://fonts.googleapis.com/css?family=Audiowide');
meniu.fornarnia a{
  font-family: 'Audiowide', cursive;
    font-size: 22px;
float: left;
  margin: 0px 6px;
  padding: 2px 4px;
  color: brown!important;
  text-decoration: none!important;
}
 
  meniu.fornarnia a:hover{
  color: #069!important;
  }
 


Buna dimineata
Codul respectiv mi l-ati oferit pentru punbb iar eu am nevoie pentru phpbb3 iar codul respectiv este de la forumul narnia iar eu am nevoie pentru forumul khronos

Versiunea nu conteaza la acel meniu,credeam ca aveti punbb.
Cautati in overal_header acest cod

Cod:

<div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <ul class="linklist navlinks{NAVBAR_BORDERLESS}">
         <li>{GENERATED_NAV_BAR}</li>
         </ul>

         <!-- BEGIN switch_search_box -->
         <div id="search-box">
            <form method="get" action="{ACTION_SEARCH}" id="search">
               <p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';" />
               {JS_SESSION_ID_INPUT}
               <input class="button2" type="submit" value="{L_SEARCH}" /></p>
            </form>
         </div>
         <!-- END switch_search_box -->

         <span class="corners-bottom"><span></span></span></div>
      </div>


Si puneti meniu de la mine.
Nu faceti modificari,nu schimbati versiunea doar asteptati instructiunile date de noi.
Va asteptam totusi cu un print screen si link cu forumul folosit de dumneavoastra.