|
|
| (2 intermediate revisions by 2 users not shown) |
| Line 3: |
Line 3: |
| | ===Paragraph=== | | ===Paragraph=== |
| | Biggest problem I see here horizontal line. Not line but its color. If we would use standard wiki markup we can not change its color. It appears at highest level.. Then it is there no more: | | Biggest problem I see here horizontal line. Not line but its color. If we would use standard wiki markup we can not change its color. It appears at highest level.. Then it is there no more: |
| β | <syntaxhighlight> | + | <syntaxhighlight lang='css'> |
| | PROVIDE EXAMPLES | | PROVIDE EXAMPLES |
| β | </syntaxhighlight> | + | </syntaxhighlight lang='css'> |
| | | | |
| | =1= | | =1= |
| Line 25: |
Line 25: |
| | ===Table=== | | ===Table=== |
| | No HTML table here, only CSS! Tables are used for grid-ish layout. On our wiki is it not often used but there are some features were it is used as 'mark plates': [[Template:Homin|Template: Homin]] | | No HTML table here, only CSS! Tables are used for grid-ish layout. On our wiki is it not often used but there are some features were it is used as 'mark plates': [[Template:Homin|Template: Homin]] |
| β | <syntaxhighlight> | + | <syntaxhighlight lang='css'> |
| | PROVIDE EXAMPLES | | PROVIDE EXAMPLES |
| | </syntaxhighlight> | | </syntaxhighlight> |
| | | | |
| β | ===Text box===
| |
| β | A text box with an border.
| |
| β | Here I would like to propose my version of [[Template:ContentBox]]. My goal is to simplify the code, make it more readable.
| |
| β | lets start with:
| |
| β | ====The original====
| |
| β | <syntaxhighlight>
| |
| β | <includeonly>
| |
| β | <div style="
| |
| β | position:relative; left:4px; right: 4px; top:2px;
| |
| β | border:1px solid #{{ColorAtys|group={{{palette}}}}};
| |
| β | height:25px;
| |
| β | background: #{{ColorAtys|type=bg|group={{{palette}}}}};
| |
| β | background: linear-gradient(to right, #{{ColorAtys|type=bg|group={{{palette}}}}}, #{{ColorAtys|type=light|group={{{palette}}}}});
| |
| β | border: thin solid #{{ColorAtys|type=bg|group={{{palette}}}}};
| |
| β | border-bottom: thin outset #{{ColorAtys|type=dark|group={{{palette}}}}};
| |
| β | color: #{{ColorAtys|type=fg|group={{{palette}}}}};
| |
| β | font-weight: bold;
| |
| β | font-size: 1.25em;
| |
| β | text-align: center;
| |
| β | ">
| |
| β | <div style="position:absolute; left:5px; top:-5px;">[[File:{{{image}}}|38px|link=]]</div>
| |
| β | <div style="position:absolute; left:40px; top:2px; right:0px"><h2 {{#if:{{{id|}}} | id="{{{id}}}Head"| }} style="margin:0; border-bottom:0; font-size:120%; font-weight:bold; text-align:left; padding:.15em .4em;
| |
| β | text-shadow: #{{ColorAtys|type=light|group={{{palette}}}}} -0.1em -0.1em 0.2em, #{{ColorAtys|type=dark|group={{{palette}}}}} 0.1em 0.1em 0.2em;">{{{title}}}</h2></div></div>
| |
| β | |-
| |
| β | |<div {{#if:{{{id|}}}|id="{{{id}}}"|}} style="padding-left:10px; padding-bottom:5px; padding-top:0px;">
| |
| β | {{{content}}}
| |
| β | {{#if:{{{link|}}}|<div align="right">{{{link}}}</div>|}}
| |
| β | </div>
| |
| β | |-
| |
| β | </includeonly>
| |
| β | </syntaxhighlight>
| |
| β | ====my approach====
| |
| β | Before I propose anything... I will like to share my way of approaching such template. Here I will try to present all steps I took before I get to final result.
| |
| β | First step is to understand why was this template created. This one is easy, as template documentation explains it all: we want to have a box with colored ribbon with an icon, title and content. Template call is nicely done as well, and it is crystal clear. We will have to work with 6 parameters (this is more like pseudo code, a working and tested version of the code will be in dnContentBox-template): <syntaxhighlight>
| |
| β | |title=
| |
| β | |id=
| |
| β | |image=
| |
| β | |content=
| |
| β | |link=
| |
| β | |palette=
| |
| β | </syntaxhighlight>
| |
| β | Lets try to read template code... Eheum... Lets don't. Lets dissect it, that can work:
| |
| β | <syntaxhighlight>
| |
| β | <includeonly>
| |
| β | <div style="
| |
| β | position:relative; left:4px; right: 4px; top:2px;
| |
| β | border:1px solid #{{ColorAtys|group={{{palette}}}}};
| |
| β | height:25px;
| |
| β | background: #{{ColorAtys|type=bg|group={{{palette}}}}};
| |
| β | background: linear-gradient(to right, #{{ColorAtys|type=bg|group={{{palette}}}}}, #{{ColorAtys|type=light|group={{{palette}}}}});
| |
| β | border: thin solid #{{ColorAtys|type=bg|group={{{palette}}}}};
| |
| β | border-bottom: thin outset #{{ColorAtys|type=dark|group={{{palette}}}}};
| |
| β | color: #{{ColorAtys|type=fg|group={{{palette}}}}};
| |
| β | font-weight: bold;
| |
| β | font-size: 1.25em;
| |
| β | text-align: center;
| |
| β | ">
| |
| β | </syntaxhighlight>
| |
| β | Lets pull out stuff that looks suspicious:
| |
| β | <syntaxhighlight>
| |
| β | border:1px solid #{{ColorAtys|group={{{palette}}}}};
| |
| β | </syntaxhighlight>
| |
| β | Ok, we are setting color to border here... '''''<nowiki>#{{ColorAtys|group={{{palette}}}}}</nowiki>'''''... Altho idea is good, this looks a bit too complicated for me, plus putting '''''<nowiki>#</nowiki>''''' in front of a template, I am not sure that that's the best practice... as hash sign here is a integral part of the hex-color. Maintain colors is a discussion on it self... Lets just assume that Colors can be defined with two parameters: pallete and function. So same line in my code would look like:
| |
| β | <syntaxhighlight>
| |
| β | border:1px solid {{:{{{Pallete}}}{{varColorsBorder}}}};
| |
| β | </syntaxhighlight>
| |
| β | I would apply same logic to rest of that <div> and try to bring 'stuff' together, with this result:
| |
| β | <syntaxhighlight>
| |
| β | position:relative; left:4px; right: 4px; top:2px; height:25px;
| |
| β | border:1px solid {{:{{{Pallete}}}{{varColorsBorder}}}};
| |
| β | background: {{:{{{Pallete}}}{{varColorsBackGround}}}};
| |
| β | background: linear-gradient(to right, {{:{{{Pallete}}}{{varColorsLight}}}}, {{:{{{Pallete}}}{{varColorsDark}}}});
| |
| β | border: thin solid {{:{{{Pallete}}}{{varColorsBorder}}}};
| |
| β | border-bottom: thin outset {{:{{{Pallete}}}{{varColorsDark}}}};
| |
| β | color: {{:{{{Pallete}}}{{varColorsTextColor}}}};
| |
| β | font-weight: bold;
| |
| β | font-size: 1.25em;
| |
| β | text-align: center;
| |
| β | </syntaxhighlight>
| |
| β | and as it bothers me to look at it while reading rest of code:
| |
| β | <syntaxhighlight>
| |
| β | <div style={{:dnContentBox/css|Pallete={{{Pallete}}}}}">
| |
| β | <div style="position:absolute; left:5px; top:-5px;">[[File:{{{image}}}|38px|link=]]</div>
| |
| β | <div style="position:absolute; left:40px; top:2px; right:0px"><h2 {{#if:{{{id|}}} | id="{{{id}}}Head"| }} style="margin:0; border-bottom:0; font-size:120%; font-weight:bold; text-align:left; padding:.15em .4em;
| |
| β | text-shadow: #{{ColorAtys|type=light|group={{{palette}}}}} -0.1em -0.1em 0.2em, #{{ColorAtys|type=dark|group={{{palette}}}}} 0.1em 0.1em 0.2em;">{{{title}}}</h2></div></div>
| |
| β | |-
| |
| β | |<div {{#if:{{{id|}}}|id="{{{id}}}"|}} style="padding-left:10px; padding-bottom:5px; padding-top:0px;">
| |
| β | {{{content}}}
| |
| β | {{#if:{{{link|}}}|<div align="right">{{{link}}}</div>|}}
| |
| β | </div>
| |
| β | |-
| |
| β | </includeonly></syntaxhighlight>
| |
| β | Not gonna go into detail here.. but rest needs the same, imo:
| |
| β | <syntaxhighlight>
| |
| β | <div style={{:dnContentBox/css|Pallete={{{Pallete}}}}}">
| |
| β | {{:dnContentBox/image|Image={{{Image}}}|Pallete={{{Pallete}}}}}
| |
| β | {{:dnContentBox/title|Title={{{Title}}}|Pallete={{{Pallete}}}}}
| |
| β | {{:dnContentBox/content|Content={{{Content}}}|Pallete={{{Pallete}}}}}
| |
| β | </div>
| |
| β | </syntaxhighlight>
| |
| β | Ta Da!!! I can read that :-)
| |
| β |
| |
| β |
| |
| β |
| |
| β | [[dn-text-box]]
| |
| | | | |
| β | ===Article===
| |
| β | <syntaxhighlight>
| |
| β | PROVIDE EXAMPLES
| |
| β | </syntaxhighlight>
| |
| β | ===Navigation===
| |
| β | <syntaxhighlight>
| |
| β | PROVIDE EXAMPLES
| |
| β | </syntaxhighlight>
| |
| β | ===Page box===
| |
| β | <syntaxhighlight>
| |
| β | PROVIDE EXAMPLES
| |
| β | </syntaxhighlight>
| |
| β | ==Layouts==
| |
| β | ===Main Page===
| |
| β | This page should be attractive enough to invite people to read its content as informative as possible.
| |
| β | * Proposal A
| |
| β | <syntaxhighlight>
| |
| β | PROVIDE EXAMPLES
| |
| β | </syntaxhighlight>
| |
| β | * Proposal B
| |
| β | <syntaxhighlight>
| |
| β | PROVIDE EXAMPLES
| |
| β | </syntaxhighlight>
| |
| β | ----<br/>
| |
| | {{:dn-menu-buttons | | {{:dn-menu-buttons |
| | |CellCount=2 | | |CellCount=2 |
Biggest problem I see here horizontal line. Not line but its color. If we would use standard wiki markup we can not change its color. It appears at highest level.. Then it is there no more:
PROVIDE EXAMPLES
</syntaxhighlight lang='css'>
=1=
111111
==2==
2222222
===3===
3333333
----
That's why I would consider using an alternative approach.
====4====
{{:dn-paragraph
|Header=Some HEADER
|Content=Some text
|Pallete=RT
}}
===Table===
No HTML table here, only CSS! Tables are used for grid-ish layout. On our wiki is it not often used but there are some features were it is used as 'mark plates': [[Template:Homin|Template: Homin]]
<syntaxhighlight lang='css'>
PROVIDE EXAMPLES
