[Resolved] GPP / Customizer / CSS external links

[Jan]

Hi David,

I’d like to add an icon to all external links in order to improve usability of the website. In order to achieve that I (1) added the following CSS to the Customizer…

/* Fontawesome - External link followed by standard icon */

a:not([href*='webgefaehrte.de']):not([href^='#']):not([href^='/']):not([href^='mailto']):not([href^='tel']):after {
         font-family: 'FontAwesome';
         content: " \f08e";
				 margin-left: 5px;
}

…and (2) added an Element hook to embed the FontAwesome license key.

For all external links this works as designed. Unfortunately the icon is also visible for drop-down elements (see top-right corner on the page linked below). How would you modify the exclude statement :not([href^='?']) to make the icon disappear from interactive menu items?

I tried to target the class “btn dropdown-toggle” with no success ;-(

Any thoughts are highly appreciated.

Many thanks in advance.

Jan

[Elvin]

Hi there,

The linked page doesn’t seem to be created with GeneratePress.

Plus, I’m not exactly sure which links should be targeted and which ones to be excluded.

If its the links within the content on GeneratePress theme, this should work.

.entry-content a{
	font-family: 'FontAwesome';
	content: " \f08e";
	margin-left: 5px;
}

But since I’m not exactly sure which ones to target, this may be incorrect/insufficient.

[Jan]

Hi Elvin,

thanks for taking a shot at this. The page is indeed created within the GP theme. I’m in contact with Tom (separate threat) to find out why CSS from the GP child theme are not being loaded on this par of the website.

Back to this topic. Excluded are all internal links that are part of the webgefaehrte.de domain. All others need to be included.

From my understanding the a:not statement seems to handle drop-down menus and valid external links alike.

In order words, which a:not statement can you think of that excludes drop-down menus from the list of valid external links?

Thanks,
Jan

[Elvin]

If you can get the class selector of the menu item ancestor of their respective anchor tags, we can try something like this:

*:not(.class-of-the-menu-item-that-has-dropdown) a:not([href*='webgefaehrte.de']):not([href^='#']):not([href^='/']):not([href^='mailto']):not([href^='tel']):after {
         font-family: 'FontAwesome';
         content: " \f08e";
				 margin-left: 5px;
}

We’re basically doing a wild card for the parent container of the anchor but not go for dropdown menu classes.

[Jan]

Hi Elvin,

this sounds promising. There are three classes that we can target potentially (see screenshot).

I tried the following CSS with no luck so far:

*:not(.dropdown-toggle) or
*:not(.dropdown) or
*:not(.mpcs-down-dir) and always added the following

a:not([href*='webgefaehrte.de']):not([href^='#']):not([href^='/']):not([href^='mailto']):not([href^='tel']):after {
         font-family: 'FontAwesome';
         content: " \f08e";
				 margin-left: 5px;
}

Not quite sure how you would like me to determine the “menu item ancestor”.

Any additional guidance is much appreciated.

Thanks,
Jan

[David]

Hi there,

maybe this selector will do what you need:

a[href^="https://"]:not([href*="webgefaehrte.de"]):after

This only applies to links that have a href beginning with https:// that DO NOT include your domain name.

[Jan]

Hi David,

thanks for getting back. I added the following CSS to the Customizer:

a[href^="https://"]:not([href*="webgefaehrte.de"]):after

Then I cleared the cache both on server and browser-level and re-ran the test. With no luck 😉

Really sorry to take up so much of your valuable time. I created a user account for you to access the membership area directly because the drop-down controls appeared in this section only. This will hopefully help to get to the root of the issue more efficiently.

The attached screenshot explains where the external link icon still shows up. I’d like to remove these two icons by applying an exclusion rule.

Any assistance is much appreciated.

Regards,
Jan

[David]

Sorry i should have explained better 🙂

Remove you current CSS and add:

a[href^="https://"]:not([href*="webgefaehrte.de"]):after {
    font-family: 'FontAwesome';
    content: " \f08e";
    margin-left: 5px;
}

[Jan]

Awesome. This works very well.

Many thanks David

[David]

Glad to be of help!

[Author]

Posts