Corporate Identity
Corporate Identity (CI) refers to the self-image and the appearance of an enterprise. This appearance, the identity, either arises from the enterprise’s tradition or it is completely invented in a newly created establishment. This identity is important to give the customer a feel for the enterprise and to enable recognition.
Corporate Identity includes:
- Corporate Image (price, product, and advertising strategy)
- Corporate Design (visual appearance)
- Corporate Communication
- Corporate Behavior (behavior of employees towards each other and the outside world)
All of the above areas have to be considered when developing a website. In this article, we will examine Corporate Design. At a minimum, it consists of a logo, a character font, and the house colors that the enterprise uses.
The visitors to your website should recognize your enterprise on the first visit.
HTML/XHTML, CSS, and XML
The abbreviations HTML/XHTML, CSS, and XML stand for Internet technologies that Joomla! works with. The World Wide Web Consortium standardizes these technologies.
HTML/XHTML
The World Wide Web is based on HTML. HTML is not a programming language, but a text-description language.
Each piece of text consists of structures like headings, lists, bold and italic areas, tables, and much more. HTML works with so-called tags. A tag has an opening portion and a closing portion. For example, a first-level heading looks as follows:
<h1>This is a heading</h1>
The tags are interpreted in the browser and the text is displayed according to their significance.
HTML is very easy to learn and many online tutorials can be found. HTML is not being developed any further; the successor to HTML is XHTML version 1.0.
CSS
Cascading Style Sheets (CSS) are an extension to HTML. CSS is not a programming language either, but a vocabulary for defining the format properties of individual HTML elements.
With the help of CSS commands, you can, for example, specify that the first-level headings should have a character size of 18 points in the character font Arial, are not bold, and have a spacing of 1.9 cm to the next paragraph. Such options are not possible with pure HTML and were not necessary when HTML was first developed. With the progressive commercialization of the Internet, additional formatting possibilities do, however, become more and more important.
CSS data can be integrated into HTML in the following three ways:
- In the Central HTML File
The CSS commands are defined in the head section of the HTML file like this:
<head>
<title>title of the file</title>
<style type="text/css">
<!--
/* ... this is where the CSS commands are defined ... */
-->
</style>
</head> - In a Separate CSS File
If the CSS commands apply to several HTML files, they can be stored in a separate file and the path to this file can be specified in the HTML header. This is the version that Joomla! uses.
<head>
<title>title of the file</title>
<link rel="stylesheet" type="text/css" href="formats.css">
</head> - Within an HTML Tag
CSS commands can also be inserted within an HTML tag:
<body>
<h1 style="… CSS commands ...">...</h1>
</body>
Combinations
These three methods can be combined without any problem in an HTML file. It is, for instance, possible to subsequently overwrite CSS commands that were defined in a central file in the additional source code of an HTML page. This practice, however, quickly leads to confusing structures; it is better to customize the central file.
XML
The Extended Markup Language (XML) is a universe in itself. It represents a meta‑language and is derived from the much more complex SGML (Standardized Generalized Markup Language) that was developed in the sixties. XML is often used for configuration files and as an interchange format. For our purposes, you need XML as the description language for the metadata of the templates that you want to create. These metadata are primarily relevant for the Template Installer and the display in the Template Manager.
In principle, these data also consist of opening and closing tags. For example:
<name>Joomla! Book</name>
The difference between HTML and XML is that no tags are predefined in XML. Because of that, you are completely unrestricted in the organization of the structures and the naming of the tags.
Creating Your Own Templates
Now we want to create our own template. There are several things to consider before we have a finished template packages. Let’s take it one step at a time.
Concept
Before you start working, you have to create a concept. The work starts with a sketch or a diagram, especially when producing templates. It is up to you whether you want to create this sketch with an image editing program like Adobe Photoshop, Microsoft Paint that comes with Windows, the open-source program GIMP, or even with a piece of paper and crayons.
Fixed Size or Variable (Fluid) or Both
You can create two kinds of templates. Templates that adapt their structure to the size of the browser window and templates that have a fixed size. An example for the flexible layout: if you have 2048 pixels across your screen and the browser window is maximized, then your page is stretched accordingly. That can look strange if you use graphical, non-scalable elements like logos and signatures in your template. You have no control of what it is going to look like.
Your other choice is to decide on a certain resolution and to position all the elements exactly on the pixels in the template. This has the advantage that your web page always looks the way you want. Unfortunately, you do not know the resolution of the monitor that is viewing your page. If that monitor has a resolution of 800 x 600 pixels, then your page fills the screen. On a large screen with a resolution of 1400 x 1050 pixels, it occupies about a quarter of the screen surface and looks a little lost.
You will have to weigh the pros and cons and make a decision on one or the other, or you can consider barrier freedom and offer both versions. You must have seen websites where you can even change the font size. In addition to the font size buttons there is also often a button to select different layouts.
If you prefer the fixed size, you should select a size that looks presentable on most screens, in other words 800 x 600 pixels. Since the browser has a scroll bar on the right side and the browser window is framed, the available width is even smaller, meaning that you have a maximum of 780 pixels to work with.
Structure
You are dealing with structured data and first have to determine a general allocation. Joomla! normally uses a structure as shown in the following figure:
Section 1:
- Part 1: This is where your logo or a picture and the name of the website goes.
- Part 2: This is where the search field is.
- Part 3: This is where the linked navigation path goes (Breadcrumbs).
Section 2:
- Part 4: The most important menus are shown in the left column.
- Part 5: The actual page content goes here.
- Part 6: The right column is a place for additional menus.
Section 3:
- Part 7: The footer.
HTML Conversion
Now you have to convert the concept into HTML and CSS. Depending on the graphics editing program that you have used to create it, there is a possibility that the picture can be automatically exported to HTML code. You can also do the conversion manually in a text editor, in an HTML editor like Dreamweaver (http://www.adobe.com/products/dreamweaver), or in one of the numerous free HTML editors (http://www.thefreecountry.com/webmaster/htmleditors.shtml).
<table> or <div>?
The <div> tag is a replacement and a supplement for the <table> tag in HTML.
You can enclose several HTML elements, such as text and graphics in one common area with it. This general area does nothing for the time being but start in a new line of the continuing text. The <div> tag does not have any other properties. There are big benefits, however, in using a combination of <div> tags with CSS commands. <div> was specifically developed for the purpose of being formatted with CSS commands.
Until 2004, it was common practice to define website structures with generous employment of HTML tables. With CSS and the <div> HTML element becoming more and more popular and with browsers being able to interpret these, more and more templates are being structured without HTML tables. However, rarely do we see websites that contain only semantically correct HTML and that have layouts that are built 100% without tables. The first step in structuring your website in that direction is the use of the <div> tags.
Joomla! 1.5 is also gradually straying from the ‘table path’ and is starting to deliver semantically correct HTML. Nonetheless, it continues to be possible to structure your site layout with HTML tables.
There are no table tags in the included rhuk_milkyway template; the entire table-like structure is created with <div> tags. Take a look at the original source code of this template to familiarize yourself with this technology. You can get more information about <div> tags at selfhtml (in German). Dreamweaver also supports this technology.
The source code of the HTML conversion looks somewhat like the following listing. The code is kept simple on purpose and is not consistent with the XHTML standard in the header. The file name of this layout file has to be index.php since Joomla! searches it for embedded commands per PHP.
HTML file /index.php:
<html>
<head>
<link href="/joomla150/templates/joomla150buch/css/template.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div id="part11">header / header<br /><br />
<div id="section1">section1</div>
<div id="section2">section2</div>
</div>
<div id="part2">main display area / main<br /><br />
<div id="section3">breadcrumbs</div>
<div id="section6">right side</div>
<div id="section4">left side</div>
<div id="section5">content</div>
</div>
<div id="part3">footer /footer<br /><br />
<div id="section7">section7</div>
</div>
</body>
</html>
The subsequent CSS file from the individual template is integrated into the header area of the code. At the moment this CSS file contains only one command that defines the typeface.
CSS file /css/template.css:
body{
font-size: 12px;
font-family: Helvetica,Arial,sans-serif; }
#Part1{ /*header*/
float: left;
border: 2px dotted green; }
#Part2{ /*main*/
float: left;
border: 2px dotted yellow; }
#Part3{ /*footer*/
clear:all;
border: 2px dotted red; }
#Section1{ /*top right*/
float: left; width: 18em;
margin: 0 0 1.2em;
border: 1px dashed silver; background-color: #eee; }
#Section2{ /*top left*/
float: right; width: 12em;
margin: 0 0 1.1em;
background-color: #eee; border: 1px dashed silver; }
#Section3{ /*breadcrumbs*/
border: 1px dashed silver;
background-color: #eee; }
#Section4{ /*left side*/
float: left; width: 15em;
margin: 0 0 1.2em;
border: 1px dashed silver; }
#Section5{ /*content*/
margin: 0 12em 1em 16em;
padding: 0 1em;
border: 1px dashed silver; }
#Section6{ /*right side*/
float: right; width: 12em;
margin: 0 0 1.1em;
background-color: #eee; border: 1px dashed silver; }
#Section7{ /*footer*/
margin: 0 0 1.1em;
background-color: #eee; border: 1px dashed silver; }
You will create this first template manually in the Joomla! directory. When the template is ready, you can turn it into a compressed installation package that it can then be installed by a third party (or by you yourself) using the Joomla! installer. Save the HTML layout file by the name of index.php in the also newly created [PathtoJoomla]/templates/joomla150book/ directory. Save the template.css file in the [PathtoJoomla]/templates/joomla150book/css/ directory.
The basic structure of your template is done. Now you have to define the template more exactly for Joomla! with the help of an XML file so that it will be displayed in the template administration section.
Directory Structures of the Template
Now it’s time to take care of certain conventions. As previously discussed, the template has to be stored in a specific directory structure.
[PathtoJoomla]/templates/[name of the template]/
[PathtoJoomla]/templates/[name of the template]/CSS/
[PathtoJoomla]/templates/[name of the template]/images/
The name of the template cannot contain blanks and other special characters. When this template is later installed as a package, the Template Installer has to create a directory from this name. Depending on the operating system, exotic combinations of characters can cause problems. In addition, the name should be meaningful. Here we will use joomla150book as the name of the template.
Various files with predefined names have to be present in the template directories.
- Layout File: This is the HTML file that we created earlier:/templates/joomla150book/index.php. It should have the .php ending, since the dynamic Joomla! module elements that we will insert later have to be interpreted by PHP.
- Preview Picture: The /templates/joomla150book/template_thumbnail.png file contains a preview image of your template for preview selection in Joomla! administration in the Extensions | Template Manager menu. Preview pictures have a format of 200 by approximately 150 pixels. You can create this file later when you can see your template.
- Metadata of the Template: The /templates/joomla150_book/templateDetails.xml file represents the construction manual for the template installer and contains the installations for the template selection in the template manager. Here you specify the location where the files are to be copied, who the author is, and additional metadata about the template. During subsequent installation of this file by the Joomla! installer, PHP reads this file and copies the files to the place specified by the XML file. For the example template, you can use the file from the following listing (templateDetails.xml) and populate it with your own data. For every file that you use in the template, a respective XML container has to be populated with the file name and the correct path.
<files>
<filename> ... enter the filename of a file in the TemplateRoot directory ...
</filename>
<filename> ... for every file a filename-Container
</filename>
</files>The other containers of the XML file are there for the description of the template. Here is the complete functional listing of the XML file:
templateDetails.xml:
<install version="1.5" type="template">
<name>joomla150book</name>
<version>1.0</version>
<creationDate>11.11.2007</creationDate>
<author>Hagen Graf</author>
<copyright>GNU/GPL</copyright>
<authorEmail>[email protected]</authorEmail>
<authorUrl>http://www.cocoate.com</authorUrl>
<version>0.1</version>
<description>... description</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>css/template.css</filename>
</files>
</install>Create the templateDetails.xml file in the [PathtoJoomla]/templates/joomla150book/ directory as well.
- CSS File: You can use several CSS files for your template. What name you give the CSS file and how you create it is up to you. There are, however, standard descriptions for various CSS elements. For your first attempt, you need a CSS file with the name /templates/joomla150_book/css/template.css.
- Graphics, Images: Here you can enter user-defined image files that you need in your template. The installer then copies the files into the images folder. The file name appears as /templates/joomla150_book/images/[user-defined image files].
First Trial Run
Once you have reproduced all the structures in the [pathtoJoomla!]/templates/ subdirectory, you can already see your new template in the Extensions | Template Manager menu of your Joomla! administration and you can make it default:
When you call up your website, you will see your new template. Unfortunately, there is no content shown yet. Since this content is produced dynamically, you have to integrate it piece by piece into your new template.
Integration of the Joomla! Module
The integration of the Joomla! module takes place by means of commands embedded into the HTML code. Joomla! uses the namespace jdoc to integrate various elements into the template. If you insert the following highlighted line into the header of the layout file:
<head>
<jdoc:include type="head" />
</head>
the title of the site and the news feed symbol are already correctly displayed.
If you call up the source code of this site, you will notice that Joomla! has copied the entire metadata that you had entered in administration into the HTML code. In addition, the RSS feeds have been integrated by means of link tags and these will be displayed as feed symbols in browsers like Firefox that support this technology.
Joomla! Metadata:
<head>
<base href="http://localhost/joomla150/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, joomla!, Joomla, Joomla!, J!" />
<meta name="description" content="Joomla! - dynamic portal-engine and Content-Management-System" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Welcome to the Frontpage</title>
<link href="/joomla150/index.php?format=feed&type=rss" rel="alternate"
type="application/rss+xml" title="RSS 2.0" />
<link href="/joomla150/index.php?format=feed&type=atom" rel="alternate"
type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="/joomla150/media/system/js/mootools.js"></script>
<script type="text/javascript"
src="/joomla150/media/system/js/caption.js"></script>
...
