Description

Use this Template to create a portable, linked WDS Button inline. Floating to the left or right is internally supported by this template, & you can also surround this template, or several copies of this template, in <center> Tags to center them as well.

The below section details usage information on the assumption that this template is already set up. If you would like to export this template to your Wiki, see the Installation section.

Syntax

{{WDS|Link|Text/Position|Text/Position|tooltip = Hover Text}}

Changing link text

{{WDS|Main Page|Cool Page}} 
{{WDS|w:Help:Contents|Cool Page}}
{{WDS|https://c.fandom.com/wiki/Help:Contents|Cool Page}} 
{{WDS|{{fullurl:Help:Contents|uselang=es}}|Cool Page}}

Change tooltip text

{{WDS|Main Page|tooltip = Very Cool Page}}

Centered

<center>{{WDS|Main Page}}</center>

Floated right

{{WDS|Main Page|r}}

Dealing with URLs with = in them

{{WDS
|1 = https://c.fandom.com/wiki/Help:Contents?diff=cur
|2 = This link has = in the URL
|3 = r
}}

Output

Changing link text

Cool Page Cool Page Cool Page Cool Page

Change tooltip text

Main Page

Centered

Floated right

Main Page

Dealing with URLs with = in them

This link has = in the URL

Installation

Importing

• Go to Special:Export.
• Type Template:WDS into the large field.
• Make sure that “Include templates” is selected.
• Click “Export” to download the XML file.
• Go to Special:Import on your Wiki (you must be an Administrator).
• Choose the file you just downloaded.
• Click upload file, & then you’re done.
• For more info, or if you are stuck, see w:Help:Exporting pages.

Classification

After the import is done, classify this template as Design for 1:1 output in mobile (see instructions). If 1:1 output is not desired, classify this template as a Context-link instead.

CSS

Add this CSS to your Wiki’s MediaWiki:Common.css^[1] file:

.custom-wds-wrapper a {
    text-decoration: none;
}

Optimal Mercury output

If classified as a Context-link, this section can be ignored.

Follow these instructions to ensure that this template displays well in the Mercury skin:

• Text should always be two lines below or above these templates to ensure that they do not share the same line in Mercury.
• Always include a single space between each stacked template, if used side-by-side, to ensure that there is separating space in Mercury.
• When centering, <center></center> Tags must be used, since other methods of centering are ignored by Mercury.
  • Exception: The <p style="text-align: center;"></p> method works within Portable Infobox <navigation> Tags in Mercury. (Details)
  • <p style="text-align: center;"></p> Tags can be used outside of PIs if you desire this template to only be centered in desktop, but not in Mercury.

While doing the above should ensure 1:1 output in Mercury, the following should be noted:

• The template will always adopt the blue accent-color Mercury uses.
• Floats are ignored.
• Too many templates in a row can wrap onto multiple lines in Mercury, looking aesthetically displeasing. To avoid this, no more than two or three should be used in succession (depending on how much text is in each template), & should instead be dispersed to different parts of the article.
  • Exception: Mercury only works on the User blog, Category, & content (main or custom) namespaces, so there is no need to worry about Mercury display outside those namespaces (such as in the Project namespace).
  • Tip: Always preview in Mobile to make sure this template displays to your liking.

Custom styling

If desired, .custom-wds.wds-button.wds-is-squished is a selector that can be used to style the internal <span> Tags via site-wide CSS, while .custom-wds-wrapper can be used to style the external <span> Tags that surround the link itself (<a>). An example CSS snippet is below:

.custom-wds-wrapper a {
    text-decoration: none;
}

.custom-wds.wds-is-secondary.wds-button {
    color: #F14800;
    border-color: #F14800;
}

.custom-wds.wds-is-secondary.wds-button:hover {
    color: #FF8A58;
    border-color: #FF8A58;
}

Footnotes