EasyTable CSS ID's and classes

Craig Phillips

Nov 28 |09:17 AM

Last Updated on Wednesday, 09 February 2011 10:33

General

This document is the result of an evolving process and will change to reflect the currently available version of EasyTable Pro

This document details the element IDs and CSS classes that are used in each of the 3 views (the list of published tables, the table list of records view and the record view).

The CSS classes and IDs listed in the tables below are basically in the order of appearance in the HTML generated by the component. Please note that these are the classes and IDs for EasyTable Pro and not all of them are available in EasyTable for J!

By adding the appropriate CSS to your templates style sheets you can implement a range of features/effects such as alternating row colors or row highlighting when a users cursors hovers over a row. The CSS required for that example is minimal, you can see it in use on the our demonstration website. For example the CSS to achieve the effects described is shown below:

tr.row0 { background-color: #FFFFFF; }
tr.row1 { background-color: #F9F9F9; }
tr.row0:hover, tr.row1:hover { background-color: #FFD; }

All Views

Following the convention for Joomla content components the content is displayed in a surrounding div that has a class of 'contentpaneopen', also inline with standard Joomla features you can define a Page Class Suffix (read more about Joomla and the Page Class Suffix).

TTTTT - is used below to represent the table alias.

FFFFF - is used to represent a field alias.

List of published EasyTables

Name	Type	Notes
et_list_page	ID	The ID of the surrounding DIV, this is the surrounding div mentioned above with the class of 'contentpaneopen'
componentheading	CLASS	The standard Joomla class attached to the DIV that contains the Page Title.
et_tables_list	CLASS	The class attached to the list <UL> element of table list.
etTableListLockElement¹	CLASS	The class attached to the "Locked" icon, EasyTable Pro supports user access levels.
et_list_table_TTTTT	CLASS	Each link to a table has it's own class attached to the list item <li>. The class name is made up of 'et_list_table_' with the table alias appended to it (in place of the TTTTT). So, if the table alias is 'us_presidents' the class will be 'et_list_table_us_presidents'
et_description	CLASS	The class attached to the paragraph <p> containing the description. (Below each table name in the list the table's description is displayed)

¹ The padlock icon is only rendered if the table requires a "Registered" or higher level to access it and the user is either not logged in or not of a high enough level.

EasyTable Record List

Name	Type	Notes
et_table_page	ID	The ID of the surrounding DIV, this is the surrounding div mentioned above with the class of 'contentpaneopen'
contentheading	CLASS	The standard Joomla class attached to the H2 that contains the Page Title.
createdate	CLASS	The standard Joomla class attached to the paragraph <p> that contains the table's creation date.
modifydate	CLASS	The standard Joomla class attached to the paragraph <p> that contains the table's modification date.
et_description	CLASS	The class attached to the paragraph <p> containing the description.
easytable-TTTTT	ID	The ID of the DIV that surrounds the table elements.
search_result	CLASS	The standard Joomla class attached to the form used for search functions.
et_search_result	CLASS	The class name attached to the DIV wrapped around the search field and buttons.
pagination	CLASS	The standard Joomla class attached to the DIV surrounding the pagination controls.
display	CLASS	The class attached to the DIV wrapped around the form elements that control how many records are displayed per page.
TTTTT	ID	The table alias is used as the ID of the <TABLE> element.
sectiontableheader	CLASS	The standard Joomla class used for table headings.
FFFFF	CLASS	The class attached to a column heading in addition to the sectiontableheader described above, where FFFFF is replaced by the field alias. The FFFFF class is also attached to each table cell <TD> for that field. eg. FFFFF could be president as in our demo website.
row0 / row1	CLASS	Alternating table rows <TR> have the classes row0 or row1 attached, starting with row0 for the first row.
colfld	CLASS	The class attached to each table cell <TD> and immediately proceeds the field alias described above. eg. <TD CLASS='colfld president' >
pagination_footer	CLASS	The class attached to the pagination elements at the foot of the table.

EasyTable Record View

Name	Type	Notes
et_record	ID	The ID of the surrounding DIV, this is the surrounding div mentioned above with the class of 'contentpaneopen'
contentheading	CLASS	The class attached to the DIV that contains the Page Title.
easytable-record	ID	The ID of the DIV that surrounds the all of the record elements.
TTTTT	CLASS	The class attached to the DIV easytable-record.
TTTTT	ID	The table alias is used as the ID of the <TABLE> element for the record.
sectiontableheader	CLASS	The standard Joomla class attached to a field heading.
sectiontablerow	CLASS	The standard Joomla class attached to the table cells <TD> containing the field value.
FFFFF	CLASS	The field alias is used as a class attached to the field heading the the table cell that contains the fields value.
easytable-linkedtable	ID	The ID of the DIV surrounding the table of records from the linked table, if one exists.
	CLASS	The easytable-linkedtable DIV also has the alias of the linked table applied to it as a class.

RSForm!Pro is a powerful Joomla! form creator, helping you to create custom forms in minutes. The new product makes form management much easier and gives you the time to handle your clients better.

For only €19.00 how can you go wrong?
( We've used it for years... Shouldn't you? )