Dn-css-3 - Revision history

Zorroargh at 15:03, 23 November 2021

2021-11-23T15:03:18Z

Zorroargh at 15:01, 23 November 2021

2021-11-23T15:01:07Z

FairyFighter: /* Cascade */

2021-02-26T22:03:21Z

‎Cascade

FairyFighter: /* Cascade */

2021-02-26T22:01:01Z

‎Cascade

FairyFighter: /* Cascade */

2021-02-25T22:50:18Z

‎Cascade

FairyFighter: /* my approach */

2021-02-25T22:37:00Z

‎my approach

FairyFighter at 22:34, 25 February 2021

2021-02-25T22:34:42Z

FairyFighter at 22:34, 25 February 2021

2021-02-25T22:34:00Z

FairyFighter: Created page with "===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 star..."

2021-02-25T22:33:23Z

Created page with "===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 star..."

New page

===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/>

@@ Line 111: / Line 111: @@
 But before I can present you with my version of ContentBox, I need to have colors...
 {{:dn-menu-buttons
 |CellCount=2

← Older revision		Revision as of 22:01, 26 February 2021
Line 110:		Line 110:
	**dnContentBox/documentation		**dnContentBox/documentation

		+	But before I can present you with my version of ContentBox, I need to have colors...
	[[dnContentBox]]		[[dnContentBox]]

@@ Line 101: / Line 101: @@
 Ta Da!!! I can read that :-)
 ====Cascade====
-[[dn-text-box]]
+Result of all that mambo-jambo above will look like:
 {{:dn-menu-buttons

← Older revision		Revision as of 22:34, 25 February 2021
Line 129:		Line 129:
	</syntaxhighlight>		</syntaxhighlight>
	----<br/>		----<br/>
		+	{{:dn-menu-buttons
		+	\|CellCount=2
		+	\|Pallete=MR
		+	\|Link1=[[dn-css-2\| <- BACK]]
		+	\|Link2=[[dn-css-4\| NEXT ->]]
		+	}}

@@ Line 32: / Line 32: @@
 ====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>
+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=
 |id=
@@ Line 41: / Line 41: @@
 </syntaxhighlight>
 Lets try to read template code... Eheum... Lets don't. Lets dissect it, that can work:
-<syntaxhighlight>
+<syntaxhighlight lang='css'>
 <includeonly>
 <div style="
@@ Line 58: / Line 58: @@
 </syntaxhighlight>
 Lets pull out stuff that looks suspicious:
-<syntaxhighlight>
+<syntaxhighlight lang='css'>
 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>
+<syntaxhighlight lang='css'>
 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>
+<syntaxhighlight lang='css'>
 position:relative; left:4px; right: 4px; top:2px; height:25px;
 border:1px solid {{:{{{Pallete}}}{{varColorsBorder}}}};
@@ Line 79: / Line 79: @@
 </syntaxhighlight>
 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="position:absolute; left:5px; top:-5px;">[[File:{{{image}}}|38px|link=]]</div>
@@ Line 92: / Line 92: @@
 </includeonly></syntaxhighlight>
 Not gonna go into detail here.. but rest needs the same, imo:
-<syntaxhighlight>
+<syntaxhighlight lang='css'>
 <div style={{:dnContentBox/css|Pallete={{{Pallete}}}}}">
 {{:dnContentBox/image|Image={{{Image}}}}}
@@ Line 98: / Line 98: @@
 {{:dnContentBox/content|Content={{{Content}}}|Pallete={{{Pallete}}}}}
 </div>
-</syntaxhighlight>
+<syntaxhighlight lang='css'>
 Ta Da!!! I can read that :-)
 ====Cascade====

@@ Line 4: / Line 4: @@
 lets start with:
 ====The original====
-<syntaxhighlight>
+</syntaxhighlight lang='css'>
 <includeonly>
 <div style="