Template:Comic: Difference between revisions
Jump to navigation
Jump to search
TinyPonies (talk | contribs) (Fixed last, prev btns, changed bg color to transparent) |
TinyPonies (talk | contribs) (Stretched arrow buttons vertically, added outline when center btn hovered over) |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 6: | Line 6: | ||
Now make an unordered list which will display as the navigation bar | Now make an unordered list which will display as the navigation bar | ||
--><ul style="display: flex; height: auto; justify-content: center; margin: 0 0 | --><ul style="display: flex; height: auto; justify-content: center; margin: 0 0 20px 0;" class="no-link-underline"><!-- | ||
Generate the |< and prev buttons, but only if {{{number}}} exists and is greater than 1 | Generate the |< and prev buttons, but only if {{{number}}} exists and is greater than 1 | ||
| Line 14: | Line 14: | ||
-->|<li style="background-color: transparent; | -->|<li style="background-color: transparent; | ||
border-radius: 1px; | border-radius: 1px; | ||
display: | transform: scaleY(1.2); display: block; font-size: 40px; font-variant: small-caps; font-weight: 900; | ||
-webkit-text-stroke: | -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!-- | ||
link to #1 | link to #1 | ||
-->[[1|<span style="color: #fff; padding: 0 12px;"><<</span>]]</li><!-- | -->[[1|<span style="color: #fff; padding: 0 12px;"><<</span>]]</li><!-- | ||
| Line 22: | Line 22: | ||
--><li style="background-color: transparent; | --><li style="background-color: transparent; | ||
border-radius: 1px; | border-radius: 1px; | ||
display: | transform: scaleY(1.2); display: block; font-size: 40px; font-variant: small-caps; font-weight: 900; | ||
-webkit-text-stroke: | -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!-- | ||
link to previous comic | link to previous comic | ||
| Line 33: | Line 33: | ||
Regardless of {{{number}}}, we need to make the comic date, link etc. | Regardless of {{{number}}}, we need to make the comic date, link etc. | ||
--><li style="background-color: #fa9b63; | --><li style="background-color: #fa9b63; | ||
border-radius: 1px; | border: #fa9b63 solid 2px; border-radius: 1px; | ||
display: | display: flex; font-size: 17px; font-variant: small-caps; font-weight: 600; | ||
margin: | margin: auto 1em; padding: 0.5em 0.75em;" | ||
class="plainlinks"><!-- | class="plainlinks"> | ||
<div style="display: block; margin: auto 1em;"><!-- | |||
[ and ] makes an external link, vs. [[ and ]] which are internal only. | [ and ] makes an external link, vs. [[ and ]] which are internal only. | ||
| Line 50: | Line 51: | ||
Generate the title, with date if it exists | Generate the title, with date if it exists | ||
--><span style="color: #592305; padding: 0 | --><span style="color: #592305; padding: 0;">Comic <!-- | ||
-->{{#ifexpr:{{{number|-1}}}>= 1|#|}}{{{number|}}} {{#if:{{{date|}}}|({{{date}}})}}</span>]</li><!-- | -->{{#ifexpr:{{{number|-1}}}>= 1|#|}}{{{number|}}} {{#if:{{{date|}}}|({{{date}}})}}</span>] | ||
</div></li><!-- | |||
Now make the next and >| buttons provided comic number exists | Now make the next and >| buttons provided comic number exists | ||
| Line 62: | Line 64: | ||
-->|<li style="background-color: transparent; | -->|<li style="background-color: transparent; | ||
border-radius: 1px; | border-radius: 1px; | ||
display: | transform: scaleY(1.2); display: block;font-size: 40px; font-variant: small-caps; font-weight: 900; | ||
-webkit-text-stroke: | -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!-- | ||
-->[[{{#expr:{{{number}}}+1}}{{!}}<span style="color: #fff; padding: 0 12px;">></span>]]</li><!-- | -->[[{{#expr:{{{number}}}+1}}{{!}}<span style="color: #fff; padding: 0 12px;">></span>]]</li><!-- | ||
| Line 69: | Line 71: | ||
--><li style="background-color: transparent; | --><li style="background-color: transparent; | ||
border-radius: 1px; | border-radius: 1px; | ||
display: | transform: scaleY(1.2); display: block;font-size: 40px; font-variant: small-caps; font-weight: 900; | ||
-webkit-text-stroke: | -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!-- | ||
-->[[{{LATESTCOMIC}}{{!}}<span style="color: #fff; padding: 0 12px;">>></span>]]</li><!-- | -->[[{{LATESTCOMIC}}{{!}}<span style="color: #fff; padding: 0 12px;">>></span>]]</li><!-- | ||
Latest revision as of 14:17, 21 November 2024
This is the basic infobox-style header template used to display xkcd comics on their own pages, including the comic number (with external link to xkcd), publication date, title, comic image, and title text.
Sample[edit]
The following is a sample usage of this template:
| 2008-03-25 |
 Title text: 2008-03-25 |
Votey[edit]
Usage[edit]
{{comic
| number =
| date =
| title =
| name =
| before =
| image =
| custom =
| customvotey=
| imagesize =
| noexpand =
| titletext =
| ldomain =
| lappend =
}}
Notes[edit]
The above sample is produced by the following code:
{{comic
| number = 1127
| date = March 25, 2008
| title = 2008-03-25
| name = 2008-03-25
| image = 20080325.gif
| votey = 20080325after.gif
| titletext = 2008-03-25
}}