Forum replies created
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:
#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.
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
For everyone having issues with mobile social icons not showing up give my suggestion a try from this post:
http://theme4press.com/support/current-themes-group5/alora-forum27/mobile-issues-with-alora-thread1021/
The theme is filtering what it does based on screen size (this is what responsive means) because of that viewing this theme on smaller screen sizes may result in the social icons not showing up, or only their backgrounds showing up. The reason is because it is trying to find an icon image file that doesn’t currently exist. If you comment out a chunk of code from the original style.css file it will force the theme to use the icon image file it uses on the larger screen sizes.
This worked for me, and hopefully it will work for you as well.
If you do try this, make sure you backup your style.css file just in case you want to undo the changes you made.
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.
-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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !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/[email protected]) !important;
-webkit-background-size:20px 14px;
-moz-background-size:20px 14px;
-o-background-size:20px 14px;
background-size:20px 14px;
}
Getting rid of the
tag redirects the image look up to /images/social_links.png but unless the
-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
tag.
It works now, but it’s using the smaller resolution /images/social_links.png image instead of the /images/[email protected] image
Can you help me make it use the /images/[email protected] when being requested on screens that can utilize 2x?
Doing a full search through the original style.css shows that /images/[email protected] isn’t defined at all.
I think this might be affecting everyone using this theme along with the built in social images.
Thanks
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.
And this is what it looks like when accessing it from a mobile device, this particular picture is an emulated Windows Phone.
Thanks
Roman, I tried the solutions from the link you mentioned, and it still didn’t help. In fact I’m already using
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.
Thanks
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.
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 🙂