Building a Joomla Site template from the ground up has caused me to reflect a little more about Joomla specifics. Coding a CSS template for a CMS means getting into the underlying architecture. So… I’m going to log my take on the Joomla side of things and write some ”personal reminders” about my learning process. The goal here is to a grip on the built in CSS Classes in Joomla and how I might use them to apply my own CSS Typography.

Challenge: quickly learn the default Joomla table structure and find the built in .classes

Why so urgent? Bump into a table class or nesting that avoides my own template CSS (as an example) and stuff will look a bit wierd or out of place for that element.

Let’s do some quick research >>> 

A journey to Docs at Joomla gives us _a_blank_placeholder_for_future_content (as of 2009-03-19) . Even though there’s nothing here right now, we’ll definitely keep this for future reference :

http://docs.joomla.org/Default_CSS_classes

With that bookmarked, let’s jump over to Joomla’s forum. A post there provides a list of the default Joomla classes…. another keeper 

• Joomla Forums: http://forum.joomla.org/viewtopic.php?t=125508

Now where to find the hooks for CSS in the components, plugins and modules themselves?

http://docs.joomla.org/List_of_Joomla!_generated_core_CSS_classes

and just exactly how does it come together ??? A Joomla template designer’s  CSS References Guide covers some basics to quickly review “context”. Much of this may be more applicable to Joomla 1.0 then 1.5 so we’ll have to sort out the differences.

• Joomla CSS Reference
• Joomla Component CSS Guide
• Joomla Modules CSS Reference
• Joomla Mambots CSS Guide (deprecated)
• JoomlaBoard CSS Reference ( look to Kuena in the future – this will be the standard Joomla forum )
• Remository CSS Reference

Now let’s put it all in context within a Site. How is this going to be affected by how Joomla actually renders content? How are we going to see our articles and have menus generated?

Andrew Eddie recently posted some diagrams in .pdf on this very subject . This info is worth a ponder as we think about how our content (Sections/Categories) will eventually be pushed into menus in the Joomla architecture. Considering this first is a good idea prior to getting started with our CSS

http://www.theartofjoomla.com/joomla-structure-pdf.html

Good, we’ve covered the basics ( now I can take a few notes for “me-myself-and-I” .

ZERO OUT THE CODE

Before beginning, this is just a reminder to anyone new to CSS to please Zero out built in browswer styling. You can do this by adding this to the top of your CSS stylesheet:

 
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p {
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
text-align: left;
}


Now… with an acknowledgement to all that Dan Cederholm > Bulletproof Web Design taught me, please remember to zero out the table spacing also (we’ll touch on Joomla tables on how they’re impacting us below)


table {
border-collapse:collapse;
cellspacing:0;
}


Next is a little help for older browswers using something I learned that was way over my head . We set our default font size for our template with the additional help of the BOX MODEL HACK to help with our fixed width approach as well as Zero out margin, padding and add a background color

 

body {
/* box model hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
font-size:small; /* 1 size smaller fir IE5/Win */
voice-family: "\"}\"";
voice-family:inherit; /* BEGIN MODERN BROWSERS*/
text-align:center; /* center IE */
font-size:medium; /* size for current browsers */
margin:0;
padding:0;
background: #ededed url('none-just-yet');
}
html>body { /* be nice to Opera 5 */
font-size:medium;
}


and then we can finally learning Joomla CSS and talk about being Joomla specific

A brief look at Joomla specific TYPOGRAPHY

…. in progress

Writing CSS for beautiful TYPOGRAPHY is a very broad discussion. I will not be including CSS in a broad way for the site that I’m working on. That would be a lot of writing.

However, I can help some…. if you want to get into CSS, or the much broader discussion about Typography. then do your reading and enjoy the journey.

The focus for me right now is to annotage the facts and those little ”odd” and “random” things about Joomla that I need to be aware of in coding the stock Typography for a site.

For your own site, please generate CSS and TYPOGRAPHY according to your concepts and desires. If there is something here that’s useful, please check back. I hope you find it helpful. I’ll do what I can to come back and to add to this “work-in-progress”.

First things first – Joomla TABLES

Joomla uses Tables “by default” in which to place the content generated from Joomla components, plugins and modules. If you do not want the browser and Joomla itself to make up it’s mind about size, indentation, margin, padding, etc… then absolutely remember to Zero out the cellspacing and collapse-border(s) …. (we’ve already done this above). Here is an exampled once again:


table {
border-collapse:collapse;
cellspacing:0;
}


This will give you the ability to better track how things behave within the Joomla “Content” TABLE. As various components, plugins and modules are calling content up into the TABLE, it’s important to know you have a clean slate to start with. With borders collapsed and cell spacing at zero, let’s move on.

FIY: to get around tables as the platform for display, set aside some time and read Understanding Output Overrides.

Joomla Component Headings and Content Headings

• in Joomla, certain content has been conceived as being of of the “Heading” type in nature. This content is generated into <table> <td> in the “context” of headings.
• These Headings ”in context only” appear
  • inside the Joomla contentpane
  • outside the Joomla contentpane
• the headings can be hooked onto using a Joomla class
  • .componentheading (for components)
  • .contentheading (for content)

Now because the “context” of these classes is to style in the “context of a Heading”, I’m going to match the style of .componentheading and .contentheading to my H1 and H3 CSS TYPOGRAPHY

• .componentheading = h1 (matched to my h1 style elswhere in the template)
• .contentheading = h2 (matched to my h2 style elsewhere in the template)

This way… if not a single Header element was ever used by someone writing articles, the .componentheading and .contentheading could still appear in the Joomla context appearing as “Headings” even though symantically  they are not <Header> elements. I’ve made this choice on a “style basis” only.

Tables and Forms “inside” the Joomla contentpane

Because the <table> element is the home for much of the content seen in Joomla (without template Overrides), we must define the font size in a fixed manner here as well. The reason is because Joomla at times nests <<<tables <<inside of tables> inside of tables>>>. This nexting would cause a variable font size assigned to a <TABLE> or possibly table data <TD> elements to become progressively larger or smaller based on the number of nested tables around the text.

So, using a fixed size for font’s in tis context is a better choice :)  (i.e. pixels or some other fixed form – pt, pc, in, cm, etc…)

Examples of defining font-size for your text:

The key here will be using CSS specificity. Hopefully we’ll find the classes quickly and keep things rendering agreeably inside the Joomla tables, forms and so on

TABLES and FORMS …. we’ll add more .classes in this article.

table.contentpane

Joomla uses a class on the main Joomla table. It also nests tables inside the main table so we use a fixed size so nesting does not continously adjust size indefinitly on nested elements:


table.contentpane form, table.contentpaneopen table, table.contentpaneopen form {
font-size: 12px;
}


DIVs in Joomla  

- – - - ADDING MORE (will add NOTES later) - – -

.moduletable (we’re not styling this element as it would cascade through to many instances) However, we ill style children of .moduletable

div.moduletable form

div.moduletable form {
font-size: 12px;
margin:0;
padding:0;
border-collapse:collapse;
}

div.moduletable form table

div.moduletable form table {
font-size: 12px;
margin:0;
padding:0;
border-collapse:collapse;
}

div.moduletable h3

div.moduletable h3 {
font-size:.92em;
}

div.moduletable_text

div.moduletable_text {
font-size:.72em;
}

div.moduletable_text h3

div.moduletable_text h3 {
font-size:.92em;
}

div.bannergroup_text (we’re not styling this element as it would cascade through to many instances) However, we ill style children of .moduletable

div.moduletable_text div.bannergroup_text {
}
div.moduletable_text div.bannergroup_text div.bannerheader {
}
div.moduletable_text div.bannergroup_text div.banneritem_text {
}

div.blog_more

div.blog_more {
font-size:.72em;
}

.pagenav

.pagenav {
font-size: .72em;
}

Joomla OL and UL inside tables

The next Joomla specific need is to address lists. Usually lists can be addressed in the same manner as paragraphs, definition terms, definition descriptions, etc… Often times this is done by applying a “default” font size to the body element (as shown) and then applying variances to that “default” more specifically throughout the CSS


body {
font-size:medium; /* size for current browsers */
}


An example would be to set a %percentage or em from the default here for OL and UL (such as font-size:80% or font-size:.72em etc…) .

While this works outside the contentpane table in Joomla applying a variable font size to OL and UL elements inside the Joomla contentpane, causes the list items <li> to progressively shrink in size…. like so:

ululul

This of course is NOT GOOD for a consistent TYPOGRAPHY. So, we’ve got to keep our eyes open for how OL and UL are affected in the template. While the OL & UL <li> elements inside the MENUS do not change (because they are outside the contentpane), those inside the .contentpane (or .contentpaneopen) most definitely do.

So we will assign a fixed font-size to UL and OL elements of 12px . TO BE VERY CLEAR, this is styling UL and OL elements inside the contentpane.

The two forms of the .class we are looking for are (“NOT-OPEN” and OPEN) which are assigned a to  .contentpane AND .contentpaneopen in Joomla by default. The classes:

• .contentpane (NOT OPEN)
• .contentpaneopen (OPEN)

Which leads us to write CSS for OL and UL with the syntax of


table.contentpane ol, table.contentpane ul, table.contentpaneopen ol, table.contentpaneopen ul {  
font-size: 12px;
} 

Blog specific classes in Joomla

.blog_more strong {
}
.blog_more ul {
}
.blog_more ul li {
}

.blog_more .blogsection {
}

.blog_more a.blogsection {
font-size:.72em;
}

Joomla Footer DIV has does not have a default class

The last item (pun intended) is the footer. The default TEXT rendered by Joomla that is pushed into the footer is echo’d into a <DIV>. The <DIV> in this case does not have a .class assigned to it by default. This means that FOOTER text is not affected by the default size applied to other Joomla elements, etc… So to get a hold on the footer we will edit the index.php file and wrap the footer inside a container <DIV> . We can then #id the div and subsequently globally size and style anything inside of it.

That’s it for now.  Thanks for reading.
Mark Raborn
WIGITAL

NOTES FOR LATER:

http://v1.reinspire.net/blog/2005/09/15/css_font_styling/