Cum să adaugi un meniu personalizat pentru ModerBB

Vezi subiectul anterior Vezi subiectul urmator In jos

Cum să adaugi un meniu personalizat pentru ModerBB Empty Cum să adaugi un meniu personalizat pentru ModerBB

Mesaj Scris de Ionut_FG 02.01.18 21:08

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]

[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]
[Trebuie sa fiti inscris si conectat pentru a vedea acest link]
[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! La revedere
avatar

Ionut_FG
Membru activ

Mesaje : 777
Varsta : 22
Data înscrierii : 01/11/2015
Mulțumiri : 123
Pachetul Gratuit Google Chrome Invision

http://invisionpower.rpgwars.net/
Ionut_FG a fost mulțumit de autorul acestui subiect.

Cum să adaugi un meniu personalizat pentru ModerBB Empty Re: Cum să adaugi un meniu personalizat pentru ModerBB

Mesaj Scris de Lucifer 22.01.18 10:23

Foarte explicit tutorialul , felicitări .
Lucifer

Lucifer
Membru onorific
Membru onorific

Mesaje : 976
Varsta : 18
Localizare : Constanţa & Calarasi
Data înscrierii : 21/05/2016
Mulțumiri : 111
Pachetul Gratuit Google Chrome phpBB3

https://www.fgdesign.biz/
Lucifer a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum