Jump to content

Style text links but not image links


Recommended Posts

I'd like to add a little extra styling to text links in all areas (forum, pages, calendar, etc) but can't figure out a simple css declaration without unintended consequences.

Styling ipsType_richText seemed to get close but then I found that all sorts of links were being styled that I didn't intend, for example inside the editor including the buttons, etc. I started hunting down exceptions to 'undo' the styling.

.ipsType_richText a {
	box-shadow:inset 0 -6px 0 #c6def3;
.ipsType_richText a:hover
/* remove unintended link styling */
a.ipsButton  {box-shadow:none;}
a[data-ipslightbox] {box-shadow:none !important;background:none}
a:hover[data-ipslightbox] {background:none; !important;}
a.ipsAttachLink {box-shadow:none !important;}
div[data-role="memberSignature"] a {box-shadow:none !important;}
a:hover.ipsAttachLink {background:none;}
.cke_toolbox a{box-shadow:none !important;}

But I cannot for the life of me figure out the necessary selectors + syntax to successfully stop styling links that are applied to embedded images that are links. Here's an example where the link and hover background is popping up behind an image that has been set to link to a downloadable document:



<a href="https://example.com/files/file/nnn_event_flyer/?do=download&r=385" 
rel=""><img alt="tototrot_icon.png" 
class="ipsImage ipsImage_thumbnailed boxed" data-fileid="1053" data-unique="rkw4y7v72" 
style="width: 200px; height: auto;"></a>

Also possible (even likely) is that there is a far simpler overall text link styling approach that has fewer unintended consequences and doesn't require tracking down every link type and un-styling it! 




Link to comment
Share on other sites


This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...