Agregar subrayado a los enlaces del contenido en WordPress con CSS

  • Autor Autor Mykeura
  • Fecha de inicio Fecha de inicio
Mykeura

Mykeura

Zeta
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
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.
 
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; }
 
Lo que tienes que hacer es encontrar cual es la etiqueta adecuada, y ponerle, por ejemplo , así:

.post { text-decoration:underline; }

Saludos
 
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; }
Hacer clic para expandir...

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
Hacer clic para expandir...

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
Hacer clic para expandir...

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.
 
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á
 
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á
Hacer clic para expandir...

La verdad, no se Julcar.
¿Como puedo buscarla?
 
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
 
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.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba