Creating a clean CSS template for Joomla 1.5 - part 2.1
I continue to translate a series of articles from the blog Compass Designs about creating a template for Joomla 1.5, made according to modern web standards. This is the second part of the cycle. The first part can be read here:
Creating a Joomla Template by Standards - Part 1
Creating a Jooml template by standards - part 1 (continued)
We will use pure CSS when creating a three-column design for a Joomla template. We will make this design "rubber". There are two types of web page design: fixed and stretchable (“rubber”), they depend on how you control the width of the page.
The width of the page is a serious matter, since there are many screen resolutions at which users browse websites. And although this percentage is decreasing, it’s still about 17% [translator’s note: apparently, at the time of this writing], users use 800x600 pixels. The main part of users - 79% use 1024x768 and higher. Creating a “rubber” design means that the most important part of the page will not be a narrow column at a resolution of 1024, and at the same time will be visible on smaller monitors.
')
In traditional design, tables are used for page layout. They are convenient if you just want to set the width of the columns in percent, but they have a number of drawbacks. For example, using tables greatly increases the amount of code compared to CSS design. This leads to an increase in page load time (something that users do not like) and their worst indexing in search engines. The code is approximately doubled in size, not only due to HTML markup, but also due to special images in gif format (“spacer gifs”) used to fix the width of markup elements.
Even large companies sometimes fall into the trap of the tables, as discussed in a recent debate about the new disney.co.uk site.
There are many problems with sites that use tabular markup:
Look at the design using CSS. When using CSS, you can position individual elements in different ways. Brainjar's CSS Positioning is a good source for quick reference.
If you are new to CSS, you can read one of the beginner's CSS guides, for example:
Modern web design uses cascading style sheets (CSS), rather than tables, for positioning elements. It is difficult to learn, but it is a good investment. There are many sources (not related to Joomla) that will help you with this.
We will use the float property to position the content. As a first approximation, the template will look something like the figure in the Basic Design template . Still not very impressive, but we will take a closer look at how its elements are implemented.
CSS styles are defined here directly at the top of the file to make it easier to show what is happening, although they should usually be in a separate template.css file.
Everything is contained within an element called #wrap. It has a "rubber" width, which varies from 760px to 960px.
In the indicated figure, the left, middle, and right columns have their own elements. For each of them, the float properties are set and the width values ​​in percent, which together give 100%. The “clear: both” style in the footer of the page tells the browser to stop using the float property and causes the footer to occupy the entire width of the page. When we create the next template, we will have to use the more advanced “clear” technique.
To improve the design and give some free space for the content, we need to add gaps between the columns, usually called “grooves”. Unfortunately, there is one problem. You probably know that Internet Explorer does not perceive CSS correctly. The catch is that it calculates the width in a different way. We can solve this problem without applying padding or borders borders to anything that has a width. To get our "groove", we add another <div> element inside the columns.
In CSS we add:
As a result, the contents of the <body> for the index.php file will be as follows:
Our template.css file will look like this:
hint
Short CSS. You can reduce the amount of CSS code using shorthand. One of its examples is the padding and margin styles applied to an element when
can be replaced by
There are brief options for defining each of the styles. After you have defined all the styles, fill in the short versions and delete all the long ones. For example, for fonts, the syntax is:
Those. instead of using:
write like this:
You can read more information in the Introduction to the CSS Shortcuts Properties:
home.no.net/junjun/html/shorthand.html .
Our simple design is a good visual example for learning how to use CSS with Joomla, since it demonstrates two advantages of CSS over tabular design options: less code and ease of support. However, it is not ordered by content. To do this, we need to use a more advanced design, the so-called “nested float”. The design, organized by content, is more suitable for SEO than the options when important content appears too late in the code. When viewed from a Joomla site’s perspective, important content is all that provided by the Jommla component.
So far, we have considered CSS only in terms of markup, which forms a flat page. Let's add the following:
We centered the page using a small hack. This is necessary because Internet Explorer interprets CSS incorrectly. For a browser that meets the standards, it would be enough for you to say “margin: 0 10%;” to center the page, but IE will not understand this, and we center the “text” for the entire page, and then align it again to the left in each columns.
In order to "celebrate" the appearance of support for the minimum / maximum width in IE7 (which does not have IE6), we can add the corresponding properties. But you need to use a small hack, because IE6 will not understand these properties. It will ignore the! Important expression and display the old width of 960px.
Comment:
It may seem strange that we define the width of our columns as a percentage, and then we put there blocks of fixed width div, but this is how we achieve the following things:
We also added a new style for columns: “overflow: hidden”. This will allow the page to "break" more correctly as the width decreases.
At the beginning of our CSS, we will define some common styles, commonly referred to as “global reset”:
All elements are assigned zero values ​​of margin and padding, and then all block elements are assigned a single margin from below. This provides greater predictability in browser behavior. You can read more about the global reset on clagnut.com or leftjustified.net .
Font size is set to 76%. This is an attempt to achieve greater predictability of font sizes in different browsers. All font sizes after this are listed in the "em". This means that the pages will have greater accessibility, since the user will be able to resize fonts at his discretion. This topic is discussed in more detail in the "Experiment with the text" on The Noodle Incident site of Owen Briggs.
If we added the underlay color for the header containers, sidebars, and content, we would see something like what is shown in the Figure Basic template with text .
Please note that the side columns do not reach the basement. This is because they stretch down the content contained in them, and in the white areas on the right and left this content is no longer in the columns.
If we had a pattern in which the white background color is used for all three columns, this would not be a problem. We will use this approach and create rectangular blocks for modules. If we wanted to make columns of equal height with a given color, or so that they contained rectangular blocks, we would have to use an image for the background, which we would stretch vertically. This technique is called “false speakers” and is described by Douglas Bowman and Erik Mayer.
Continuation here
Creating a Joomla Template by Standards - Part 1
Creating a Jooml template by standards - part 1 (continued)
Using CSS to create custom design
We will use pure CSS when creating a three-column design for a Joomla template. We will make this design "rubber". There are two types of web page design: fixed and stretchable (“rubber”), they depend on how you control the width of the page.
The width of the page is a serious matter, since there are many screen resolutions at which users browse websites. And although this percentage is decreasing, it’s still about 17% [translator’s note: apparently, at the time of this writing], users use 800x600 pixels. The main part of users - 79% use 1024x768 and higher. Creating a “rubber” design means that the most important part of the page will not be a narrow column at a resolution of 1024, and at the same time will be visible on smaller monitors.
')
In traditional design, tables are used for page layout. They are convenient if you just want to set the width of the columns in percent, but they have a number of drawbacks. For example, using tables greatly increases the amount of code compared to CSS design. This leads to an increase in page load time (something that users do not like) and their worst indexing in search engines. The code is approximately doubled in size, not only due to HTML markup, but also due to special images in gif format (“spacer gifs”) used to fix the width of markup elements.
Even large companies sometimes fall into the trap of the tables, as discussed in a recent debate about the new disney.co.uk site.
There are many problems with sites that use tabular markup:
- They are difficult to maintain. In order to change something, you need to understand what all these table tags do, such as td / tr. In the case of CSS, just look at a few lines.
- Content cannot be ordered according to content. Many web users do not see the page in the browser. Those who view them with a text browser or a screen reader [translator's note: screen reader is a device that allows content to be translated into human speech or Braille for the blind] will read the page from top left to bottom right corner. This means that the first thing they see is the top of the page and the left column (for a three-column design), even before they reach the middle column. CSS design allows you to organize content by content, which means the redistribution of the code and content of the page. Perhaps the most important of the visitors is Google, which sees the page as a screen reader.
Look at the design using CSS. When using CSS, you can position individual elements in different ways. Brainjar's CSS Positioning is a good source for quick reference.
If you are new to CSS, you can read one of the beginner's CSS guides, for example:
What you need to know
Modern web design uses cascading style sheets (CSS), rather than tables, for positioning elements. It is difficult to learn, but it is a good investment. There are many sources (not related to Joomla) that will help you with this.
We will use the float property to position the content. As a first approximation, the template will look something like the figure in the Basic Design template . Still not very impressive, but we will take a closer look at how its elements are implemented.
CSS styles are defined here directly at the top of the file to make it easier to show what is happening, although they should usually be in a separate template.css file.
Everything is contained within an element called #wrap. It has a "rubber" width, which varies from 760px to 960px.
In the indicated figure, the left, middle, and right columns have their own elements. For each of them, the float properties are set and the width values ​​in percent, which together give 100%. The “clear: both” style in the footer of the page tells the browser to stop using the float property and causes the footer to occupy the entire width of the page. When we create the next template, we will have to use the more advanced “clear” technique.
To improve the design and give some free space for the content, we need to add gaps between the columns, usually called “grooves”. Unfortunately, there is one problem. You probably know that Internet Explorer does not perceive CSS correctly. The catch is that it calculates the width in a different way. We can solve this problem without applying padding or borders borders to anything that has a width. To get our "groove", we add another <div> element inside the columns.
In CSS we add:
.inside {padding: 10px;}
As a result, the contents of the <body> for the index.php file will be as follows:
<body>
<div id = "wrap">
<div id = "header">
<div class = "inside">
<? php echo $ mainframe-> getCfg ('sitename');?>
<jdoc: include type = "modules" name = "top" />
</ div>
</ div>
<div id = "sidebar">
<div class = "inside">
<jdoc: include type = "modules" name = "left" />
</ div>
</ div>
<div id = "content"> <div class = "inside">
<jdoc: include type = "component" />
</ div>
</ div>
<div id = "sidebar-2">
<div class = "inside">
<jdoc: include type = "modules" name = "right" />
</ div>
</ div>
<div id = "footer">
<div class = "inside"> Powered by <a href="http://joomla.org"> Joomla! </a>.
Valid <a href="http://validator.w3.org/check/referer"> XHTML </a> and
<a href="http://jigsaw.w3.org/css-validator/check/referer"> CSS </a>. </ div>
</ div>
</ div>
<! - end of wrap ->
</ body>
Our template.css file will look like this:
#wrap {
min-width: 760px;
max-width: 960px;
}
#content {
float: left;
width: 60%;
overflow: hidden;
}
#footer {
clear: both;
}
.inside {
padding: 10px;
}
# sidebar, # sidebar-2 {
float: left;
width: 20%;
overflow: hidden;
}
hint
Short CSS. You can reduce the amount of CSS code using shorthand. One of its examples is the padding and margin styles applied to an element when
margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px;
can be replaced by
margin: 5px 10px;
There are brief options for defining each of the styles. After you have defined all the styles, fill in the short versions and delete all the long ones. For example, for fonts, the syntax is:
font: font-size | font-style | font-variant | font-weight | line-height | font-family
Those. instead of using:
font-size: 1em; font-family: Arial, Helvetica, sans-serif; font-style: italic; font-weight: bold; line-height: 1.3em;
write like this:
font: bold 1em / 1.3em Arial, Helvetica, sans-serif italic;
You can read more information in the Introduction to the CSS Shortcuts Properties:
home.no.net/junjun/html/shorthand.html .
Our simple design is a good visual example for learning how to use CSS with Joomla, since it demonstrates two advantages of CSS over tabular design options: less code and ease of support. However, it is not ordered by content. To do this, we need to use a more advanced design, the so-called “nested float”. The design, organized by content, is more suitable for SEO than the options when important content appears too late in the code. When viewed from a Joomla site’s perspective, important content is all that provided by the Jommla component.
CSS default
So far, we have considered CSS only in terms of markup, which forms a flat page. Let's add the following:
body {
text-align: center;
}
#wrap {
min-width: 760px;
max-width: 960px;
width: auto! important;
text-align: left;
margin: 0 auto;
}
#content {
float: left;
width: 60%;
overflow: hidden;
}
#footer {
clear: both;
}
.inside {
padding: 10px;
}
# sidebar, # sidebar-2 {
float: left;
width: 20%;
overflow: hidden;
}
We centered the page using a small hack. This is necessary because Internet Explorer interprets CSS incorrectly. For a browser that meets the standards, it would be enough for you to say “margin: 0 10%;” to center the page, but IE will not understand this, and we center the “text” for the entire page, and then align it again to the left in each columns.
In order to "celebrate" the appearance of support for the minimum / maximum width in IE7 (which does not have IE6), we can add the corresponding properties. But you need to use a small hack, because IE6 will not understand these properties. It will ignore the! Important expression and display the old width of 960px.
Comment:
It may seem strange that we define the width of our columns as a percentage, and then we put there blocks of fixed width div, but this is how we achieve the following things:
- “Rubber” columns inside a fixed container make the template very flexible. If we add buttons that change the width, we only need to change one number.
- If we still have the maximum width, so why not make the design "completely rubber"? The fact is that many web browsers have too wide screens. The usability study tells us that lines of text more than 900px are difficult to read, because the eyes have to travel a long way to the next line. The limitation of "rubber" makes the site more convenient to use and accessible.
We also added a new style for columns: “overflow: hidden”. This will allow the page to "break" more correctly as the width decreases.
At the beginning of our CSS, we will define some common styles, commonly referred to as “global reset”:
* {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address {
margin: 0.5em 0;
}
li, dd {
margin-left: 1em;
}
fieldset {
padding: .5em;
}
body {
font-size: 76%;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.3;
}
All elements are assigned zero values ​​of margin and padding, and then all block elements are assigned a single margin from below. This provides greater predictability in browser behavior. You can read more about the global reset on clagnut.com or leftjustified.net .
Font size is set to 76%. This is an attempt to achieve greater predictability of font sizes in different browsers. All font sizes after this are listed in the "em". This means that the pages will have greater accessibility, since the user will be able to resize fonts at his discretion. This topic is discussed in more detail in the "Experiment with the text" on The Noodle Incident site of Owen Briggs.
If we added the underlay color for the header containers, sidebars, and content, we would see something like what is shown in the Figure Basic template with text .
Please note that the side columns do not reach the basement. This is because they stretch down the content contained in them, and in the white areas on the right and left this content is no longer in the columns.
If we had a pattern in which the white background color is used for all three columns, this would not be a problem. We will use this approach and create rectangular blocks for modules. If we wanted to make columns of equal height with a given color, or so that they contained rectangular blocks, we would have to use an image for the background, which we would stretch vertically. This technique is called “false speakers” and is described by Douglas Bowman and Erik Mayer.
Continuation here
Source: https://habr.com/ru/post/42401/
All Articles