MonoX support board

Start the conversation, ask questions and share tips and solutions with fellow developers.

Non-registered users can only browse through our support boards. Please register now if you want to post your questions. It takes a second and it is completely free. Alternatively, you can log in without registration using your credentials at major sites such as Google, Microsoft Live, OpenId, Facebook, LinkedIn or Yahoo.

MonoX Default Menu look and feel  (Mono Support )

Viewed 17526 time(s), 3 post(s) 10/8/2011 11:46:29 AMby francoiswolmaransza

Related topics

francoiswolmaransza

francoiswolmaransza

10/8/2011 11:46:29 AM
Is it possible to change the look and feel of the default MonoX install to look like the www.mono-software website menu?
This content has not been rated yet. 
70 Reputation 9 Total posts
khorvat

khorvat

10/9/2011 7:36:44 AM
Hi,

yes of course it is possible, menu on our company web site is the MonoX default menu. Please take a look in the /App_Themes/Default(or your theme name)/Default.css for the following CSS classes:

/**** Navigation - START ****/
.navigation

You can change it manually or use the style from our company web site. Below if the CSS style from this web site.

.header .navigation
{
    width: 722px;
    float: right;  
    position: relative;
    z-index: 1000;
}
.header .nav
{
    float: right;
}
.header .navigation ul
{  
    padding: 0px;
    margin: 40px 0px 0px 0px;
    list-style: none;
    float: left;   
}
.header .navigation ul li
{
    float: left;
    display: inline; /*For ignore double margin in IE6*/
    margin: 0;
    color: #fff;
    margin-right: 5px;
    position: relative;
}
.header .navigation ul li a
{
    height: 25px;
    text-decoration: none;
    float:left;
    color: #cdd8e9;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 0px 0px 15px
    background: url(img/nav.png) no-repeat top left;
    text-shadow:1px 1px 1px #000000;
}
.header .navigation ul li.no-hand A
{
    cursor: default;
}
.header .navigation ul li strong
{
    width: 15px;
    position: relative; /*To fix IE6 problem (not displaying)*/
    float:left;
    height: 24px;
    background: url(img/nav.png) no-repeat top right;
}
.header .navigation ul li a:hover
{
    color: #fff;   
}
/* Start -  Simple Menu */
.header .navigation ul ul
{
    position: absolute;
    z-index: 5000;     
    top: 29px;
    left: 0px;
    float: left;
    clear: both;
}
.header .navigation ul ul ul
{  
    top: auto;
    left: 190px;
    border-left: solid 1px Transparent;
    float: left;
    clear: none;
}
.header .navigation ul li:hover .level0
{
    display:block
    margin: 0px;
    padding: 4px;
    float: left;
}
.header .navigation .level0
{  
    background: #2a4574 url(img/navigation-level-bg.jpg) right repeat-y;
    padding: 3px;
    border: solid 1px #4e6587
}
.header .navigation .level0 li
{  
    display: block;
    float: left;
    clear: both;
    margin: 0px 0px 2px 0px !important;    
    border-left: solid 5px #9ed457;
}
.header .navigation .level0 li:hover
{
    background: #9ed457;
}
.header .navigation .level0 li a,
.header .navigation li.selected .level0 li a
{          
    background: none;
    text-decoration:none;
    color: #ADBDD4;
    display:block
    padding: 5px !important;
    margin: 0px !important;
    text-align: left;
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 12px;
    height: auto !important;   
    cursor: pointer !important;
}
.header .navigation .level0 li a:hover,
.header .navigation li.selected .level0 li a:hover
{      
    background: #9ed457;
    padding: 5px !important;   
    color: #fff !important;
}
.header .navigation .level0 li a span
{  
    background: none !important;
    margin: 0px !important;
    padding: 0px 0px 0px 5px !important;   
    white-space: pre;
    width: 180px;
    display: block;
}
.header .navigation .level0 li a span:hover
{      
    background: none !important;
    margin: 0px !important;
    padding: 0px 0px 0px 5px !important;   
}
.header .navigation .level0 li strong
{
    background: none;
    height: auto;
    width: auto;
    display: none;
}
header .navigation .level0 li a
{
    background-color: transparent;
}
.header .navigation .level0 li:hover a
{
    background-color: transparent;
}
.header .navigation .level0 li.selected a
{
    color: #ADBDD4;
    background: none;
}
.header .navigation .level0 li:hover,
.header .navigation .level0 li.selected a:hover
{
    background: #9ed457;
}
.header .navigation .level0
{
    display:none;
}
.header .navigation .level1
{
    display:none;
    margin-top: -1px;
}
.header .navigation ul.level0 li:hover .level1
{
    display:block;
}
/* End - MonoX Simple Menu */

Note: you need to manually copy the images to your application, and please change them a bit.

Regards
Rated 5.00, 1 vote(s). 
15993 Reputation 2214 Total posts
francoiswolmaransza

francoiswolmaransza

10/15/2011 10:49:25 AM
Thanks, will rework the images
This content has not been rated yet. 
70 Reputation 9 Total posts