Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Legenda s-a intors XD
Scris de EDGE Sam 24 Sept - 20:42
» salut
Scris de Andrei34 Dum 18 Sept - 18:53
» Salut
Scris de Andrei34 Dum 18 Sept - 18:52
» Wireless ipb theme [punBB]
Scris de cristii571 Lun 12 Sept - 14:34
Cuvinte-cheie

Bara  legenda  animate  reclama  Metin2  phpBB2  ultimele  avatar  subforumuri  Mesaje  cautare  navigare  menu  punbb  edit  radio  drop  profil  chenar  meniu  tema  html  subiecte  Statistici  banner  tutorial  

Personalizare header+meniu phpbb3


Previzualzare live


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 inscris si conectat pentru a vedea aceasta 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.

Comentariile utilizatorilor
Membru veteran
la data de Dum 30 Sept - 19:17
Raykim Membru veteran
Conectat
Din previzualizare codul arata foarte frumos,deci te felicit!
Si te asteptam cu mai multe!
Membru dedicat
la data de Dum 30 Sept - 19:18
RazvaN Membru dedicat
Conectat
Este un fundal + un meniu frumos. Felicitari Sabin !
Membru premium
la data de Dum 30 Sept - 19:31
Delight Membru premium
Conectat
Bravo !Foarte frumos din previzualizare.
Membru premium
la data de Dum 30 Sept - 20:29
Hissae2 Membru premium
Conectat
Bravo,este prea dragut.
Membru dedicat
la data de Dum 30 Sept - 23:00
mr.franta Membru dedicat
Conectat
multumesc,o sa reeditez tutorialul cand o sa am timp,eram prea grabit cu alte treburi pe acasa
Membru veteran
la data de Mar 16 Oct - 20:06
Raykim Membru veteran
Conectat
Mutat in sectiunea corespunzatoare!
Membru nou
la data de Vin 19 Feb - 14:51
LegalFunYT Membru nou
Conectat
In ce fisier trebui sa scriu codurile?
Membru nou
la data de Joi 28 Apr - 14:08
Marius. Membru nou
Conectat
Foarte bun