• Creator
    Topic
  • #8297

    Jodi Lea
    Spectator
    Been thanked: 0 times

    Hey Roman,

    You’ve been great so far with any issues I’ve run across, so I’m hopeful that this time will prove no different! I’m having some mobile issues, and one issue on computer viewing.

    Computer Issue:

    1. On a computer, no matter the browser, I’m getting a barely noticible “box” around my menu items. I’ve tried every combination of color settings I can think of to avoid this, but it remains. Like I said, it’s faint, like a ghosted box around each items, but I’m anal about these things!

    Mobile Issues:

      1. Social icons appears as just dark boxes when viewed on Android phones running latest Jellybean. I haven’t been able to test on iOS yet, but will by end of day today. Any workaround for this so that they show up already colored when the site loads on a mobile device, sans mouseover?

      2. My sticky header looks great on my mobile, but if I scroll down the page and back up repeatedly, the logo on the sticky header decreases in size each time and then disappears altogether after about six up and down page scrolls.

      3. This may be one for my plugin developer, but I’m asking you too – I’m using the Comprehensive Google Maps plugin in lieu of the shortcode included with the theme because I want to have the option for the user to type in a starting point and get directions. My issue is that on mobile, the map shows up, but with no starting marker in place.

    Any and all help will be greatly appreciated and anticipated! Thanks again 🙂

Viewing 11 replies - 1 through 11 (of 11 total)
Replies
  • Jacob Miller
    Spectator
    Post count: 6
    Been thanked: 0 times
    #9244 |

    If you don’t mind Jodi, I’m going to jump on this question as well.

    Primary with the 1st Mobile question: social icons in the sidebar and also in the social share location after a post. It appears that social.png is not loading properly, only the container is showing up.

    URL: http://serenabmiller.com

    The social icons work great on desktops and even the iPad, but for some reason mobile devices, (Tested both Android with 3 different browsers, and iOS) do not display the graphic, just the background. This also happened with a local test environment I created as well.

    Thanks for an awesome theme Roman 🙂

    Roman
    Keymaster
    Post count: 2543
    Been thanked: 29 times
    #9248 |

    computer issue: may I see the URL?

    mobile issue: please check out this thread http://theme4press.com/support/current-themes-group5/alora-forum27/social-buttons-thread958/

    Jacob Miller
    Spectator
    Post count: 6
    Been thanked: 0 times
    #9256 |

    Roman, I tried the solutions from the link you mentioned, and it still didn’t help. In fact I’m already using

    Code:
    .social-networks a {background-color: #fff !important;}

    in my custom css because I liked the look of that better. (when I took it out it still did the same thing, but with the darker background-color)
    The Desktop, Laptop, and Tablet all look fine, but for smart phones, the social links just show up as solid white box with the correct opacity setting, and then change to their respective colored boxes when touched, but the social graphic itself does not show up.

    URL: http://serenabmiller.com

    Thanks

    Roman
    Keymaster
    Post count: 2543
    Been thanked: 29 times
    #9259 |

    have you test it on more mobile devices or only on one?

    Jacob Miller
    Spectator
    Post count: 6
    Been thanked: 0 times
    #9260 |

    I tested it with an iPhone 4gs with Safari, and an Android 4.2 with Chrome / Firefox / Opera and all 4 browsers showed the same result.
    I think it has to do with some sort of filtering on the screen size.
    I just tested it on my desktop with IE using the F12 emulation to emulate a Windows Phone running IE10 – windows phone edition, and it shows the same result.

    Desktop snapshot, the way it should be displaying.
    desktop_social_icons.jpg

    And this is what it looks like when accessing it from a mobile device, this particular picture is an emulated Windows Phone.
    windows_phone_emulation.jpg

    Thanks

    Roman
    Keymaster
    Post count: 2543
    Been thanked: 29 times
    #9263 |

    sorry, at this moment I have no chance to test it on a windows device

    Jacob Miller
    Spectator
    Post count: 6
    Been thanked: 0 times
    #9265 |

    Roman,
    I discovered what the problem was.
    In the original style.css it’s trying to use images that are not in the images folder.

    Code:
    .social-networks .facebook a,.person-author .facebook{background-image:url(images/facebook@2x.png) !important;
    -webkit-background-size:9px 17px;
    -moz-background-size:9px 17px;
    -o-background-size:9px 17px;
    background-size:9px 17px;
    }
    .social-networks .twitter a,.person-author .twitter{background-image:url(images/twitter@2x.png) !important;
    -webkit-background-size:13px 16px;
    -moz-background-size:13px 16px;
    -o-background-size:13px 16px;
    background-size:13px 16px;
    }
    .social-networks .linkedin a,.person-author .linkedin{background-image:url(images/linkedin@2x.png) !important;
    -webkit-background-size:14px 13px;
    -moz-background-size:14px 13px;
    -o-background-size:14px 13px;
    background-size:14px 13px;
    }
    .social-networks .rss a,.person-author .rss{background-image:url(images/rss@2x.png) !important;
    -webkit-background-size:13px 13px;
    -moz-background-size:13px 13px;
    -o-background-size:13px 13px;
    background-size:13px 13px;
    }
    .social-networks .dribbble a,.person-author .dribbble{background-image:url(images/dribbble@2x.png) !important;
    -webkit-background-size:16px 16px;
    -moz-background-size:16px 16px;
    -o-background-size:16px 16px;
    background-size:16px 16px;
    }
    .social-networks .youtube a,.person-author .youtube{background-image:url(images/youtube@2x.png) !important;
    -webkit-background-size:23px 25px;
    -moz-background-size:23px 25px;
    -o-background-size:23px 25px;
    background-size:23px 25px;
    }
    .social-networks .pinterest a,.person-author .pinterest{background-image:url(images/pinterest@2x.png) !important;
    -webkit-background-size:16px 20px;
    -moz-background-size:16px 20px;
    -o-background-size:16px 20px;
    background-size:16px 20px;
    }
    .social-networks .vimeo a,.person-author .vimeo{background-image:url(images/vimeo@2x.png) !important;
    -webkit-background-size:18px 16px;
    -moz-background-size:18px 16px;
    -o-background-size:18px 16px;
    background-size:18px 16px;
    }
    .social-networks .flickr a,.person-author .flickr{background-image:url(images/flickr@2x.png) !important;
    -webkit-background-size:25px 17px;
    -moz-background-size:25px 17px;
    -o-background-size:25px 17px;
    background-size:25px 17px;
    }
    .social-networks .tumblr a,.person-author .tumblr{background-image:url(images/tumblr@2x.png) !important;
    -webkit-background-size:15px 16px;
    -moz-background-size:15px 16px;
    -o-background-size:15px 16px;
    background-size:15px 16px;
    }
    .social-networks .google a,.person-author .google{background-image:url(images/google@2x.png) !important;
    -webkit-background-size:21px 18px;
    -moz-background-size:21px 18px;
    -o-background-size:21px 18px;
    background-size:21px 18px;
    }
    .social-networks .digg a,.person-author .digg{background-image:url(images/digg@2x.png) !important;
    -webkit-background-size:21px 19px;
    -moz-background-size:21px 19px;
    -o-background-size:21px 19px;
    background-size:21px 19px;
    }
    .social-networks .blogger a,.person-author .blogger{background-image:url(images/blogger@2x.png) !important;
    -webkit-background-size:16px 15px;
    -moz-background-size:16px 15px;
    -o-background-size:16px 15px;
    background-size:16px 15px;
    }
    .social-networks .skype a,.person-author .skype{background-image:url(images/skype@2x.png) !important;
    -webkit-background-size:19px 19px;
    -moz-background-size:19px 19px;
    -o-background-size:19px 19px;
    background-size:19px 19px;
    }
    .social-networks .myspace a,.person-author .myspace{background-image:url(images/myspace@2x.png) !important;
    -webkit-background-size:18px 18px;
    -moz-background-size:18px 18px;
    -o-background-size:18px 18px;
    background-size:18px 18px;
    }
    .social-networks .deviantart a,.person-author .deviantart{background-image:url(images/deviantart@2x.png) !important;
    -webkit-background-size:23px 18px;
    -moz-background-size:23px 18px;
    -o-background-size:23px 18px;
    background-size:23px 18px;
    }
    .social-networks .yahoo a,.person-author .yahoo{background-image:url(images/yahoo@2x.png) !important;
    -webkit-background-size:22px 14px;
    -moz-background-size:22px 14px;
    -o-background-size:22px 14px;
    background-size:22px 14px;
    }
    .social-networks .reddit a,.person-author .reddit{background-image:url(images/reddit@2x.png) !important;
    -webkit-background-size:19px 15px;
    -moz-background-size:19px 15px;
    -o-background-size:19px 15px;
    background-size:19px 15px;
    }
    .social-networks .forrst a,.person-author .forrst{background-image:url(images/forrst@2x.png) !important;
    -webkit-background-size:15px 19px;
    -moz-background-size:15px 19px;
    -o-background-size:15px 19px;
    background-size:15px 19px;
    }
    .social-networks .email a,.person-author .email{background-image:url(images/mail@2x.png) !important;
    -webkit-background-size:20px 14px;
    -moz-background-size:20px 14px;
    -o-background-size:20px 14px;
    background-size:20px 14px;
    }

    Getting rid of the

    Code:
    !important

    tag redirects the image look up to /images/social_links.png but unless the

    Code:
    -webkit-background-size:Xpx Xpx;
    -moz-background-size:Xpx Xpx;
    -o-background-size:Xpx Xpx;
    background-size:Xpx Xpx;

    is taken away, it still doesn’t work. So the only way I can get it to work is to comment out that whole chunk of code (line 6472 through line 6592 using the

    Code:
    /*Comment*/

    tag.
    It works now, but it’s using the smaller resolution /images/social_links.png image instead of the /images/social_links@2x.png image
    Can you help me make it use the /images/social_links@2x.png when being requested on screens that can utilize 2x?
    Doing a full search through the original style.css shows that /images/social_links@2x.png isn’t defined at all.

    I think this might be affecting everyone using this theme along with the built in social images.

    Thanks

    Roman
    Keymaster
    Post count: 2543
    Been thanked: 29 times
    #9266 |

    thanks for report…I had to overlooked that…I will try to fix that in the next theme release

    Jodi Lea
    Spectator
    Post count: 24
    Been thanked: 0 times
    #9423 |

    I’ve had some family stuff going on and have been out of town and just now getting to get back to this. In looking around a bit earlier this evening, I was coming to the same conclusion as Jacob on the missing graphics.

    Any ideas on the other issues? The “boxes” behind the menu items are faint, but definitely there. The test domain is http://www.jodilea.com

    Everything on it right now is just filler until I get the bugs worked out and get it on the actual domain. I’ve already had to extend my working time on this due to my personal stuff, so I’m running very tight time-wise now! Thank you (both) again for any and all help! 🙂

    Roman
    Keymaster
    Post count: 2543
    Been thanked: 29 times
    #9424 |

    you mean the box effect on the selected/hovered menu item? its coded like this with the effect, its not an issue

    Jacob Miller
    Spectator
    Post count: 6
    Been thanked: 0 times
    #9553 |

    Hey Jodi,
    Since I hi-jacked your thread I thought I’d offer my assistance 😉
    I definitely see what you’re talking about and what Roman said is correct, it’s an effect that has been coded in, but if you would like to change it so that it doesn’t show up at all, here are a couple things you can do.
    First off take a look at lines 243-246 of the style.css file:

    Code:
    #nav ul a:hover,#sticky-nav ul a:hover,
    #nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a, #nav ul ul, #nav li.current-menu-ancestor a,
    #sticky-nav ul .current_page_item a, #sticky-nav ul .current-menu-item a, #sticky-nav ul > .current-menu-parent a, #sticky-nav ul ul, #sticky-nav li.current-menu-ancestor a
    {background:rgba(0,0,0,.02);}

    You’ll notice that last part about the background? If you change that .02 to 0 like this: {background:rgba(0,0,0,0);} It will get rid of the effect completely but it will also get rid of the background effect on all those other menu items, if this is acceptable, then fantastic 🙂
    Or, you can add this to the custom css location in the theme manager.

    Code:
    #nav ul a:hover {background:rgba(0,0,0,0); !important}

    I’ve only tested this as far as utilizing the inspection tools firefox has to offer, if you just want to change the mouse-over effect then the second option will work, if you want to change the background that shows up to tell you what page you’re on and everything else, then use the first option. I hope this makes sense and gives you some direction on what’s going on and I’ll help you as much as I can.
    -Jacob

Viewing 11 replies - 1 through 11 (of 11 total)
You must be logged in to reply to this topic.