Personalizare header+meniu phpbb3

[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Salut,pe fosta mea tema toata lumea imi cerea headerul+meniul si m-am gandit sa creez un tutorial cu ele

pasul 1: adaugam o imagine in header
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

Cod:



background: url(http://i32.servimg.com/u/f32/14/12/03/12/header10.png) repeat-x;
height: 155px;
  width: 101%;
  margin-top: -15px;
margin-left: -15px;
  margin-right: -15px;
color: #FFFFFF;

border-bottom: 5px solid #AECE0A;
  box-shadow: 0px 0px 5px black;
}

pasul 2:
acum ascundem bara veche a forumului (daca aveti o versiune standard)

Cod:


.navbar{
  background: none!important;
}

pasul 3: mutarea barei de navigare in header

Cod:

#page-header .navbar{
position: relative;
  top: -42px;
}

pasul 4:
ascunderea colturilor rotunde ale barei pe care tocmai am ascunso

Cod:


#page-header .corners-bottom,.corners-top{
  display: none!important;}

pasul 5: personalizarea meniului de navigare (meniul arata mult mai bine daca are si iconitele activate)

Cod:




a.mainmenu{
margin-right: 3px;
text-shadow: 1px 1px 3px black;
color: white !important;
   
background-image: linear-gradient(bottom, rgb(6,108,163) 32%, rgb(17,140,235) 83%);
background-image: -o-linear-gradient(bottom, rgb(6,108,163) 32%, rgb(17,140,235) 83%);
background-image: -moz-linear-gradient(bottom, rgb(6,108,163) 32%, rgb(17,140,235) 83%);
background-image: -webkit-linear-gradient(bottom, rgb(6,108,163) 32%, rgb(17,140,235) 83%);
background-image: -ms-linear-gradient(bottom, rgb(6,108,163) 32%, rgb(17,140,235) 83%);

background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.32, rgb(6,108,163)),
 color-stop(0.83, rgb(17,140,235))
);
  position: relative;
  top: 7px;


  padding-top: 6px;
  padding-bottom: 7px;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 5px 5px 0px 0px;
  border: 1px solid #045B98;
  box-shadow: 0px 0px 1px #F5F5F5 inset;
  
}

pasul 6: adaugare hover la meniu

Cod:



a.mainmenu:hover{
  
background-image: linear-gradient(bottom, rgb(18,128,224) 38%, rgb(13,107,184) 85%);
background-image: -o-linear-gradient(bottom, rgb(18,128,224) 38%, rgb(13,107,184) 85%);
background-image: -moz-linear-gradient(bottom, rgb(18,128,224) 38%, rgb(13,107,184) 85%);
background-image: -webkit-linear-gradient(bottom, rgb(18,128,224) 38%, rgb(13,107,184) 85%);
background-image: -ms-linear-gradient(bottom, rgb(18,128,224) 38%, rgb(13,107,184) 85%);

background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.38, rgb(18,128,224)),
 color-stop(0.85, rgb(13,107,184))
);
  padding-top: 6px;
  padding-bottom: 7px;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 5px 5px 0px 0px;
  border: 1px solid #045B98;
  box-shadow: 0px 0px 1px #F5F5F5 inset;}

Tutorial scris de [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Copyright Extrem-Tutorials.com - Nici o parte a acestui tutorial nu poate fi reprodusa fara acordul autorului.