Editing User blog:Gabonnie/Advanced TDSW Coding Manual (section)

=== Gradient in modes template ===
<div class="mw-collapsible mw-collapsed">
This is a gradient:
<div style="padding: 3px; background: linear-gradient(to right, #ffffff, #004F0D);"></div>
as you can see, it looks pretty cool.

Now we're going to add it into a mode template (or literally anything if you have a brain to figure it out).

<syntaxhighlight lang="genshi">
1<center>
2{| class="golden-table"cellspacing="3"
3|-
4! colspan="3" |[[File:GoldenHardcoreIcon.png|25px]] <big>Golden</big>
5|-
6!Previous Debut
7!Current Debut
8!Next Debut
9|-
10|{{{1}}}<br/><small>''{{{2}}}''</small>
11|{{{3}}}<br/><small>''{{{4}}}''</small>
12|{{{5}}}<br/><small>''{{{6}}}''</small>
13|}
14</center>
</syntaxhighlight>
that is a golden mode template, we'll convert it to a gradient version.

<center>
{| class="golden-table"cellspacing="3"
|-
! colspan="3" |[[File:GoldenHardcoreIcon.png|25px]] <big>Golden</big>
|-
!Previous Debut
!Current Debut
!Next Debut
|-
|{{{1}}}<br/><small>''{{{2}}}''</small>
|{{{3}}}<br/><small>''{{{4}}}''</small>
|{{{5}}}<br/><small>''{{{6}}}''</small>
|}
</center>

okay start off with the code.

oh yeah, to make it easier I will add a # to the line that is edited,

Basically there's 2 version of a line of code. 1 is before, 2 is after.

The one with # is before, and with MOD [is after(modified) or completely new]
<syntaxhighlight lang="genshi">
1<center>
#{| class="golden-table"cellspacing="3"
<!-- basically replace golden-table (or anything in the class" to wikitable,
add align center and the style. I suppose that the "golden-table" class already included those
but because we are modding it, we need to add them again. If you want to know what wikitable means
I'll tell you later. -->
MOD{| class="wikitable" align="center" cellspacing="3" style=" color: black; width:75%"
3|-
MOD| colspan="3" style="padding: 3px; background: linear-gradient(to right, #ffffff, #004F0D)" |
<!-- add colspan like a normal person and padding 3 to make the gradient smol. -->
MOD|-
4! colspan="3" |[[File:GoldenHardcoreIcon.png|25px]] <big>Golden</big>
5|-
<!-- add the text align and width so that text have the right size and is aligned. -->
MOD! style="text-align:center; width:25%"|Previous Debut
MOD! style="text-align:center; width:25%"|Current Debut
MOD! style="text-align:center; width:25%"|Next Debut
9|-
<!-- same goes here -->
MOD| style="text-align:center; width:25%"|{{{1}}}<br/><small>''{{{2}}}''</small>
MOD| style="text-align:center; width:25%"|{{{3}}}<br/><small>''{{{4}}}''</small>
MOD| style="text-align:center; width:25%"|{{{5}}}<br/><small>''{{{6}}}''</small>
13|}
14</center>
</syntaxhighlight>
and now we should get:
<center>
{| class="wikitable" align="center" cellspacing="3" style=" color: black; width:75%"
|-
| colspan="3" style="padding: 3px; background: linear-gradient(to right, #ffffff, #004F0D)" |
|-
! colspan="3" |[[File:GoldenHardcoreIcon.png|25px]] <big>Golden</big>
|-
! style="text-align:center; width:25%"|Previous Debut
! style="text-align:center; width:25%"|Current Debut
! style="text-align:center; width:25%"|Next Debut
|-
| style="text-align:center; width:25%"|{{{1}}}<br/><small>''{{{2}}}''</small>
| style="text-align:center; width:25%"|{{{3}}}<br/><small>''{{{4}}}''</small>
| style="text-align:center; width:25%"|{{{5}}}<br/><small>''{{{6}}}''</small>
|}
</center>
oh yeah the wikitable too.

wikitable is basically the "default" or the one came with Wikimedia. It's basically the one that most simple table uses. In this case it is used for modifications as the class "golden-table" cannot do that.
</div>