Template:CS button: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
Line 32:
}}
}}
</div><noinclude>
== What this does ==
Renders a link styled as a '''button''' using TemplateStyles (loaded from ''CS button/styles.css'').
Supports alignment (left/center/right), an optional '''mobile full-width''' mode, and an optional custom '''width''' on desktop.
If neither <code>link</code> nor <code>url</code> is provided, the template outputs a non-link, button-like span as a visual fallback.
== Parameters ==
* <code>link</code> – Optional. Internal page to link to (e.g., <code>CS/Self-help book summaries</code>). If present, it takes precedence over <code>url</code>.
* <code>url</code> – Optional. Absolute URL for external destinations (e.g., <code>https://example.com</code>).
* <code>text</code> – Optional. Button label. Default: <code>Button</code>.
You can include symbols, e.g., <code>See more &gt;</code> to show a single chevron.
* <code>align</code> – Optional. One of <code>left</code> (default), <code>center</code>, <code>right</code>. Controls the container alignment.
* <code>mobile</code> – Optional. When set to <code>full</code>, <code>yes</code>, <code>true</code>, <code>1</code>, or <code>block</code>, the button becomes 100% width on small screens (per the stylesheet’s media query).
* <code>width</code> – Optional. Desktop width of the button wrapper (e.g., <code>320px</code>, <code>24em</code>, <code>60%</code>). Defaults to the stylesheet’s width (278px).
On mobile, if <code>mobile=full</code> is used, the mobile rule overrides to full width.
== Examples ==
Basic (internal link):
<pre>
{{CS button
| link=CS/Self-help book summaries
| text=See more
}}
</pre>
External link:
<pre>
{{CS button
| url=https://example.com/self-help
| text=Browse self-help
}}
</pre>
Center aligned:
<pre>
{{CS button
| link=CS/Self-help book summaries
| text=See more
| align=center
}}
</pre>
Mobile full-width (desktop uses default width):
<pre>
{{CS button
| link=CS/Self-help book summaries
| text=See more
| mobile=full
}}
</pre>
Wider on desktop (still full on mobile):
<pre>
{{CS button
| link=CS/Self-help book summaries
| text=See more
| width=320px
| mobile=full
}}
</pre>
Percentage width on desktop:
<pre>
{{CS button
| link=CS/Self-help book summaries
| text=See more
| width=60%
}}
</pre>
Non-link fallback (no navigation):
<pre>
{{CS button
| text=Coming soon
}}
</pre>
Add a chevron (arrow) to the label:
<pre>
{{CS button
| link=CS/Self-help book summaries
| text=See more >
}}
</pre>
Combine alignment, width, and mobile:
<pre>
{{CS button
| link=CS/Self-help book summaries
| text=Explore summaries >
| align=right
| width=320px
| mobile=full
}}
</pre>
== Notes ==
* Use '''either''' <code>link</code> (internal) '''or''' <code>url</code> (external). If both are given, <code>link</code> wins.
* TemplateStyles must be available at <code>CS button/styles.css</code>.
* The template relies on ParserFunctions (<code>#if</code>, <code>#switch</code>, <code>lc</code>). Ensure that extension is enabled.
* Keep template calls flush-left (avoid leading spaces) to prevent MediaWiki from rendering a preformatted block around the output.
== Troubleshooting ==
* '''I see a big grey box / monospace text.''' You likely started a line with a space, which triggers preformatted output. Remove leading spaces and purge the page.
* '''Styles aren’t applying.''' Check that the stylesheet page uses the “Sanitized CSS” content model and that <code><templatestyles src="CS button/styles.css"/></code> is present at the top.
* '''Mobile full-width doesn’t activate.''' Confirm <code>mobile=full</code> (or accepted synonyms) and that your viewport is under the stylesheet’s breakpoint.
</noinclude>
| |||