- This topic has 5 replies, 2 voices, and was last updated 9 years, 1 month ago by Andrew Misplon.
Tagged: social icon ultra
- AuthorPosts
- October 13, 2015 at 3:45 pm #2567
JohannesRuppParticipantHey there at first i want to thank you for this powerfull theme i have 3 sites working and i’m very satisfied.
I have a small problem maybe you can solve it in a second. i searched the topic but i found no answer yet.
I want to make an individual link in my top bar menu with the title “Bilder” (german word for pics). the pics are on flickr and so the theme automatically makes the flickr social link with the two dots. this is nice but for there are some children who visit the page I would prefer to have “Bilder” there.
Thanks a lot for youre work and greetings from germany
JohannesOctober 13, 2015 at 10:07 pm #2568
Andrew MisplonKeymasterHi Johannes
Great to hear from you. Thanks for your support, really glad to hear you’ve been finding Ultra useful.
We’ll need a Custom CSS plugin for this. If you don’t yet have one running then I recommend: https://wordpress.org/plugins/so-css/
Then to resolve, following these steps:
1. Appearance > Menus click Screen Options top right and ensure CSS Classes is enabled.
2. Edit the Flickr menu item and enter the following in the CSS Class field:no-icon
3. Go to Appearance > Custom CSS and insert:
/* Flickr Social Icon */ .menu .no-icon a[href*="flickr.com"]:before { content: none; } .menu .no-icon a[href*="flickr.com"] { color: #acaeaf !important; font-size: 12px !important; text-align: left; }
We have to manually set the font color and font size. We may need to add another rule to set the hover. Just check that out and see how it goes. We can adjust further based on your feedback.
Thanks 🙂
October 15, 2015 at 11:54 am #2569
JohannesRuppParticipantHey Andrew
Thanks for your fast support!Works fine for me! I’ve changed the color and adjusted the size.
Now the hover: I added the hover tag but the “important” color overwrites always the hover. If I declare the hover as important, the color is changed when I hover over any menu item.
/* Flickr Social Icon */ .menu .no-icon a[href*="flickr.com"]:before { content: none; } .menu .no-icon a[href*="flickr.com"] { color: #313539 !important; font-size: 20px !important; text-align: left; } .menu:hover .no-icon a[href*="flickr.com"] { color: #0896fe !important; }
maybe you will take a look: http://www.sola-allgäu.de
October 15, 2015 at 12:03 pm #2571
Andrew MisplonKeymasterFor the last rule let’s try:
.menu .no-icon a:hover[href*="flickr.com"] { color: #0896fe !important; }
October 15, 2015 at 12:41 pm #2572
JohannesRuppParticipantThank you very much!
works perfect!
problem solved!Greetings from the snowy germany!
JohannesOctober 15, 2015 at 12:42 pm #2573
Andrew MisplonKeymasterAwesome 🙂 Glad to hear we made progress.
All the best!
- AuthorPosts
You must be logged in to reply to this topic.