Cum să adaugi un meniu personalizat pentru ModerBB

Salut,
Bine v-am găsit la un nou Tutorial ! Azi o să vă prezint cum puteți personaliza un forum cu un meniu simplu doar cu iconițe adică awesome!

Să începem.
1. Primul lucru pe care trebuie să îl faceți este să adaugați acest cod in template-ul Overall_Header
Panoul de Administrare - Afișare - Template-uri - General - Overall_Header
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

După ce ați intrat în template-ul respectiv adăugați acest cod sub închiderea tag-ului *head* .
Cod HTML :

Cod:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
  <nav class="style">
   <input type="checkbox" href="#" class="style_open" name="style_open" id="style_open" />
     <label class="style_open-button" for="style_open">
      <span class="lines line-1"></span>
      <span class="lines line-2"></span>
      <span class="lines line-3"></span>
    2</label>
  <a href="#" class="style-item blue"> <i class="fa fa-user"></i></a>
  <a href="" class="style-item red"><i class="fa fa-heart-o"></i></a>
  <a href="#" class="style-item blue"> <i class="fa fa-user"></i></a>
  <a href="" class="style-item red"><i class="fa fa-heart-o"></i></a>
  <a href="#" class="style-item blue"> <i class="fa fa-user"></i></a>
  <a href="" class="style-item red"><i class="fa fa-heart-o"></i></a>
</nav>

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

După adăugare apăsați pe *Inregistrare* si ca template-ul sa fie public trebuie să apăsați de icon-ul verde de a publica template-ul.

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

Următorul pas.
2. Ne ducem în foaia de stil css
Panoul de Administrare - Afișare - Imagini și culori - Culori - Foaia de stil CSS
Adăugați codul CSS.

Cod:

.headerbar, .panel {
    position: initial!important;
}
.style-item,
.style_open-button {
   background: #EEEEEE;
   width: 80px;
   height: 80px;
   margin-left: -40px;
   position: absolute;
   color: #FFFFFF;
   text-align: center;
   line-height: 80px;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform ease-out 200ms;
   transition: -webkit-transform ease-out 200ms;
   transition: transform ease-out 200ms;
   transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.style_open {
   display: none;
}
.lines {
   width: 25px;
   height: 3px;
   background: #596778;
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -12.5px;
   margin-top: -1.5px;
   -webkit-transition: -webkit-transform 200ms;
   transition: -webkit-transform 200ms;
   transition: transform 200ms;
   transition: transform 200ms, -webkit-transform 200ms;
}
.line-1 {
   -webkit-transform: translate3d(0, -8px, 0);
   transform: translate3d(0, -8px, 0);
}
.line-2 {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}
.line-3 {
   -webkit-transform: translate3d(0, 8px, 0);
   transform: translate3d(0, 8px, 0);
}
.style_open:checked + .style_open-button .line-1 {
   -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
   transform: translate3d(0, 0, 0) rotate(45deg);
}
.style_open:checked + .style_open-button .line-2 {
   -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
   transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.style_open:checked + .style_open-button .line-3 {
   -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
   transform: translate3d(0, 0, 0) rotate(-45deg);
}
.style {
   margin: auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   width: 80px;
   height: 80px;
   text-align: center;
   box-sizing: border-box;
   font-size: 26px;
}
.style-item {
   transition: all 0.1s ease 0s;
}
.style-item:hover {
   background: #EEEEEE;
   color: #3290B1;
}
.style-item:nth-child(3) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}
.style-item:nth-child(4) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}
.style-item:nth-child(5) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}
.style-item:nth-child(6) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}
.style-item:nth-child(7) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}
.style-item:nth-child(8) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}
.style-item:nth-child(9) {
   -webkit-transition-duration: 180ms;
   transition-duration: 180ms;
}
.style_open-button {
   z-index: 2;
   -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   -webkit-transition-duration: 400ms;
   transition-duration: 400ms;
   -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   transform: scale(1.1, 1.1) translate3d(0, 0, 0);
   cursor: pointer;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}
.style_open-button:hover {
   -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
   transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.style_open:checked + .style_open-button {
   -webkit-transition-timing-function: linear;
   transition-timing-function: linear;
   -webkit-transition-duration: 200ms;
   transition-duration: 200ms;
   -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
   transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.style_open:checked ~ .style-item {
   -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
   transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.style_open:checked ~ .style-item:nth-child(3) {
   transition-duration: 180ms;
   -webkit-transition-duration: 180ms;
   -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
   transform: translate3d(0.08361px, -104.99997px, 0);
}
.style_open:checked ~ .style-item:nth-child(4) {
   transition-duration: 280ms;
   -webkit-transition-duration: 280ms;
   -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
   transform: translate3d(90.9466px, -52.47586px, 0);
}
.style_open:checked ~ .style-item:nth-child(5) {
   transition-duration: 380ms;
   -webkit-transition-duration: 380ms;
   -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
   transform: translate3d(90.9466px, 52.47586px, 0);
}
.style_open:checked ~ .style-item:nth-child(6) {
   transition-duration: 480ms;
   -webkit-transition-duration: 480ms;
   -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
   transform: translate3d(0.08361px, 104.99997px, 0);
}
.style_open:checked ~ .style-item:nth-child(7) {
   transition-duration: 580ms;
   -webkit-transition-duration: 580ms;
   -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
   transform: translate3d(-90.86291px, 52.62064px, 0);
}
.style_open:checked ~ .style-item:nth-child(8) {
   transition-duration: 680ms;
   -webkit-transition-duration: 680ms;
   -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
   transform: translate3d(-91.03006px, -52.33095px, 0);
}
.style_open:checked ~ .style-item:nth-child(9) {
   transition-duration: 780ms;
   -webkit-transition-duration: 780ms;
   -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
   transform: translate3d(-0.25084px, -104.9997px, 0);
}
.blue {
   background-color: #669AE1;
   box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
  color: #fff !important;
}
.blue:hover {
   color: #669AE1 !important;
   text-shadow: none;  
}
.red {
    background-color: #f53838;
    box-shadow: 3px 3px 0 0 rgba(0,0,0,0.14);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.12);
    color: #fff !important;
}
 .red:hover {
  color: #f53838 !important;
  text-shadow: none;
 }
.fa {
    margin-top: 28px;
}


După adăugare apsăsați pe *Validare*

Și acesta va fi rezultatul
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Cum se utilizează ?
E simplu ne ducem în Overall_Header și căutăm următoarele coduri

Cod:

<a href="#" class="style-item blue"> <i class="fa fa-user"></i></a>
  <a href="" class="style-item red"><i class="fa fa-heart-o"></i></a>
  <a href="#" class="style-item blue"> <i class="fa fa-user"></i></a>
  <a href="" class="style-item red"><i class="fa fa-heart-o"></i></a>
  <a href="#" class="style-item blue"> <i class="fa fa-user"></i></a>
  <a href="" class="style-item red"><i class="fa fa-heart-o"></i></a>

Dacă doriți să schimbați culoarea la cod editați ori clasa de la codul HTML ori codul din css adică acest cod

Cod:

.red {
    background-color: #f53838;
    box-shadow: 3px 3px 0 0 rgba(0,0,0,0.14);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.12);
    color: #fff !important;
}
  .red:hover {
  color: #f53838 !important;
  text-shadow: none;
  }


Să zicem că vreau să fac cu o altă culoare sau un icon diferit !
Editez un cod la intâmplare  

Cod:

 <a href="#" class="style-item green"> <i class="fa fa-user"></i></a>

Ștergem blue și înlocuim cu green sau altă culoare apoi la icon adăugați după bunul plac înlocuind fa-user cu altceva ! După asta edităm codurile css de mai sus edităm red cu green

Cod:

.green {
    background-color: #f53838;
    box-shadow: 3px 3px 0 0 rgba(0,0,0,0.14);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.12);
    color: #fff !important;
}
  .green:hover {
  color: #f53838 !important;
  text-shadow: none;
  }


Iar la href adăugați o adresă pe care doriți !
Sper că am fost destul de explicit cu acest tutorial, oricum nu e complicat deloc nici pentru începători! Limita e de 6 deci dacă adăugați mai multe tabele s-ar putea să nu vă apară sau să se buguiască, deci nu vă recomand să săriți peste limită!
Numai bine!

Foarte explicit tutorialul , felicitări .