Template:Comic: Difference between revisions

From SMBC Wiki
Jump to navigation Jump to search
(Centered text within middle btn, increased size of arrow btns)
(Centered btns and increased arrow sizes, layout looks more coherent)
 
(One intermediate revision 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 10px 0;" class="no-link-underline"><!--
   --><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: inline-block; font-size: 32px; font-variant: small-caps; font-weight: 900;
               display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900;
               -webkit-text-stroke: 2.5px #ff5402; margin: 0 4px; padding: 0; height: 100%;"><!--
               -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;">&lt;&lt;</span>]]</li><!--
         -->[[1|<span style="color: #fff; padding: 0 12px;">&lt;&lt;</span>]]</li><!--
Line 22: Line 22:
         --><li style="background-color: transparent;
         --><li style="background-color: transparent;
               border-radius: 1px;
               border-radius: 1px;
               display: inline-block; font-size: 32px; font-variant: small-caps; font-weight: 900;
               display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900;
               -webkit-text-stroke: 2.5px #ff5402; margin: 0 0.5em; padding: 0; height: 100%;"><!--
               -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!--


               link to previous comic
               link to previous comic
Line 34: Line 34:
       --><li style="background-color: #fa9b63;
       --><li style="background-color: #fa9b63;
           border-radius: 1px;
           border-radius: 1px;
           display: flex; font-size: 16px; font-variant: small-caps; font-weight: 600;
           display: flex; font-size: 17px; font-variant: small-caps; font-weight: 600;
           margin: 0 0.5em; padding: 0.5em 0.75em;"
           margin: auto 1em; padding: 0.5em 0.75em;"
           class="plainlinks">
           class="plainlinks">
           <div style="display: block; margin: auto 1em;"><!--
           <div style="display: block; margin: auto 1em;"><!--
Line 64: Line 64:
         -->|<li style="background-color: transparent;
         -->|<li style="background-color: transparent;
               border-radius: 1px;
               border-radius: 1px;
               display: inline-block; font-size: 32px; font-variant: small-caps; font-weight: 900;
               display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900;
               -webkit-text-stroke: 2.5px #ff5402; margin: 0 4px; padding: 0; height: 100%;"><!--
               -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!--
         -->[[{{#expr:{{{number}}}+1}}{{!}}<span style="color: #fff; padding: 0 12px;">&gt;</span>]]</li><!--
         -->[[{{#expr:{{{number}}}+1}}{{!}}<span style="color: #fff; padding: 0 12px;">&gt;</span>]]</li><!--


Line 71: Line 71:
         --><li style="background-color: transparent;
         --><li style="background-color: transparent;
               border-radius: 1px;
               border-radius: 1px;
               display: inline-block; font-size: 32px; font-variant: small-caps; font-weight: 900;
               display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900;
               -webkit-text-stroke: 2.5px #ff5402; margin: 0 4px; padding: 0; height: 100%;"><!--
               -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!--
               -->[[{{LATESTCOMIC}}{{!}}<span style="color: #fff; padding: 0 12px;">&gt;&gt;</span>]]</li><!--
               -->[[{{LATESTCOMIC}}{{!}}<span style="color: #fff; padding: 0 12px;">&gt;&gt;</span>]]</li><!--



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
2008-03-25
Title text: 2008-03-25

Votey[edit]

20080325after.gif




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
}}