For event managers who want to get their Meeting Mojo website to match their 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 colours of the menu bars and text within the menu items.
To change the top and bottom menu bars:
- Identify the colours you wish to use. These colours will require their HEX codes, usually consisting of a hash, followed by six random characters, e.g. '#FFFFF0'. This website can help you identify HEX codes for your colours.
- Open the Admin Dashboard if you're not already there and head to the Content tab.
- Click 'Edit' on the right, under 'Custom CSS'.
- Copy the code below, then paste into the text box given on the Custom CSS page. Alternatively, you can also use an IDE to ensure there are no errors in your code, then paste back onto your site. Comment blocks (in /*.....*/) will tell you how each section of code will affect your website.
- When you're done with your code, click the grey Save button. You will be taken to the Setup tab, regardless of where you originally found the CSS option.
- Click 'Website' at the top of your page to view your changes to your event's website. If you see no change, go back to the CSS page and click Save again.
Anyone with previous CSS experience may find it easy to edit the CSS code. However, if you're not sure what you're doing or need help with anything, please create a support ticket at the top of the page.
CSS Code:
DO NOT try to use any code other than this given to you. We cannot be held liable for any problems external or created from scratch code will give you.
/*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 bar color if different from top nav*/
#nav-secondary {
background-color: #901e52;
}
/* 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;
}