Tutorial - Colors Meniu

Tutorial - Colors Meniu

Colors Meniu Salutare Vizitator , in acest tutorial am sa iti prezint meniul Colors Meniu si am sa te imvat si cum sa il aplici pe forumul tau. Demo: [Trebuie sa fiti inscris si conectat pentru a vedea acest link] Mod de instalare 1.CSS Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS Cod: #navigationMenu{ position:fixed; top: 299px; left: -36px;} #navigationMenu li{ list-style:none; height:39px; padding:2px; width:40px;} #navigationMenu span{ width:0; left:38px; padding:0; position:absolute; overflow:hidden; font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; -webkit-transition: 0.25s; -o-transition: 0.25s;  -moz-transition: 0.25s; transition: 0.25s;} #navigationMenu a{ background:url('http://i24.servimg.com/u/f24/16/24/00/51/butoan10.jpg') no-repeat; height:39px; width:38px; display:block; position:relative;} #navigationMenu a:hover span{ width:auto; padding:0 20px; overflow:visible; } #navigationMenu a:hover{ text-decoration:none; -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5;} #navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 -39px;} #navigationMenu .home span{ background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31;} #navigationMenu .about {  background-position:-38px 0;} #navigationMenu .about:hover {  background-position:-38px -39px;} #navigationMenu .about span{ background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0;} #navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover {  background-position:-76px -39px;} #navigationMenu .services span{ background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344;} #navigationMenu .portfolio {  background-position:-114px 0;} #navigationMenu .portfolio:hover{  background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b;} #navigationMenu .contact {  background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6;} a, a:visited,a:active { color:#0196e3; text-decoration:none; outline:none;} a:hover{ text-decoration:none;} a img{ border:none;} 2.HTML Adaugati codul urmator in in template-ul overall_header dupa codul Cod:   <!-- END hitskin_preview --> Continutul codului.   <!-- BEGIN switch_login_popup --> Cod: <ul id="navigationMenu"> <li>             <a class="home" href="[Trebuie sa fiti inscris si conectat pentru a vedea acest link]             <span>Home</span>  </a> </li>   <li>               <a class="about" href="[Trebuie sa fiti inscris si conectat pentru a vedea acest link]               <span>About</span> </a> </li>   <li>               <a class="services" href="site.ro">               <span>Profile</span> </a> </li>   <li>             <a class="portfolio" href=www.site.ro">             <span>FAQ</span> </a> </li>   <li>         <a class="contact" href="[Trebuie sa fiti inscris si conectat pentru a vedea acest link]             <span>Contact us</span> </a> </li> </ul>

Tutorial realizat de Emanuel | DesignART ***Important ! Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !

Demo:http://emanuel-demonstrati.wikiforum.ro/h3-colors-meniu

Pune spaţiu între Link şi :

Mulţumim de tutoriale, este folositor pentru o navigare mai rapidă.

Codul este si pe forumgratuit, nu este facut de tine. Dar oricum, meniul asta mi se pare prea pretentios pentru forumurile de pe forumgratuit

DarkStar a scris:Codul este si pe forumgratuit, nu este facut de tine. Dar oricum, meniul asta mi se pare prea pretentios pentru forumurile de pe forumgratuit

Nu am precizat ca am creat eu meniul,eu doar am adaptat acest meniu pentru FG.

Emanuele, nu ma prostesti tu pe mine. [Trebuie sa fiti inscris si conectat pentru a vedea acest link] Nu vad ce adaptare ai facut tu, poate cand zici adaptare te referi la copy paste

Defapt DarkStar, eu habr nu aveam de acel topic ,eu am preluat codurile meniului de aici: [Trebuie sa fiti inscris si conectat pentru a vedea acest link] .Multumit?

DarkStar a scris:Emanuele, nu ma prostesti tu pe mine. [Trebuie sa fiti inscris si conectat pentru a vedea acest link] Nu vad ce adaptare ai facut tu, poate cand zici adaptare te referi la copy paste

Nu este de pe forumgratuit, este de la tutorialzine

nu va mai contraziceti atata codul este pe net si gata nu la facut nimeni de aici

de exemplu daca folosesc phpbb3 si nu merge sa bag la templaturi unde e overall_header unde as putea sa le bag sa imi mearga?

4Adm a scris:de exemplu daca folosesc phpbb3 si nu merge sa bag la templaturi unde e overall_header unde as putea sa le bag sa imi mearga?

Incearca sa-l pui intr-un widget.

unde ca nu prea le am cu widgeturile imi poti explica ?

se poate pune si pe versunea phubb3??

Pe phubb3 nu se poate

aha....ok ms

nu merge am bagat codu la generalitati si imi mergea pana sa bag altu dar acu nu mre (

black te rog sa scrii corect romaneste si fara prescurtari , Bogdanell ;x va rog sa nu mai dezinformati membri !

Eu+tu pentru versiunea phpbb3 intri in Panou- Afisare-Pagina de start-generaltiti-mesajul de pe pagina de start

imi merge dar uite cum se vede [Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

si incearca sa pui asta

Cod:

      <style type="text/css">
    #navigationMenu{
      position:fixed;
            top: 10px;
            left: 0px;
    }
   
    #navigationMenu li{
      list-style:none;
      height:39px;
      padding:2px;
      width:40px;
    }
   
    #navigationMenu span{
      width:0;
      left:38px;
      padding:0;
      position:absolute;
      overflow:hidden;
   
      font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
      font-size:18px;
      font-weight:bold;
      letter-spacing:0.6px;
      white-space:nowrap;
      line-height:39px;
     
      /* CSS3 Transition: */
      -webkit-transition: 0.25s;
      /*-o-transition: 0.25s;*/
     
      /* Future proofing (these do not work yet): */
      -moz-transition: 0.25s;
      transition: 0.25s;
    }
   
    #navigationMenu a{
      background:url('http://img52.imageshack.us/img52/3637/navigationf.jpg') no-repeat;
   
      height:39px;
      width:38px;
      display:block;
      position:relative;
    }
   
    /* General hover styles */
   
    #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
    #navigationMenu a:hover{
      text-decoration:none;
     
      /* CSS outer glow with the box-shadow property */
      -moz-box-shadow:0 0 5px #9ddff5;
      -webkit-box-shadow:0 0 5px #9ddff5;
      box-shadow:0 0 5px #9ddff5;
    }
   
    /* Green Button */
   
    #navigationMenu .home {  background-position:0 0;}
    #navigationMenu .home:hover {  background-position:0 -39px;}
    #navigationMenu .home span{
      background-color:#7da315;
      color:#3d4f0c;
      text-shadow:1px 1px 0 #99bf31;
    }
   
    /* Blue Button */
   
    #navigationMenu .about { background-position:-38px 0;}
    #navigationMenu .about:hover { background-position:-38px -39px;}
    #navigationMenu .about span{
      background-color:#1e8bb4;
      color:#223a44;
      text-shadow:1px 1px 0 #44a8d0;
    }
   
    /* Orange Button */
   
    #navigationMenu .services { background-position:-76px 0;}
    #navigationMenu .services:hover { background-position:-76px -39px;}
    #navigationMenu .services span{
      background-color:#c86c1f;
      color:#5a3517;
      text-shadow:1px 1px 0 #d28344;
    }
   
    /* Yellow Button */
   
    #navigationMenu .portfolio { background-position:-114px 0;}
    #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
    #navigationMenu .portfolio span{
      background-color:#d0a525;
      color:#604e18;
      text-shadow:1px 1px 0 #d8b54b;
    }
   
    /* Purple Button */
   
    #navigationMenu .contact { background-position:-152px 0;}
    #navigationMenu .contact:hover { background-position:-152px -39px;}
    #navigationMenu .contact span{
      background-color:#af1e83;
      color:#460f35;
      text-shadow:1px 1px 0 #d244a6;
    }
   
   
    a, a:visited,a:active {
      color:#0196e3;
      text-decoration:none;
      outline:none;
    }
   
    a:hover{
      text-decoration:none;
    }
   
    a img{
      border:none;
    }
   
    </style>
   
    <ul id="navigationMenu">
        <li>
          <a class="home" href="forum.htm">
                <span>Home</span>
            </a>
        </li>
     
        <li>
          <a class="about" href="#">
                <span>About</span>
            </a>
        </li>
     
        <li>
          <a class="services" href="/profile.forum?mode=editprofile">
                <span>Profile</span>
            </a>
        </li>
     
        <li>
          <a class="portfolio" href="portal.htm">
                <span>Portal</span>
            </a>
        </li>
     
        <li>
          <a class="contact" href="/contact.forum">
                <span>Contact us</span>
            </a>
        </li>
    </ul>

Link catre forumul tau te rog pentru a putea rezolva problema !

multumesc chiar merge

Cu placere ( altadata te rog sa deschizi un subiect in sectiunea de suport )

k

Ai primt inca o mustrare pentru spam !
Eu zic eu aud ...