Jump to content
TheHost4U - Webmaster Resources
    1. 1

      Change color of Menu's

      Here we are going to change the background color of menu's from this: To      
    2. 2

      Changing the pointer color

      Here we are going to change the menu pointer color from: to AdminCP >> themes >> far right of theme name click the first icon ( </> ) Click the CSS tab In custom.css add: .ipsMenu.ipsMenu_bottomCenter::after { border-color: transparent transparent green transparent; } You should end up with: There are other pointer areas which you will also need to change .ipsMenu.ipsMenu_topLeft:after { border-color: #fff transparent transparent transparent; } .ipsMenu.ipsMenu_topRight:after { border-color: #fff transparent transparent transparent; } .ipsMenu.ipsMenu_topCenter:after { border-color: #fff transparent transparent transparent; } .ipsMenu.ipsMenu_bottomRight:after { border-color: transparent transparent #fff transparent; } .ipsMenu.ipsMenu_bottomLeft:after { border-color: transparent transparent #fff transparent; } .ipsMenu.ipsMenu_bottomCenter:after { border-color: transparent transparent #fff transparent; } Just change all the #ff to the color we set in above example (in this case green)
    3. 3

      Changing background color

      Now we change the background color so you end up with: In custom.css add: .ipsMenu { background: green; }  
    4. 4

      Change background hover color

      Here we are going to change the menu background hover color from this: To Go to AdminCP >> Themes >> far right of theme name click the first icon ( </> ) click the css tab and then click custom.css In custom.css add: ul:not(.ipsMenu_keyNav) .ipsMenu_item:not(.ipsMenu_itemClicked):not(.ipsMenu_itemDisabled) a:not(.ipsMenu_itemInline):hover { background: #ccc; } You could also add change of font color with the hover e.g just by adding color to the above css .. e.g. ul:not(.ipsMenu_keyNav) .ipsMenu_item:not(.ipsMenu_itemClicked):not(.ipsMenu_itemDisabled) a:not(.ipsMenu_itemInline):hover { background: #ccc; color: red; }
    5. 5

      Other Menu Areas (e.g.Theme Changer)

      There are other Menu areas that are not affected by the previous changes mentioned above Main one is the Theme Changer at bottom of page (if you do not have more than one theme then you might not need to add this change) To make this the same as the other menu background then in custom.css add: .ipsApp buttton.ipsButton_link { background: green; } Again if want a different font color then add to the above css If also want to change the background hover color and font then use: .ipsApp buttton.ipsButton_link:hover { background: green; color: #fff; }
    Sign in to follow this  
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...