Difference between revisions of "Dn-css-2"
From EncyclopAtys
FairyFighter (talk | contribs) m |
FairyFighter (talk | contribs) m (→Text box) |
||
Line 32: | Line 32: | ||
A text box with an border. | 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. | 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 | + | lets start with: |
+ | ====The original==== | ||
<syntaxhighlight> | <syntaxhighlight> | ||
<includeonly> | <includeonly> |
Revision as of 22:47, 25 February 2021
Contents
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>
Article
PROVIDE EXAMPLES
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