Agregar subrayado a los enlaces del contenido en WordPress con CSS

Mykeura · 19 Sep 2010

Hola Betas.

Les cuento que actualmente en uno de mis sitios el cual posee un theme en wordpress me gustaría agregar subrayado a todos los enlaces que estén dentro de the_content.

La verdad, me gustaría que el subrayado fuera doble o en puntos. Claro, sino en su defecto que fuera solo una linea y que pudiera definir el color.

Alguien podría ser tan amable de decir como puedo hacer esto desde CSS.

De antemano gracias por sus comentarios.

Mario · 19 Sep 2010

Insertar CODE, HTML o PHP:

.post a { text-decoration:underline; }

Si quieres que la linea sea soble o en puntos entonces usa esto:

Insertar CODE, HTML o PHP:

/* Punteado */
.post a { border-bottom: 1px dotted #348756; }

/* Lineas */
.post a { border-bottom: 1px dashed #348756; }

danielmd · 19 Sep 2010

Aca puedes mas ejemplos de lo que puedes hacer con text-decoration
CSS Links - CSS tutorial

Eskombro · 19 Sep 2010

Lo que tienes que hacer es encontrar cual es la etiqueta adecuada, y ponerle, por ejemplo , así:

.post { text-decoration:underline; }

Saludos

Mykeura · 19 Sep 2010

Mario dijo:
Insertar CODE, HTML o PHP:

.post a { text-decoration:underline; }

Insertar CODE, HTML o PHP:

/* Punteado */ .post a { border-bottom: 1px dotted #348756; } /* Lineas */ .post a { border-bottom: 1px dashed #348756; }

Hola Mario.

Primeramente gracias por hecharme la mano con esto.

Fijate que esta viendo el css de mi sitio y no tengo

Insertar CODE, HTML o PHP:

.post a { text-decoration: underline; }

Así que lo que hice fue agregarlo al fina del archivo style css para ver si me funcionaba pero por alguna razón no me funciono.

Te dejo un enlace a mi sito para que pueda ver como se ve. Pues el problema es que no se distingue entre el texto normal y los enlaces.
Mi sitio

Espero tus comentarios y aportes Mario.

danielmd dijo:
Aca puedes mas ejemplos de lo que puedes hacer con text-decoration
CSS Links - CSS tutorial

Gracias Danielmd.

Voy a ver ahorita el tutorial y probare las opciones que se presentan.

Eskombro dijo:
Lo que tienes que hacer es encontrar cual es la etiqueta adecuada, y ponerle, por ejemplo , así:

.post { text-decoration:underline; }

Saludos

Hola Escombro.
Fijate que como le comento a Mario. En mi css no aparece .post { text-decoration:underline; }

Entonces lo que hice fue agregarlo al final pero no me funciono.

Julcar · 20 Sep 2010

pero sabes cual es la etiqueta/class/id correcta?

es que si no sabes ese dato, el selector css no puede ser cualquiera, sino no funcionará

Mykeura · 20 Sep 2010

Julcar dijo:
pero sabes cual es la etiqueta/class/id correcta?

es que si no sabes ese dato, el selector css no puede ser cualquiera, sino no funcionará

La verdad, no se Julcar.
¿Como puedo buscarla?

Angel Ortega · 20 Sep 2010

Hola de hecho tu sitio si tiene una etiqueta .post , revisando el código fuente sale:

Insertar CODE, HTML o PHP:

[B]<div class="post">[/B]
	    <div class="thumb">
        <div>
            <span class="image" style="background-image: url(http://vidaextrema.org/wp-content/uploads/2010/09/Sugoi-182x182.jpg);">

Y en el css del theme:

Insertar CODE, HTML o PHP:

http://vidaextrema.org/wp-content/themes/SimplePress/style.css

en el apartado de

Insertar CODE, HTML o PHP:

/*------------------------------------------------*/
/*------------------[BASIC STYLES]----------------*/
/*------------------------------------------------*/

Busca la clase .post, supongo que no supiste en cual css era, o de plano no tuviste la delicadeza de buscar, te limitaste a que el notepad te buscara la linea exacta que te dijeron, cuando esta no tenia por que estar igual: en fin, en basic styles esta:

Insertar CODE, HTML o PHP:

                 [B]  .post .text { float: left; width: 426px;}[/B] /*Aqui es donde hay que modificar*/
		#posts .post .no_thumb { width: 640px; }
		.post h2  { font-size: 30px; color: #000; }
			.post h2 a { color: #000; }
			.post p a:hover {text-decoration:underline;}
			.post p a:hover, .post p a:link {text-decoration:underline;}
		.post .line {  background: url(images/line.png) repeat-x bottom; height: 2px; display: block; margin: 5px 0; }
		.readmore { background-image: url(images/readmore-left3.png); height: 24px; di

Si te sirvio dale al dedo verde o saca la verde xD

Saludos

Mykeura · 20 Sep 2010

Hola ArkangelO.

Te comento que el día de ayer Julcar me ayudo a colocar esa opción en el CSS. La verdad, no habia visto lo que me dices y gracias por la nota... eso si amigo, aclaro que no fue que no busque la clase. Si no que mas bien creo que me perdi entre tanto codigo... nuevamente gracias.

Y dedo verde para Julcar (que fue quien me ayudo ayer). Y a ti ArkangelO por tomarte el tiempo.

Saludos.