Support/Ultra Theme/Automatic Social Icon on idividual links

Automatic Social Icon on idividual links

Tagged: 

  • Author
    Posts
  • October 13, 2015 at 3:45 pm #2567

    JohannesRupp
    Participant

    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

    October 13, 2015 at 10:07 pm #2568

    Andrew Misplon
    Keymaster

    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 🙂

    October 15, 2015 at 11:54 am #2569

    JohannesRupp
    Participant

    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

    October 15, 2015 at 12:03 pm #2571

    Andrew Misplon
    Keymaster

    For 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

    JohannesRupp
    Participant

    Thank you very much!
    works perfect!
    problem solved!

    Greetings from the snowy germany!
    Johannes

    October 15, 2015 at 12:42 pm #2573

    Andrew Misplon
    Keymaster

    Awesome 🙂 Glad to hear we made progress.

    All the best!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Scroll to top