Chapter 6. Templating Markup Reference

Now that you’ve had some thorough hands-on experience with making templates, you’ve probably noticed that there’s quite a bit of markup that Joomla! spits out. While you can always use your DOM Source Inspector to see what’s going on, it’s helpful to look at the DOM as well. We’ll use this chapter to go over the XHTML markup that Joomla! uses, remind you about how to gain some control over that markup, and look at the standard CSS classes and ID rules that Joomla! references in its markup.

Your Markup and Joomla!’s

You’ll remember that in Chapter 3 we started our semantic layout by placing our own markup, which was used as “containers” for Joomla!’s markup. Again, those bits of PHP code that look like: mosLoadModules('') or mosMainBody() are the ones that end up generating your Joomla! markup.

What You Can and Can’t Control

There are many parts of Joomla!’s output that you can control easily, some that you can’’t control, and some that you can control with a little bit of creativity. Let’s review the list of core Joomla! PHP code, and take a look at the kind of output produced and at the kind of control available.

PHP

Markup Output Produces

Control Options

<?php echo
$mosConfig_sitename;
?>

plain text, no tags.

You cannot control how this is output. You can just make sure that you wrap the PHP inside span or div tags with the id or class references you customized for display.

<?php mospathway() ?>

span tag with the classs .pathway

You cannot control how this is output. See the Classes table for more information.

<?php mosMainBody();
?>

table tags with some of the following classes:

.blog

.blog_more

.blogsection

.modifydate

.createdate

.mosimage

.mosimage_caption

.readon

.contentpaneopen

.contentheading

.buttonheading

.small

.article_seperator

.pagenav

.pagenav_prev

.pagenav_next

.back_button

Tables house the content title, print, email, and pdf buttons, article content as well as author, date, and next, back, and other navigation.

You cannot control how this is output. This PHP code can produce a lot of tables and cells depending on the article and or page overview. See the Classes table for more information.

<?php include_once
($mosConfig_absolute_
path .'/includes/
footer.php'),?>

div tag with a PHP generated year, your mosConfig_sitename, and the PHP generated version of Joomla! you’re using.

You can control this, by editing the include/ footer.php file. Make sure you’re comfortable enough with PHP to understand what you’re adding or removing.

<?php mosLoadModules
(''), ?>

Tables or div tags depending on selected preference, with some of the following ids (depending on the type of module):

#mainlevel

#active_menu

#mod_login_username

#mod_login_password

#mod_login_remember

#voteid1,

#voteid2.. (etc. as many poll items)

Also, classes (depending on the type of module):

.mainlevel

.latestnews

.mostread

.module

.moduletable

.contentpaneopen

.inputbox

.button

.syndicate

.poll

.pollstableborder

.sectiontableentry1

.sectiontableentry2

You can control the module output by taking advantage of the $style option in your mosLoadModule call.

See the MosLoadModule $styl e control options table and the Ids and Classes tables for more information.

Note: The Poll module and Login module will output using the selected $style option, but the core content will still be wrapped in tables.

Pretty much the only things over which you have some output control are your module loaders and your menu items. Right off the bat, you’ll want to think ahead about what kind of output will be most optimal. Next, let’s take a look at our options

mosLoadModule $style Control Options

We discussed these options in detail in Chapter 3. The $style option is a numeric value which is placed, after the module position name is called into the PHP code:

<?php mosLoadModules ( 'modName', $style); ?>

$style Variables

Effect

Sample

0

Modules are displayed in a table with a single row column. This is also the default setting, so you’ll never really need to use it.

 
<table class="moduletable"
cellpadding="0"
cellspacing="0">
<tbody><tr>
<th>Title</th>
</tr>
<tr>
<td>Content</td>
</tr></tbody>
</table>

1

Modules are again displayed in a table with multiple column rows, giving it the effect of being displayed horizontally, rather than vertically like the default.

 
<table>
<tbody><tr>
<td align="top">
<table cellpadding="0"
cellspacing="0"
class="moduletable">
<tbody><tr>
<th valign="top">Title</th>
</tr>
<tr>
<td>Content</td>
</tr></tbody>
</table>
</td>
<!--next table cell starts-->
<td align="top">
<table cellpadding="0"
cellspacing="0"
class="moduletable">
<tbody><tr>
<th valign="top">Title</th>
</tr>
<tr>
<td>Content</td>
</tr></tbody>
</table>
</td>
</tr></tbody>
</table>

-1

Modules are displayed in plain text without titles.

Content

-2

Modules are displayed wrapped in a single div tag, with titles in h3 header tags. (This is preferred for most applications of Joomla!.)

 
<div class="moduletable">
<h3>Title</h3>
Content
</div>

-3

Modules are displayed wrapped in several div tags with titles in h3 header tags allowing for more complex CSS styling, such as the container techniques that we discussed in detail in Chapter 4, or applying stretchable, rounded corners.

 
<div class="module">
<div>
<div>
<div>
<h3>Title</h3>
Content
</div>
</div>
</div>
</div>

Menu Options

In Chapter 3, we discussed changing our menu output to bulleted lists. You have three ways to control the details of your menu output. You can select Vertical, Horizontal, or Flat List. Vertical and Horizontal will use a table with tr and td cells to create vertical and horizontal lists. The Flat List will create an unordered (ul) bulleted list. As the goal of most of today’s CSS is to reduce the use of tables and (as discussed in Chapter 4) there are infinite ways to control the display of an unordered list with CSS, the Flat List option is probably better.

Go to Modules | Site Modules and select mainmenu. You’ll then notice that you can select the menu’s style in the Joomla! Administration Panel. You can do this for all menus created with the Module Manager. Select Flat List, Horizontal, or Vertical from the Menu Style option.

Menu Options

Figure 6.1 Selecting the menu output.

Your CSS File

While some of Joomla!’s output does include standard objects such as h1, h2, h3, a, p, ul, ol, it is pretty much up to you to decide how to style these in your CSS. Below is a list of ids and classes generated by Joomla! (v1.0.x) for which you’ll want to be sure to create rules in your CSS. This list has been put together after a bit of research and a lot of Joomla! experimentation. It is probably not complete, but if you account for these items in your CSS rules, you’ll be pretty well covered for most Joomla! projects and it will be easy to spot any ids or classes not covered here and add them to your CSS sheet.

IDs

The following table gives a list of different ids along with their description:

Id

Description

#active_menu

This is generated by the mosLoadModules(); code. Use it to style and control the currently selected mainmenu item.

#blockrandom

This is generated by the mosMainBody(); code when you’re using the wrapper. It is the iFrame’s id.

#contact_email_copy

This is generated by the mosMainBody(); code when you’re in the contact form page view. This is a field name id.

#contact_text

This is generated by the mosMainBody(); code when you’re in the contact form page view. It is a field name id.

#emailForm

This is generated by the mosMainBody(); code when you’re in the contact form page view. It is a field name id.

#mainlevel

This is generated by the mosLoadModules(); code. Use it to style and control the main menu div holding each main menu item.

#mod_login_password

This is generated by the mosLoadModules(); code. It is a field name id.

#mod_login_remember

This is generated by the mosLoadModules(); code. It is a field name id.

#mod_login_username

This is generated by the mosLoadModules(); code. It is a field name id.

#poll

This is generated by the mosLoadModules(); code in the Poll module. You can control the placement of the entire id with it.

#search_ordering

This is generated by the mosMainBody(); code when you’re in the search form page view. It is a field name id.

#search_searchword

This is generated by the mosMainBody(); code when you’re in the search form page view. It is a field name id.

#searchphraseall

This is generated by the mosMainBody(); code when you’re in the search form page view. It is a field name id.

#searchphraseany

This is generated by the mosMainBody(); code when you’re in the search form page view. It is a field name id.

#searchphraseexact

This is generated by the mosMainBody(); code when you’re in the search form page view. It is a field name id.

#voteid1,#voteid2, #voteid3,...

This is generated by the mosLoadModules(); code. These are generated by the Poll module and are field name ids for the radio buttons.

Classes

The following table gives a list of classes along with their description:

Class

Description

.article_seperator

This is generated by the mosMainBody(); code. Its used to style the space/separations between articles in the blog or news flash views.

.back_button

This is generated by the mosMainBody(); code. It’s used to style the main back button which is similar to hitting the back button in your browser.

.blog

This is generated by the mosMainBody(); code if you’re in blog view.

.blog_more

This is generated by the mosMainBody(); code if you’re in blog view. It indicates there are more blog stories in the links below.

.blogsection

This is generated by the mosMainBody(); code if you’re in blog view. It formats additional blog links.

.button

This is generated by the mosLoadModules(); code. Use it to consistently style and control buttons generated by any of the modules.

.buttonheading

This is generated by the mosMainBody(); code if you’re in blog view. Use it to control the layout and style of the PDF, email, and print controls.

.category

This is generated by the mosMainBody(); code if you’re in blog view. Use it to control the layout and style of links to categories like “Latest News”, or “Popular”, and “Most Read”.

.componentheading

This is generated by the mosMainBody(); code if you’re in latest news or blog view.

.contact_email

This is generated by the mosMainBody(); code when you’re in the contact form page view. Use it to control the overall placement and style of all the contact form elements.

.content_rating

This is generated by the mosMainBody(); and mosLoadModule(); Code. Use it to style the ratings output of content that has been voted on.

.content_vote

This is generated by the mosMainBody(); and mosLoadModule(); Use it to style the link or button, which allows the user to vote on the content.

.contentdescription

This is generated by the mosMainBody(); and mosLoadModule(); Use it to style the descriptions of content that can be voted on.

.contentheading

This is generated by the mosMainBody(); code. Use it to style the titles of articles and headings.

.contentpaneopen

This is generated by the mosMainBody(); and mosLoadModule(); options. It indicates the start of content.

.contenttoc

This is generated by the mosMainBody(); code. Use it to style the toc listings some content may generate.

.createdate

This is generated by the mosMainBody(); and mosLoadModule(); options. It controls the style of the displayed creation date of the article or blog entry.

.fase4rdf

This is generated by the mosMainBody(); code. It’s part of a great type of dynamic formatting class offered and lets you style the news RSS feeds that you can set up through Joomla!.

.frontpageheader

This is generated by the mosMainBody(); code. If you’re using the home page module, style the front page headers with this class.

.inputbox

This is generated by the mosMainBody(); as well as the mosLoadModule(); options. Use this to consistently style and control all form fields generated by mosMainBody or a module.

.latestnews

This is generated by the mosLoadModules(); code. The class is wrapped around a list of latest news links, which you can control with additional rule calls: .latestnews td, or .latestnews li depending on the output options you’ve chosen.

.mainlevel

This is generated by the mosLoadModules(); code. It lets you style and control main menu items displayed in the #maillevel id.

.modifydate

This is generated by the mosMainBody(); code. It accompanies date information if an article has been modified.

.module

This class is generated by the mosLoadModules(); PHP command when using the -3 $style option.

.moduletable

This class is generated by the mosLoadModules(); PHP command when using the 0, 1, -1 or -2 $style options.

.mosimage

This is generated by the mosMainBody(); code. Use it to control and style images placed with articles.

.mosimage_caption

This is generated by the mosMainBody(); code. Use it to control and style image captions placed with articles.

.mostread

This is generated by the mosLoadModules(); code. It is similar to .latestnews. The class is wrapped around a list of latest news links, which you can control with additional rule calls: .latestnews td, or .latestnews li depending on the output options you’ve chosen.

.newsfeed

This is generated by the mosMainBody(); code in the News Feeds view. Use it to control and style the overall news feed display.

.newsfeeddate

This is generated by the mosMainBody(); code in the News Feeds view. Use it to control and style the news feed displayed dates.

.newsfeedheading

This is generated by the mosMainBody(); code in the News Feeds view. Use it to control and style the news feed headers.

.pagenav

This is generated by the mosMainBody(); code. Use it to control and style the overall placement of next and previous page navigation.

.pagenav_next

This is generated by the mosMainBody(); code. Use it to control and style the next page button.

.pagenav_prev

This is generated by the mosMainBody(); code. Use it to control and style the previous page button.

.pagenavbar

This is generated by the mosMainBody(); code. Use it to control and style the overall placement of next and previous page navigation.

.pagenavcounter

This is generated by the mosMainBody(); code. Use it to control and style the overall placement of the page counter under the navigation.

.pathway

This class is generated by the mospathway(); PHP command.

.polls

This is generated by the mosLoadModule(); PHP option in the Poll module, and you can use it to set alternating backgrounds for your poll select items.

.pollsborder

This is generated by the mosLoadModule(); PHP option in the Poll module, and you can use it to style the outside border of the module. Not to be confused with the .pollstableborder class.

.pollstableborder

This is generated by the mosLoadModule(); PHP option in the Poll module, and you can use it to style the border of the table generated by the module.

.readon

This is generated by the mosMainBody(); as well as the mosLoadModule(); code. Use this to consistently style and control all the “Read More” links for truncated News, News Flashes, and blog items.

.search

This is generated by the mosLoadModule(); PHP option in the Search module, and you can use it to control and style the main search field.

.sectionentry1

This is generated by the mosLoadModule(); PHP option in the Poll module, and you can use it to set alternating backgrounds for your poll select items.

.sectionentry2

This is generated by the mosLoadModules(); PHP option in the Poll module, and you can use it to set alternating backgrounds for your poll select items.

.sectionheader

This is generated by the mosMainBody(); and mosLoadModules(); PHP options. You can use it to control section header titles displayed by modules and content.

.small

This is generated by the mosMainBody(); and mosLoadModules(); PHP options. It’s used to denote author names and other data related to an article or blog post.

.smalldark

This is generated by the mosMainBody(); and mosLoadModules(); PHP options.

.sublevel

This is generated by the mosMainBody(); and mosLoadModules(); PHP options. It is used to also denote sub items of navigation.

.syndicate

This is generated by the mosLoadModules(); PHP option. Use it to style the syndicate button layout or boarders of your syndicate module.

.syndicate_text

This is generated by the mosLoadModules(); PHP option. Use it to style the syndicate layout if you’re using text instead of buttons.

.text_area

This is generated by the mosMainBody(); option. Use it to control and style the text areas of forms much such as the .inputbox class.

.wrapper

This is generated by the mosMainBody(); option. If you’ve invoked the wrapper, use it to control and style the iFrame container that the wrapper generates.

Summary

We’ve now looked at the standard XHTML Markup and CSS classes for Joomla! are and reviewed the standard ways to control what markup is produced via PHP and the Joomla! Administration Panel. Dog-ear this chapter and let’s get ready to start cooking. First up: Dynamic menus and interactive elements.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset