Actions

Difference between revisions of "Core module-generated CSS"

From Joomla! Documentation

 
(11 intermediate revisions by 4 users not shown)
Line 103: Line 103:
 
'''mod_search'''
 
'''mod_search'''
 
* <code>.search</code> class applied to surrounding <tt><nowiki><div></nowiki></tt>
 
* <code>.search</code> class applied to surrounding <tt><nowiki><div></nowiki></tt>
* <code>.inputbox</code> class applied to <tt><nowiki><input type="text"></nowiki></tt>
+
* <code>.inputbox</code> class applied to search input box <tt><nowiki><input type="text"></nowiki></tt>. Also there is an id <code>#mod_search_searchword</code> applied to this input box
* <code>.button</code> class applied to <tt><nowiki><input type="image"></nowiki></tt> and <tt><nowiki><input type="submit"></nowiki></tt>
+
* <code>.button</code> class applied to search submit button/image <tt><nowiki><input type="image"></nowiki></tt> and <tt><nowiki><input type="submit"></nowiki></tt>
  
  
Line 127: Line 127:
 
* <code>.wrapper</code> class applied to <tt><nowiki><iframe></nowiki></tt>
 
* <code>.wrapper</code> class applied to <tt><nowiki><iframe></nowiki></tt>
  
<noinclude>[[Category: Templates]][[Category: Modules]][[Category: Reference]][[Category:Definition lists]]</noinclude>
+
<noinclude>  
 +
[[Category:Template Reference]]
 +
[[Category:CSS]]
 +
[[Category:Module Reference]]
 +
[[Category:Module Development]]
 +
[[Category:Template Development]]
 +
</noinclude>

Latest revision as of 06:56, 26 June 2013

The following information is gathered from the default output for Joomla! 1.5 core modules and assumes that no template overrides are in place.

Note also that core module chrome, as generated by the System template, will wrap a module in a defined manner and in some instances apply additional CSS formatting.

mod_archive

None


mod_banners

  • .bannergroup class applied to surrounding <div>
  • .bannerheader class applied to <div> of header text if it exists
  • .banneritem class applied to <div> for each item
  • .bannerfooter class applied to <div> of footer text if it exists


mod_breadcrumb

  • .breadcrumbs class applied to a <span> element that holds the path links
  • .pathway class applied to a <span> element that holds the path links
  • .pathway class is also applied to each link


mod_feed

  • .moduletable class applied to <table> of no set width
  • .newsfeed class applied to <ul>
  • .newsfeed_item class applied to <div> element that holds feed item's description under the title.


mod_footer

None


mod_latestnews

  • .latestnews class applied to surrounding <ul>, to each <li> and to each link


mod_login

  • #form-login id applied to main container <form>
  • #form-login-username id applied to <p>
  • #modlgn_username id applied to <input type="text">
  • #form-login-password id applied to <p>
  • #modlgn_password id applied to <input type="text">
  • #form-login-remember id applied to <p>
  • #modlgn_password id applied to <input type="text">
  • .button class applied to <input type="submit">
  • .input class applied to <fieldset>
  • .inputbox class applied to <input type="text">


mod_mainmenu

  • #current id applied to <li> for the current page
  • .active class applied to <li> for the current page
  • .parent class applied to <li> if child links exist
  • .item## class applied to the <li>, where ## is the ItemId
  • Menu-Type Parameters:
    • List
#menu id is applied to the <ul>
becomes .menu if more than one menu is present on the page [CHECK]
  • Legacy-Vertical
.mainlevel class is applied to each link in a <table> of 100% width
  • Legacy-Horizontal
.mainlevel class is applied to each link in a <table> of 100% width
  • Legacy-Flat
#mainlevel id is applied to the <ul>
becomes .menu if more than one menu is present on the page [CHECK]


mod_mostread

  • .mostread class applied to surrounding <ul>, to each <li>, and to each link


mod_newsflash

  • Layout-Type Parameters:
    • Default
.contentpaneopen class applied to <table> of no set width
Two tables are created, one holds the article title, the second holds the abbreviated article text
.contentheading class applied to the <td> element holding the article titles
.contentpagetitle class applied to the article link
  • Horz
.moduletable class applied to <table> of no set width
each item is placed in a new <td> element with default styles
  • Vert
.article_separator class applied to <span> is added after each item if more than one exists


mod_poll

  • .poll class applied to surrounding <table> of 95% width and centered text-alignment
  • .pollstableborder applied to inner <table> of no set width, which holds the vote options
  • .sectiontableentry1 class applied to <td> with valign="top"
  • .sectiontableentry2 class applied to <td> with valign="top"
Note: sectiontableentry1 and sectiontableentry2 alternate each table row to provide for alternate row colors or other formatting
  • #voteid## id applied to <input>, where ## is the Id of the option
  • .button applied to <input type="submit"> and <input type="button">


mod_random_image

None


mod_related_items

  • .relateditems class applied to surrounding <ul>


mod_search

  • .search class applied to surrounding <div>
  • .inputbox class applied to search input box <input type="text">. Also there is an id #mod_search_searchword applied to this input box
  • .button class applied to search submit button/image <input type="image"> and <input type="submit">


mod_sections

  • .sections class applied to surrounding <ul>


mod_stats

None


mod_syndicate

None


mod_whosonline

None


mod_wrapper

  • #blockrandom id applied to <iframe>
  • .wrapper class applied to <iframe>