Jump to content

Modificare Meniuri


Go to solution Solved by Sebastian C.,

Recommended Posts

  • Solution
Posted (edited)

Instaleaza ProMenu.

 

Ce treaba are ProMenu cu asta? Cauta in css asta :

 

#nav_wrap{
    background: #171717;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    height: 35px;
}

#primary_nav {
height: 46px;
  background: #464b4c;
  background-image: -webkit-linear-gradient(top, #464b4c, #3f4344);
  background-image: -moz-linear-gradient(top, #464b4c, #3f4344);
  background-image: -o-linear-gradient(top, #464b4c, #3f4344);
  background-image: linear-gradient(to bottom, #464b4c, #3f4344);
  border-bottom: 1px solid #000;
text-transform:uppercase;
font: 11px;
}

    #community_app_menu > li { margin: 0px 0px 0 0; position: relative; }

    
    #community_app_menu > li > a {
        display: block;
  padding: 0 20px;
  line-height: 46px;
  color: #ddd;
  text-decoration: none;
  text-shadow: 0 -1px #2e3131;
  border-left: 1px solid #4d5354;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid #353939;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
    }

        
        #community_app_menu > li > a:hover, #community_app_menu > li > a.menu_active {
            padding: 0 21px;
  line-height: 43px;
  color: #368F99;
  background: #323637;
  border-left: 0;
  border-right: 0;
  border-bottom: 3px solid #56c93d;
  background-image: -webkit-linear-gradient(top, #484e4f, #323637);
  background-image: -moz-linear-gradient(top, #484e4f, #323637);
  background-image: -o-linear-gradient(top, #484e4f, #323637);
  background-image: linear-gradient(to bottom, #484e4f, #323637);
  -webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
        }
    
    
    #community_app_menu > li.active > a {
        padding: 0 21px;
  line-height: 43px;
  color: #368F99;
  background: #323637;
  border-left: 0;
  border-right: 0;
  border-bottom: 3px solid #48a9c0;
  background-image: -webkit-linear-gradient(top, #484e4f, #323637);
  background-image: -moz-linear-gradient(top, #484e4f, #323637);
  background-image: -o-linear-gradient(top, #484e4f, #323637);
  background-image: linear-gradient(to bottom, #484e4f, #323637);
  -webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
    }
    #community_app_menu > li > a.ipbmenu img{ margin-right: -6px; }

#primary_extra_menucontent,
#more_apps_menucontent, .submenu_container {
    background: #202020;
    border: 1px solid #272727;
    border-top: 0;
    font-size: 11px;
    min-width: 140px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-radius: 0 0 4px 4px;
}

    #primary_extra_menucontent li,
    #more_apps_menucontent li, .submenu_container li {
        padding: 0;
        border: 0;
        background: none transparent;
        float: none !important;
        min-width: 150px;
    }
    
    #primary_extra_menucontent a,
    #more_apps_menucontent a, .submenu_container a {
        display: block;
        padding: 8px 10px;
        color: #fff;
    }
    
    #primary_extra_menucontent a:hover,
    #more_apps_menucontent a:hover, .submenu_container a:hover { background: #242424; color: #fff; }
    
    #primary_extra_menucontent li:last-child a,
    #more_apps_menucontent li:last-child a{
        -moz-border-radius: 0 0 4px 4px;
        -webkit-border-bottom-right-radius: 4px;
        -webkit-border-bottom-left-radius: 4px;
        border-radius: 0 0 4px 4px;
    }

#community_app_menu .submenu_container { width: 260px; }
#community_app_menu .submenu_container li {width: 260px; }

#secondary_navigation{
    background: #202020;
    border: 1px solid rgba(255,255,255,0.15);
    text-shadow: rgba(0,0,0,0.8) 0px -1px 0px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden;
    line-height: 37px;
    margin-bottom: 15px;
}

#secondary_navigation a{
    color: #368F99;
    line-height: 37px;
    height: 37px;
}

#secondary_navigation a:hover{ color: #fff; }

    #secondary_navigation #breadcrumb li {
        float: left;
    }

    #secondary_navigation #breadcrumb li a {
        padding-left: 12px;
        ;
        background: #202020 url('{style_images_url}/secondary_nav.png');
        display: block;
        outline: none;
        text-decoration: none;
            
    }
    
    #secondary_navigation #breadcrumb li.first a{
        margin-left: 0;
        background: none;
        padding-left: 0px;
    }
    
    #secondary_navigation #breadcrumb li span{
        display: block;
        padding-right: 17px;
        padding-left: 4px;
        background: #202020;
    }
    
    #secondary_navigation #breadcrumb li > span{ padding-left: 4px; background: none transparent; color: #d7d7d7; }
    
    #secondary_navigation #breadcrumb li.first a span{
        padding-left: 12px;
        -webkit-border-top-left-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
        -moz-border-radius: 3px 0px 0px 3px;
        border-radius: 3px 0px 0px 3px;
    }
    
    #secondary_navigation #breadcrumb li a:hover{
        background-position: 0 -43px;
    }
    
    #secondary_navigation #breadcrumb li a:hover span{
        background-position: 100% -43px;
    }
    
    #secondary_navigation #breadcrumb li a:active{
        background-position: 0 -86px;
    }
    
    #secondary_navigation #breadcrumb li a:active span{
        background-position: 100% -86px;
    }

#secondary_links{ overflow: hidden; }
#secondary_links li{ float: left; margin: 0; border-left: 1px solid rgba(255,255,255,0.15)}

#secondary_links a{
    padding: 0 12px;
    display: block;
}

#secondary_links img {
    vertical-align: top;
    width: 16px;
    height: 16px;
    position: relative;
    opacity: 0.8;
    margin: 10px -4px 0 -4px;
}

#secondary_links a:hover img { opacity: 1; }

.breadcrumb {
    color: #d7d7d7;
    font-size: 11px;
}
    .breadcrumb a { color: #d7d7d7; }
    .breadcrumb li .nav_sep { margin: 0 5px 0 0; }
    .breadcrumb li:first-child{ margin-left: 0; }
    /*.breadcrumb.top { margin-bottom: 10px; }*/
    .breadcrumb.bottom { margin-top: 10px; width: 100%; display: none; }

.ipsHeaderMenu {
    background: #1d1d1d;
    padding: 10px;
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    width: 340px;
}

.ipsHeaderMenu.boxShadow{
    -webkit-box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
    -moz-box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
    box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
}

    .ipsHeaderMenu .ipsType_sectiontitle { margin-bottom: 8px; }
    
    #user_notifications_link_menucontent.ipsHeaderMenu,
    #user_inbox_link_menucontent.ipsHeaderMenu {
        width: 300px;
    }

 

Inlocuieste cu asta :

 

#nav_wrap{
    background:#171717;
    border-top:1px solid #111111;
    border-bottom:3px solid rgba(255, 255, 255, 0.15);
    height:46px
}

#primary_nav{
        height:46px;
    background:#2b2b3e;
    background-image:-webkit-linear-gradient(top, #1a1a1a, #1a1a1a);
    background-image:-moz-linear-gradient(top, #1a1a1a, #1a1a1a);
    background-image:-o-linear-gradient(top, #1a1a1a, #1a1a1a);
    background-image:linear-gradient(to bottom, #1a1a1a, #1a1a1a);
    border-bottom:3px solid rgba(255, 255, 255, 0.15);
    text-transform:uppercase;
    font:11px
}

#community_app_menu>li{
    margin:0px
0px 0 0;
    position:relative
}

#community_app_menu>li>a{
    display:block;
    padding:0
20px;
    line-height:46px;
    color:#fff;
    text-decoration:none;
    text-shadow:0 -1px #2e3131;
    border-left:1px solid #4d5354;
    border-left:1px solid rgba(255, 255, 255, 0.06);
    border-right:1px solid #353939;
    border-right:1px solid rgba(0,0,0,0.2);
    cursor:pointer
}

#community_app_menu>li>a:hover,#community_app_menu>li>a.menu_active{
    padding:0
21px;
    line-Sighet:46px;
    color:#fff;
    background:#0B4C5F;
    border-left:0;
    border-right:0;
    border-bottom:3px solid #FACC2E;
    background-image:-webkit-linear-gradient(top, #141414, #141414);
    background-image:-moz-linear-gradient(top, #141414, #141414);
    background-image:-o-linear-gradient(top, #141414, #141414);
    background-image:linear-gradient(to bottom, #141414, #141414);
    -webkit-box-shadow:inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
    box-shadow:inset 0 -1px #151717, inset 0 -1px 8px rgba(0,0,0,0.2)
}

#community_app_menu>li.active>a{
    padding:0
21px;
    line-height:46px;
    color:#848484;
    background:#0B4C5F;
    border-left:0;
    border-right:0;
    border-bottom:3px solid orange;
    background-image:-webkit-linear-gradient(top, #2b2b3e, #0081ff);
    background-image:-moz-linear-gradient(top, #141414, #141414);
    background-image:-o-linear-gradient(top, #141414, #141414);
    background-image:linear-gradient(to bottom, #141414, #141414);
    -webkit-box-shadow:inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
    box-shadow:inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2)
}

#community_app_menu > li > a.ipbmenu
img{
    margin-right:-6px
}

#primary_extra_menucontent,#more_apps_menucontent,.submenu_container{
    background:#0B4C5F;
    border:1px
solid #272727;
    border-top:0;
    font-size:11px;
    min-width:140px;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
    -moz-border-radius:0 0 4px 4px;
    -webkit-border-bottom-right-radius:4px;
    -webkit-border-bottom-left-radius:4px;
    border-radius:0 0 4px 4px
}

#primary_extra_menucontent li,
#more_apps_menucontent li, .submenu_container
li{
    padding:0;
    border:0;
    background:none transparent;
    float:none !important;
    min-width:150px
}

#primary_extra_menucontent a,
#more_apps_menucontent a, .submenu_container
a{
    display:block;
    padding:8px
10px;
    color:#fff
}

#primary_extra_menucontent a:hover,
#more_apps_menucontent a:hover, .submenu_container a:hover{
    background:#242424;
    color:#fff
}

#primary_extra_menucontent li:last-child a,
#more_apps_menucontent li:last-child
a{
    -moz-border-radius:0 0 4px 4px;
    -webkit-border-bottom-right-radius:4px;
    -webkit-border-bottom-left-radius:4px;
    border-radius:0 0 4px 4px
}

#community_app_menu
.submenu_container{
    width:260px
}

#secondary_navigation{
    background: #202020 url('{style_images_url}/secondary_nav_bg.png') repeat-x 0 0;
    border: 1px solid #2d2d2d;
    text-shadow: rgba(0,0,0,0.8) 0px -1px 0px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden;
    line-height: 37px;
    margin-bottom: 15px;
}

#secondary_navigation a{
    color: #FFA206;
    line-height: 37px;
    height: 37px;
}

#secondary_navigation a:hover{ color: #FFC206; }

    #secondary_navigation #breadcrumb li {
        float: left;
    }

    #secondary_navigation #breadcrumb li a {
        padding-left: 12px;
        ;
        background: url('{style_images_url}/secondary_nav.png') no-repeat 0 0;
        display: block;
        outline: none;
        text-decoration: none;
    }
    
    #secondary_navigation #breadcrumb li.first a{
        margin-left: 0;
        background: none;
        padding-left: 0px;
    }
    
    #secondary_navigation #breadcrumb li span{
        display: block;
        padding-right: 17px;
        padding-left: 4px;
        background: url('{style_images_url}/secondary_nav.png') no-repeat 100% 0;
    }
    
    #secondary_navigation #breadcrumb li > span{ padding-left: 4px; background: none transparent; color: #d7d7d7; }
    
    #secondary_navigation #breadcrumb li.first a span{
        padding-left: 12px;
        -webkit-border-top-left-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
        -moz-border-radius: 3px 0px 0px 3px;
        border-radius: 3px 0px 0px 3px;
    }
    
    #secondary_navigation #breadcrumb li a:hover{
        background-position: 0 -43px;
    }
    
    #secondary_navigation #breadcrumb li a:hover span{
        background-position: 100% -43px;
    }
    
    #secondary_navigation #breadcrumb li a:active{
        background-position: 0 -86px;
    }
    
    #secondary_navigation #breadcrumb li a:active span{
        background-position: 100% -86px;
    }

#secondary_links{ overflow: hidden; }
#secondary_links li{ float: left; margin: 0; }

#secondary_links a{
    padding: 0 12px;
    display: block;
}

#secondary_links img {
    vertical-align: top;
    width: 16px;
    height: 16px;
    position: relative;
    opacity: 0.8;
    margin: 10px -4px 0 -4px;
}

#secondary_links a:hover img { opacity: 1; }

.breadcrumb {
    color: #d7d7d7;
    font-size: 11px;
}
    .breadcrumb a { color: #d7d7d7; }
    .breadcrumb li .nav_sep { margin: 0 5px 0 0; }
    .breadcrumb li:first-child{ margin-left: 0; }
    /*.breadcrumb.top { margin-bottom: 10px; }*/
    .breadcrumb.bottom { margin-top: 10px; width: 100%; display: none; }

.ipsHeaderMenu {
    background: #1d1d1d;
    padding: 10px;
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    width: 340px;
}

.ipsHeaderMenu.boxShadow{
    -webkit-box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
    -moz-box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
    box-shadow: rgba(0,0,0,0.4) 0px 0px 10px;
}

    .ipsHeaderMenu .ipsType_sectiontitle { margin-bottom: 8px; }
    
    #user_notifications_link_menucontent.ipsHeaderMenu,
    #user_inbox_link_menucontent.ipsHeaderMenu {
        width: 300px;
    }

Edited by Sebastian C.
  • Upvote 1

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.