Template:Comic: Difference between revisions
Jump to navigation
Jump to search
(Adding title implementation) |
TinyPonies (talk | contribs) (Styled navbar CSS to look like SMBC instead of XKCD) |
||
| 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 10px 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: #fff; | ||
border-radius: 1px; | |||
display: inline; font-size: | display: inline-block; font-size: 30px; font-variant: small-caps; font-weight: 900; | ||
margin: 0 4px; padding: | -webkit-text-stroke: 2px #ff5402; margin: 0 4px; 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: #fff; | ||
border-radius: 1px; | |||
display: inline; font-size: | display: inline-block; font-size: 30px; font-variant: small-caps; font-weight: 900; | ||
margin: 0 4px; padding: | -webkit-text-stroke: 2px #ff5402; margin: 0 4px; 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: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | display: inline-block; font-size: 16px; font-variant: small-caps; font-weight: 600; | ||
margin: 0 4px; padding: | margin: 0 4px; padding: 0.5em 0;" | ||
class="plainlinks"><!-- | class="plainlinks"><!-- | ||
| Line 50: | Line 50: | ||
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 12px;">Comic <!-- | ||
-->{{#ifexpr:{{{number|-1}}}>= 1|#|}}{{{number|}}} {{#if:{{{date|}}}|({{{date}}})}}</span>]</li><!-- | -->{{#ifexpr:{{{number|-1}}}>= 1|#|}}{{{number|}}} {{#if:{{{date|}}}|({{{date}}})}}</span>]</li><!-- | ||
| Line 60: | Line 60: | ||
Comic number is valid, generate the buttons | Comic number is valid, generate the buttons | ||
-->|<li style="background-color: # | -->|<li style="background-color: #fff; | ||
border-radius: 1px; | |||
display: inline; font-size: | display: inline-block; font-size: 30px; font-variant: small-caps; font-weight: 900; | ||
margin: 0 4px; padding: | -webkit-text-stroke: 2px #ff5402; margin: 0 4px; 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: #fff; | ||
border-radius: 1px; | |||
display: inline; font-size: | display: inline-block; font-size: 30px; font-variant: small-caps; font-weight: 900; | ||
margin: 0 4px; padding: | -webkit-text-stroke: 2px #ff5402; margin: 0 4px; 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 80: | ||
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 | ||
Revision as of 13:09, 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
The following is a sample usage of this template:
| 2008-03-25 |
 Title text: 2008-03-25 |
Votey
Usage
{{comic
| number =
| date =
| title =
| name =
| before =
| image =
| custom =
| customvotey=
| imagesize =
| noexpand =
| titletext =
| ldomain =
| lappend =
}}
Notes
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
}}