Template:Comic: Difference between revisions
Jump to navigation
Jump to search
(Adding title implementation) |
TinyPonies (talk | contribs) (Centered btns and increased arrow sizes, layout looks more coherent) |
||
| (4 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=" | --><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 12: | Line 12: | ||
{{{number}}} is greater than 1; make a list item and put a button in it that links to #1 | {{{number}}} is greater than 1; make a list item and put a button in it that links to #1 | ||
-->|<li style="background-color: | -->|<li style="background-color: transparent; | ||
border-radius: 1px; | |||
display: inline; font-size: | display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900; | ||
margin: 0 | -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!-- | ||
link to #1 | link to #1 | ||
-->[[1|<span style="color: # | -->[[1|<span style="color: #fff; padding: 0 12px;"><<</span>]]</li><!-- | ||
We're not done here yet, make the back button next | We're not done here yet, make the back button next | ||
--><li style="background-color: | --><li style="background-color: transparent; | ||
border-radius: 1px; | |||
display: inline; font-size: | display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900; | ||
margin: 0 | -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!-- | ||
link to previous comic | link to previous comic | ||
-->[[{{#expr:{{{number}}}-1}}|<span style="color: # | -->[[{{#expr:{{{number}}}-1}}|<span style="color: #fff; padding: 0 12px;"><</span>]]</li><!-- | ||
{{{number}}} doesn't exist or is less than 1; just put non-breaking spaces here | {{{number}}} doesn't exist or is less than 1; just put non-breaking spaces here | ||
| Line 32: | Line 32: | ||
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: # | --><li style="background-color: #fa9b63; | ||
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: # | --><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 60: | Line 62: | ||
Comic number is valid, generate the buttons | Comic number is valid, generate the buttons | ||
-->|<li style="background-color: | -->|<li style="background-color: transparent; | ||
border-radius: 1px; | |||
display: inline; font-size: | display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900; | ||
margin: 0 | -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!-- | ||
-->[[{{#expr:{{{number}}}+1}}{{!}}<span style="color: # | -->[[{{#expr:{{{number}}}+1}}{{!}}<span style="color: #fff; padding: 0 12px;">></span>]]</li><!-- | ||
Make a button that points to LATESTCOMIC (which is of course the latest comic) | Make a button that points to LATESTCOMIC (which is of course the latest comic) | ||
--><li style="background-color: | --><li style="background-color: transparent; | ||
border-radius: 1px; | |||
display: inline; font-size: | display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900; | ||
margin: 0 | -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!-- | ||
-->[[{{LATESTCOMIC}}{{!}}<span style="color: # | -->[[{{LATESTCOMIC}}{{!}}<span style="color: #fff; padding: 0 12px;">>></span>]]</li><!-- | ||
Comic number (plus one) is not valid, don't show the buttons | Comic number (plus one) is not valid, don't show the buttons | ||
| Line 80: | Line 82: | ||
Comic title in =BOLD= | Comic title in =BOLD= | ||
-->{{#if:{{{name|}}}|<tr><td style="font-size: | -->{{#if:{{{name|}}}|<tr><td style="font-size: 30px; padding-bottom:10px">'''{{{name}}}'''</td></tr>|{{#if:{{{title|}}}|<tr><td style="font-size: 30px; padding-bottom:10px">'''{{{title}}}'''</td></tr>}}}}<!-- | ||
Display the (optional) text just before the comic | Display the (optional) text just before the comic | ||
Latest revision as of 16:11, 19 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
}}