1. Set Menů(x2) + Sidebar - Nature Collection

    Avatar
    Tags
    Menu Pronto
    Resource
    Sidebar pronta
    By Valls ~ il 27 Aug. 2013
     
    +5   +1   -1    17 Comments   907 Views
    .


    ANTEPRIMA



    Set di due menů e una sidebar coordinati da usare dove volete. Possono essere usati tutti insieme o separatamente.
    Per problemi scrivere qui.

    Se prelevate un menů, sarebbe gradito l'inserimento dei crediti:
    CODICE
    Menů realizzato da <a href="http://skinfactory.forumfree.it/?act=Profile&MID=2266120">Valls</a> ~ <a href="http://skinfactory.forumfree.it">Skin Factory</a>


    POTETE:
    ☺ Modificare i colori e i font;
    ☺ Cambiare l'immagine, i testi e le voci e aggiungerne altre.

    SCONSIGLIATO:
    - Aggiungere voci nella sidebar o mettere immagini di dimensioni diverse da quelle consigliate.

    VIETATO:
    ✖ Stravolgere l'aspetto di menů o sidebar perchč non sono basi;
    ✖ Spacciarli per propri;
    ✖ Togliere i crediti alla sidebar. Si tratta di una scritta di 9px per nulla invadente, per favore lasciatela.


    MENU 1 - CODICE

    Da aggiungere in Colori e Stili:

    CODICE
    /* MENU 01 - Nature collection */
    .valls02 li {font: 20px 'grand hotel';
    background: #91DB30;
    line-height: 60px;
    text-align:center;
    margin: 2px;
    padding: 0 4px;
    border-radius: 80px;
    min-height: 50px;
    min-width: 50px;
    transition:all .1s ease-in-out}
    .valls02 li a {color: #FFF;
    text-decoration: none;
    border: 3px solid #FFF;
    box-shadow: 1px 2px 2px #777;
    padding: 5px;
    background: #D87E2F;
    text-align:center}
    .valls02 li:nth-child(even) {background: #D87E2F}
    .valls02 li:nth-child(even) a {background: #91DB30}
    .valls02 li:hover {transform:rotate(10deg); -webkit-transform:rotate(10deg)}


    Da aggiungere in HTML in cima a tutte le pagine:

    CODICE
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Grand+Hotel">


    Da aggiungere in HTML dove volete:

    CODICE
    <ul class="valls02">
    <li><a href="http://">Lorem</a></li>
    <li><a href="http://">Ipsum</a></li>
    <li><a href="http://">Dolor</a></li>
    <li><a href="http://">Lorem</a></li>
    <li><a href="http://">Ipsum</a></li>
    <li><a href="http://">Dolor</a></li>
    <li><a href="http://">Lorem</a></li>
    </ul>



    MENU 2 - CODICE

    Da aggiungere in Colori e Stili:

    CODICE
    /* MENU 02 - Nature collection */
    .valls03 li {display: inline-block}
    .valls03 li a {color: #FFF;
    text-decoration: none}
    .valls03 li {font: 20px 'grand hotel';
    background: #91DB30;
    line-height: 60px;
    text-align:center;
    margin: 2px;
    padding: 0 5px;
    border-radius: 80px;
    min-height: 50px;
    min-width: 50px;
    transition:all .1s ease-in-out;
    border: 3px solid #FFF;
    box-shadow: 1px 2px 2px #777;
    transition: all .3s ease-in-out}
    .valls03 li:nth-child(even) {background: #D87E2F}
    .valls03 li:hover {transform:rotate(360deg); -webkit-transform:rotate(360deg);
    border-radius: 6px;
    background: #D87E2F}
    .valls03 li:nth-child(even):hover {background: #91DB30}


    Da aggiungere in HTML in cima a tutte le pagine:

    CODICE
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Grand+Hotel">


    Da aggiungere in HTML dove volete:

    CODICE
    <ul class="valls03">
    <li><a href="http://">Lorem</a></li>
    <li><a href="http://">Ipsum</a></li>
    <li><a href="http://">Dolor</a></li>
    <li><a href="http://">Lorem</a></li>
    <li><a href="http://">Ipsum</a></li>
    <li><a href="http://">Dolor</a></li>
    <li><a href="http://">Lorem</a></li>
    </ul>



    SIDEBAR - CODICE

    Da aggiungere in Colori e Stili:

    CODICE
    /* SIDEBAR 01 - Nature collection */
    #sidebar01 {max-width: 250px}
    .valls01side {background: #91DB30;
    font: 11px arial;
    color: #FFF;
    padding: 3px;
    border: 3px solid #FFF;
    box-shadow: 1px 2px 2px #777;
    border-radius: 20px}
    .valls01side h3 {text-shadow: 1px 1px 0 #7BB728;
    text-align:justify;
    padding: 2px}
    .valls01side h2 {font: 19px 'grand hotel';
    line-height: 80%;
    margin-top: 10px; text-shadow: 1px 1px 0 #7BB728}
    .valls01side h2:before {content: '« '}
    .valls01side h2:after {content: ' »'}
    .valls01side.img {background: #EEE url(http://www.hybridupload.com/08/08/47w4.png) no-repeat center;
    width: 220px;
    height: 154px;
    border-radius: 3px;
    box-shadow: none;
    box-shadow: 1px 1px 2px #7BB728; -webkit-box-shadow: 1px 1px 2px #7BB728; -webkit-box-shadow: 1px 1px 2px #7BB728; -webkit-box-shadow: 1px 1px 2px #7BB728; -webkit-box-shadow: 1px 1px 2px #7BB728; -webkit-box-shadow: 1px 1px 2px #7BB728; -webkit-box-shadow: 1px 1px 2px #7BB728; -webkit-box-shadow: 1px 1px 2px #7BB728; -moz-box-shadow: 1px 1px 2px #7BB728; -webkit-box-shadow: 1px 1px 2px #7BB728}
    .valls01side_title {font: 34px 'grand hotel';
    margin: 0;
    color: #D87E2F;
    margin-bottom: -13px;
    text-shadow: 1px 1px 0 #FFF}
    .sidebar01menu li, .img01menu li {display: inline-block}
    .sidebar01menu, .img01menu {text-align: center; padding: 0}
    .img01menu {opacity: 0; transform: translate(0, 1rem); -webkit-transform: translate(0, 1rem); transition: all .2s ease-in-out; background: rgba(255, 255, 255, 0.5); width: 226px; height: 148px; margin: -5px; padding-top: 15px}
    .img01menu:hover {opacity: 1; transform:translate(0rem); -webkit-transform:translate(0rem)}
    .img01menu li {font: 17px 'grand hotel';
    background: #D87E2F;
    line-height: 50px;
    border-radius: 50px;
    height: 50px;
    width: 50px;
    border: 3px solid #FFF;
    box-shadow: 1px 2px 2px #777;
    margin: 5px;
    transition: all .3s ease-in-out;
    white-space: nowrap}
    .img01menu li:hover {transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    border-radius: 6px;
    background: #91DB30}
    .img01menu li a {color: #FFF}
    .sidebar01menu li {font: 19px 'grand hotel';
    background: #FFF;
    padding: 0 6px;
    line-height: 26px;
    border-radius: 6px;
    min-height: 10px;
    min-width: 10px;
    box-shadow: 1px 2px 2px #7BB728;
    margin: 0 3px}
    .sidebar01menu li a {color: #D87E2F; transition: all .2s ease-in-out}
    .sidebar01menu li:hover a {color: #91DB30}


    Da aggiungere in HTML in cima a tutte le pagine:

    CODICE
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Grand+Hotel">


    Da aggiungere in HTML dove volete:

    CODICE
    <div id="sidebar01">
    <p class="valls01side_title">Lorem ipsum</p>
    <div class="valls01side">
    <p align="center">
    </p><div class="valls01side img">
    <ul class="img01menu">
    <li><a href="http://">Lorem</a></li>
    <li><a href="http://">Ipsum</a></li>
    <li><a href="http://">Dolor</a></li>
    <li><a href="http://">Lorem</a></li>
    <li><a href="http://">Lorem</a></li>
    <li><a href="http://">Lorem</a></li>
    </ul></div>
    <ul class="sidebar01menu">
    <li><a href="http://">Lorem</a></li>
    <li><a href="http://">Ipsum</a></li>
    <li><a href="http://">Dolor</a></li>
    <li><a href="http://">Lorem</a></li>
    </ul>
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac erat massa. Quisque convallis pretium libero sit amet lobortis. Pellentesque sit amet gravida arcu. Vivamus dui libero, luctus sit amet.</h3>
    <h2>Inserisci una citazione.</h2>
    <p></p>
    </div>
    <div style="font: 9px tahoma; margin-top: 6px">SIDEBAR © <a href="http://skinfactory.forumfree.it/?act=Profile&MID=2266120">VALLS ~</a></div>
    </div>


    CAMBIARE VELOCEMENTE IMMAGINE ALLA SIDEBAR:
    Per cambiare l'immagine, potete inserire questo codice DOPO quello della sidebar:
    CODICE
    .valls01side.img {background: url(IMMAGINE) no-repeat center}

    Sostituite IMMAGINE con l'URL della vostra immagine.

    Enjoy ~



    Edited by Valls ~ - 30/8/2013, 19:38
      Share  
     
    .
 
.
Comments
  1. gliiitter
    view post Posted on 27/8/2013, 20:09
        +1   -1
     
    .

    User deleted
    Ascolta una domanda.. č normale che mi viene all'interno del container e sopra al logo.. e non centrale.. il codice html l'ho messo in cima al forum, ho provato in home ma il risultato non cambia..
     
    Top
    .
  2. Valls ~
    view post Posted on 27/8/2013, 21:51
        +1   -1
     
    .

    User deleted
    Puoi linkare il forum per favore?
     
    Top
    .
  3. Arctic
    view post Posted on 28/8/2013, 19:50
        +1   +1   -1
     
    .
    Avatar

    Advanced Member

    Group
    Lovers
    Posts
    6,547
    Likes
    +24

    Status
    Anonymous
    ma quanto č carino il primo menu?? *w* Brava Valls! (:
     
    Top
    .
  4. Valls ~
    view post Posted on 28/8/2013, 19:55
        +1   -1
     
    .

    User deleted
    Grazie Amphe ♥
     
    Top
    .
  5. rees.
    view post Posted on 6/10/2013, 13:38
        +1   -1
     
    .
    Avatar


    Aš tave myliu

    Group
    Addict
    Posts
    23,289
    Likes
    +4

    Status
    Online
    come si puň mettere fissa in basso a destra la sidebar? :3
     
    Top
    .
  6. Valls ~
    view post Posted on 6/10/2013, 14:04
        +1   -1
     
    .

    User deleted
    Aggiungi in Colori e Stili:

    CODICE
    #sidebar01 {right:0; bottom:0; position:fixed}
     
    Top
    .
  7. rees.
    view post Posted on 6/10/2013, 14:11
        +1   -1
     
    .
    Avatar


    Aš tave myliu

    Group
    Addict
    Posts
    23,289
    Likes
    +4

    Status
    Online
    grazie :3
     
    Top
    .
  8. Orizon`
    view post Posted on 6/10/2013, 15:19
        +1   -1
     
    .

    User deleted
    Che figo *w*
    Complimenti e grazie mille Valls!
     
    Top
    .
  9. Valls ~
    view post Posted on 6/10/2013, 21:32
        +1   -1
     
    .

    User deleted
    CITAZIONE
    grazie :3

    Di nulla :smile:
    CITAZIONE
    Che figo *w*
    Complimenti e grazie mille Valls!

    Grazie ^^
     
    Top
    .
  10. la matita
    view post Posted on 4/3/2014, 12:22
        +1   -1
     
    .

    User deleted
    a me il secondo menu esce di style diverso da quello del'anteprima ma č comunque bellisimo ma per che?
     
    Top
    .
  11. -spiker
    view post Posted on 4/3/2014, 12:41
        +1   -1
     
    .
    Avatar

    Senior Member

    Group
    Team
    Posts
    12,737
    Likes
    +150

    Status
    Anonymous
    Posta il link del forum sui cui č applicato e il codice (:
    Web Web
     
    Top
    .
  12. la matita
    view post Posted on 4/3/2014, 20:12
        +1   -1
     
    .

    User deleted
    http://social-page.forumfree.it/
     
    Top
    .
  13. -spiker
    view post Posted on 4/3/2014, 21:02
        +1   -1
     
    .
    Avatar

    Senior Member

    Group
    Team
    Posts
    12,737
    Likes
    +150

    Status
    Anonymous
    Strano, vediamo e ti facciamo risapere (:
    Web Web
     
    Top
    .
  14. la matita
    view post Posted on 5/3/2014, 19:22
        +1   -1
     
    .

    User deleted
    CITAZIONE (-spiker @ 4/3/2014, 21:02) 
    Strano, vediamo e ti facciamo risapere (:

    grazie mille :)
     
    Top
    .
17 replies since 27/8/2013, 19:14   907 views
  Share  
.
 
.
Web & Resources
Create your forum and your blog! · Top Forum · Categories · Help · Status · Contacts · Powered by ForumFree