Template:H: Difference between revisions

Template page
m (→‎Dependencies: add CSS variables)
m (categorize)
 
Line 82: Line 82:
</pre>
</pre>
|}
|}
[[Category:Templates]]
</noinclude>
</noinclude>

Latest revision as of 07:40, 19 March 2018

{{h|Highlight me}}

Highlight me


It will also highlight links accordingly:

regular link highlighted link
link to a nonexistent page link to a nonexistent page
link to an existing page (Main Page) link to an existing page (Main Page)
link to an external page (wikipedia's BlazBlue article) link to an external page (wikipedia's BlazBlue article)

Notes

BE CAREFUL when combining this class with bold, since the resulting text's appearance will change depending on where you put the quotes:

wikitext on skins with the required CSS on skins without the required CSS
{{h|'''text'''}} text text
'''{{h|text}}''' text text

Dependencies

This class requires the below css, which is automatically included in the Cathedral skin. If this CSS is absent, then the text will simply appear bolded Like This.

CSS
html{
	--NOL-burntgold:     #c5a63b;
	--NOL-gold:          #ffdf8c  /*goldenrod*/ ;
	--NOL-blue:          #347cd0  /*steelblue*/ ;
	--NOL-lightblue:     #8dcaf7  /*lightsteelblue*/ ;
}
/*==================================================
  CUSTOM HIGHLIGHT CLASS (puts a glow around text)
  ==================================================*/

.mw-body-content .highlight {
    text-shadow: 0px 0px 2px var(--NOL-gold) !important;
    color: var(--NOL-whitegold) !important;
}

.mw-body-content a .highlight,
.mw-body-content .highlight a {
    text-shadow: 0px 0px 2px var(--NOL-burntgold) !important;
}

.mw-body-content a.new .highlight,
.mw-body-content .highlight a.new {
    text-shadow: 0px 0px 1px crimson !important;
}

.mw-body-content a.external .highlight,
.mw-body-content a.extiw .highlight, 
.mw-body-content a.extiw:active .highlight,
.mw-body-content .highlight a.external, 
.mw-body-content .highlight a.extiw, 
.mw-body-content .highlight a.extiw:active {
    text-shadow: 0px 0px 2px var(--NOL-lightblue) !important;
}

.mw-body-content a.external:visited .highlight,
.mw-body-content a.extiw:visited .highlight, 
.mw-body-content .highlight a.external:visited, 
.mw-body-content .highlight a.extiw:visited {
	text-shadow: 0px 0px 2px var(--NOL-blue) !important;
}