For event managers who want to get their Meeting Mojo website to match the house style as closely as possible, we have included a style sheet override. This is simply an area where you can add your own web styling code (CSS). Advanced styling will require expertise in css coding, but this guide includes a code template that makes it relatively easy to change the colors of the menu bars and text within the menu items.

 

To change the menu bars:

1. Prepare by identifying the colors you wish to use and finding their ‘HEX’ codes. These usually consist of a hash# sign followed by a six-character combination of numbers and/or letters. For example, black is coded by #000000 and white by #FFFFFF or #ffffff. There are a number of free online tools that can help you do this, for example http://imagecolorpicker.com/

2. Substitute the color codes in the appropriate places within the code below. You’ll need to copy the entire code and paste it into an editor – you can do this on the Meeting Mojo site, or use a proper coding editor. Read the sections within /*comment blocks*/ to find out how each section of the code will affect your website.  

3. Go to the Content tab in the Admin area. At the right of the page, click ‘Edit’ under Custom CSS.

4. Paste in the new code and click Save. Now go to the Website to view the new styling.

 


Code:

 

/*TOP MENU BAR*/

 

/*color of bar. Change all the hex codes - can introduce left-right color gradient if required */

.navbar-inverse .navbar-inner {

 background-color: #11A09B;

 background: -webkit-linear-gradient(left, #FFFFFF, #FFFFFF, #FFFFFF);

 background: -o-linear-gradient(right, left,#FFFFFF, #FFFFFF, #FFFFFF);

 background: -moz-linear-gradient(right, left,#FFFFFF, #FFFFFF, #FFFFFF);

 background: linear-gradient(to right, #FFFFFF, #FFFFFF, #FFFFFF);

 border: solid 1px #FFFFFF;

}

/*position of first menu item. 0px = no indent*/

.navbar-inner {

 padding-left: 0px;

}

 

/*text color*/

#primarybuttonrow a {

 color: #000000;

}

/* background color of menu items on hover/click, and color transition time */

#primarybuttonrow a.active, #primarybuttonrow a:hover {

 text-decoration: none;

 background-color: #11A09B;

 transition: background 0.5s ease;

}

 

/* Change from white icons to black. Comment out or remove this element to keep white icons */

.icon-white {

 background-image: url("/assets/img/glyphicons-halflings.png");

}

 

/*LOWER MENU BAR*/

 

/*menu bar color*/

.navbar-static-top {

background-color:#FFFFFF;

}

 

/* menu item text color */

.navbar-inverse .brand, .navbar-inverse .nav > li > a {

 color: #000;

 font-weight: bold;

}

 

/* background color of menu items on hover/click, text color, and color transition time */

.navbar-inverse .nav .active > a,

.navbar-inverse .nav .active > a:hover,

.navbar-inverse .nav .active > a:focus,

.navbar-inverse .nav > li > a:focus,

.navbar-inverse .nav > li > a:hover {

 background-color: #11A09B;

 color: #000;

 transition: background 0.5s ease;

}

/*LOGIN AREA*/

/* closed login area*/

#login-toggle {

background-color:#FFFFFF;

color: #000;

}

/*action buttons: text color and backgrounds*/

.btn-white, .btn-white:hover, .btn-white:focus, .btn-white:active{

color:white;

background-color:#333;

transition:none;

}

/* open login area*/

#login-body {

background-color: #FFFFFF;

}

 

/*HYPERLINKS*/

a:link, a:visited, a:hover, a:active {

 text-decoration: none;

 color: #ec1c24;

}


.user_stats_cell {

    border: 1px solid #eee;

    background-color: #f6f6f6;

}