bradl Posted April 12, 2018 Posted April 12, 2018 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 { background-color:#c6def3; color:#000; text-decoration:none;border:none; } /* 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: Source: <p> <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" src="//content.invisioncic.com/rnnnnnn/monthly_2018_03/tototrot_icon.png.1a5203744c8c9c368b8ca7bec5d2277e.png" style="width: 200px; height: auto;"></a> </p> 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!
Recommended Posts
Archived
This topic is now archived and is closed to further replies.