Content block background colors

TallPhotoGuy

You can set the background on a folder, but how does one set the background on a content block only, say your title or menu content block.

With a menu bar that has drop downs is there a way to have a background color, really the same question as above. If you have along drop down it may be hard to see the choices depending on the picture, etc...on the page

ChancyRat

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;
}