Hellou friends! Hoje eu vou ensinar um modelo de data em hover.
Clique em "Ler Mais»" para ver o tutorial.
Vá em Modelo > Editar HTML, aperte CRTL + F e digite na caixa:
.main-inner h2.date-header {
Irá aparecer algo assim:
.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}
Apague todo o código e substitua por esse:
.main-inner h2.date-header {
float: left; /** data no lado esquerdo **/
width:195px;/** largura **/
height:15px;/** altura **/
overflow:hidden;
font-size:15px; /** tamanho da fonte **/
font-family: 'Julius Sans One', sans-serif;
letter-spacing: -2px; /** espaçamento entre as letras **/
color: #fff !important;/** cor da fonte **/
text-align:center;/** alinha o texto **/
margin-top: -35px; /** sobe **/
margin-left: -65px; /** margem pra esquerda **/
padding: 4px 4px 4px 4px; /** espaço interno: topo, direito, embaixo, esquerdo **/
-webkit-border-radius: 1em; -moz-border-radius: 1em; /** borda redonda **/
background: #99bbff; /** cor do fundo **/
box-shadow: 0px 0px 10px #4d88ff; /** sombra da caixa **/
}
.main-inner h2.date-header:hover {
color: #99bbff !important;/** cor da fonte em hover**/
background: #fff; /** cor do fundo hover **/
box-shadow: 0px 0px 10px #005c99; /** sombra da caixa em hover**/
}
O código é todo auto-explicativo, o que está a vermelho você pode trocar por right.