System Settings - Module menu appearance

Contents

1 Overview

With the release of bxp Release 10 SER 2 the menu system for a module is an option which can be configured.

This option is configured for all users in Main Menu > System Access Management > System Management > System Settings > Module Menu Appearance For all the settings available System_Settings

There are four configurable fields

• Appearance
• CSS
• Images Path
• Buttons per row

Appearance : There are three choices

• Classic
• Accordion
• Menu Buttons

CSS : This style sheet will only be included on the Module Menu pages. The default styling is done in style_master_layout.css but can be overridden in your own custom style sheets.

Images Path : Allows you to override the default path to where the images are https://ww3.allnone.ie/images/image_icons/ This allows you to completely replace the buttons should you wish to. A full copy of the buttons can be provided on request allowing to easily customise them.

Buttons per row : When using the Menu Buttons option only, the system will dynamically work out the best amount of buttons to display per row. If you would prefer to override this with a set size that is maintained in all modules, this option can be used.

2 Appearance

2.1 Classic

2.2 Accordion

The style of the menu can be overwritten with

/************************************************
************************************************/
.cssMenu_Header {

}
.cssMenu_Header_TD {
    color : #ffffff;
    text-align : left;
	font-size:16px;
}
.cssMenu_Header_TD a{
    color : #ffffff;
    text-decoration : underline;
	font-size:16px;
}
.cssMenu_Header_TD a:hover{
    color : #ff0000;
}
.cssMenu_Header_TD a:visited{
    color : #ffffff;
}
.cssSectionMenu_Text {

}
.cssModule_Menu_Div{
}
.csseCourse_Menu_Title {
    color : #ffffff;
    text-align : left;
	font-size:16px;
}
.cssContentBody{
	width:99%;
    border: 1px solid #042103;
	border-spacing:2px;
	border-color:#042103;
	color:#042103;
	
	background:#ffffff;
	background-color:#ffffff;
	
	padding: 5px;
	padding-left: 7px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-khtml-border-radius: 15px; 
	-o-border-radius: 15px;
	overflow: hidden; 
	-pie-track-active: false;
	-pie-track-hover: false;
}

2.3 Menu Buttons

/************************************************
* Menu Button style
************************************************/
.cssMenu_BigButtons_Section_All { 
	background: url("/images/myhome/test4.png") 50% 50% repeat-x;

}
.cssMenu_BigButtons_Section_DIV{
	/* background-color: #00Ff00; */
	background: rgba(255, 255, 255, 0.9);
	color:#042103;
	padding: 5px;
	padding-left: 7px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-khtml-border-radius: 15px; 
	-o-border-radius: 15px;
	overflow: hidden; 
	-pie-track-active: false;
	-pie-track-hover: false;
}
.cssMenu_BigButtons_Section_Items { 
	/* background-color: #0000ff; */
}
.cssMenu_BigButtons_Section_Table { 
	/* background-color: #ffff00; */
}
.cssMenu_BigButtons_Section_TR { 
	/* background-color: #ff00ff; */
}
.cssMenu_BigButtons_Section_TD { 
	/* background-color: #00ffff; */
	cursor: pointer;
	cursor: hand;
}
.cssMenu_BigButtons_Section_TD:hover { 
	font-weight: bold;
}
.cssMenu_BigButtons_Section_TR_Spacer { 
	/* background-color: #ababab; */
}
.cssMenu_BigButtons_Section_TD_Spacer { 
	/* background-color: #232323; */
}