CSS Classes in Module.CSS

Rendering of the module/skinobject is done in table form, which is a break from previous versions, which rendered the selector as is. The main reason for this change is a better control in the layout of the language selector. You can adjust the layout by changing the module.css file that comes with the language selector. This is the default css file:

/* ================================
    CSS STYLES FOR Module/Skinobject Apollo.MLLanguageSelector
   ================================
*/

/* 
   =============================================
   classes for the main layout table
   =============================================
*/


/* use this class to set styles for the entire layout table*/
.MLLanguageMenuLayoutTable
{
  /* enable display:inline if the language selector should be rendered inline, 
     for instance if the selector is not positioned in its own table cell and flags/hyperlinks are visible 
     (otherwise use the class ".MLLanguageMenuTable" to control display) */

  /* display:inline; */
}

/* if display is set to horizontal, only one row is rendered, use this class to style that row*/
.MLLanguageMenuLayoutTableRow1
{
	
}

/* 
	if display is set to vertical, 2 rows can be rendered. One for the label and dropdownmenu, 
	and one for the flags/hyperlinks.
    use this class to style the second row
*/
.MLLanguageMenuLayoutTableRow2
{
	
}


/* 
   =============================================
   classes for the table used to display the dropdownmenu
   =============================================
*/

/* class for the complete table*/
.MLLanguageMenuTable
{
  /* enable display:inline if the language selector should be rendered inline, 
     for instance if the selector is not positioned in its own table cell and only the menu is visible 
     (otherwise use the class ".MLLanguageMenuLayoutTable" to control display) */

  /*display:inline; */
}

/* class for the cell that contains the label */
.MLLanguageMenuLabelCell
{
		white-space:nowrap;
}

/* class for the cell that contains the left flag*/
.MLLanguageMenuLeftFlagCell
{
}

/* class for the cell that contains the dropdown menu */
.MLLanguageMenuMenuCell
{
		white-space:nowrap;
}

/* class for the cell that contains the right flag */
.MLLanguageMenuRightFlagCell
{
}


/* 
   =============================================
   classes for the table which in which the flags and urls are rendered
   =============================================
*/

/* class for the complete table */
.MLLanguageSelectionItemTable
{
	padding:0px;
	margin:0px;
	border:0px;
}

/* class for the cells that contain the flags*/
.MLLanguageSelectionItemFlag
{
	padding:2px;
	margin:0px;
	width:34px;
	text-align:center ;
}

/* class for the cells that contain the hyperlinks*/
.MLLanguageSelectionItemURL
{
	padding:2px;
	margin:0px;
	white-space:nowrap;
	text-align:center ;
}

/* class for the rows that contain the flags and hyperlinks*/
.MLLanguageSelectionItemRow
{
}
			


NOTE: if you are using the language selector with other controls in the same placeholder/tablecell in your skin, due to the use of tables, you will experience some alignment problems. You have to options: set the display of the enclosing table for the selector to inline (either in class MLLanguageMenuLayoutTable or in class MLLanguageMenuTable, depending on whether you are showing flags/hyperlinks)

Last edited Jul 11, 2011 at 6:11 AM by erikvb, version 1

Comments

No comments yet.