Formatting of the template using CSS in the style sheet file
The Template01 has now been functionally adapted to CMSimple_XH, but the formatting of the font, font size, color, arrangement, ... must be defined using CSS.
The SelfHTML wiki, for example, is a good source of information and reference for CSS.
The following section lists the adjustments to the CSS formatting that are entered in the Stylesheet.css from "template01".
As basic formatting, some framework conditions are specified for the entire website:
The font and size are defined for all areas:
Change in the Stylesheet.css:
body {
/* font: 12px/18px Arial, sans-serif; (auskommentiert,
kann auch gelöscht werden) */
font: 100% Arial;
}
The formatting for H1 - H6 and a distance between the "P blocks" in the content are defined:
Addition in the Stylesheet.css:
.wrapper {
...
}
/* Formatierung für h1 - h3 */
h1,h2,h3{
font-size:130%;
color:#004090;
padding-top:.5em;
padding-bottom:.5em;
text-shadow:0 1px 1px gray
}
/* Formatierung für h4 - h6 */
h4,h5,h6{
font-size:110%;
color:#004090;
text-shadow:0 1px 1px gray
}
/* Abstand zwischen den "P-Blöcken" im Content*/
p{
margin:1em 0;
line-height:1.3
}
Format header: (background color, page title)
Assign a different background color to the header:
.header {
...
background: #FFFF66; /* old: #FFE680, new: #FFFF66 */
}
Format the page title:
The page title should be centered in the header, in a larger font and in color:
Addition in the Stylesheet.css:
.header h1{
font-size:2.5em;
text-align:center;
padding:1.1em;
color:#990000;
}
In order for the "H1" formatting in the header to be recognized and used, the rendering of the page title must be marked as "H1" in the template:
Addition in the template.htm:
<header class="header">
<h1><?php echo sitename()?></h1>
<!-- Header -->
</header><!-- .header-->
Format menu (left column).
In the left column (menu), a different background color, menu font size, line spacing and indentation should be visible for the subordinate menu levels:
Addition in the Stylesheet.css:
.left-sidebar {
...
background: #FFF996; /* old: #B5E3FF */
font-size: 1em;
}
/* Abstand zwischen den "P-Blöcken" im Content*/
p{
margin:1em 0;
line-height:1.3
}
/* Einrückung bei einer Auflistung */
li{
line-height:1.5em
}
ul,ol{
list-style:none;
margin-left: 10px;
}
In the left column (menu) below the side menu (H1 - H3 menu level) (slightly separated) a link to the table of contents and to the contact form (if an email address is entered in the CMSimple_XH configuration) should be displayed.
Addition in the template.htm:
<aside class="left-sidebar">
<!-- Left Sidebar -->
<?php echo searchbox();?>
<?php echo toc();?>
<?php echo tag('br');?>
<ul>
<li><?php echo sitemaplink();?></li>
<li><?php echo mailformlink();?></li>
</ul>
</aside><!-- .left-sidebar -->
Format News (right column).
In the right column (News), a slightly smaller font size and rounded corners of the news area should be visible, and the text should not go to the edge (distance of the text to the outside area).):
Supplement or changes in the Stylesheet.css:
.right-sidebar {
float: left;
width: 200px;
/*margin-left: -200px; (commented out, can also be deleted)*/
margin-left: -210px;
position: relative;
background: #FFACAA;
font-size: 0.9em;
border-radius:5px;
padding: 5px 5px 5px 5px;
}
Anmerkung: "margin-left:" wurde wegen dem 2 x 5px Rand auf 210px erhöht.
Format footer
In the footer area, a slightly smaller font size and rounded corners of the footer area should be visible, and the text should be centered:
Supplement or changes in the Stylesheet.css:
.footer {
height: 50px; /* old: 80px */
background: #BFF08E;
text-align:center;
font-size: 0.8em;
border-radius:5px;
padding-top: 30px;
}
Anmerkung: Damit die Höhe vom Footer bei 80px bleibt,
muss die Pixelangabe von padding-top von height abgezogen werden.
The result up to this point in the instructions looks like this: