Default Joomla 1.5 CSS Classes and IDs

Waseem Sadiq · **Posted:** Mon Aug 13, 2007 5:10 pm

Hi folks,

We have a list somewhere of the default FRONTEND classes and ids in Joomla 1.0.x (I know because I compiled the list

) but we didn't have an up to date version for Joomla 1.5 - so I made one to share with the community.

The following is an exhaustive list (I hope, if anyone notices any omissions please let me know and I'll update the list) of all FRONTEND CSS classes and ids which are hard-coded into the Joomla 1.5 core.

Code:

/*Frontend*/
/* FILE:     components\com_contact\views\category\tmpl\default.php */
div.componentheading
div.contentpane
div.contentdescription
td.sectiontablefooter
td.sectiontableheader

/* FILE:     components\com_contact\views\category\tmpl\default_items.php */
a.category
td.sectiontableentry1
td.sectiontableentry2

/* FILE:     components\com_contact\views\contact\tmpl\default.php */
form#selectForm
div.componentheading
table.contentpane
td.contentheading

/* FILE:     components\com_contact\views\contact\tmpl\default_form.php */
form#emailForm
input#contact_name
label#contact_emailmsg
input#contact_email
input#contact_subject
label#contact_textmsg
textarea#contact_text
input#contact_email_copy
form.form-validate
div.contact_email
input.inputbox
input.required
input.validate-email
textarea.inputbox
textarea.required
button.button
button.validate

/* FILE:     components\com_content\helpers\icon.php */
span.hasTip

/* FILE:     components\com_content\models\article.php */
hr#system-readmore

/* FILE:     components\com_content\views\archive\tmpl\default.php */
form#jForm
div.componentheading
input.inputbox
button.button

/* FILE:     components\com_content\views\archive\tmpl\default_items.php */
ul#archive-list
div#navigation
li.row
h4.title
h5.metadata
span.created-date
span.author
div.intro

/* FILE:     components\com_content\views\article\tmpl\default.php */
div.contentpaneopen_edit
table.contentpaneopen
td.contentheading
a.contentpagetitle
td.buttonheading
span.small
td.createdate
td.modifydate
a.readon
span.article_separator

/* FILE:     components\com_content\views\article\tmpl\form.php */
input#title
input#created_by_alias
input#publish_up
input#publish_down
textarea#metadesc
textarea#metakey
table.adminform
td.key
input.inputbox
img.calendar
textarea.inputbox

/* FILE:     components\com_content\views\article\tmpl\pagebreak.php */
input#title
input#alt
td.key

/* FILE:     components\com_content\views\category\tmpl\blog.php */
div.componentheading
table.blog
td.article_column
div.blog_more

/* FILE:     components\com_content\views\category\tmpl\blog_item.php */
div.contentpaneopen_edit
table.contentpaneopen
td.contentheading
a.contentpagetitle
td.buttonheading
span.small
td.createdate
td.modifydate
a.readon
span.article_separator

/* FILE:     components\com_content\views\category\tmpl\blog_links.php */
a.blogsection

/* FILE:     components\com_content\views\category\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription

/* FILE:     components\com_content\views\category\tmpl\default_items.php */
input.inputbox
td.sectiontableheader
td.sectiontableentry1
td.sectiontableentry2
td.sectiontablefooter

/* FILE:     components\com_content\views\frontpage\tmpl\default.php */
div.componentheading
table.blog
td.article_column
div.blog_more

/* FILE:     components\com_content\views\frontpage\tmpl\default_item.php */
div.contentpaneopen_edit
table.contentpaneopen
td.contentheading
a.contentpagetitle
td.buttonheading
span.small
td.createdate
td.modifydate
a.readon
span .article_separator

/* FILE:     components\com_content\views\frontpage\tmpl\default_links.php */
a.blogsection

/* FILE:     components\com_content\views\section\tmpl\blog.php */
div.componentheading
table.blog
td.article_column
div.blog_more

/* FILE:     components\com_content\views\section\tmpl\blog_item.php */
div.contentpaneopen_edit
table.contentpaneopen
td.contentheading
a.contentpagetitle
td.buttonheading
span.small
td.createdate
td.modifydate
a.readon
span.article_separator

/* FILE:     components\com_content\views\section\tmpl\blog_links.php */
a.blogsection

/* FILE:     components\com_content\views\section\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription
a.category
span.small

/* FILE:     components\com_mailto\views\mailto\tmpl\default.php */
div.componentheading
input.inputbox
button.button

/* FILE:     components\com_mailto\views\sent\tmpl\default.php */
div.componentheading

/* FILE:     components\com_newsfeeds\views\categories\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription
a.category
span.small

/* FILE:     components\com_newsfeeds\views\category\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription

/* FILE:     components\com_newsfeeds\views\category\tmpl\default_items.php */
td.sectiontableheader
td.sectiontableentry1
td.sectiontableentry2
a.category
td.sectiontablefooter

/* FILE:     components\com_newsfeeds\views\newsfeed\tmpl\default.php */
table.contentpane
td.componentheading
td.contentheading

/* FILE:     components\com_poll\views\poll\tmpl\default.php */
form#poll
div.componentheading
div.contentpane

/* FILE:     components\com_poll\views\poll\tmpl\default_graph.php */
table.pollstableborder
th.sectiontableheader
td.sectiontableentry1
td.sectiontableentry2
td.smalldark

/* FILE:     components\com_search\search.php */
span.highlight

/* FILE:     components\com_search\views\search\tmpl\default.php */
div.componentheading

/* FILE:     components\com_search\views\search\tmpl\default_error.php */
table.searchintro

/* FILE:     components\com_search\views\search\tmpl\default_form.php */
input#search_searchword
input#area_{VALUE} /* Value is set programatically */
table.contentpaneopen
input.inputbox
input.button

/* FILE:     components\com_search\views\search\tmpl\default_results.php */
table.searchintro
table.contentpaneopen
span.small

/* FILE:     components\com_user\views\login\tmpl\default_login.php */
form#login
table.contentpane
div.componentheading
input.inputbox
input.button

/* FILE:     components\com_user\views\login\tmpl\default_logout.php */
form#login
div.componentheading
table.contentpane
input.button

/* FILE:     components\com_user\views\register\tmpl\default.php */
form#josForm
label#namemsg
input#name
label#usernamemsg
input#username
label#emailmsg
input#email
label#pwmsg
input#password
label#pw2msg
input#password2
form.form-validate
div.componentheading
table.contentpane
input.inputbox
input.required
button.button
button.validate

/* FILE:     components\com_user\views\register\tmpl\default_message.php */
div.componentheading
div.message

/* FILE:     components\com_user\views\remind\tmpl\default.php */
input#email
div.componentheading
form.josForm 
form.form-validate
table.contentpane
label.hasTip
input.required 
input.validate-email
button.validate

/* FILE:     components\com_user\views\reset\tmpl\complete.php */
input#password1
input#password2
div.componentheading
form.josForm 
form.form-validate
table.contentpane
label.hasTip
input.required 
input.validate-password
button.validate

/* FILE:     components\com_user\views\reset\tmpl\confirm.php */
input#token
div.componentheading
form.josForm 
form.form-validate
table.contentpane
label.hasTip
input.required
button.validate

/* FILE:     components\com_user\views\reset\tmpl\default.php */
input#email
div.componentheading
form.josForm 
form.form-validate
table.contentpane
label.hasTip
input.required
input.validate-email
button.validate

/* FILE:     components\com_user\views\user\tmpl\default.php */
div.componentheading

/* FILE:     components\com_user\views\user\tmpl\form.php */
input#name
input#email
input#username
input#password
input#password2
div.componentheading
input.inputbox
button.button

/* FILE:     components\com_weblinks\views\categories\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription
a.category
span.small

/* FILE:     components\com_weblinks\views\category\tmpl\default.php */
div.componentheading
table.contentpane
td.contentdescription

/* FILE:     components\com_weblinks\views\category\tmpl\default_items.php */
td.sectiontableheader
td.sectiontableentry1
td.sectiontableentry2
td.sectiontablefooter

/* FILE:     components\com_weblinks\views\weblink\tmpl\form.php */
form#adminForm
input#jformtitle
input#jformurl
textarea#jformdescription
div.componentheading
input.inputbox
textarea.inputbox

/* FILE:     components\com_wrapper\views\wrapper\tmpl\default.php */
div.contentpane
div.componentheading

/* FILE:     libraries\joomla\database\database\mysql.php */
table#explain-sql

/* FILE:     libraries\joomla\database\database\mysqli.php */
table#explain-sql

/* FILE:     libraries\joomla\document\error\error.php */
table.Table
td.TD

/* FILE:     libraries\joomla\html\html.php */
span.editlinktip 
span.hasTip
img.calendar

/* FILE:     libraries\joomla\html\html\behavior.php */
div#keepAliveLayer

/* FILE:     libraries\joomla\html\html\grid.php */
input#cb{ROW_NUMBER} /* Value is set programatically */

/* FILE:     libraries\joomla\html\html\grid.php */
span.editlinktip 
span.hasTip

/* FILE:     libraries\joomla\html\pane.php */
dl.tabs
div.pane-sliders
div.panel
h3.jpane-toggler 
h3.title
div.jpane-slider 
div.content

/* FILE:     libraries\joomla\html\parameter.php */
table.paramlist
table.admintable
td.paramlist_description
td.paramlist_key
span.editlinktip
td.paramlist_value

/* FILE:     libraries\joomla\html\toolbar.php */
div.toolbar

/* FILE:     libraries\joomla\template\tmpl\adminfilters.html */
#search
input.text_area
input.button
select.inputbox

/* FILE:     libraries\joomla\template\tmpl\adminlists.html */
input#cb{ITEM_ID} /* Value is set programatically */
input.text_area

/* FILE:     libraries\joomla\template\tmpl\breadcrumbs.html */
span.breadcrumbs 
span.pathway

/* FILE:     libraries\joomla\template\tmpl\calendar.html */
button#trigger_{ID} /* Value is set programatically */
button.button

/* FILE:     libraries\joomla\template\tmpl\dtree.html */
div.expander

/* FILE:     libraries\joomla\template\tmpl\forms.html */
input#{NAME} /* Value is set programatically */
input#{VALUE} /* Value is set programatically */

/* FILE:     libraries\joomla\template\tmpl\help.html */
div#overDiv
a.tooltip

/* FILE:     libraries\joomla\template\tmpl\page.html */
form{FORMNAME} /* Value is set programatically */

/* FILE:     libraries\joomla\template\tmpl\tabs.html */
link#luna-tab-style-sheet
div#{PANEID} /* Value is set programatically */
div.tab-page
h2.tab

/* FILE:     modules\mod_banners\tmpl\default.php */
div.bannergroup
div.bannerheader
div.banneritem
div.clr
div.bannerfooter

/* FILE:     modules\mod_breadcrumbs\helper.php */
a.pathway

/* FILE:     modules\mod_breadcrumbs\tmpl\default.php */
span.breadcrumbs 
span.pathway

/* FILE:     modules\mod_feed\tmpl\default.php */
table.moduletable
ul.newsfeed

/* FILE:     modules\mod_latestnews\tmpl\default.php */
ul.latestnews
li.latestnews
a.latestnews

/* FILE:     modules\mod_login\tmpl\default.php */
input#mod_login_username
input#mod_login_password
input#mod_login_remember
input.inputbox
input.button

/* FILE:     modules\mod_mainmenu\helper.php */
li#{ITEM ID} /* Value is set programatically */
span.separator

/* FILE:     modules\mod_mainmenu\legacy.php */
ul#mainlevel
ul#sublevel

/* FILE:     modules\mod_mostread\tmpl\default.php */
ul.mostread
li.mostread
a.mostread

/* FILE:     modules\mod_newsflash\tmpl\_item.php */
table.contentpaneopen
td.contentheading
a.contentpagetitle

/* FILE:     modules\mod_newsflash\tmpl\horiz.php */
table.moduletable

/* FILE:     modules\mod_newsflash\tmpl\vert.php */
span.article_separator

/* FILE:     modules\mod_poll\tmpl\default.php */
input#voteid{VOTE ID NUMBER} /* Value is set programatically */
table.poll
table.pollstableborder
input.button

/* FILE:     modules\mod_related_items\tmpl\default.php */
ul.relateditems

/* FILE:     modules\mod_search\helper.php */
input#mod_search_searchword
input.inputbox
input.button

/* FILE:     modules\mod_search\tmpl\default.php */
div.search

/* FILE:     modules\mod_sections\tmpl\default.php */
ul.sections

alexhokamp · **Posted:** Tue Aug 14, 2007 11:28 am

Thank you Waseem, this looks really nice and will help some folks ... :pop

salty · **Posted:** Tue Aug 14, 2007 11:35 am

Hi Waseem,
Thanks, great!

cantthinkofanickname · **Joined:** Sat Oct 21, 2006 8:53 am **Posts:** 1242

I assume by "hard coded" you just mean as produced by the *****.html.php files. Did you produce this from the CSS files? I ask because I have noticed that in playing with 1.0.12 I've noticed that some styles are in the coding but are not mentioned in the CSS file(s). I have made use of one or two of these.

This presumably includes the default template template_css.css.

Waseem Sadiq · **Posted:** Tue Aug 14, 2007 1:49 pm

By Hard coded I mean styles that are declared within the codebase of Joomla 1.5 (this is not for Joomla 1.0.x - for Joomla 1.0.x please see the FAQ section - http://help.joomla.org/component/option ... temid,268/).

I hope this clears things up a little

Waseem

riisto · **Joined:** Wed Jul 19, 2006 1:32 pm **Posts:** 22

I run RC2.

I have successfully changed the width of the search input field in my front page. I used:

Code:

input#mod_search_searchword {
width: 150px;
}

I can’t change the look of username and password input field in login module. I have tried many ids from the list above.
This doesn’t change the width:

Code:

input#mod_login_username {
   width: 50px;
}

riisto · **Joined:** Wed Jul 19, 2006 1:32 pm **Posts:** 22

I would be very thankful if someone can confirm which id/class that is controlling the looks of user and password input field in the login mod of front page.

Waseem Sadiq · **Posted:** Tue Sep 11, 2007 2:21 pm

You Can target the login form's input buttons in one of three ways:

1)

Code:

form#form-login p#form-login-username input {
you-style-rules:in-here;
}

form#form-login p#form-login-password input {
you-style-rules:in-here;
}

2)

Code:

p#form-login-username input {
you-style-rules:in-here;
}

p#form-login-password input {
you-style-rules:in-here;
}

3)

Code:

p#form-login-username input.inputbox, p#form-login-password input.inputbox {
you-style-rules:in-here;
}

Hope this helps :)

Waseem

juanpablo321 · **Posted:** Tue Feb 03, 2009 4:39 pm

Thank you for your useful post.

Joomla! Discussion Forums

Forum rules

Default Joomla 1.5 CSS Classes and IDs

Quick reply

Who is online