Options button not displaying properly.

Answers

• 422 MVP

  January 2012

  not as easy as showing a picture. Especially if you have fiddled with the css.

  This is standard options css

  .OptionsMenu {
      display: inline-block;
      font-size: 10px;
      font-weight: normal;
      line-height: 100%;
  }
  .Item .OptionsMenu {
      vertical-align: top;
      visibility: hidden;
  }
  .Open.OptionsMenu, .Item:hover .OptionsMenu {
      visibility: visible;
  }
  .MenuTitle {
      -moz-user-select: none;
      background: url("images/buttons.png") no-repeat scroll right -96px transparent;
      border: 1px solid #BBBBBB;
      border-radius: 2px 2px 2px 2px;
      color: #000000;
      padding: 4px 18px 4px 4px;
  }
  .Open .MenuTitle {
      background: url("images/buttons.png") no-repeat scroll right -144px #282828;
      border: 1px solid #282828;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
      color: #FFFFFF;
  }
  .MenuItems {
      background: none repeat scroll 0 0 #444444;
      border: 1px solid #282828;
      border-bottom-left-radius: 2px;
      border-bottom-right-radius: 2px;
      box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
      color: #FFFFFF;
      font-size: 10px;
      line-height: 100%;
      min-width: 125px;
  }
  .MenuItems li {
      padding: 6px !important;
  }
  .MenuItems a, .MenuItems a:link, .MenuItems a:visited, .MenuItems a:active {
      color: #FFFFFF;
      display: block;
      text-decoration: none;
  }
  .MenuItems li:hover {
      background: none repeat scroll 0 0 #282828;
  }
  .ToggleFlyout {
      cursor: pointer;
      position: relative;
  }
  .ToggleFlyout.Open {
      z-index: 100;
  }
  .ToggleFlyout .Flyout {
      display: none;
      left: 0;
      position: absolute;
      top: 100%;
      z-index: 100;
  }
  

  There was an error rendering this rich post.

  1
• happydude

  January 2012

  I did not change any structural elements in the CSS.

  I only changed the colours of the theme.

  Upon investigation, I discovered that there was no .OptionsMenu in my style.css. I concluded that it was because my theme was based on a 2.0.17 vanilla. I then removed the part that made the options button work and pasted the corresponding code from applications/dashboard/design/style.css (same as the CSS code above). I still have the same problem.

  0
• Todd Vanilla Staff

  January 2012 Answer ✓

  If you made your theme by copying style.css and changing in then you really are in for some headaches unless you are a css expert.

  We always recommend you leave style.css intact and then create a custom.css in your theme. Our theming quickstart shows the process.

  0
• happydude

  January 2012

  OK. Thanks. I'll do a custom.css in my theme.

  0