User:Cassiel Seraphim/Sandbox: Difference between revisions

(3 intermediate revisions by the same user not shown)

Line 204:

In the rare case your code or text has some templates or wiki-code you don't want to format, but still want to be able to add your own wiki commands you can take this even further by adding {{co|violet|<nowiki>}} to the opening pre-line and {{co|violet|</nowiki>}} in the closing part then wrap any individual wiki-code inside with the reverse {{co|violet|</nowiki>}} wiki-code {{co|violet|<nowiki>}} markup.

Since this opens up for html-tags as well as wiki-markups it might be necessary to break up tags or replace equal signs to get the parsed result to your liking. This can be done by using {{co|slateblue|&lt;}} instead of {{co|violet|<}} and {{co|slateblue|&gt;}} instead of {{co|violet|>}} for tags plus {{co|slateblue|&#61;}} instead of {{co|violet|=}} for the equal sign.

Since this opens up for html-tags as well as wiki-markups it might be necessary to break up tags or replace equal signs to get the parsed result to your liking. This can be done by using {{co|slateblue|&lt;}} instead of {{co|violet|<}} and {{co|slateblue|&gt;}} instead of {{co|violet|>}} for tags plus {{co|slateblue|&#61;}} instead of {{co|violet|=}} for the equal sign. Technically you only need to break the tag in one place to achieve this, like using {{co|slateblue|<pre&gt;}} as this will be enough for the parser to ignore the incomplete tag, but sometimes it's worth changing both brackets to avoid any potential problems with the rest of the code.

= Useful HTML-codes =

Line 234:

| valign="top" | <br>For more HTML-codes, see this site:<br>[http://www.ascii.cl/htmlcodes.htm HTML Codes - Table of ascii characters and symbols]

|}

= CSS table-magic =

Sometimes you just want some more granular control over formatting in you table, be that row-wise or column-wise. A wonderful and might I add neat trick is to use {{co|violet|nth-child()}} or {{co|violet|nth-last-child()}} to select which columns (or other element) should be affected by a specific format through the parameter variable.

The parameter can allow you to do simple identifications like {{co|slateblue|(1)}} for '''first''', {{co|slateblue|(odd)}} for '''first, third, fifth etc''' or more grouped selections like {{co|slateblue|(-n+2)}} for '''first two columns''' etc. Then {{co|violet|nth-last-child()}} reverses it and {{co|slateblue|(1)}} turns to '''last''' and {{co|slateblue|(-n+2)}} to '''last two right-most columns''' for example.

Add the following CSS-snippet to the page/section before the actual table:

<pre>

{{#css:

tr td:nth-child(-n+2) { text-align: left; }

}}

</pre>

Then continue with the actual table:

<pre>

{| class="wikitable" style="text-align: center;"

! Column 1

! Column 2

! Column 3

! Column 4

|-

| Foo

| Bar

| 1

| 2

|}

</pre>

That will allow you to make a simple and clean table, that's easy for people to edit and read, without cluttering it up with various styles on a cell by cell basis when all you want to do is have a table mostly aligned one way but specifically tailor a few columns in a different way.

This is how it ends up, affected rows highlighted in {{co|slateblue|blue}}:

{{#css:

.testing tr td:nth-child(-n+2) { text-align: left; }

}}

{| class="wikitable testing" style="text-align: center;"

! Column 1

! Column 2

! Column 3

! Column 4

|-

| {{co|slateblue|Foo}}

| {{co|slateblue|Bar}}

| 1

| 2

|}

This is of course not limited to columns, but can also easily be used to alternate background colours for rows etc. For more examples of how you can use the selector part, see [https://css-tricks.com/almanac/selectors/n/nth-child/ :nth-child selector]

= Colours =

@@ Line 204: / Line 204: @@
 In the rare case your code or text has some templates or wiki-code you don't want to format, but still want to be able to add your own wiki commands you can take this even further by adding {{co|violet|&lt;nowiki&gt;}} to the opening pre-line and {{co|violet|&lt;/nowiki&gt;}} in the closing part then wrap any individual wiki-code inside with the reverse {{co|violet|&lt;/nowiki&gt;}} wiki-code {{co|violet|&lt;nowiki&gt;}} markup.
-Since this opens up for html-tags as well as wiki-markups it might be necessary to break up tags or replace equal signs to get the parsed result to your liking. This can be done by using {{co|slateblue|&amp;lt;}} instead of {{co|violet|<}} and {{co|slateblue|&amp;gt;}} instead of {{co|violet|>}} for tags plus {{co|slateblue|&amp;#61;}} instead of {{co|violet|=}} for the equal sign.
+Since this opens up for html-tags as well as wiki-markups it might be necessary to break up tags or replace equal signs to get the parsed result to your liking. This can be done by using {{co|slateblue|&amp;lt;}} instead of {{co|violet|<}} and {{co|slateblue|&amp;gt;}} instead of {{co|violet|>}} for tags plus {{co|slateblue|&amp;#61;}} instead of {{co|violet|&#61;}} for the equal sign. Technically you only need to break the tag in one place to achieve this, like using {{co|slateblue|<pre&amp;gt;}} as this will be enough for the parser to ignore the incomplete tag, but sometimes it's worth changing both brackets to avoid any potential problems with the rest of the code.
 = Useful HTML-codes =
@@ Line 234: / Line 234: @@
 | valign="top" | <br>For more HTML-codes, see this site:<br>[http://www.ascii.cl/htmlcodes.htm HTML Codes - Table of ascii characters and symbols]
 |}
+= CSS table-magic =
+Sometimes you just want some more granular control over formatting in you table, be that row-wise or column-wise. A wonderful and might I add neat trick is to use {{co|violet|nth-child()}} or {{co|violet|nth-last-child()}} to select which columns (or other element) should be affected by a specific format through the parameter variable.
+The parameter can allow you to do simple identifications like {{co|slateblue|(1)}} for '''first''', {{co|slateblue|(odd)}} for '''first, third, fifth etc''' or more grouped selections like {{co|slateblue|(-n+2)}} for '''first two columns''' etc. Then {{co|violet|nth-last-child()}} reverses it and {{co|slateblue|(1)}} turns to '''last''' and {{co|slateblue|(-n+2)}} to '''last two right-most columns''' for example.
+Add the following CSS-snippet to the page/section before the actual table:
+<pre>
+{{#css:
+ tr td:nth-child(-n+2) { text-align: left; }
+}}
+</pre>
+Then continue with the actual table:
+<pre>
+{| class="wikitable" style="text-align: center;"
+! Column 1
+! Column 2
+! Column 3
+! Column 4
+|-
+| Foo
+| Bar
+| 1
+| 2
+|}
+</pre>
+That will allow you to make a simple and clean table, that's easy for people to edit and read, without cluttering it up with various styles on a cell by cell basis when all you want to do is have a table mostly aligned one way but specifically tailor a few columns in a different way.
+This is how it ends up, affected rows highlighted in {{co|slateblue|blue}}:
+{{#css:
+ .testing tr td:nth-child(-n+2) { text-align: left; }
+}}
+{| class="wikitable testing" style="text-align: center;"
+! Column 1
+! Column 2
+! Column 3
+! Column 4
+|-
+| {{co|slateblue|Foo}}
+| {{co|slateblue|Bar}}
+| 1
+| 2
+|}
+This is of course not limited to columns, but can also easily be used to alternate background colours for rows etc. For more examples of how you can use the selector part, see [https://css-tricks.com/almanac/selectors/n/nth-child/ :nth-child selector]
 = Colours =