The way we ride! (Part 2)

A look into the code of our free template overrides

Jan

In the previous post we told you about our new template overrides (which you can download here) that render the Joomla output tablelessly. Now we can create websites that have semantic markup and a sensible structure. But actually the tables were not the only problem we had with the way the Joomla core treats content. Also we quickly reached the limits on how we could style the content. In this post we want to present some improvements we made with our overrides.

First of all, we wanted to improve the selectability of tags within the components. The following example taken from the Weblinks component is typical for how the HTML code starts and how selectors are handled in Joomla:

Joomla code

<?php if ( $this->params->def( 'show_page_title', 1 ) ) : ?>
	<div class="componentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
		<?php echo $this->escape($this->params->get('page_title')); ?>
	</div>
<?php endif; ?>
…
<table class="contentpane<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
	<tr>
		<td class="contentdescription<?php echo $this->params->get( 'pageclass_sfx' ); ?>">…</td>
	</tr>
</table>
…

Take a look at how often in this little code snippet the page class suffix is attached to an existing CSS class. In this example 3 times. Also the page class suffix is attached right at the end of each CSS class without any space. So if you give it the suffix blue for example the first class would be called componentheadingblue.

Now imagine you have two different menu items linking to a Weblink component. One has no suffix, the other one has the suffix blue to change the font color of the component heading to blue. This is how most cases look like: you only want to do some small changes to the CSS styles. Say you want the componentheadings to have the font Georgia, be 24 pixels high and capitalized. In order to achieve that you would have to write all CSS attributes twice. The CSS code would look like this:

Possible styles for the Joomla HTML output

div.componentheading {
	font-family: Georgia,"Times New Roman", serif;
	font-size: 24px;
	text-transform: uppercase;
	color: grey;
}

div.componentheadingblue {
	font-family: Georgia,"Times New Roman", serif;
	font-size: 24px;
	text-transform: uppercase;
	color: blue;
}

You realize where we're getting, right? Exactly. That is a lot of redundant code, especially if you have a large website and you do not only have two components with different suffixes but lots of them. To solve this issue you have to put a space before your chosen page class suffix in the Joomla administration. It would look like blue. We think this is a little annoying. Also it is not really required to attach the page title more than once.

So let's take a look at what we did. First of all, we gave every component a DIV that wraps the whole output of the component. We gave this DIV two classes. One class is called joomla and if there is a suffix, that is the other class. In there is a DIV with the class that describes the component:

YOOtheme overrides

<div class="joomla <?php echo $this->params->get( 'pageclass_sfx' ); ?>">
	<div class="weblinks">
		…
	</div>
</div>

So let's use the example from above and give our component the page class suffix blue. The output would be as follows:

YOOtheme overrides HTML output

<div class="joomla blue">
	<div class="weblinks">
		…
	</div>
</div>

Let's remember how the componentheading is rendered in Joomla:

Joomla code

<?php if ( $this->params->def( 'show_page_title', 1 ) ) : ?>
 	<div class="componentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
 		<?php echo $this->escape($this->params->get('page_title')); ?>
 	</div>
<?php endif; ?>

Now let's think of what this DIV displays semantically. A heading, right? So rather than a DIV the tag should be an H1. Also we think it is better to use the get() function instead of setting the page title to 1 if it is not defined. We made it look like this:

YOOtheme overrides

<?php if ($this->params->get('show_page_title', 1)) : ?>
	<h1 class="pagetitle">
		<?php echo $this->escape($this->params->get('page_title')); ?>
	</h1>
<?php endif; ?>

And the whole thing looks like this:

YOOtheme overrides

<div class="joomla <?php echo $this->params->get( 'pageclass_sfx' ); ?>">
	<div class="weblinks">
		<?php if ($this->params->get('show_page_title', 1)) : ?>
			<h1 class="pagetitle">
				<?php echo $this->escape($this->params->get('page_title')); ?>
			</h1>
		<?php endif; ?>
		…
	</div>
</div>

That way, if we have a component without a suffix and one that has the suffix blue, we can very specifically assign our styles to the right selector with even less code. Also we used the page title only once and you can select and style any HTML content.

Possible styles for the YOOtheme overrides HTML output

div.joomla div.weblinks h1.pagetitle {
	font-family: Georgia,"Times New Roman", serif;
	font-size: 24px;
	text-transform: uppercase;
	color: grey;
}

div.blue div.weblinks h1.pagetitle {
	color: blue;
}

Also, the joomla class allows us to only style Joomla's tags without interfering with the styling of third-party components.

This example taken from the weblinks component represents the way we wrote all overrides quite well. We restructured and optimized the HTML output of all Joomla core components. Especially we tried hard to improve the code of the whole com_content. But take a look at it yourself. If you like our overrides and interesting questions come up during the next couple of weeks we will probably write a third post on this topic.

Oh, and keep in mind that the overrides are already included in all YOOtheme templates from 2009. To use them in all other templates you can download the template overrides here.

By Sascha | 23 January, 2009 | Posted in Warp

Comments (13)

matthias.heppner

| Profile | #

Wow, a very professional guide for the possibilities of template overrides, big thx Yootheme!!

reply
Arno

| #

First great work on the package looks very clean.

The above is possible right now and done like this for a reason.
The suffix is put against the set class because that allows you to completely wipe out any css for that class(create a new class basically):
<div class="joomla<?php echo $this->params->get( 'pageclass_sfx' ); ?>">

No suffix becomes:
<div class="joomla">

Yes suffix becomes:
<div class="joomlablue">

That means joomlablue inherits NO css from joomla because it is a totally different class.

If you want to inherit the css from joomla and still add a blue to that class like:

<div class="joomla blue">

You need to put a space in the joomla suffix field before blue.

What you have done now is eliminate the option to create a totally new class with the suffix because you hardcoded the space and that takes away flexibility in my eyes.

reply
- sascha
  
  | Profile | #
  
  Hi Arno, regarding the space I'm a little surprised because in Joomla 1.0 the space was trimmed and it was not possible to separate the page class suffix to get a second CSS class. But you are right the behavior changed in Joomla 1.5 and the space is no longer trimmed. I correct this in our article. Thanks for reporting. :-)
  
  I don't think that you really lose flexibility because it is still possible to overwrite the whole CSS styles of needed. But in most cases you only want to do some small changes to the CSS and this is why we optimized the code this way.
  
  reply
Arno

| #

Hello Sascha,

I ran into this in the early stages of 1.5 development and we removed the trimming to allow these extra classes trough spaces.

Off course it is still possible to overwrite the whole css but it's easier when you can do joomlablue for a certain page that you want to have a completely different css.
I agree the second class is for smaller changes most of the time but typing a space in the suffix field is very easy to add or remove so I stick with my case that the space should not be hardcoded.
If only it was because of this:
<div class="joomla[space]<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
will result in:
class="joomla[space]"
and I don't want the space there if I don't use a suffix.

Arno

reply
- sascha
  
  | Profile | #
  
  Hi Arno, most CSS styles we used for the overrides are for layout reasons. For example to create the multi column layout in com_content. In most cases you want to modify some colors or background images. And in those cases it is very practicable to keep the layout styles and not to lose them. We had never any case where it is useful to lose all current styles. I think the space is insignificant. But that may be a matter of opinion ;-) Have you ever come across a case where you needed the class to change completely?
  
  Another example: Often we don't want to code CSS styles into Joomla articles. So we use different page class suffixes for different articles. Now we can use the CSS selectors to apply a specific style only to a specific article. The CSS styles are stored in an external file and will only affect the specific article. Here it comes very handy not to lose the current styles when when using page class suffixes...
  
  reply
crypta

| #

Awesome stuff!

reply
dex

| #

I agree with both Sascha and Arno. Either approach has its validity. Sascha's does require more engineering, but for me it's more effective in the end to add classes - maybe it's just the way my brain works. But Arno thanks for letting us know that the space trim is gone, because now we can use the flexibilty with or without Sascha's overrides. Great news either way!

reply
bryce

| #

In what ways are the Yoo overrides different from the ones present in the beez template html directory?

reply
bryce

| #

Thx for commenting the CSS so thoroughly! Makes grabbing portions of the overrides easier.

reply
Parvez

| #

thanks YOO team for grate effort...
i'm a biginer css coder..i want to know one thing, i create a menu About us and give Page suffix "aboutus" and then i want to change the about us page color then i apply div.joomla aboutus{background-color: black;} but nothing happen :(
please let me know what is my fault or what to do if i want to change background image on every page..

Thanks..

reply
- Jonathan Shroyer
  
  | #
  
  You missed your second period. It should read...
  div.joomla .aboutus {background-color: black;}
  
  if that doesn't work then remove the space (I actually think this is the correct one).
  div.joomla.aboutus {background-color: black;}
  
  reply
Jonathan Shroyer

| #

One issue that may come up with stringing css classes together is that sometimes IE6 won't allow multiple classes in the same div. It ignores everything but the last class. I think it may be ok with 2, but I know 3 confuses it.

I would like to propose an addition to your overrides. I have always been surprised how thoughtless the Joomla team was to not wrap the article icons in a div so they can all be moved easily. I have added this around the icons in default_item.php in com_content (I'm only showing the top since the bottom is obvious).

<code>
<?php if (($canEdit) || ($this->item->params->get('show_email_icon')) || ($this->item->params->get( 'show_print_icon' )) || ($this->item->params->get('show_pdf_icon'))) : ?>
<div class="wrap-icons">
</code>

This allows me to create a line of css of .wrap-icons and can move them easily or put a box around them all for a nice additional style. I have heard that these overrides may be going into 1.6, so it would be greatly appreciated if you added this.

Thanks!

reply
doreymedia

| Profile | #

I can't thank you enough for releasing this under the GPL, very cool and generous. I'm using these overrides on my first attempt at a highly accessible template for a client. Thanks a million Sascha.

reply