Open main menu

Difference between revisions of "System Settings - Module menu appearance"

(→‎Accordion)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
= Overview =
+
=Overview=
  
  
−
With the release of bxp Release 10 SER 2 the menu system for a module is an option which can be chosen.
+
With the release of bxp Release 10 SER 2 the menu system for a module is an option which can be configured.
  
  
−
There are three choices
+
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]]
 +
 
 +
 
 +
[[File:Modulemenuappearance 001.png|800px]]
 +
 
 +
 
 +
 
 +
There are four configurable fields
 +
 
 +
* Appearance
 +
* CSS
 +
* Images Path
 +
* Buttons per row
 +
 
 +
 
 +
'''Appearance''' : There are three choices
  
 
* Classic
 
* Classic
Line 12: Line 27:
  
  
−
= Classic =
+
'''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.
 +
 
 +
 
 +
 
 +
=Appearance=
 +
 
 +
 
 +
==Classic==
 +
 
  
 
[[File:module menu choices 001.png|800px]]
 
[[File:module menu choices 001.png|800px]]
  
  
−
= Accordion =
+
 
 +
==Accordion==
 +
 
  
 
[[File:module menu choices 002.png|800px]]
 
[[File:module menu choices 002.png|800px]]
Line 79: Line 110:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
= Menu Buttons =
+
 
 +
 
 +
==Menu Buttons==
 +
 
  
 
[[File:module menu choices 003.png|800px]]
 
[[File:module menu choices 003.png|800px]]
 +
 +
 +
<syntaxhighlight lang="css">
 +
/************************************************
 +
* 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; */
 +
}
 +
</syntaxhighlight>
 +
 +
 +
 +
= Menu Buttons - Custom Set =
 +
 +
 +
There are a host of images required to supply all the buttons but it is possible for you to have your own custom set.
 +
 +
 +
The default system set looks like
 +
 +
[[File:men_buttons_all_001.png|800px]]
 +
 +
 +
Please contact support for instructions on how you can build your own customised set. support@bxpsoftware.com
  
  
  
 
[[Category:Topic:About bxp]]
 
[[Category:Topic:About bxp]]

Latest revision as of 17:34, 5 March 2018

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


Modulemenuappearance 001.png


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

module menu choices 001.png


2.2 Accordion

module menu choices 002.png


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

module menu choices 003.png 


/************************************************
* 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; */
}


3 Menu Buttons - Custom Set

There are a host of images required to supply all the buttons but it is possible for you to have your own custom set.


The default system set looks like

men buttons all 001.png


Please contact support for instructions on how you can build your own customised set. support@bxpsoftware.com

Retrieved from ‘https://www.bxpsoftware.com/wixi/index.php?title=System_Settings_-_Module_menu_appearance&oldid=8521’
Last modified on 5 March 2018, at 17:34