Public Forums 71,145 posts

[thewraith2 Friend thewraith2Join date: March 2010Posts: 27Downloads:0Uploads:5 Thanks: 2]

#157481

I’ve been dorking with my “template.css” trying to code in making text links having the following:


a { border-bottom: 1px dotted #069; }
a:hover { border-bottom: 1px solid #000;}


I’ve attempted this here:

————————————————
/* MAIN COLUMN
——————————————————— */
/* Content Main —*/
.ja-content-main { }
.ja-content-main a { border-bottom: 1px dotted #069; }
.ja-content-main a:hover { border-bottom: 1px solid #000; }

However, this also places a dotted/solid line under hyperlinked IMAGES in content. I’ve tried to make it so images don’t have this formatting, but haven’t been successful. I can accomplish the reversed…I can underline images, leaving text alone – but I cannot underline text, leaving images alone.

Please advise. Thanks in advance.

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#367092

Can you provide a link to your site along with specific property added

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#367132

Hi @thewraith2: To resolve your problems, please try to do as following
Open template.css and define new style


------------------------------------------------
/* MAIN COLUMN
--------------------------------------------------------- */
/* Content Main ---*/
.ja-content-main { }
.ja-content-main a { border-bottom: 1px dotted #069; }
.ja-content-main a:hover { border-bottom: 1px solid #000; }

/*new style */
.ja-content-main a.link-plus-image { border-bottom:0px dotted;}
.ja-content-main a.link-plus-image:hover { border-bottom: 0px solid;}

– Then, please add class for all link images
exm:
<a href="#" class="link-plus-image"><img src="images/test.jpg" alt="test"></a>

[thewraith2 Friend thewraith2Join date: March 2010Posts: 27Downloads:0Uploads:5 Thanks: 2]

#367160

thuanlq,

Thanks for your response. I had considered the same solution, but fear the multiple editors of content who will be contributing to the site and didn’t really want to rely on them remembering to add “link-plus-image” to every picture they included. I was hoping to make it as fool proof as possible. I realize that may NOT be possible, but it was the dream.

[thuanlq Friend thuanlqJoin date: October 2010Posts: 528Downloads:0Uploads:29 Thanks: 8 Thanked: 121 times in 99 posts]

#367221

Hi,
So, you can use javascript to auto add class “link-plus-image” for all link image on content main, as


window.addEvent('load', function(){
var images = document.getElement(".ja-content-main").getElements("a img");
images.each(function(item,i){
item.getParent("a").addClass("link-plus-image");
})
})


[Author]

Posts