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.
Flat Menus to Skeumorphic?
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
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.
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.
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.
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/
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.
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.
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.
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.
This is a private message.
This is a private message.
This is a private message.
This is a private message.
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