Okay, now that we have a basic site, we can lean back, look at our screens, and admit that we don't have anything to brag to our clients about yet. You paid for a book about customizing your templates, and so far we've just created an ugly dummy site with no customizations. Now that we've moved through the initial setup and have a running site, we can integrate our cascading stylesheets (CSS) into our website. More importantly, we are going to cover some of the CSS techniques that are specific to TYPO3. We're going to learn how to add our stylesheets in a number of different ways and look at the default styles in TYPO3 we can customize.
In this chapter you will:
- Learn all four ways to add a stylesheet in TYPO3 and their advantages and disadvantages
- Learn about the extra markup TYPO3 creates to help CSS developers and how to remove it
Most of the time we will be given the HTML and CSS files for a website at the same time, so we can just place them both in the fileadmin/templates/ directory before we run the TemplaVoila Wizard. To avoid information overload, we are handling the HTML template and CSS as two different steps. We've already added the HTML template to TYPO3, so now we just need to add our CSS files.
We are going to be adding more HTML template files to our site later in this tutorial, so we will create a css/ directory inside the fileadmin/templates/ directory just to keep our files organized. If you have CSS files ready, copy them to the fileadmin/templates/css/ directory now. You can use any filenames that you like, but for the rest of this tutorial the main stylesheet will be referred to as style.css. If you don't have a CSS file ready, you can look at my file below which includes some browser reset rules from Eric Meyer (http://meyerweb.com/eric/tools/css/reset/), basic styling, and code for cleaner menus.
The first thing that I did was reset the default browser styling using some of Eric Meyer's CSS:
/* @group Reset Styling */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* @end Reset Styling */
Next, we need to include some base styling for the main HTML tags:
/* @group Base Styling */
body {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 16px;
line-height: 18px;
margin: 20px;
}
p, ul, div {
color: #333;
font-size: 16px;
line-height: 18px;
}
h1 {
font-size: 30px;
line-height: 36px;
margin-bottom: 18px;
font-weight: 200;
font-variant: small-caps;
}
h2 {
margin-bottom: 24px;
line-height: 30px;
font-size: 18px;
}
h3 {
font-size: 20px;
line-height: 24px;
}
h4, h5, h6 {
font-size: 18px;
line-height: 24px;
}
ul, ol {
margin: 0px 0px 18px 18px;
}
ul {
list-style-type: circle;
}
ol {
list-style: decimal;
}
td {
padding: 5px;
}
:link, :visited {
font-weight: bold;
text-decoration: none;
color: #036;
}
/* @end Base Styling */
Finally, my CSS file has some basic menu styling to clean up the navigation at the top of our page:
/* @group Menu Styling */
ul#menu-area li, ul#submenu-area li {
list-style-type: none;
display: inline;
margin-right: 20px;
}
ul#menu-area {
border-bottom: 2px solid #666;
margin-bottom: 2px;
}
ul#submenu-area {
margin: 0px 0px 20px 50px;
}
li.menu-item a {
font-size: 24px;
line-height: 24px
}
li.menu-item a, li.submenu-item a {
color: #666;
font-weight: normal;
font-variant: small-caps;
}
/* @end Menu Styling */