[SOLUCIONADO] formato etiquetas en wordpress

[fidelio]

Hola,

Estoy intentado dar un formato concreto a las etiquetas de un blog en WP.
La cuestión es que quiero que en el lateral izquierdo de todas aparezca una imagen (en este caso es como un triángulo con un agujero, como si fuera una etiqueta de papel), pero no sé como darle esa propiedad en el css.

Sería algo así:



Muchas gracias de antemano.

Un saludo.

[pzin]

Puedes hacerlo simplemente usando CSS y ahorrarte las imágenes.

La cuestión es usar dos pseudo-elemento. Uno para crear el triángulo y otro para hacer el círculo.

Algo así:

Código CSS:

a {
  position: relative;
  display: inline-block;
  margin: 0 10px;
  padding: 5px 5px 5px 10px;
  background: #666;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8rem;
  white-space: nowrap;
  border-radius: 0 2px 2px 0;
}
 
a:before {
  position: absolute;
  top: 0;
  left: -11px;
  content: '';
  border-top: 11px solid transparent;
  border-right: 11px solid #666;
  border-bottom: 11px solid transparent;
}
 
a:after {
  position: absolute;
  top: 7px;
  left: 0;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  content: '';
}
 

Que queda así:

[fidelio]

Muchas gracias, lo primero.
Pero, ¿cómo lo aplico al CSS?, me refiero, tengo sólo 1 línea de CSS correspondiente al estilo de las etiquetas y aquí veo 3 líneas.

Ahora lo tengo así:

.etiq {
font-size: 12px;
text-decoration: none important!;
background-color: #dbe1fc;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
padding-left: 3px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 3px;
display:inline;
line-height: 23px;
background-image

}

Un saludo.

[pzin]

Yo he añadido pseudo-elementos a un enlace, tú sólo se lo tienes que añadir a esa etiqueta. Entonces creas reglas para .etiq:before y .etiq:after.

Cuando publiques código, usa la opción de highlight.

[fidelio]

Muchísimas gracias por tu ayuda, ha quedado perfecto.
Sólo una cuestión más, veo que entre etiqueta y etiqueta queda demasiado espacio ¿cómo puedo reducirlo?, y otra cosa, a pesar de que le digo que no quiero subrayado de enlace (con text-decoration), me sigue apareciendo, ¿a qué puede ser debido?

Un saludo.

[pzin]

Iniciado por fidelio

a pesar de que le digo que no quiero subrayado de enlace (con text-decoration), me sigue apareciendo, ¿a qué puede ser debido?

Pues será algún estilo que está teniendo prioridad en su aplicación. Una forma fácil y rápido de arreglarlo es indicando que la combinación atributo y valor es importante:

Código CSS:

text-decoration: none !important;
 

Aunque lo ideal es encontrar la razón y tal vez hacer un selector más específico:

Código CSS:

#tags .etiq {}
 

Para eso habría que conocer bien la estructura donde se aplica y demás.

Para el margen, simplemente lo controlas con margin. Ten en cuenta que al menos a la izquierda necesitas algo de margen ya que el triángulo está fuera del elemento.

[fidelio]

Muchas gracias.
Aunque realmente lo de que esté subrayado o no, no es algo que me resulte imprescindible. Ya había probado lo de ponerle "!important", pero me sigue sin funcionar.

Voy a dar el tema por resuelto y de nuevo, muchísimas gracias.
Te paso la página por si quieres ver cómo ha quedado.

http://www.primeratoma.com.es

Un saludo.

[AngelKrak]

jajajaja amigo, te has equivocado, pero chido tu Text-Decoration >_< ahi te va la imagen con la que funciona ;) ahi arregla tu error ;)

[fidelio]

Hola!

Pues he probado separado, junto, sin punto y coma, con punto y coma, sin "important", con "important", y nada, me siguen saliendo las lineas debajo.

Te pego el CSS por si te sirve de ayuda:

Código CSS:

.etiq { 
    position: relative;
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    text-decoration:none;
    background-color: #dbe1fc;
    border-radius: 0 3px 3px 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 0 3px;
    -o-border-radius: 3px;
    padding-left: 5px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 5px;
    display:inline;
    line-height: 23px;
    white-space: nowrap;
 
}
 
.etiq:before {
    position: absolute;
    top: 0;
    text-decoration:none;
    left: -10px;
    content: '';
    border-top: 10px solid transparent;
    border-right: 10px solid #dbe1fc;
    border-bottom: 10px solid transparent;
}
 
.etiq:after {
    position: absolute;
    text-decoration:none;
    top: 7px;
    left: -4px;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    content: '';
}
 

De momento lo he dejado así.

Yo uso Firefox en OSX, ¿puede que tenga algo que ver?

Gracias de nuevo y un saludo.

[AngelKrak]

abajo de .etiq agrega esto:

.etiq a {
text-decoration:none;
}

y ahi tu puse una imagen de cual era tu error, se te habia olvidado poner el style=""

mira asi es como quedaria tu etiqueta si agregas esos 2 codes ;)

[fidelio]

Hola de nuevo,

Ya está solucionado.
No le he puesto el underline en el hover, porque me gusta más sin raya.

Ahora creo que ya está perfecto.

Muchas gracias por tu ayuda.

Saludos.