Vendd theme: menu buttons are "pixelized"

  • darkko

    (@darkko)


    10 years ago

    Hi all!

    Probably I could name this thread better, but the problem is that menu buttons in Vendd theme decreased in quality-> they became low resolution, pixel-like, as you can see:
    http://accessdocman.com/

    and this is how it is supposed to be:
    https://easydigitaldownloads.com/vendd/

    Theme was working fine before, and buttons changed after trying to optimize site SEO.

    I don’t know when ‘in the middle the SEO optimization’ it happened, but from the moment it worked fine I installed Yoast SEO, W3 Total Cache and Autoptimize (already deactivated) plugin.
    Since I made a lot of changes in Yoast and W3 I would like to avoid whole plugin deactivation and 1st try to more precisely point the problem.

    I appreciate any opinion on what could cause this issue.
    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Frank Goossens

    (@futtta)

    10 years ago

    had a quick look, menu seems OK to me? what browser are you using? can you post (a link to) a screenshot darkko?

    frank (ao dev)

    Thread Starter darkko

    (@darkko)

    10 years ago

    http://postimg.org/image/vbmu3rekx/

    Can you notice the difference?
    On my screen buttons on upper image seems blurred..

    I am using Chrome.
    Thanks.

    Frank Goossens

    (@futtta)

    10 years ago

    it’s a font issue;
    1. the menu comes with this font-definition:

    .main-navigation a, .menu-toggle {
font: 700 .87em/1 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

    2. on the demo-site this results in Arial being used (as it a system font on my windows PC)
    3. on your site however, helvetica neue-light is available (loaded by ultimate-social-media-icons, see below) and as it is listed first it has priority

    @font-face {
  font-family: "helveticaneue-light";
  font-style: normal;
  font-weight: 400;
  src: url("/wp-content/plugins/ultimate-social-media-icons/css/fonts/helveticaneue-light.eot?#iefix") format("embedded-opentype"), url("/wp-content/plugins/ultimate-social-media-icons/css/fonts/helveticaneue-light.woff") format("woff"), url("/wp-content/plugins/ultimate-social-media-icons/css/fonts/helveticaneue-light.ttf") format("truetype"), url("/wp-content/plugins/ultimate-social-media-icons/css/fonts/helveticaneue-light.svg#helveticaneue-light") format("svg");
}

    solutions:
    * add specific CSS to override font-definition for your menu (.main-navigation a)
    * don’t use ultimate-social-media-icons

    frank

    Thread Starter darkko

    (@darkko)

    10 years ago

    Hi,
    could you please point me on how to override font definition.
    Is it right way to simply change HelveticaNeue-Light to Arial?
    I tried and it works..

    Besides that, where did you viewed site main-navigation section without access to site’s style.css?

    Thank you!

    Frank Goossens

    (@futtta)

    10 years ago

    could you please point me on how to override font definition.
    Is it right way to simply change HelveticaNeue-Light to Arial?
    I tried and it works..

    changing that in the theme’s stylesheet works, but you’ll have to re-apply after every theme update off course.

    Besides that, where did you viewed site main-navigation section without access to site’s style.css?

    in my browser’s development console, inspecting one of the menu buttons. see e.g. this explanation for Google Chrome (I used Firefox, but roughly same approach).

    frank

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Vendd theme: menu buttons are "pixelized"’ is closed to new replies.