Options button not displaying properly.

happydude

After doing a CSS customization of the default vanilla theme, the options button was working fine. After some time, I noticed that it was not being formatted properly and all the option links which had been hidden prior to clicking, are now fully displayed.

See the image below:

Any help will be appreciated.

Todd

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.

422

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

happydude

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.

Todd

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.

happydude

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