Dn-css-2 - Revision history

Zorroargh at 15:04, 23 November 2021

2021-11-23T15:04:31Z

2021-11-23T15:00:48Z

2021-02-25T22:33:13Z

2021-02-25T22:31:50Z

‎my approach

2021-02-25T22:29:04Z

‎my approach

2021-02-25T22:17:51Z

‎Text box

2021-02-25T22:16:55Z

‎my approach

2021-02-25T22:11:33Z

‎my approach

2021-02-25T22:02:26Z

‎my approach

2021-02-25T22:01:57Z

‎my approach

@@ Line 3: / Line 3: @@
 ===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:
-<syntaxhighlight>
+<syntaxhighlight lang='css'>
 PROVIDE EXAMPLES
 </syntaxhighlight lang='css'>
@@ Line 25: / Line 25: @@
 ===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>
+<syntaxhighlight lang='css'>
 PROVIDE EXAMPLES
 </syntaxhighlight>

@@ Line 5: / Line 5: @@
 <syntaxhighlight>
 PROVIDE EXAMPLES
-</syntaxhighlight>
+</syntaxhighlight lang='css'>
 =1=

@@ Line 29: / Line 29: @@
 </syntaxhighlight>
 {{:dn-menu-buttons
 |CellCount=2

@@ Line 62: / Line 62: @@
 ====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: <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>
 |title=
 |id=
@@ Line 108: / Line 108: @@
 text-align: center;
 </syntaxhighlight>
-ans 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>
 <div style={{:dnContentBox/css|Pallete={{{Pallete}}}}}">

@@ Line 110: / Line 110: @@
 ans it bothers me to look at it while reading rest of code:
 <syntaxhighlight>
-<div style="dnContentBox/css">
+<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;
@@ Line 121: / Line 121: @@
 |-
 </includeonly></syntaxhighlight>

@@ Line 95: / Line 95: @@
 border:1px solid {{:{{{Pallete}}}{{varColorsBorder}}}};
 </syntaxhighlight>
-I would apply same logic to rest of that <div> with this result:
+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;
+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}}}});
@@ Line 108: / Line 107: @@
 font-size: 1.25em;
 text-align: center;
 </syntaxhighlight>

@@ Line 91: / Line 91: @@
 border:1px solid #{{ColorAtys|group={{{palette}}}}};
 </syntaxhighlight>
-Ok, we are setting color to border here... '''''<nowiki>#{{ColorAtys|group={{{palette}}}}}</nowiki>'''''
+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:

@@ Line 87: / Line 87: @@
 ">
 </syntaxhighlight>
 [[dn-text-box]]