Revision as of 23:02, 25 February 2021

Page elements

A nice concept of separated text in a box! Lets make it a bit more modern:

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:

PROVIDE EXAMPLES

1

111111

2

2222222

3

3333333

That's why I would consider using an alternative approach.

4

Some HEADER

Some text

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

PROVIDE EXAMPLES

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

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

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:

|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}}}}}

dn-text-box

Article

PROVIDE EXAMPLES

Navigation

PROVIDE EXAMPLES

Page box

PROVIDE EXAMPLES

Layouts

Main Page

This page should be attractive enough to invite people to read its content as informative as possible.

Proposal A

PROVIDE EXAMPLES

Proposal B

PROVIDE EXAMPLES

<- BACK

NEXT ->

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

From EncyclopAtys