JohannesRupp Oct 13, 2015 · 3:45 pm #2567 Hey 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
Johannes
Andrew Misplon Puro Oct 13, 2015 · 10:07 pm #2568 Hi 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 🙂
JohannesRupp Oct 15, 2015 · 11:54 am #2569 Hey 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
Andrew Misplon Puro Oct 15, 2015 · 12:03 pm #2571 For the last rule let’s try:
.menu .no-icon a:hover[href*="flickr.com"] {
color: #0896fe !important;
}
JohannesRupp Oct 15, 2015 · 12:41 pm #2572 Thank you very much!
works perfect!
problem solved!
Greetings from the snowy germany!
Johannes
Andrew Misplon Puro Oct 15, 2015 · 12:42 pm #2573 Awesome 🙂 Glad to hear we made progress.
All the best!