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)}
.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>
<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}
.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>
<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}
#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>
<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
.