Difference between revisions of "Dn-css-3"
From EncyclopAtys
| Line 32: | Line 32: | ||
====my approach==== | ====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. | 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> | + | 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 lang='css'> |
|title= | |title= | ||
|id= | |id= | ||
| Line 41: | Line 41: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Lets try to read template code... Eheum... Lets don't. Lets dissect it, that can work: | Lets try to read template code... Eheum... Lets don't. Lets dissect it, that can work: | ||
| − | <syntaxhighlight> | + | <syntaxhighlight lang='css'> |
<includeonly> | <includeonly> | ||
<div style=" | <div style=" | ||
| Line 58: | Line 58: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Lets pull out stuff that looks suspicious: | Lets pull out stuff that looks suspicious: | ||
| − | <syntaxhighlight> | + | <syntaxhighlight lang='css'> |
border:1px solid #{{ColorAtys|group={{{palette}}}}}; | border:1px solid #{{ColorAtys|group={{{palette}}}}}; | ||
</syntaxhighlight> | </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: | 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> | + | <syntaxhighlight lang='css'> |
border:1px solid {{:{{{Pallete}}}{{varColorsBorder}}}}; | border:1px solid {{:{{{Pallete}}}{{varColorsBorder}}}}; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
I would apply same logic to rest of that <div> and try to bring 'stuff' together, with this result: | I would apply same logic to rest of that <div> and try to bring 'stuff' together, with this result: | ||
| − | <syntaxhighlight> | + | <syntaxhighlight lang='css'> |
position:relative; left:4px; right: 4px; top:2px; height:25px; | position:relative; left:4px; right: 4px; top:2px; height:25px; | ||
border:1px solid {{:{{{Pallete}}}{{varColorsBorder}}}}; | border:1px solid {{:{{{Pallete}}}{{varColorsBorder}}}}; | ||
| Line 79: | Line 79: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
and as it bothers me to look at it while reading rest of code: | and as it bothers me to look at it while reading rest of code: | ||
| − | <syntaxhighlight> | + | <syntaxhighlight lang='css'> |
<div style={{:dnContentBox/css|Pallete={{{Pallete}}}}}"> | <div style={{:dnContentBox/css|Pallete={{{Pallete}}}}}"> | ||
<div style="position:absolute; left:5px; top:-5px;">[[File:{{{image}}}|38px|link=]]</div> | <div style="position:absolute; left:5px; top:-5px;">[[File:{{{image}}}|38px|link=]]</div> | ||
| Line 92: | Line 92: | ||
</includeonly></syntaxhighlight> | </includeonly></syntaxhighlight> | ||
Not gonna go into detail here.. but rest needs the same, imo: | Not gonna go into detail here.. but rest needs the same, imo: | ||
| − | <syntaxhighlight> | + | <syntaxhighlight lang='css'> |
<div style={{:dnContentBox/css|Pallete={{{Pallete}}}}}"> | <div style={{:dnContentBox/css|Pallete={{{Pallete}}}}}"> | ||
{{:dnContentBox/image|Image={{{Image}}}}} | {{:dnContentBox/image|Image={{{Image}}}}} | ||
| Line 98: | Line 98: | ||
{{:dnContentBox/content|Content={{{Content}}}|Pallete={{{Pallete}}}}} | {{:dnContentBox/content|Content={{{Content}}}|Pallete={{{Pallete}}}}} | ||
</div> | </div> | ||
| − | < | + | <syntaxhighlight lang='css'> |
Ta Da!!! I can read that :-) | Ta Da!!! I can read that :-) | ||
====Cascade==== | ====Cascade==== | ||
Latest revision as of 16:03, 23 November 2021
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 lang='css'>
</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):|title=
|id=
|image=
|content=
|link=
|palette=
Lets try to read template code... Eheum... Lets don't. Lets dissect it, that can work:
<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;
">
Lets pull out stuff that looks suspicious:
border:1px solid #{{ColorAtys|group={{{palette}}}}};
Ok, we are setting color to border here... #{{ColorAtys|group={{{palette}}}}}... Altho idea is good, this looks a bit too complicated for me, plus putting # 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:
border:1px solid {{:{{{Pallete}}}{{varColorsBorder}}}};
and try to bring 'stuff' together, with this result:
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;
and as it bothers me to look at it while reading rest of code:
<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>
Not gonna go into detail here.. but rest needs the same, imo: <syntaxhighlight lang='css'>
<syntaxhighlight lang='css'> Ta Da!!! I can read that :-)
Cascade
Result of all that mambo-jambo above will look like:
- dnContentBox
- dnContentBox/css
- dnContentBox/title
- dnContentBox/title/css
- dnContentBox/content
- dnContentBox/content/css
- dnContentBox/documentation
But before I can present you with my version of ContentBox, I need to have colors...
