Creating a clean CSS template for Joomla 1.5 - part 3
I continue to translate this wonderful series of articles.
Previous parts:
Creating a Joomla Template by Standards - Part 1
Creating a Jooml template by standards - part 1 (continued)
Creating a clean CSS template for Joomla 1.5 - part 2.1
Creating a clean CSS template for Joomla 1.5 - part 2.2
Creating a clean CSS template for Joomla 1.5 - part 2.3
Creating a clean CSS template for Joomla 1.5 - part 2.4
The first thing we need to start is the design that will form the basis of our template. We will use for our purposes the design, kindly provided by Casey Lee - the lead designer from Joomlashack . It is called "Bold" and you can see it in the picture:
')
The next step in our process is what is called "cutting." We need to use a graphic editor to create a set of small images for our template. It is important to consider how the elements will scale if necessary. (I prefer to use Fireworks for this purpose, considering that it is more suited for web design than Photoshop, which is more convenient for creating printed materials).
In this template there will be several special places for modules, slightly different from those present in the standard installation of Joomla. To be sure that the modules are installed correctly in the process of working on the template, make sure that the following places are available:
Nothing else should be posted in these places.
Headline
There are blurry stripes in the header image that we would like to keep, so we set this image as a background, and also define the background color. In this case, the title will be scaled vertically if necessary, for example, when the font size is changed. We also need to set the white color for everything that will appear on a dark background.
We also use a background image for the search form. We have to be sure that the style is applied to a specific input element, so we use CSS refinement. I also specified absolute positioning inside a relatively positioned element to place the search form in the right place. The image will not scale when changing the font size, since we do not multiply it (no-repeat). Additional pictures will also be required for the top and bottom of the input field - this is another exercise for you!
I did not make a graphic logo using plain text. The reason is search engine optimization, since search engines cannot read images. You can, of course, use the fashionable image substitution, but I leave this as an exercise at your discretion.
Our title now looks like this:
Next, we need to apply the technique used to display the background in the expandable column, the so-called “sliding doors”.
I remind you that if we set the background for the column, the column is not filled with color to the bottom. This is because the div element (in our case, sidebar and sidebar-2) has a height only in its content, and is not extended to the size of the element containing it.
We need to use a technique called “sliding spurious columns” when you essentially create two broad images that shift over each other. We need to create two new containers for these background images. We could only use #wrap, but I added an extra container for illustration.
A full description of the technique used can be found in these manuals:
In our case, the maximum width is 960px, so we start with an image of that width. Then we export two pieces (I used one piece, showing / hiding the corresponding side pieces), one with a total width of 960px and a background on the left 192px, and the second with a total width of 960px and a background on the right with a width of 192px.
Hint:
The left image needs a white background, and the right one a transparent background. I changed the background color in the process of exporting images from the source file.
Where do 192px come from? This is 20% of 960px, since our columns are 20% wide. We use the background-position property to position background images. Since we are using compressed CSS, this is part of the background property:
In our index.php, we simply added containers inside #wrap:
You also need to add conditional expressions for the closing div tags:
We also need to add a background for #footer and #bottom, otherwise the background of the columns will be displayed:
We need to clear the float so that the floating containers (false columns) stretch to the bottom of the page. The traditional way is to use the after property. However, with the release of IE7, this method no longer works. We need to ensure float cleaning compatibility in IE6 and IE7, and this is where the problems begin.
There are several solutions, we will use the “Float for almost everything” method.
So we add clear: both to #footer and add float properties to the false columns. You need to add the following styles to a conditional CSS file that applies only to IE6:
We need to add a few conditional expressions to the head area of ​​our index.php file:
In our design, there is initially a large block for modules. We do not know in advance what height the required text will be. To solve this problem, we put the jdoc: include expression in a container and specify a background for it in the same color as the background image. This is the same version that we used for the title:
Please note that we also use a conditional expression, so that when there is no content for the Top site, the orange background will not be displayed. Then there will be only an empty container containing a small part of the background image, with a vertical indent of 20px. It is made purely for aesthetics.
You will need to use CSS refinement to override the moduletable styles that we wrote earlier:
Now focus on the design of the text.
Many links should be white, so we will define this color globally, and then change it for the central column:
The design has a stylized button. We use for it a thin fragment multiplied horizontally:
For tables such as a FAQ, we can add a background by applying the same image as for the subtitle. Reuse will be quite "thematic", besides it provides savings on downloading the image and speeds up the page display.
Modules require a fairly simple redefinition and refinement of the margin and padding properties:
Menus, as usual, require a sufficiently large number of CSS styles. Here we will try to make them as simple as possible. We will cut out a small image that will include both bullet and underline. Please note that the use of styles is “turned on” by assigning the suffix of the module “menu” to any list of links that we want to issue in this way:
The last is a menu of shortcuts in the upper right. As adherents of accessibility, we need to adjust it so that labels are scaled when the font size is changed. Fortunately, there is a technique that allows you to do this, in fact, it is again the same “sliding doors” that we used for our speakers!
We will also try to make a small optimization of the template loading speed and use the same image for the left and right side of the “doors”, as well as the “on” or “off” state. This is called using sprites.
The CSS code is not very complicated, we just have to adjust the vertical position of the background image for the “on” state:
We also need to assign the “tabs” suffix for the module we use for this menu.
If you look at the original design, you will notice that initially there were icons on the labels. Since we are already using two background images, one for the list item li, and the second for the link, we would need a third element for which we would set the icon as the background. You can do this with the help of the span element, but this is already advanced CSS Jujutsu.
I leave it as a homework.
The last thing left is to update the templateDetails.xml file. It should contain a list of all the files and images used in the template, so that it can be correctly installed as a zip archive. For the version of Joomla 1.0.X there are many tools that can do this automatically, but for the version of Joomla 1.5, at the time of this writing, there were no such tools.
Our final template will look like this:
Creating a working Joomla template is more a matter of graphic design and CSS manipulation, rather than some specific “Joomla knowledge”.
So, we have a template made on the basis of design. It adds a simple font layout, but more importantly, we created a clean CSS template with dynamically retractable columns and a nice menu of shortcuts. I made an installable template that you can find in our library [translator's note: all templates from this manual are available for download at the link: www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html ].
Now that all the basic stuff is done, you can start exploring some of the more advanced features available in the Joomla 1.5 templates.
Ending here
Previous parts:
Creating a Joomla Template by Standards - Part 1
Creating a Jooml template by standards - part 1 (continued)
Creating a clean CSS template for Joomla 1.5 - part 2.1
Creating a clean CSS template for Joomla 1.5 - part 2.2
Creating a clean CSS template for Joomla 1.5 - part 2.3
Creating a clean CSS template for Joomla 1.5 - part 2.4
Create a real Joomla 1.5 template
The first thing we need to start is the design that will form the basis of our template. We will use for our purposes the design, kindly provided by Casey Lee - the lead designer from Joomlashack . It is called "Bold" and you can see it in the picture:
')
Cutting design
The next step in our process is what is called "cutting." We need to use a graphic editor to create a set of small images for our template. It is important to consider how the elements will scale if necessary. (I prefer to use Fireworks for this purpose, considering that it is more suited for web design than Photoshop, which is more convenient for creating printed materials).
Determination of places for modules
In this template there will be several special places for modules, slightly different from those present in the standard installation of Joomla. To be sure that the modules are installed correctly in the process of working on the template, make sure that the following places are available:
- User1 - for the search module
- User2 - for the top menu
- Top - for top news or custom HTML module
Nothing else should be posted in these places.
Headline
There are blurry stripes in the header image that we would like to keep, so we set this image as a background, and also define the background color. In this case, the title will be scaled vertically if necessary, for example, when the font size is changed. We also need to set the white color for everything that will appear on a dark background.
We also use a background image for the search form. We have to be sure that the style is applied to a specific input element, so we use CSS refinement. I also specified absolute positioning inside a relatively positioned element to place the search form in the right place. The image will not scale when changing the font size, since we do not multiply it (no-repeat). Additional pictures will also be required for the top and bottom of the input field - this is another exercise for you!
#header {
color: #fff;
background: # 212121 url (../ images / header.png) no-repeat;
position: relative;
}
#header h1 {
font-family: Arial, Helvetica, sans-serif small-caps;
font-variant: small-caps;
font-stretch: expanded;
padding-left: 20px;
}
#header input {
background: url (../ images / search.png) no-repeat;
border: 0;
height: 22px;
width: 168px;
font: 1em Arial, Helvetica, sans-serif;
padding: 2px;
}
#header .search {
position: absolute;
top: 20px;
right: 20px;
}
I did not make a graphic logo using plain text. The reason is search engine optimization, since search engines cannot read images. You can, of course, use the fashionable image substitution, but I leave this as an exercise at your discretion.
Our title now looks like this:
Next, we need to apply the technique used to display the background in the expandable column, the so-called “sliding doors”.
Background for speakers
I remind you that if we set the background for the column, the column is not filled with color to the bottom. This is because the div element (in our case, sidebar and sidebar-2) has a height only in its content, and is not extended to the size of the element containing it.
We need to use a technique called “sliding spurious columns” when you essentially create two broad images that shift over each other. We need to create two new containers for these background images. We could only use #wrap, but I added an extra container for illustration.
A full description of the technique used can be found in these manuals:
In our case, the maximum width is 960px, so we start with an image of that width. Then we export two pieces (I used one piece, showing / hiding the corresponding side pieces), one with a total width of 960px and a background on the left 192px, and the second with a total width of 960px and a background on the right with a width of 192px.
Hint:
The left image needs a white background, and the right one a transparent background. I changed the background color in the process of exporting images from the source file.
Where do 192px come from? This is 20% of 960px, since our columns are 20% wide. We use the background-position property to position background images. Since we are using compressed CSS, this is part of the background property:
#leftfauxcol {
background: url (../ images / leftslidingcolumn.png) 20% 0;
}
#rightfauxcol {
background: url (../ images / rightslidingcolumn.png) 80% 0;
}
In our index.php, we simply added containers inside #wrap:
<div id = "wrap">
<? php if ($ this-> countModules ('left')):?>
<div id = "leftfauxcol">
<? php endif; ?>
<? php if ($ this-> countModules ('right')):?>
<div id = "rightfauxcol">
<? php endif; ?>
<div id = "header">
You also need to add conditional expressions for the closing div tags:
<? php if ($ this-> countModules ('left')):?>
</ div>
<! - end of left fauxcol ->
<? php endif; ?>
<? php if ($ this-> countModules ('right')):?>
</ div>
<! - end of rightfauxcol ->
<? php endif; ?>
We also need to add a background for #footer and #bottom, otherwise the background of the columns will be displayed:
#footer {
background: # 212121;
color: #fff;
text-align: right;
clear: both;
}
#bottom {
background: # 333;
color: # 666;
padding: 10px 50px;
}
We need to clear the float so that the floating containers (false columns) stretch to the bottom of the page. The traditional way is to use the after property. However, with the release of IE7, this method no longer works. We need to ensure float cleaning compatibility in IE6 and IE7, and this is where the problems begin.
There are several solutions, we will use the “Float for almost everything” method.
So we add clear: both to #footer and add float properties to the false columns. You need to add the following styles to a conditional CSS file that applies only to IE6:
# leftfauxcol, # rightfauxcol, # footer {
float: left;
width: 100%;
}
We need to add a few conditional expressions to the head area of ​​our index.php file:
<! - [if lte IE 6]> <link href = "templates / <? php echo $ this-> template?> / css / ie6only.css" rel = "stylesheet" type = "text / css" /> <! [endif] -> <! - [if lte IE 7]> <link href = "templates / <? php echo $ this-> template?> / css / ie7only.css" rel = "stylesheet" type = "text / css" /> <! [endif] ->
Flexible modules
In our design, there is initially a large block for modules. We do not know in advance what height the required text will be. To solve this problem, we put the jdoc: include expression in a container and specify a background for it in the same color as the background image. This is the same version that we used for the title:
<? php if ($ this-> countModules ('top')):?>
<div id = "top">
<div class = "inside">
<jdoc: include type = "modules" name = "top" style = "xhtml" />
</ div>
</ div>
<? php else:?>
<div id = "top"> </ div>
<? php endif; ?>
Please note that we also use a conditional expression, so that when there is no content for the Top site, the orange background will not be displayed. Then there will be only an empty container containing a small part of the background image, with a vertical indent of 20px. It is made purely for aesthetics.
You will need to use CSS refinement to override the moduletable styles that we wrote earlier:
#top {
background: # ea6800 url (../ images / teaser.png) no-repeat;
padding: 10px;
}
#top .moduletable h3 {
color: #fff;
background: none;
text-align: left;
font: 2.5em Arial, Helvetica, sans-serif normal;
font-stretch: expanded;
margin: 0;
padding: 0;
}
#top .moduletable {
font: bold 1em / 1.2 Tahoma, Arial, Helvetica, sans-serif;
color: #fff;
border: 0;
margin: 0;
padding: 0;
}
Now focus on the design of the text.
Text decoration
Many links should be white, so we will define this color globally, and then change it for the central column:
a: link, a: visited {
text-decoration: underline;
color: #fff;
}
a: hover {
text-decoration: none;
}
# content60 a: link, # content60 a: visited, # content80 a: link, # content80 a: visited, # content100 a: link, # content100 a: visited {
color: # 000;
}
The design has a stylized button. We use for it a thin fragment multiplied horizontally:
.button {
border: # 000 solid 1px;
background: #fff url (../ images / buttonbackground.png) repeat-x;
height: 25px;
cursor: hand;
margin: 4px 0;
padding: 0 4px;
}
For tables such as a FAQ, we can add a background by applying the same image as for the subtitle. Reuse will be quite "thematic", besides it provides savings on downloading the image and speeds up the page display.
sectiontableheader {
background: url (../ images / teaser.png);
color: #fff;
font: 1.2em bold Arial, Helvetica, sans-serif;
padding: 5px;
}
Modules require a fairly simple redefinition and refinement of the margin and padding properties:
.moduletable {
margin-bottom: 1em;
color: #fff;
font-size: 1.1em;
}
.moduletable h3 {
font: 1.3em Tahoma, Arial, Helvetica, sans-serif;
background: # 000;
color: #ccc;
text-align: left;
margin: 0-10px;
padding: 5px 10px;
}
Menus, as usual, require a sufficiently large number of CSS styles. Here we will try to make them as simple as possible. We will cut out a small image that will include both bullet and underline. Please note that the use of styles is “turned on” by assigning the suffix of the module “menu” to any list of links that we want to issue in this way:
.moduletablemenu {
margin-bottom: 1em;
}
.moduletablemenu h3 {
font: 1.3em Tahoma, Arial, Helvetica, sans-serif;
background: # 000;
color: #ccc;
text-align: left;
margin: 0-10px;
padding: 5px 10px;
}
.moduletablemenu ul {
list-style: none;
margin: 5px 0;
}
.moduletablemenu li {
background: url (../ images / leftmenu.png) bottom left no-repeat;
height: 24px;
font: 14px Tahoma, Arial, Helvetica, sans-serif;
margin: 10px 0;
padding: 0 0 0 10px;
}
.moduletablemenu a: link, .moduletablemenu a: visited {
color: #fff;
display: block;
text-decoration: none;
padding-left: 5px;
}
.moduletablemenu a: hover {
text-decoration: none;
color: #fff;
background: #ADADAD;
}
The last is a menu of shortcuts in the upper right. As adherents of accessibility, we need to adjust it so that labels are scaled when the font size is changed. Fortunately, there is a technique that allows you to do this, in fact, it is again the same “sliding doors” that we used for our speakers!
We will also try to make a small optimization of the template loading speed and use the same image for the left and right side of the “doors”, as well as the “on” or “off” state. This is called using sprites.
The CSS code is not very complicated, we just have to adjust the vertical position of the background image for the “on” state:
.moduletabletabs {
font: bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.moduletabletabs ul {
list-style: none;
float: right;
background: # 212121;
width: 100%;
margin: 0;
padding: 0;
}
.moduletabletabs li {
float: right;
background: url (../ images / tabs.png) no-repeat 0 -4px;
margin: 0;
padding: 0 0 0 12px;
}
.moduletabletabs a: link, .moduletabletabs a: visited {
float: left;
display: block;
color: # 000;
background: url (../ images / tabs.png) no-repeat 100% -4px;
text-decoration: none;
margin: 0;
padding: 7px 18px 5px 9px;
}
.moduletabletabs #current {
background: url (../ images / tabs.png) no-repeat 0 -84px;
}
.moduletabletabs #current a {
color: #fff;
background: url (../ images / tabs.png) no-repeat 100% -84px;
}
We also need to assign the “tabs” suffix for the module we use for this menu.
If you look at the original design, you will notice that initially there were icons on the labels. Since we are already using two background images, one for the list item li, and the second for the link, we would need a third element for which we would set the icon as the background. You can do this with the help of the span element, but this is already advanced CSS Jujutsu.
I leave it as a homework.
The last thing left is to update the templateDetails.xml file. It should contain a list of all the files and images used in the template, so that it can be correctly installed as a zip archive. For the version of Joomla 1.0.X there are many tools that can do this automatically, but for the version of Joomla 1.5, at the time of this writing, there were no such tools.
Our final template will look like this:
What you need to know
Creating a working Joomla template is more a matter of graphic design and CSS manipulation, rather than some specific “Joomla knowledge”.
CSSTemplateTutorialStep3
So, we have a template made on the basis of design. It adds a simple font layout, but more importantly, we created a clean CSS template with dynamically retractable columns and a nice menu of shortcuts. I made an installable template that you can find in our library [translator's note: all templates from this manual are available for download at the link: www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html ].
Now that all the basic stuff is done, you can start exploring some of the more advanced features available in the Joomla 1.5 templates.
Ending here
Source: https://habr.com/ru/post/47649/
All Articles