Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Options button not displaying properly.

edited January 2012 in Vanilla 2.0 - 2.8

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.

Best Answer

  • ToddTodd Chief Product Officer Vanilla Staff
    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.

Answers

  • 422422 Developer MVP

    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.

  • 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.

  • ToddTodd Chief Product Officer Vanilla Staff
    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.

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

Sign In or Register to comment.