Automatic Social Icon on idividual links

  • Author
    Posts
  • #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

    #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 🙂

    #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

    • This reply was modified 6 years, 8 months ago by JohannesRupp.
    #2571

    Andrew Misplon
    Keymaster

    For the last rule let’s try:

    .menu .no-icon a:hover[href*="flickr.com"] {
      	color: #0896fe !important;
    }
    #2572

    JohannesRupp
    Participant

    Thank you very much!
    works perfect!
    problem solved!

    Greetings from the snowy germany!
    Johannes

    #2573

    Andrew Misplon
    Keymaster

    Awesome 🙂 Glad to hear we made progress.

    All the best!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Scroll to top