Comments on: Highlighting External Links within WordPress

By: Bookmarks about Divs

Bookmarks about Divs — Sun, 03 Aug 2008 23:46:25 +0000

[...] – bookmarked by 1 members originally found by artefact on July 19, 2008 Highlighting External Links within WordPress http://blog-well.com/2008/07/06/highlighting-external-links-within-wordpress/ – bookmarked by 4 [...]

By: links for 2008-07-29 « Computer Learning Resources

links for 2008-07-29 « Computer Learning Resources — Tue, 29 Jul 2008 07:40:53 +0000

[...] Highlighting External Links within WordPress | BlogWell (tags: wordpress) [...]

By: paan

paan — Tue, 29 Jul 2008 01:48:45 +0000

thanks for the tip. I would definitely try this.

Note on the issue with the padding right.

Would this be solved by putting the new style on top of the css file. Since any other style that uses it will have precedence?

I never tried it, but it’s the first thing that pops into my my mind instead of the !important attribute. I’ll report back if it works or not after i try it

By: hntrnyc

hntrnyc — Sun, 27 Jul 2008 00:21:26 +0000

hello mad and thank you for your response. the objects appeared everywhere after step three and nowhere after step 4 and on. this is a new theme i’m working with and i did not write the code so i believe it might just be a compatibility issue. i finally just changed the color of the hyperlinks to one that was already in my theme so it actually looks quite good. oddly enough this is the first time i have run across a WP theme that didn’t automatically highlight and underline hyperlinks. this one only showed under a hovering cursor.

thank you again for this informative piece. i am new to wordpress and html for that matter, and i would be nowhere if it wasn’t for folks like yourself posting useful,quality content.

cheers, hntrnyc

By: Mad

Mad — Sat, 26 Jul 2008 18:59:39 +0000

@hntrnyc – Changing the color/underlining of external links is a little bit trickier, since these attributes are used throughout your theme. Using the background and padding-right attributes are not typically used so the likelihood of conflict is less.

I would like to understand what you changed to get ‘everywhere’ and ‘nowhere’.

I would expect after adding the following above “/*++++++ MAIN ++++++++*/” in your theme’s style.css file, it should work:

a[href^="http:"], a[href^="https:"]

{

background: url(images/external.gif) no-repeat right top;

padding-right: 12px;

}

#header a[href^="http:"], #header a[href^="https:"],

#footer a[href^="http:"], #footer a[href^="https:"],

#sidebar a[href^="http:"], #sidebar a[href^="https:"],

a.noexternallink[href^="http:"], a.noexternallink[href^="https:"]

a[href^="http://tekb8t.com"], a[href^=https://tekb8t.com]

{

background: none;

padding-right: 0px;

}

And uploading external.gif to “wp-content/themes/dailypress/images”.