Creating a clean CSS template for Joomla 1.5 - part 2.4
Previous articles:
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
Until now, we meant that our design will always contain three columns, regardless of whether they contain any content. From the point of view of the Joomla template, this is not very convenient. In a static site, the content never changes, but we want to provide site administrators with the opportunity to place their content in any place they want, and so that they don’t have to worry about editing the CSS markup. We need the ability to “turn off” the column automatically or “roll it up” if it does not contain content.
')
When developing the template engine in Joomla 1.5, many improvements have been made. We quote directly from the Joomla developer blog:
Note
Additional information is available in the Joomla forum.
Thus, the typical use of countModules would be:
There are 4 possible conditions. As an example, let's calculate the number of modules in the previous figure. We need to paste this code somewhere in index.php:
In this situation, we need a function that allows us to count the modules that are present in a certain position. For example, if there is no content published in the right column, we can adjust the size of the column to fill this space.
There are several ways to do this. We can insert a conditional expression in the body to not display the content, and define different styles for the content depending on which column it is in. For maximum convenience, I defined several conditional expressions in the head tag to vary some CSS styles:
So we consider:
After that, you need to change the div for the content in index.php as follows:
In doing so, we change the CSS markup as follows:
The PHP conditional expression should be written to head immediately after the link to the template.css file appears. This is due to the fact that when two identical CSS rules occur, the last one of them will be executed. This could be done in a similar style using an if expression when importing a CSS file.
Hint:
When solving problems with conditional expressions, it is useful to insert such a line of code in index.php to display the value of a variable:
We are halfway there, but we still need to clear the div containers that contain the columns.
When creating collapsible columns, it will be a good practice to ensure that modules are not generated if there is no content for them. If this is not done, the pages will have empty <div> </ div>, which can lead to cross-browser problems.
To hide empty <div>, use the following expression:
When using this code, if nothing should be published on the left, then <div id = "sidebar"> will also not be displayed.
Using these techniques for the left and right columns, our index.php will look like this. We also added an include for the breadcrumbs module, which displays the current page and the path to it through the site. Please note that it should now also be included in index.php and published as a module.
Elements such as columns or positions for modules can be hidden (or collapsed) when there is no content for them. This is done using PHP conditional expressions that are sacred with different CSS styles.
I would recommend a slightly different way to display a basement. In the style shown here, it is hard-coded in the index.php file, which makes it difficult to make changes. Currently, the “footer” module in the admin interface shows Joomla copyright and cannot be easily changed. It makes sense to create your own (X) HTML module, located in the footer position, so that the site administrator can easily change it. If you want to display your own basement, you simply disable the display of this module and create your own custom html module in the language you want.
In this case, we are replacing
on
We also need to remember to add this position to the templateDetails.xml file.
Hint:
There are a number of names associated with modules in Joomla: banner, left, right, user1, footer, etc. It is important to understand that these names are not responsible for a particular location at all. You can place them in a place that matches its name, but this is not necessary.
This basic example demonstrates the basic principles of creating a Joomla template.
Now we have a basic, but already functional template. Simple textual content was added, but the most important thing is that we created a clean CSS design with collapsible columns. 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 ].
Continuation here
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
Hiding speakers
Until now, we meant that our design will always contain three columns, regardless of whether they contain any content. From the point of view of the Joomla template, this is not very convenient. In a static site, the content never changes, but we want to provide site administrators with the opportunity to place their content in any place they want, and so that they don’t have to worry about editing the CSS markup. We need the ability to “turn off” the column automatically or “roll it up” if it does not contain content.
')
When developing the template engine in Joomla 1.5, many improvements have been made. We quote directly from the Joomla developer blog:
Changes in the template system in Joomla 1.5 can be divided into two categories. First of all, there are changes in how some things were done before in Joomla 1.0, for example, a new way of loading modules, and secondly, many new features were added, for example, template parameters.
mosCountModules
The mosCountModules function has been replaced by the $ this-> countModules function and condition support has been added to it. This allows developers to easily calculate the total number of modules in different template positions with a single line of code, for example, $ this-> countModules ('user1 + user2') will return the total number of modules in user1 and user2 positions.
Note
Additional information is available in the Joomla forum.
Thus, the typical use of countModules would be:
<? php if ($ this-> countModules ('condition')):?>
do something
<? php else:?>
do something else
<? php endif; ?>
There are 4 possible conditions. As an example, let's calculate the number of modules in the previous figure. We need to paste this code somewhere in index.php:
left = <? php echo $ this-> countModules ('left');?> <br />
left and right = <? php echo $ this-> countModules ('left and right');?> <br />
left or right = <? php echo $ this-> countModules ('left or right');?> <br />
left + right = <? php echo $ this-> countModules ('left + right');?>
- countModules ('left'). Returns 4; on the left there are 4 modules.
- countModules ('left and right'). Returns 1; one module is present in both left and right position.
- countModules ('left or right'). Returns 1; one module is present in the left or right position.
- countModules ('left + right'). Returns 7; counts all modules in the left and right positions
In this situation, we need a function that allows us to count the modules that are present in a certain position. For example, if there is no content published in the right column, we can adjust the size of the column to fill this space.
There are several ways to do this. We can insert a conditional expression in the body to not display the content, and define different styles for the content depending on which column it is in. For maximum convenience, I defined several conditional expressions in the head tag to vary some CSS styles:
<? php
if ($ this-> countModules ('left and right') == 0) $ contentwidth = "100";
if ($ this-> countModules ('left or right') == 1) $ contentwidth = "80";
if ($ this-> countModules ('left and right') == 1) $ contentwidth = "60";
?>
So we consider:
- If there is nothing left or right, we have 100%
- If something is left or right, we have 80%
- If there is something left and right, we have 60%
After that, you need to change the div for the content in index.php as follows:
<div id = "content <? php echo $ contentwidth;?>">
In doing so, we change the CSS markup as follows:
# content60 {float: left; width: 60%; overflow: hidden;}
# content80 {float: left; width: 80%; overflow: hidden;}
# content100 {float: left; width: 100%; overflow: hidden;}
The PHP conditional expression should be written to head immediately after the link to the template.css file appears. This is due to the fact that when two identical CSS rules occur, the last one of them will be executed. This could be done in a similar style using an if expression when importing a CSS file.
Hint:
When solving problems with conditional expressions, it is useful to insert such a line of code in index.php to display the value of a variable:
Content column width: <? Php echo $ contentwidth; ?>%
We are halfway there, but we still need to clear the div containers that contain the columns.
Hiding module code
When creating collapsible columns, it will be a good practice to ensure that modules are not generated if there is no content for them. If this is not done, the pages will have empty <div> </ div>, which can lead to cross-browser problems.
To hide empty <div>, use the following expression:
<? php if ($ this-> countModules ('left')):?>
<div id = "sidebar">
<div class = "inside">
<jdoc: include type = "modules" name = "left" style = "xhtml" />
</ div>
</ div>
<? php endif; ?>
When using this code, if nothing should be published on the left, then <div id = "sidebar"> will also not be displayed.
Using these techniques for the left and right columns, our index.php will look like this. We also added an include for the breadcrumbs module, which displays the current page and the path to it through the site. Please note that it should now also be included in index.php and published as a module.
<? php // no direct access defined ('_JEXEC') or die ('Restricted access'); ?>
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0
Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml"
xml: lang = "<? php echo $ this-> language;?>"
lang = "<? php echo $ this-> language;?>">
<head>
<jdoc: include type = "head" />
<link rel = "stylesheet" href = "/ templates / system / css / system.css" type = "text / css" />
<link rel = "stylesheet" href = "/ templates / system / css / general.css" type = "text / css" />
<link rel = "stylesheet" href = "/ templates / <? php echo $ this-> template?> / css / template.css" type = "text / css" />
<? php if ($ this-> countModules ('left and right') == 0) $ contentwidth = "100"; if ($ this-> countModules ('left or right') == 1) $ contentwidth = "80"; if ($ this-> countModules ('left and right') == 1) $ contentwidth = "60"; ?>
</ head>
<body>
<div id = "wrap">
<div id = "header"> <div class = "inside"> <h1> <? php echo $ mainframe-> getCfg ('sitename');?> </ h1>
<jdoc: include type = "modules" name = "top" style = "xhtml" /> </ div>
</ div>
<? php if ($ this-> countModules ('left')):?>
<div id = "sidebar"> <div class = "inside">
<jdoc: include type = "modules" name = "left" style = "xhtml" /> </ div>
</ div>
<? php endif; ?>
<div id = "content <? php echo $ contentwidth;?>"> <div class = "inside">
<jdoc: include type = "module" name = "breadcrumbs" style = "none" />
<jdoc: include type = "component" /> </ div>
</ div>
<? php if ($ this-> countModules ('right')):?>
<div id = "sidebar-2"> <div class = "inside">
<jdoc: include type = "modules" name = "right" style = "xhtml" /> </ div>
</ div>
<? php endif; ?>
<? php if ($ this-> countModules ('footer')):?>
<div id = "footer"> <div class = "inside">
<jdoc: include type = "modules" name = "footer" style = "xhtml" /> </ div>
</ div>
<? php endif; ?>
<! - end of wrap ->
</ body>
</ html>
What you need to know
Elements such as columns or positions for modules can be hidden (or collapsed) when there is no content for them. This is done using PHP conditional expressions that are sacred with different CSS styles.
I would recommend a slightly different way to display a basement. In the style shown here, it is hard-coded in the index.php file, which makes it difficult to make changes. Currently, the “footer” module in the admin interface shows Joomla copyright and cannot be easily changed. It makes sense to create your own (X) HTML module, located in the footer position, so that the site administrator can easily change it. If you want to display your own basement, you simply disable the display of this module and create your own custom html module in the language you want.
In this case, we are replacing
<jdoc: include type = "modules" name = "footer" style = "xhtml" />
on
<jdoc: include type = "modules" name = "bottom" style = "xhtml" />
We also need to remember to add this position to the templateDetails.xml file.
Hint:
There are a number of names associated with modules in Joomla: banner, left, right, user1, footer, etc. It is important to understand that these names are not responsible for a particular location at all. You can place them in a place that matches its name, but this is not necessary.
This basic example demonstrates the basic principles of creating a Joomla template.
CSSTemplateTutorialStep2
Now we have a basic, but already functional template. Simple textual content was added, but the most important thing is that we created a clean CSS design with collapsible columns. 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 ].
Continuation here
Source: https://habr.com/ru/post/44866/
All Articles