4 min read

(For more resources related to this topic, see here.)

Starting with a new layout

Before we start creating a concrete5 theme we need a layout. In this article, we’re going to use a simple layout without any pictures to keep the code as short as possible—it’s about concrete5, not about HTML and CSS.

If you don’t have the time for an exercise, you can use your own layout. With good knowledge about the basic technologies of concrete5, you should be able to amend the instructions in this article to match your own layout. If you don’t feel very comfortable working with PHP you should probably use the printed HTML code in this article.

Here’s a screenshot of what our site is going to look like once we’ve finished our theme:

While this layout isn’t very pretty, it has an easy structure; navigation on top and a big content area where we can insert any kind of block we want. In case you’re using your own layout, try to use one with a simple structure; navigation on top or on the left with one big place for the content, and try to avoid Flash.

The HTML code

Let’s have a look at the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>concrete5 Theme</title>
<meta http-equiv="Content-Type" content="text/
html;charset=utf-8" />
<style type="text/css" media="screen">@import "main.css";</
style>

</head>
<body>
<div id="wrapper">
<div id="page">
<div id="header_line_top"></div>
<div id="header">
<ul class="nav-dropdown">
<li><a href="#">Home</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div id="header_line_bottom"></div>
<div id="content">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<div id="footer_line_top"></div>
<div id="footer"></div>
<div id="footer_line_bottom"></div>
</div>
</div>
</body>
</html>

There are three highlighted lines in the preceding code:

  • The CSS import: This is to keep the layout instructions separated from the HTML elements; we’ve got all the CSS rules in a different file named main.css. This is also how almost all concrete5 themes are built.

  • The header block contains the navigation. As we’re going to apply some styles to it, make sure it has its own ID. Using an ID also improves the performance when using CSS and JavaScript to access an element, as an ID is unique.

  • The same applies to the content block. Make sure it has a unique ID.

Most web technologies we use nowadays are standardized in one way or another. Currently, the most important organization is W3C. They also offer tools to validate your code.

Checking your code is never a bad idea. Navigate to http://validator.w3.org/ and enter the address of the website you want to check or in this case, as your website isn’t accessible by the public, click on Validate by Direct Input and paste the HTML code to see if there are any mistakes. While it should be fairly easy to produce valid HTML code, things are a bit tricky with CSS. Due to some old browser bugs, you’re often forced to use invalid CSS rules. There’s often a way to rebuild the layout to avoid some invalid rules but often this isn’t the case—you won’t be doomed if something isn’t 100 percent valid but you’re on the safer side if it is.

CSS rules

As mentioned earlier, all CSS rules are placed in a file named main.css. Let’s have a look at all CSS rules you have to put in our CSS file:

/* global HTML tag rules */
html, body, div, pre, form, fieldset, input, h1, h2, h3, h4, h5, h6,
p, textarea, ul, ol, li, dl, dt, dd, blockquote, th, td {
margin: 0;
padding: 0;
}
p {
margin: 5px 0px 15px 0px;
}
html {
height: 100%;
}
body {
background-color: #989898;
height: 100%;
}
/* layout rules */
#wrapper {
margin: 0 auto;
width: 980px;
text-align: left;
padding-top: 35px;
}
#page {
background: #FFFFFF;
float: left;
width: 960px;
padding: 5px;
-moz-box-shadow: 0 0 15px black;
-webkit-box-shadow: 0 0 15px black;
box-shadow: 0 0 15pxblack;
border-radius: 10px;
}
/* header */
#header {
background: #262626;
border-radius: 10px 10px 0px 0px;
height: 75px;
}
#header_line_top {
background: #262626;
height: 0px;
}
#header_line_bottom {
background: #e64116;
height: 3px;
}
/* content */
#content {
min-height: 300px;
padding: 30px;
color: #1E1E1E;
font-family: verdana, helvetica, arial;
font-size: 13px;
line-height: 22px;
}
/* footer */
#footer {
background: #262626;
height: 75px;
border-radius: 0px 0px 10px 10px;
}
#footer_line_top {
background: #e64116;
height: 3px;
}
#footer_line_bottom {
background: #262626;
height: 0px;
}
/* header navigation */
#header ul{
margin: 0px;
padding: 20px;
}
#header ul li {
float: left;
list-style-type: none;
}
#header ul li a {
margin-right: 20px;
display: block;
padding: 6px 15px 6px 15px;
color: #ccc;
text-decoration: none;
font-family: verdana, helvetica, arial;
}
#header ul li a:hover {
color: white;
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here