Creating a clean CSS template for Joomla 1.5 - part 2.3
I continue to publish the translation of a series of articles on the creation of a “Pure CSS Template for Joomla 1.5”. True, to be honest, after the placement of the previous two parts, some doubts arose about the relevance of this material (judging by the estimates), but still I don’t want to give up what I’ve started, because it could be useful to someone anyway.
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
We know that there are many options that determine how to display the menu.
')
Again, using CSS lists instead of tables results in less code and easier markup. After we set up the display of all the menus as lists, we have only 12 tables left (we will see how to remove the rest using the new output override functionality in version 1.5). Remember that the “list” option is only in the new version 1.5, and the “flat list” comes from version 1.0, and its use is not recommended.
Lists are also better than tables, because text browsers, screen readers, browsers that don't support CSS, or browsers that have CSS turned off, and search robots will have better access to your content.
Another advantage of using CSS for menus is that there are many examples on CSS developer sites. Look at any of them and find out how to use it.
A web page on maxdesign.com [translator's note: it appears that something else is already on this site] offers a choice from over 30 menus, and all of them use the same code. This is called Listamatic. We need to make small changes to the code to adapt these menus for Joomla:
Initially, the following code is used:
This means that there is an external <div> called a “navcontainer”, and for <ul> id = “navlist” is given. To repeat this effect in Joomla, we need an even more external <div>.
We can do this using module suffixes. If you recall, the output of the module in the style of XHTML is as follows:
If we specify a module suffix, it will be added to the moduletable class, like this:
So, taking the menu from Listamatic, you need to replace in the CSS style of the class “navcontainer” with “moduletablesuffix”.
Note
Module suffixes to some extent erase the line between design and site administration. One of the objectives of the further development of the core Joomla is a clear distinction between these roles. This concerns us in the sense that the functionality of module suffixes can be removed from the versions that follow 1.5.
Using the module class suffix is convenient. It allows you to create different color blocks, changing only the module class suffix.
It is best to always use a bulleted or flat list to display the menu. Then you can use the many free sources of CSS design available on the net.
For our site we will use the list of Mark Newhouse. Our CSS will be as follows:
After that, we have to add the “menu” module suffix (without the underscore in this case) to all menu modules to which we want to apply these styles. The result is a menu that looks like the one shown in the picture: The basic template with the specified styles for the menu.
Hint:
If you are trying to make some menu work, use the following helpful tip: create an empty Joomla installation and look at the code that makes up the mainmenu. Copy this code into an HTML editor (for example, Dreamweaver). Replace all references to "#", and after that you can apply CSS rules until you achieve the desired effect. The code for creating the menu is as follows:
CSS is specifically inserted directly into the HTML code for easier editing.
Continuation here
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
Menu in the templates
We know that there are many options that determine how to display the menu.
')
Again, using CSS lists instead of tables results in less code and easier markup. After we set up the display of all the menus as lists, we have only 12 tables left (we will see how to remove the rest using the new output override functionality in version 1.5). Remember that the “list” option is only in the new version 1.5, and the “flat list” comes from version 1.0, and its use is not recommended.
Lists are also better than tables, because text browsers, screen readers, browsers that don't support CSS, or browsers that have CSS turned off, and search robots will have better access to your content.
Another advantage of using CSS for menus is that there are many examples on CSS developer sites. Look at any of them and find out how to use it.
A web page on maxdesign.com [translator's note: it appears that something else is already on this site] offers a choice from over 30 menus, and all of them use the same code. This is called Listamatic. We need to make small changes to the code to adapt these menus for Joomla:
Initially, the following code is used:
<div id = "navcontainer"> <ul id = "navlist"> <li id = "active"> <a href="/ #" id="current"> Item one </a> </ li> <li> <a href="#"> Item two </a> </ li> <li> <a xhref="#"> Item three </a> </ li> <li> <a href="#"> Item four </a> </ li> <li> <a href="#"> Item five </a> </ li> </ ul> </ div>
This means that there is an external <div> called a “navcontainer”, and for <ul> id = “navlist” is given. To repeat this effect in Joomla, we need an even more external <div>.
We can do this using module suffixes. If you recall, the output of the module in the style of XHTML is as follows:
<div class = "moduletable"> <h3> modChrome_xhtml </ h3> modChrome_xhtml </ div>
If we specify a module suffix, it will be added to the moduletable class, like this:
<div class = "moduletablesuffix"> <h3> modChrome_xhtml </ h3> modChrome_xhtml </ div>
So, taking the menu from Listamatic, you need to replace in the CSS style of the class “navcontainer” with “moduletablesuffix”.
Note
Module suffixes to some extent erase the line between design and site administration. One of the objectives of the further development of the core Joomla is a clear distinction between these roles. This concerns us in the sense that the functionality of module suffixes can be removed from the versions that follow 1.5.
Using the module class suffix is convenient. It allows you to create different color blocks, changing only the module class suffix.
What you need to know
It is best to always use a bulleted or flat list to display the menu. Then you can use the many free sources of CSS design available on the net.
For our site we will use the list of Mark Newhouse. Our CSS will be as follows:
.moduletablemenu {
color: # 333;
margin-bottom: 1em;
padding: 0;
}
.moduletablemenu h3 {
background: # 666;
color: #fff;
text-align: center;
font-size: 1.1em;
border-bottom: 1px solid #fff;
margin: 0;
padding: 0.25em 0;
}
.moduletablemenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.moduletablemenu li {
border-bottom: 1px solid #ccc;
margin: 0;
}
.moduletablemenu li a {
display: block;
border-left: 10px solid # 333;
border-right: 10px solid # 9D9D9D;
background-color: # 666;
color: #fff;
text-decoration: none;
padding: 3px 5px 3px 0.5em;
}
html> body .moduletablemenu li a {
width: auto;
}
.moduletablemenu li a: hover, a # active_menu: link, a # active_menu: visited {
border-left: 10px solid # 1c64d1;
border-right: 10px solid # 5ba3e0;
background-color: # 2586d7;
color: #fff;
}
After that, we have to add the “menu” module suffix (without the underscore in this case) to all menu modules to which we want to apply these styles. The result is a menu that looks like the one shown in the picture: The basic template with the specified styles for the menu.
Hint:
If you are trying to make some menu work, use the following helpful tip: create an empty Joomla installation and look at the code that makes up the mainmenu. Copy this code into an HTML editor (for example, Dreamweaver). Replace all references to "#", and after that you can apply CSS rules until you achieve the desired effect. The code for creating the menu is as follows:
<! 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">
<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" />
<title> Untitled Document </ title>
<style type = "text / css">
<! - .astyle {} ->
</ style>
</ head>
<body>
<div class = "moduletable">
<h3> Main Menu </ h3>
<ul class = "mainmenu">
<li id = "current" class = "item1 active"> <a href="#"> Home </a> </ li>
<li class = "item2"> <a href="#"> Joomla! Overview </a> </ li>
<li class = "item3"> <a href="#"> What's New in 1.5? </a> </ li>
<li class = "item4"> <a href="#"> Joomla! License </a> </ li>
<li class = "item5"> <a href="#"> More about Joomla! </a> </ li>
<li class = "item6"> <a href="#"> FAQ </a> </ li>
<li class = "item7"> <a href="#"> The News </a> </ li>
<li class = "item8"> <a href="#"> Web Links </a> </ li>
<li class = "item9"> <a href="#"> News Feeds </a> </ li>
</ ul>
</ div>
</ body>
</ html>
CSS is specifically inserted directly into the HTML code for easier editing.
Continuation here
Source: https://habr.com/ru/post/44864/
All Articles