35

Links sin subrayado

Si no te gusta para nada el efecto subrayado de tus links, puedes hacer que desaparezca fácilmente.

Sitúate en tu plantilla HTML y localiza esta parte (está casi al principio antes de Header), cambias "underline" por "none" y ya tienes tus link sin subrayar.


a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------

Entradas Relacionadas:

35 comentarios:


Gabriela

hola rosa, gracias por tu consejo lo hice como me dijiste y logré poner un dibujito flotante.
gtacias
saludos cariñosos desde chile.

Gabriela

queridísima Rosa:
sabes he dado vuelta mi plantilla intentando poner de favicon el ojito que tengo en mi perfil, a ver si me puedes dar una ayudita.


gracias

Rosa

Hola Gabriela! Me he permitido tomar prestado tu ojito para transformarlo en favicón, porque pensé que seguro te daría problemas el hacerlo.
Ya está preparado para funcionar, simplemente busca esta parte de la plantilla (es el título, está al principio)

<title><data:blog.pagetitle><title>

Pon esto debajo:

<link href='http://img483.imageshack.us/img483/5598/preview16x16ik9.png' rel='shortcut icon' type='image/x-icon'/>
<link href='http://img483.imageshack.us/img483/5598/preview16x16ik9.png' rel='icon' type='image/png'/>

Guarda cambios y ya está, a veces tarda un poco en mostrarse y en IE no se ve en algunas versiones.

Suerte!!

Gabriela

gracias rosa:
lo hice tal cual y ¡¡¡¡ME RESULTÓ!!!
lo malo es que en EI, no se vé.
pero no importa, por lo menos yo lo veo.
gracias.
mil gracias.

Fernando

No hayo el codigo que menciona!!!
Encontre este:
a:link {
color: $mainLinkColor;
}
a:visited {
color: $mainVisitedLinkColor;
}
a:hover {
color: $mainVisitedLinkColor;
}
a img {
border-width:0;
}


/* Blog Header
----------------------------------------------- */
Ayudeme por favor!!, no lo hayo!!

Fernando

Ahora encontre este:
#header-wrapper {
text-align: center;
background:$titleBgColor url("http://img403.imageshack.us/img403/1308/rounders3topcornercq4.jpg") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://img403.imageshack.us/img403/2664/rounders3bottomcornerhm2.jpg") no-repeat left bottom;
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding:5px 30px 10px;
line-height:1.5em;
font: $descriptionFont;
}

Rosa

Fernando, es en el primer código que mencionas:

a:hover {
color: $mainVisitedLinkColor;
}

añade ahí el "none" así:

a:hover {
color: $mainVisitedLinkColor;
text-decoration:none;
}

Fernando

no sale el truco

Rosa

Lo siento Fernando, tendría que ver el blog, o el código de la plantilla...puede ser que tenga más opciones para los links.

Fernando

Tengo una nueva platlla, que por cierto la baje en uno de los enlaces que menciono. Aqui esta la plantilla que tengo
http://www.blogcrowds.com/resources/view_template.php/rounders3_6

Rosa

Fernando, es que este truco se refiere a cuando pasas el ratón sobre los links, en tu caso, tu lo que quieres es quitar el subrrayado que llevan los links aplicados "a la vista". Busca esto:

/* Links
----------------------------------------------- */
a:link {
color: $mainLinkColor;
}

Y añades lo que pongo arriba, así:
/* Links
----------------------------------------------- */
a:link {
color: $mainLinkColor;
text-decoration:none;
}

Fernando Diaz

encontre el codigo que menciona, pero lo que no hayo es el text-decoration:none;.
Donde pongo esa parte?

Rosa

Fernando el text decoración none, es lo que tu tienes que poner para que esa parte que ya tienes te quede así:

/* Links
----------------------------------------------- */
a:link {
color: $mainLinkColor;
text-decoration:none;
}

Alvaro

Pues no puedo quitarlo, Rosa. Esque no sé por qué no me sale "underline" por ninguna parte, y los links siguen con su subrayado.

Un beso.

Rosa

Alvaro, no tienes esa línea, pero para el navegador es como si estuviera por defecto, ya que no hay otra orden que indique como ha de mostrar los enlaces.

Localiza esto en el código de tu plantilla:

/* Links
----------------------------------------------- */
a:link { color: #C73348;}
A:visited { color: #999999 }
A:hover { color: #D56660 }
A:active { color: #D56660 }

Añades el código que comento en la entrada y además las A en mayúscula han de ir en minuscúla, es decir, quedará así:

/* Links
----------------------------------------------- */
a:link { color: #C73348; text-decoration:none; }
a:visited { color: #999999 }
a:hover { color: #D56660 }
a:active { color: #D56660 }

Usa vista previa y si ya no ves el subrayado guarda cambios.

Ser Viajera

Hola!
Eres una genia! Me he pasado todo el día leyéndote y aplicando tus trucos.
gracias!!!
María

Rosa

Ser Viajera , bienvenida :-)
Me alegra serte útil.

Anónimo

Mi problema es igual que no lo encuentro no hay manera , esta es mi plantilla ,haber si me puedes echar una mano gracias ,

------------------------------------------------------ */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

* {
margin: 0px;
padding: 0px;
}
body {
padding-top: 0px;
background-color: #01111d;
color: #FFF;
font-family: verdana, arial, sans-serif;

text-align: left;
letter-spacing: 1px;
}
a {color: #FFF;font-size: 14px;}
a:hover {color: #01a9c0;}
.more {

}
.clear{clear:both;}
p{ margin: 20px 0px 20px 0px;line-height: 16px;font-size: 14px;}
#container {
margin: 0px auto;
width:873px;
}
#menu {
background-image:url(http://img158.imageshack.us/img158/9506/menuat5.gif);
width:862px;
height:90px;
position:relative;
}
#menu li{
position:absolute;
top:50px;

list-style-type: none;
}
#m01 {left:160px;}
#m02 {left:305px;}
#m03 {left:450px;}
#m04 {left:590px;}
#m05 {left:730px;}
#menu a{
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform: uppercase;
}
#menu a:hover {color: #01a9c0;}
#theheader {
background-image:url(http://img383.imageshack.us/img383/4903/headerrk0.gif);
background-repeat:repeat-y;
width:873px;
}
#logo {
width:240px;
height:46px;
margin: 0px 0px 0px 80px;
float:left;
display:inline;
}
#dj {
background-image:url(http://img127.imageshack.us/img127/3564/djwu7.jpg);
width:498px;
height:405px;
float:right;
margin-right:40px;
display:inline;
}
#welcome {
width:210px;
margin: 50px 0px 0px 100px;
float:left;
display:inline;
}
#welcome h2{
margin: 0px 0px 20px 0px;
}
#welcome p{
width:200px;
}
#welcome img{
border: solid 3px #FFFFFF;
}
#middle {
background-image:url(http://img393.imageshack.us/img393/5503/middleuk4.gif);
width:873px;
height:21px;
}
#middle2 {
background-image:url(http://img396.imageshack.us/img396/2659/middle2ne1.gif);
width:873px;
height:22px;
}
#content {
background-image:url(http://img399.imageshack.us/img399/6010/contentdq1.gif);
width:873px;
}
#left {
float:left;
width:435px;
margin: 0px 0px 0px 85px;
display:inline;
}
#right {
float:right;
width:258px;
height:auto;
margin: 0px 62px 20px 0px;
display:inline;
}
#right a img{
margin: 8px 8px 8px 0px;
border: none 0px #FFFFFF;
}
#footer {
background-image:url(http://img398.imageshack.us/img398/3691/footercc9.gif);
background-repeat:no-repeat;
width:873px;
}

#footer p{
height:58px;
width:873px;
text-align:center;
margin: 0px 0px 0px 0px;
padding: 30px 0px 0px 0px;
font-size:11px;
}
#footer a{
font-size:11px;
text-decoration: none;
}

.post-footer, .post-footer a {
font-size: 11px;
}

.widget {
display: block;
clear: both;
padding-bottom: 14px;
}

h2 a, h2 {
font-size: 22px;
clear:both;
display:block;
text-decoration: none;
}

yo no lo encuento no tengo manera,
gracias por todo ,un saludo Trucomam

Rosa

Anónimo, donde dice:

a:hover {color: #01a9c0;}

pon:

a:hover {color: #01a9c0; text-decoration:underline;}

Y, por favor, la próxima vez deja un enlace a tu blog o comenta con tu id de Blogger.

Anónimo

Es que no tengo cuenta en Gmail. la que tengo es Hotmail.Y no me deja por eso te pongo Anonimo, y blogspot no tengo ninguno
abierto es que me descarge esta plantilla y leyendo po encontre esta pagina y la verdad que me gusta mucho pero no se yo mucho de esto.

Bueno lo e puesto donde me as dicho y nada sigue igual no se quita ,la verdad que te agradesco el tiempo que as hechado en ayudarme pero de las 2 dudas que te preguntao ninguna de las 2 e sabio hacerlo , por lo que veo que no te boy a molestar mas y te agradesco de corazon la buena que as sido con migo en ayudarme , bueno un saludo el Trucoman gracias por todo .

Rosa

Trucoman, es que yo lo que explico aquí, es para usar en Blogger blogspot, en general, muchas de las cosas no servirán para una plantilla que no se esté usando en Blogger...

Anónimo

La plantilla ,la que me descarge es de blogger, y lo que quiero es modificar .
,algunas cosas por lo demas lo tengo listo .La descarge Btemplates. su Nombre es Night Club , yo solo quiero es quiarle el subrayao de links , Scrollbars
lo he conseguido me a quedao bien ,gracias de nuevo ,un Saludo Trucoman

Temarium

Hola Rosa, por mas que busco ese código yo no lo tengo y no puedo quitar los subrayados de mis links, a ver si puedes echarmen una mano, gracias

Rosa

Temarium ¿Para cual de tus blogs es?

librosquemuerden

Hola Rosa! volví para decirte que tengo un inconveniente en este caso, quiero quitar el efecto subrayado de todos mis enlaces (realmente no me gusta) sé que es sencillo pero pruebo una y otra vez -cambiar underline x none- y sin embargo no se produce el cambio, espero puedas ayudarme!;)

librosquemuerden

leí todos los comentarios para ver si encontraba la respuesta, encuentro la porción de código, quito underline y coloco none pero no veo cambios ni en la vista previa ni guardando la planilla, por qué puede ser???

Gracias Rosa!

Seba;)

Rosa

librosquemuerden Tienes un error en el código de los enlaces, lo tienes así:

a:link {
color:#2D8930;
text-decoration:none;
}
a:visited {
color:#cc6600;
text-decoration:none;
}position: relative;
top: 2px;
left: 2px;
a:hover {
color:#cc6600;
text-decoration:none;
}

Ahí en medio hay una parte:
position: relative;
top: 2px;
left: 2px;

que está interrumpiendo al funcionamiento del código, no se donde querías aplicar esto, por lógica supongo que sea en el hover, así que tendría que estar así:
a:link {
color:#2D8930;
text-decoration:none;
}
a:visited {
color:#cc6600;
text-decoration:none;
}
a:hover {
color:#cc6600;
text-decoration:none;
position: relative;
top: 2px;
left: 2px;
}

librosquemuerden

gracias por tu respuesta Rosa! sigo sin poder quitar los subrayados de todos mis enlaces:O aunque copio el código así tal cual me dices en el hover, mi idea es quitar el efecto subrayado de los enlaces de menú etiquetas y todos los demás, ya me dirás si se puede hacer algo...

muchas gracias!

Sebastián

librosquemuerden

Bueno...ahora sí parece que finalmente quedó! Lo raro es que hay que cliquear primero una entrada para que aparezca la modificación sin subrayar :O

graciasssssss Rosa!!!!

KaDix

Hola Rosa, fantástico Blog el tuyo, aunque estarás harta de oirlo. Jeje.

Para los que tengan problemas, no encuentren el "A:LINK" como era mi caso o el "TEXT DECORATION:UNDERLINE"...tan solo buscar la etiqueta style y poner debajo:

A:LINK, A:VISITED { text-decoration: none }

Espero que esto ayude, un saludo!
DameGratis.

the gorgeous

Hola Rosa! He estado haciendolo todo.. para sacar el color y subrrayado de los enlaces de mi blog en la columna lateral (sidebar) y he cambiado HTML de underline a none pero nadaa! Ya no sé que mas hacer.. se ha cambiado solo y de repente, antes lo tenia bien.
Muchisimas graciaaas!

Rosa

the gorgeous Suele suceder eso... que se cambia solo si usas código copiado directamente de Word en tus entradas o donde sea... eso y cosas peores... es incompatible con Blogger....

3dmarkcom marketing consulting

http://inmobiliarianortesursa.blogspot.com/
me gustaría quitar el subrayado de la palabra localización. no lo consigo. gracias

Rosa

3dmarkcom marketing consulting En que blog?... tienes como ocho en tu perfil, como para andar buscando...¿y donde está la palabra exactamente?

Judo Louis

Graciaaaasss

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S