Using class suffixes


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Using class suffixes

  1. 1. Using Class Suffixes This tutorial was written for Joomla1.5, however the differences to Joomla 1.6 are minor.This tutorial will show you how to use Page, Module, and Menu Class Suffixes in Joomla! to fine-tune theappearance of your site. For the tutorial, we will assume you have the Joomla! 1.5.9 Sample siteavailable. Contents [hide]1 Background2 When Would You Use a Class Suffix?3 Page Class Suffix o 3.1 How It Works Without a Page Class Suffix o 3.2 Page Class Suffix (No Space) o 3.3 Page Class Suffix (With a Leading Space) o 3.4 Add CSS Styling to New Class4 Module Class Suffix o 4.1 Be careful not to break existing CSS styling5 Menu Class Suffix and Menu Tag ID o 5.1 Menu Class Suffix o 5.2 Menu Tag ID parameter6 ConclusionBackgroundJoomla! creates HTML pages that use Cascading Style Sheets to control the appearance of the page.This includes things like fonts, colors, margins, and background. The CSS files are part of your template.When Joomla! creates a page, it creates different CSS classes that are then referenced in the CSS file tospecify which style will apply to which parts of the HTML page. These class names are pre-programmedinto Joomla!. But Joomla! allows you to modify or add CSS classes by way of the Class Suffixparameters. This lets you fine-tune the appearance of specific pages with no programming and very littlework. The best way to understand this is to see specific examples.When Would You Use a Class Suffix?Say, for example, that your website contains a number of Section Blog layouts, each for a differentSection. If you are happy to have all of these pages styled the same way, then you wouldnt need to use a
  2. 2. Page Class Suffix. However, say you want each of these sections styled differently than the others. Forexample, maybe you want a different background color or image for each different section.Or say that you want the heading on your front page to look different than the heading on other pages.In both of these cases, if you modify the styling in your "template.css" file for the standard CSS classes, itwill affect all Menu Items that use these CSS classes. For example, if you change the style for the CSSclass "componentheading", it will affect all of the Menu Items that use this class.However, if you add a unique Page Class Suffix to a Menu Item, then Joomla! will create new CSSclasses for each individual Menu Item so you can style each one differently.Page Class SuffixBefore you start, make sure you have the Joomla! sample website available. Also, make sure the defaulttemplate is set to "rhuk_milkyway" (in the Extensions → Template Manager).How It Works Without a Page Class SuffixBefore we add a Page Class Suffix, lets see how this pages works without one. In the front end, navigateto Example Pages → Section Blog. In your browser, select the option to view the page source code. Forexample, in Firefox, press Ctrl+U. In Internet Explorer, select View → Source. In Safari, select View →View Source.Using the "Find" command, find the first occurrence of the word "componentheading". It should look likethe following:<div class="componentheading">Browse down the file and find the following tags: <table class="blog" cellpadding="0" cellspacing="0"> <table class="contentpaneopen"> <td class="contentheading" width="100%"> <table class="contentpaneopen"> Note: The following screenshots were made using the free Firefox add-in called Firebug. Firebug allows you to quickly see the relationship between the HTML elements in your source and the text and graphics shown on the page. It is a very handy tool, and you can get it here. For more information, please watch the free video tutorial on using Firebug with Joomla.
  3. 3. The screenshot below shows you the "componentheading" class. It is the page titlearea above the blog article.This screenshot shows you the entire "blog" class. This is the outer table into whichall of the articles will fit.
  4. 4. The next screenshot shows you the "contentpaneopen" class for an article heading.This includes the article title and the PDF, Print, and Email icons to the right.
  5. 5. This screenshot shows you the "contentpaneopen" class for the body of the article.This includes the author and date information as well as the actual article text.
  6. 6. So this gives us a good understanding of how Joomla! allows us to style theelements on a Section Blog layout. Joomla! writes out these classes as part of theHTML. And the template contains CSS that provides the styling information forthese various elements and classes.Page Class Suffix (No Space)Now that we see how this works without a Page Class Suffix, lets try it with one. Inthe back end, navigate to Menus → Example Pages and click on "Section Blog".This should display the "Menu Item: [Edit]" screen for the Section Blog Layout. ClickParameters (System) to show the System Parameters. In the "Page Class Suffix"field enter the value "_myBlogSuffix" and click the Save button.
  7. 7. Now, go back to the front end and again navigate to Example Pages → SectionBlog. Notice right away that we lost the styling for the page and article titles. Letslook closer to see why.Using the browser "Find" command, find the first occurrence of "_myBlogSuffix". Itis in a "div" tag and looks like this:<div class="componentheading_myBlogSuffix">If you look through the source, you should also see the followingclasses: blog_myBlogSuffix, contentpaneopen_myBlogSuffix,and contentheading_myBlogSuffix.By adding the Page Class Suffix, we changed all of these class names. That meansthat special styling in the CSS file that refers to the "base" class names (likecomponentheading, blog, and so on) will not be applied, since those classes nolonger exist on the page.Now, you can fix this problem by editing your templates CSS file to add the samestyling for the new classes (for example, "componentheading_myBlogSuffix"). Butthere is a much easier way to do this -- simply by adding a leading space to theparameter.Page Class Suffix (With a Leading Space)Again in the back end, go back to Menus → Example Pages → Section Blog. Weregoing to change the value of the Page Class Suffix. This time were going to enter ina leading space and call it <space> + "myBlogClass", as shown below.Now, go back to the front end and re-display the Example Pages → Section Blog.Notice that our styling is back! Lets look at the HTML source to see what is goingon. Open the source and find the first occurrence of "myBlogClass". It should likethis:<div class="componentheadingmyBlogClass">
  8. 8. Because we put a leading space in the Page Class Suffix, we created a secondclass instead of changing the name of the first class (which is allowed andsupported by all modern browsers). So we didnt break any of the existing CSSstyling for this page. (One warning: we need to make sure the new class name isdifferent than any of the other class names used on the page. Otherwise, we mightget styling we dont want.)Add CSS Styling to New ClassAt this point, weve created a new CSS class in the HTML to allow for some newstyling. Now we need to use this new class to actually change the look of our page.The first thing we need to do is find the applicable CSS file. In this case, itis <joomla_root>/templates/rhuk_milkyway/css/template.css.Lets say we want to add a background color, but only to this specific Section Blog.(Remember, if we wanted to just change all of the Section Blog pages in our site,we could just change the CSS styling for the base classes, such as"componentheading" or "blog".) We need to do is figure out which area("componentheading", "blog", or "contentpaneopen") we want to style. Say we justwanted to style the "componentheading" area.First, lets use the CSS selector "div.myBlogClass" and add the following code tothe end of our CSS file:/* Custom Styling */div.myBlogClass{ background-color:#FFE4E1;/* mistyrose */}The result is that the page heading now has the background color, as shown below.Now this works fine in our example, because the other classes are defined for"table" tags and not "div" tags. But it is normally better to be more specific in ourstyle selector by styling only those elements that have both the desired base classand the new class. For example, lets replace the code above with the followingcode:/* Custom Styling */
  9. 9. .blog.myBlogClass{ background-color:#FAFAD2;/* lightgoldenrod */}This specifies that the new style will only be applied to elements that have both the"blog" and the "myBlogClass" styles. This gives us the background color over theentire "blog" area, as shown below.The great thing about creating a new class (with the leading space trick) is that wedont need to copy all of the existing styling for the base classes. We can just focuson the new styling that we want.Now in this example, we focused on the Section Blog layout. The class names fordifferent components might be different, but the process will be the same. The tablebelow shows some common Joomla! layouts and a list of class names that canhave Page Class Suffixes added. Layout CSS Class Names Used componentheading, contentpaneopen, contentheading,Article Layout contentpagetitleCategory Blog, componentheading, contentpagetitle, blog, contentpaneopen,
  10. 10. FrontpageBlog, Section Blog contentheading, readon, blog_moreCategory List, Section List componentheading, contentpane, contentdescription componentheading, contentpane, contentdescription,Contact Category sectiontablefooter, sectiontableheader, categoryContact Layout componentheading, contentpaneopen, contentheadingSo, to sum up what we have learned about using the Page Class Suffix parameter: 1. Use a leading space to create a new CSS class. This way you dont have to worry about re-doing or breaking existing CSS styles. 2. Look in the HTML source code to find the locations of the base and new classes. 3. If desired, use Firebug to see which HTML elements correspond to which areas on the page. 4. Add custom styling to the end of the "template.css" file, specifying both the name of the desired base class and the custom class in the form .baseclass.customclass as in the example above.Module Class SuffixThe Module Class Suffix parameter works in the same way as the Page ClassSuffix. Lets go through an example using the Latest News module.In the administrative back end, navigate to Extensions → Module Manager and findthe "Latest News" module. Click on it to open it for editing, and enter <space> +"customLatestClass" in the Module Class Suffix parameter field, as shown below:
  11. 11. Now, navigate to the home page in the front end and view the page source code.The screenshot below was made using the Firebug add-in tool. It shows the homepage and the HTML and styling for the customised Latest News module.In the upper part of the screen, outlined in light blue, is the "div" element for themodule. Below, in the HTML window, we see the HTML as follows:
  12. 12. <div class="moduletablecustomLatestClass">and then<ul class="latestnewscustomLatestClass">The "moduletable" and "latestnews" classes are created automatically. The newclass, "customLatestNews" was created because we started the Module ClassSuffix parameter with a leading space.Now, lets use our new class to add some custom styling. Again, go to the end ofthe templates/rhuk_milkyway/css/template.css file and add the following code:div.customLatestClass{ background-color:#FFFFD2;}div.customLatestClassh3,ul.customLatestClass,ul.customLatestClass a { color:#8B4513;}Save the file and re-display the home page. It should look like the screenshotbelow:The CSS selector div.customLatestClass sets the background color for theentire area. The three selectors div.customLatestClass h3,ul.customLatestClass, ul.customLatestClass a select the font color forthe "h3" heading, the bullets ("ul" tag), and the "a" tag, respectively. Note that, if weonly wanted to style the "ul" element, we wouldnt need a Module Class Suffixunless we had more than one "Latest News" module. Instead, we could just havedefined the CSS using the standard "latestnews" class.Be careful not to break existing CSS styling
  13. 13. In menus, we need to be careful not to break existing CSS styling.Lets look at how this works. In the administrative back end, navigate to Extensions→ Module Manager and open the Main Menu for editing. Click on the AdvancedParameters. Notice that the Module Class Suffix is set to "_menu", without a leadingspace.Now, go to the Home page in the front end and view the source code (or useFirebug). The screenshot below shows the HTML for the Main Menu.Notice that the class is called "module_menu" because of the Module Class Suffix.Also, notice that there is special styling in the "template.css" and "blue.css" files forthe "module_menu" class. For example, there is a background image that providespart of the blue border around the menu.We can confirm this by returning to the back end and changing the Module ClassSuffix to blank. Return to the Home page and refresh. Now the Main Menu will showwithout the special "module_menu" styling, as shown below:
  14. 14. This shows an important point. Existing modules, especially menus, may alreadyhave CSS styling that depends on Module Class Suffixes. So we need to be carefulwhen making changes.What if we still wanted to add some special styling just to the Main Menu? One wayis to get tricky and add a second CSS class to the existing suffix. To see this, returnto the Module Manager in the back end and open the Main Menu for editing. Thistime, in the Module Class suffix, enter _menu, a space, and then myMenuClass, asshown below:Now, add the following code to the end of thetemplates/rhuk_milkyway/css/template.css file:div.myNewClass{ font-size:1.2em; }Go back to the Home page and notice that now the font in the Main Menu is larger,as shown below.
  15. 15. If we open Firebug, we can see what the HTML and CSS looks like, as shownbelow:By putting a space between the "_menu" and "myNewClass", we added the newclass into the HTML. Then, by selecting the new class in the CSS file, we changedthe font size.Menu Class Suffix and Menu Tag IDAll core modules allow you to enter a Module Class Suffix, as discussed above.Menu modules have two additional parameters: Menu Class Suffix and Menu TagID. Lets look at what these parameters do.Menu Class SuffixThe Menu Class Suffix inserts an extra suffix in the class for the unordered list thatbuilds up the menu. If unedited, the class is "menu". If adding "_myMenuClass"under Advanced Parameters → Menu Class Suffix, the new tag will be"menu_myMenuClass".
  16. 16. (This behaviour is only for the Menu Style "List". If choosing "Legacy - Vertical" or"Legacy - Horizontal", the class suffix will be added to the links in the table; thissuffix will then be "mainlevel_myMenuClass". When choosing the Legacy Flat List,the suffix will be added to the links (as on the two other Legacy lists), but it will alsobe added to the ul tag, but as an id rather than a class; the id will be"mainlevel_myMenuClass".)Menu Tag ID parameterNow, lets look at the Menu Tag ID parameter. Navigate to the back end, open theMain Menu module for editing, and enter "myTagID" in the Menu Tag ID parameter.Add the following code to the end of the templates/rhuk_milkyway/css/template.cssfile:#myTagID{ list-style-type:square;}Now, re-display the Home page to see the change. The bullets for the Main Menushould now appear as squares, as shown below:Finally, we can look at the HTML and CSS in Firebug, as shown below.Joomla! has added the attribute id="myTagID" to the "ul" tag for the Main Menu.This allowed us to change the style for this ID. Note that, since this is an "id"attribute, we use the CSS selector #myTagID(with a "#" instead of a ".").
  17. 17. ConclusionThe Class Suffix and Menu Tag ID parameters allow you to fine-tune the CSSstyling of your web site. By using a leading space in the suffix name, we can createa new class. This is normally the preferred method, since, as long as the new classname does not conflict with an existing class, no existing styling will be broken.