Help:Author Resources/Hatnote with buttons

This article will explain how Template:DSLogo is made to recreate a more unique hatnote with buttons.

Template structure on Distant Worlds' example:

<templatestyles src="DSLogo/style.css"/>{{Hatnote
|file1=dsicon.png
|file2=Archangel associated letter.png
|file_size=120px
|font=Rubik
|color=white
|primary_gradient=to bottom, #ffffff, #F5F5F5
|primary='''"ACROSS SPACE & TIME TOWARDS DISTANT WORLDS"'''
|secondary=<div class="DSRedirectWrapper"><span class="DSRedirect DSRedirectMain">[[File:iron_home.png|class=skin-invert-image|link=Scope:Distant Worlds]]<br>[[Scope:Distant Worlds|'''''MAIN PAGE''''']]</span><span class="DSRedirect">[[File:Icon dotted cube.png|37px|class=skin-invert-image|link=Index:Distant Worlds]]<br>[[Index:Distant Worlds|'''''CATALOGS''''']]</span><span class="DSRedirect">[[File:Star Sol DS.png|37px|link=Index:Distant Worlds/Stars]]<br>[[File:Icon-alien-civilisations.png|37px|class=skin-invert-image|link=Index:Distant_Worlds/Civilisations]]</span><span class="DSRedirect">[[File:icon_fx_function.png|class=skin-invert-image|link=Distant Worlds Equations]]<br>[[Distant Worlds Equations|'''''EQUATIONS''''']]</span><span class="DSRedirect">[[File:icon_language.png|class=skin-invert-image|link=Lexica:Distant Worlds]]<br>[[Lexica:Distant Worlds|'''''DIALECTS''''']]</span></div>
|italic_secondary=no
|remove_hr=yes
}}

Explanation:

|file1=dsicon.png -> First icon on the left
|file2=Archangel associated letter.png -> Second icon on the right
<templatestyles src="DSLogo/style.css"/> -> Source to the styles.css itself
|primary_gradient=to bottom, #ffffff, #F5F5F5 -> Text Gradience Effect
|remove_hr=yes removes the bar

the font automatically adapts to what the Scope uses by default

Now the primary part is the |secondary

<div class="DSRedirectWrapper"></div> -> the main body of the hatnote, entire thing must be included within this division
class="DSRedirect" -> are the buttons themselves

The button's appearance itself is:

<span class="DSRedirect">[[File:iron_home.png|class=skin-invert-image|link=Scope:Distant Worlds]]<br>[[Scope:Distant Worlds|'''''MAIN PAGE''''']]</span>

-> first you define a 32x32 icon above, then the text itself, the buttons dyanmically adapt to the text lenght, to make most area clickable, using |link= we can make the icon also clickable

 

.DSRedirectWrapper {
	display: inline-grid;
	grid-template-columns: 1fr 1fr 0.5fr 1fr 1fr;
	align-items: center;
	justify-items: center;
	text-align: center;
	gap: var(--space-sm);
	width: 80%;
	margin-top: var(--space-xs);
}

.DSRedirectMain {
	color: #00f2ff;
}

.DSRedirect {
    display: inline-block;
    width: fit-content;
    background: transparent;
    border: 0.5px solid #ffffff;
    border-radius: 12px;
    padding: var(--space-xs);
    font-size: var(--font-size-medium);
    text-shadow: #ffffff 0px 0px 1px;
    transition: all 0.3s ease-in-out;
}

.DSRedirect:hover {
    background: #16181d;
}

Explanation:

.DSRedirectWrapper with display: inline-grid it creates a grid structure where the buttons are housed, in grid-template-columns you define how many buttons you will want to have, and their width (With CSS Grid Layout, Fr is a fractional unit and 1fr is for 1 part of the available space.), for example 0.5fr can be used for icon only. gap: var(--space-sm) defines the gap between the buttons

DSRedirect is the decoration of the button itself,

border: 0.5px solid #ffffff; is the width of the outline around button itself, its thickness, and color

transition: all 0.3s ease-in-out; is the animation .DSRedirect:hover that appears when you hover over the buttons

Final Appearance: