In questo post vedremo come personalizzare i link per i commenti nidificati , ovvero i link Rispondi, Elimina, Risposte, Aggiungi commento e Carica altro .
Molti modelli trascurano questi collegamenti e talvolta sono appena visibili. Se vuoi evidenziarli o decorarli, in questo post scoprirai come fare.
Ho preparato 5 stili diversi da copiare e incollare, ma naturalmente puoi modificarli e personalizzarli a tuo piacimento.
Per aggiungere uno qualsiasi di questi 5 design, vai su Template | HTML Edit e incolla il codice per gli stili che preferisci prima ]]></b:skin> .
/* Collegamenti ai commenti
---------------------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #666; /* Colore del collegamento */
background: #f5f5f5; /* Colore dello sfondo */
border-left: 2px solid #009ecf; /* Colore del bordo sinistro */
border-radius: 10px; /* Bordo arrotondato */
text-decoration: none;
padding: 4px 8px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position:relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 26px;
font-weight: normal;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}
/* Collegamenti ai commenti
---------------------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Colore del collegamento */
background: #009ecf; /* Colore di sfondo */
border-radius: 2px; /* Bordo arrotondato */
text-decoration: none;
padding: 3px 6px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-size: 11px;
font-weight: normal;
font-family: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position:relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 22px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}
/* Collegamenti ai commenti
---------------------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #777; /* Colore del collegamento */
/* Sfondo sfumato */
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #d6d6d6) );
background:-moz-linear-gradient( center top, #ededed 5%, #d6d6d6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#d6d6d6');
background-color:#eded; /* Colore di sfondo */
bordo:1px solido #d6d6d6; /* Colore del bordo */
bordo-radius: 4px; /* Bordo arrotondato */
box-shadow:inset 0px 0px 3px 0px #fff;
ombra del testo:1px 1px 0px #fff;
decorazione del testo: none;
padding: 3px 7px;
margine destro: 5px;
spazio bianco: nowrap;
allineamento verticale: centrale;
dimensione del carattere: 11px;
peso del carattere: normale;
famiglia di caratteri: Arial;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
posizione: relativa;
superiore: 1px;
sinistra: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: Arial;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}
/* Collegamenti ai commenti
----------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Colore del collegamento */
background-color:#ff5bb0; /* Colore di sfondo */
border:1px solid #ee1eb5; /* Colore del bordo */
border-top-left-radius:37px; /* Bordo arrotondato */
border-top-right-radius:0px;
border-bottom-right-radius:37px; /* Bordo arrotondato */
border-bottom-left-radius:0px;
text-decoration: none;
padding: 3px 12px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-family:Times New Roman;
font-size:13px;
font-weight:bold;
font-style:italic;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position:relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
font-family:Times New Roman;
font-size:24px;
font-weight:bold;
font-style:italic;
margin-right:auto;
margin-left:auto;
margin-top:0px;
max-width:180px;
}
/* Collegamenti ai commenti
---------------------------------------------------------- */
.comments .comment .comment-actions a, .comments .thread-toggle a, .comments .continue a, .comments .comments-content .loadmore a {
width: 100%;
display: inline;
color: #fff; /* Colore del collegamento */
/* Colore del collegamento */
background:linear-gradient(in basso, #fe1a00 5%, #ce0100 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100',GradientType=0);
background-color:#fe1a00; /* Colore di sfondo */
border:1px solid #d83526; /* Colore del bordo */
border-radius:4px; /* Bordo arrotondato */
box-shadow: 0px 10px 14px -7px #f29c93;
text-decoration: none;
text-shadow:0px 1px 0px #b23e35;
padding: 5px 9px;
margin-right: 5px;
white-space: nowrap;
vertical-align: middle;
font-family:Times New Roman;
font-size:13px;
font-weight:bold;
font-style:italic;
}
.comments .continue {border-top:none}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover, .comments .continue a:hover {
text-decoration:none;
position:relative;
top: 1px;
left: 1px;
}
.comments .comments-content .loadmore a {
display:block;
text-align: center;
dimensione carattere: 24px;
peso carattere: grassetto;
famiglia carattere: Arial;
margine destro:auto;
margine sinistro:auto;
margine superiore:0px;
larghezza massima:180px;
}
All'interno dei codici vedrai in verde dove potrai modificare gli stili principali.
In ogni caso, i pulsanti avranno un effetto "spinta" quando il cursore del mouse passa sopra di essi. Se desideri aggiungere altri stili al passaggio del mouse, puoi farlo aggiungendo gli stili seguenti:
.commenti .commento .commento-azioni a:hover, .commenti .thread-toggle a:hover, .commenti .continua a:hover {
Qui puoi cambiare tutto ciò che vuoi, che si tratti del colore dello sfondo, del colore del testo, ecc.
Puoi anche personalizzare ogni link singolarmente. Ad esempio, se desideri solo i link " Rispondi " ed " Elimina " (ricorda che il link "Elimina" è visibile solo agli amministratori del blog), puoi farlo in questo modo:
.comments .comment .comment-actions a {
... Qui gli stili ...
}
.comments .thread-toggle a {
... Ecco gli stili ...
}
.commenti .continua a {
... Qui gli stili ...
}
.comments .comments-content .loadmore a {
... Ecco gli stili ...
}
In questo modo semplice possiamo personalizzare quei piccoli dettagli del modello a cui spesso non prestiamo la dovuta attenzione, ma che sono una parte importante per coloro che vogliono attirare commentatori sul proprio blog.
Trovato questo articolo interessante? Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook per suggerire questo risultato nelle ricerche in Linkedin, Instagram o Pinterest. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie! CONDIVIDI SU!
Post
Nessun commento:
Posta un commento