Tal como el título lo indica. En este, sumamente escueto tutorial, les voy a mostrar como mejorar el aspecto de la lista de etiquetas de K2 con un estio muy interesante, utilizando solo CSS3. Para que tengan una simple idea de lo que vamos a hacer, es generar un triángulo y un círculo para darle el aspecto de etiqueta que se puede ver en la imágen de arriba a cada palabra.
1 - En primer lugar buscamos el archivo css de K2. Por lo general estará ubicado en:
components/com_k2/cssk2.css
2 - Luego buscamos la siguiente parte de código dentro de k2.css:
div.itemTagsBlock ul.itemTags li a
3 - Ahora reemplazamos el código que buscamos antes por el siguiente:
div.itemTagsBlock ul.itemTags li a {
float:right;
height:24px;
line-height:20px;
position:relative;
font-size:11px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
div.itemTagsBlock ul.itemTags li a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
div.itemTagsBlock ul.itemTags li a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
div.itemTagsBlock ul.itemTags li a:hover{background:#555;}
div.itemTagsBlock ul.itemTags li a:hover:before{border-color:transparent #555 transparent transparent;}
4 - Por último guardan el archivo k2.css y al refrescar el sitio tendrán que ver el nuevo aspecto.
Si no modifican nada en el código que les indico, el aspecto de sus etiquetas será el mismo que ven en nuestro sitio. Pero por supuesto que al ser puro CSS3, pueden modificar todos los parámetros que quieran para que el diseño se ajuste al diseño de su Web. Espero les resulte de utilidad y lo utilicen ya que el cambio no puede tardarles más de 5 munutos y lograrán una considerable mejora visual en sus artículos K2.
Me gustaría ver sus sitios si lo implementan, pueden dejar el link en los comentarios.
Feed RSS