External Link Icon and Styling en

Installations 42 Likes 7

Automatically adds a recognizable icon after external links in entity content areas (entry, posts, dashboard widgets, etc.) and provides custom properties to style them further.

This plugin is compatible with all official themes and should integrate seamlessly with Marketplace themes. It pairs well with Mention Type Indicators.

Inter-campaign links are also supported. When you import an entity from a different campaign and that entity has mentions, your copy of the entity will still point to the original targets of those mentions across campaigns. Those links will show a "broken link" icon to remind you to create your own version of those entities if needed, and use the same stylings as external links, though you can control color separately to differentiate them.

Settings

You can add and customize the following CSS custom properties to your campaign to give external links a more distinct appearance:

:body {
	--external-link-color: var(--link-text);
	--external-link-hover-color: var(--link-hover);
	--external-link-font: inherit;
	--external-link-size: inherit;
	--external-link-weight: inherit;
	--external-link-decoration: inherit;
	--intercampaign-link-color: var(--link-text);
	--intercampaign-link-hover-color: var(--link-hover);
}

The default values above correspond to the official Default theme.

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):

External link icons, different font and color

New update!

Latest version 1.5 View content

Released 1 day ago

Added support for inter-campaign links created when an entity imported from a different campaign has mentions (which still point to their original target across campaigns). Those will show a "broken link" icon and use the same stylings as external links, though you can give them a distinct color using the new custom properties --intercampaign-link-color and --intercampaign-link-hover-color.

Plugin CSS for 1.5


/* BEGIN External Link Icon and Styling by Salvatos */
:root {
	--external-link-color: var(--link-text);
	--external-link-hover-color: var(--link-hover);
	--external-link-font: inherit;
	--external-link-size: inherit;
	--external-link-weight: inherit;
	--external-link-decoration: inherit;
    --intercampaign-link-color: var(--link-text);
	--intercampaign-link-hover-color: var(--link-hover);
}
.entity-content a[href*="//"]:not([href*="kanka.io"]) {
	color: var(--external-link-color, hsl(var(--p)));
	font-family: var(--external-link-font);
	font-size: var(--external-link-size);
	font-weight: var(--external-link-weight);
	text-decoration: var(--external-link-decoration);
}
.entity-content a[href*="//"]:not([href*="kanka.io"]):hover {
	color: var(--external-link-hover-color, hsl(var(--pf)));
}
.entity-content a[href*="//"]:not([href*="kanka.io"])::after {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f35d";
	font-size: 9px;
	vertical-align: top;
	margin-left: 2px;
}
/* Inter-campaign mentions (in imported entities) */
.external-mention {
    color: var(--intercampaign-link-color, hsl(var(--p)));
	font-family: var(--external-link-font);
	font-size: var(--external-link-size);
	font-weight: var(--external-link-weight);
	text-decoration: var(--external-link-decoration);
}
.external-mention:hover {
    color: var(--intercampaign-link-hover-color, hsl(var(--pf)));
}
.external-mention::after {
    font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f127";
	font-size: 10px;
	margin-left: 3px;
}
/* END External Link Icon and Styling by Salvatos */