This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Flat Menus to Skeumorphic?

Resolved 13 replies premiumthemetheme-vantage
11 years ago · Last reply by Jane 10 years ago

How to change the flat appearance of the menus to something with a little bump in it? I know it’s done with CSS but I’m not savvy enough on where and how to paste what I’ve created.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

13
  1. Andrew Misplon Staff 11 years, 6 months ago

    Hi Jane

    Thanks for running Vantage.

    Menus of this nature could be created using background images or CSS gradients. It’s unfortunately more of a custom development task than something we routinely deal with as part of theme support. If you have a proof of what you’d like to achieve we could take a look and perhaps see if it can’t be achieved with a few lines of CSS.

  2. Jane 11 years, 21 days ago

    I know there is a place online to create just what I want, but once done, I have no idea where to put it! :)

    I think that was what I was wondering.

  3. Andrew Misplon Staff 11 years, 19 days ago

    Hi Jane. Custom CSS can go under Appearance > Custom CSS. If new HTML or PHP has to be introduced, that’ll need to go in the related theme file and that theme file would then need to go into a child theme. It’s usually not just a matter of dropping Custom CSS into the available field, the selectors you’re inserting there would to target the ID’s and class names being used by the existing menu.

  4. Jane 11 years, 19 days ago

    OK so if I make a gradient drop down menu, I can just put it in the custom CSS? I am not sure how that would work… how does the theme know where to insert it? I never mess with the code unless I know what I am doing.

    This is where I was talking about http://www.colorzilla.com/gradient-editor/

  5. Andrew Misplon Staff 11 years, 18 days ago

    That’s the nature of CSS, the selector name targets the HTML element in the page. That’s how the CSS properties are applied. Unfortunately this is more of a custom development task.

  6. Jane 11 years, 18 days ago

    OK so I take it this means I can’t just put it in the custom CSS field and voila, have my new menus.. Thanks.

  7. Jane 11 years, 18 days ago

    That said, I have to wonder why Vantage is so flat. Flatness is not real life (try telling this to Apple!)

    A slight roundness to the menu would be so much an improvement.

  8. Andrew Misplon Staff 11 years, 18 days ago

    Unfortunately that’s not quite how it works. Your CSS would need to specifically target the classes being used by the Vantage menu.

    We’d love to help out here, it’s unfortunately just a bit beyond what we can handle from the support side of things. http://codeable.io/ is a great company if you’re ever looking for a little developer assistance.

  9. Jane Private 10 years, 11 months ago

    This is a private message.

  10. Andrew Misplon Private Staff 10 years, 11 months ago

    This is a private message.

  11. Jane Private 10 years, 11 months ago

    This is a private message.

  12. Andrew Misplon Private Staff 10 years, 11 months ago

    This is a private message.

  13. Jane 10 years, 10 months ago

    When Apple went and violated every HIG on the planet by changing it’s GUI, it ruined it’s brand with the iOS7 cheap flat designs, many of us long time customers refused to buy any more of their products.. simply because we cannot SEE thru the cheapness. It’s very dangerous especially riding in a car.. when you try to discern the letters and numbers from the background. (Just compare the weather app, OMG it’s horrid) That said, there is no excuse for website to be so flat.. it’s very hard on the eyes. In nature our eyes are accustomed to textures and thus we can focus better and more quickly.

    Here is an example of the use of slight skeumorphic design that is pleasant to look at on websites.

    https://www.deltadental.com/Public/index.jsp

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread