Content block background colors

Comments

• Options

  ChancyRat Registered Users Posts: 2,141 Major grins

  January 8, 2014 edited January 8, 2014

  For your title, you need to use an HTML block instead.
  
  For the background color of the top navbar, in Edit Theme/Advanced, you can change the color and transparency. Someone might have CSS to add an image instead of color, not sure about that.
  
  For the navbars, Aaron of this customizing fame: http://www.aaronmphotography.com/Customizations
  gave me my code. Here it is with his notations, you will need to pick and choose and tweak what you need.
  

  /* ================================
     = ALL NAVBARs, TOP-LEVEL CODE  =
     ================================ */
  /* Make each top level menu item have less top and bottom padding */
  .sm-accordion>.sm-accordion-item .sm-accordion-item-label {
    line-height: 20px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  
  /* Move the + and - buttons up so they properly align */
  .sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion>.sm-accordion-item>.sm-accordion-item-action .sm-fonticon {
    top: -30px; !important;
  }
  
  /* Change the navbar fonts */
  .sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
  .sm-page-widget-nav-toplink > a {
    font-family: 'Buda' !important;
    font-size: 16px !important;
    color: #000000 !important;
  }
  
  /* ==============================
     = ALL NAVBARs, SUB-MENU CODE  =
     ============================== */
  /* Set the default navbar submenu background color */
  .yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
    background-color: #FFFDE0;
  }
  
  /* Set the navbar submenu hover background color */
  .yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
    background-color: #FFFF87;
  }
  
  /* Change the border color */
  .yui3-menu .yui3-menu-children, .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
    border-color: #A1CBDF;
  }
  
  /* Make each sub-menu item fade in/out as the mouse moves over it */
  .yui3-menu-label {
    -webkit-transition:all 0.5s ease-in;
    -moz-transition:all 0.5s ease-in;
    transition:all 0.5s ease-in;
  }
  
  /* ==============================
     = TOP NAVBAR, SUB-MENU CODE  =
     ============================== */
  /* Change the way the sub-menu bar looks */
  .sm-page-layout-region-top .yui3-menu-item .yui3-menu-label {
    font-family: 'Buda' !important;
    padding: 3px 5px 2px 5px !important;
    font-size: 14px !important;
    border: 1px solid rgba(161,203,223,0.9);
    border-bottom: 1px solid #A1CBDF !important;
    background-color: #FFFDE0 !important;
  }
  
  /* Set the background color of the sub-menu hover. 
     For some reason there was a 1px gap, so I moved the margin up a bit and it fixed it. */
  .sm-page-layout-region-top .yui3-menu-item .yui3-menu-label:hover {
    background-color: #FFFF96 !important;
    margin-top: -1px;
  }
  
  
  /* ================================
     = LEFT NAVBAR, TOP-LEVEL CODE  =
     ================================ */
  /* Make the navbar have a hover color when the mouse goes over it */
  /* Feel free to delete this if you don't like having hover color */
  .sm-page-layout-region-left .sm-nav-item-toplevel a:hover, 
  .sm-page-layout-region-left .sm-nav-item > a:hover {
    color: #217AFF !important;
    /* font-weight: bold; */
  }
  
  /* ==========================
     = LEFT NAVBAR, SUB-MENU CODE  =
     ========================== */
  /* Add some space above and below each leftbar submenu link.
     Also cause line-wrapping to indent after the 1st line */
  .sm-page-layout-region-left .sm-nav-item-sublevel {
    padding-top: 3px;
    padding-bottom: 3px;
    text-indent: -20px;
    padding-left: 20px;
  }
  
  /* Fix the line-height of the sub-links so that multiple rows are closer together */
  .sm-page-layout-region-left .sm-nav-item-sublevel a {
    line-height: 25px !important;
  }
  

  0