Change Social Icons - by Quallenaquarium

This topic has 30 replies, 7 voices, and was last updated 9 years, 2 months ago ago by Eva Kemp

  • Avatar: Quallenaquarium
    Quallenaquarium
    Participant
    August 7, 2015 at 02:14

    Hi Guys,

    how can i change the icon images and the links of the social icon section [share] ?

    I need to add an instgram icon for example. And of course i need my custom links to the facebook page etc. I found no possibility to change that in the theme options.

    Thanks for your help

    29 Answers
    Avatar: Robert Hall
    Robert Hall
    Support staff
    August 7, 2015 at 07:31

    Hello,

    You need edit code in \themes\woopress\framework\shortcodes.php file on line 1729-1796.

    Regards,
    Robert Hall.

    Avatar: Benny
    Benny
    Participant
    August 9, 2015 at 19:17

    Hi,

    thank you for your response.

    But i need further informations please. The theme is great and easy to edit, but the social icon section is the only thing which is very hard to customize for me.

    I would like to have a Youtube Icon with a custom link. Could you please provide the line of code for that?

    Thanks a lot

    Avatar: Eva
    Eva Kemp
    Support staff
    August 10, 2015 at 08:34

    Hello @Benny,

    Try to add this code in shortcodes.php file in section ” ! Share This Product”:

    if($youtube == 1) {
    $html .= '
    <li>
    <a href="http://your_youtube_link" class="'.$tooltip_class.'" title="'.__('YouTube', ET_DOMAIN).'" target="_blank">
    <i class="ico-youtube"></i>
    <svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" class="circle">
    <circle cx="19" cy="19" r="18" fill="rgba(255,255,255,0)" stroke="#000000"></circle>
    </svg>
    </a>
    </li>
    ';
    }

    Regards,
    Eva Kemp.

    Avatar: Benny
    Benny
    Participant
    August 13, 2015 at 22:04

    Hello Eva,

    thank you for your help.

    The problem seems to be that there is no youtube icon on which i can refer.

    The icon appears just as an empty whire circle. How can i put a youtube icon in this line:
    <i class=”ico-youtube”></i>

    Thanks a lot

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    August 14, 2015 at 07:57

    Hello @Benny,

    Please provide us with WP Dashboard and FTP credentials in private content.

    Best regards,
    Jack Richardson.

    Avatar: Benny
    Benny
    Participant
    August 14, 2015 at 16:46

    Hi Jack,

    thanks for your response.

    I sent you the login details as private content.

    Thank you

    Please, contact administrator
    for this information.
    Avatar: kaha
    kaha
    Participant
    August 15, 2015 at 01:32

    Hi,
    I just tried to update the shortcode.php file as suggested above to add the facebook link i wanted to use. And the whole site went white….
    I usually just copy the original code when i do any changes in the editor and past back what was there before if it doesn’t work… not sure why the whole site would go white. don’t get the login page nothing…
    Any suggestions?

    Thanks,

    Please, contact administrator
    for this information.
    Avatar: stan
    Stan Russell
    Participant
    August 15, 2015 at 08:49

    Hello kaha,

    please provide us with FTP credentials for your site in private content.

    Regards,
    Stan Russell.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    August 17, 2015 at 12:33

    Hello @Benny,

    Sorry for a delay.
    I’ve added this code in Theme Options > Custom CSS > Global Custom CSS:

    .menu-social-icons .ico-youtube:before {
      content: "\f167";
      font-family: FontAwesome;
    }
    .menu-social-icons .ico-youtube {
        display: block;
        width: 28px;
        height: 28px;
    }

    Please check youtube icon now.

    Best regards,
    Jack Richardson.

    Avatar: kaha
    kaha
    Participant
    August 17, 2015 at 19:15

    Here you go! Thank you for helping! I tried to updated the shortcodes.php by removing the 1 and adding my facebook link and then it went white. hopefully that file is all that needs to be corrected.

    Thanks a million!!

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    August 17, 2015 at 19:41

    Hello @kaha,

    Please give us a link you want to insert for Facebook social media icon.

    Regards,
    Eva Kemp.

    Avatar: kaha
    kaha
    Participant
    August 17, 2015 at 19:56
    Avatar: Eva
    Eva Kemp
    Support staff
    August 17, 2015 at 20:16

    Hello @kaha,

    I’ve edited the file shortcodes.php in line 1963 and replaced the link http://www.facebook.com/sharer.php?u='.$permalink.'&images='.$image.' with the one you provided. Please check social icon now.

    Regards,
    Eva Kemp.

    Avatar: kaha
    kaha
    Participant
    August 17, 2015 at 22:37

    Eva, you don’t know how thankful I am that you were able to fix the shortcode.php, i figured it wouldn’t be too tricky but still, a white page was slightly scary 😉
    Facebook link is perfect. If I want to add more links, do I need to ask you to do it?

    Thanks a million!!

    Avatar: Eva
    Eva Kemp
    Support staff
    August 18, 2015 at 08:17

    Hello @kaha,

    You’re welcome.
    You can ask us to change links or you can do this yourself.
    For example to change link for Twitter you need edit the code <a href="https://twitter.com/share?url='.$permalink.'&text='.$post_title.'" class="'.$tooltip_class.'" title="'.__('Twitter', ETHEME_DOMAIN).'" target="_blank"> and replace https://twitter.com/share?url='.$permalink.'&text='.$post_title.' with a link to your Twitter account.

    Regards,
    Eva Kemp.

    Avatar: kaha
    kaha
    Participant
    August 18, 2015 at 15:05

    Ok great, I’ll probably just ask you then so I don’t mess it up again 🙂
    Thanks!!

    Avatar: Eva
    Eva Kemp
    Support staff
    August 18, 2015 at 15:08

    Hello,

    You’re welcome.

    Regards,
    Eva Kemp.

    Avatar: Benny
    Benny
    Participant
    August 18, 2015 at 16:34

    Hello Jack,

    thank you very much for your help. The Youtube Icon is working now. Thats great 🙂

    I have one more problem unsolved, even if its not related to this topic:

    In Theme options > Typography I changed every color to black, so the main font, body font, menu font and page headings are in black (#222222)

    The problem now is, that on a mobile device, the menu has a black background and the font is also black, so you cant see the menu on a mobile device. When i change the main font to white now, you can see the menu on a mobile, but you cant see the text in the shops “add to cart” button.

    How can i solve this? I think the best way would be to change the mobile menu background to white, but i have no idea how.

    Please help, thanks

    Avatar: Eva
    Eva Kemp
    Support staff
    August 18, 2015 at 16:48

    Hello @Benny,

    To change background color for mobile menu use this code in custom css:

    .st-menu, .mobile-nav-heading.close-mobile-nav {
      background-color: white !important;
    }

    Regards,
    Eva Kemp.

    Avatar: Benny
    Benny
    Participant
    August 18, 2015 at 16:54

    Thanks a lot Eva,

    this is a really great support. It worked 🙂

    Avatar: Eva
    Eva Kemp
    Support staff
    August 18, 2015 at 17:10

    Hello @Benny,

    You’re always welcome.

    Regards,
    Eva Kemp.

    Avatar: Benny
    Benny
    Participant
    August 21, 2015 at 16:04

    Hello Eva,

    unfortunately i thought too soon that all problems are solved now.

    The mobile menu is fine now through your code, but now i´ve got the problem that the buttons on the single product view are black in black now as you can see here for example (http://quallenaquarium.net/shop/osmoseanlage-aquatic-nature/)

    The problem is that every change in colors that i do causes other problems, so this maybe is caused because of the line of code you gave me.

    How can i change the button background color to white without changing anything else?

    Thanks in advance

    Avatar: Eva
    Eva Kemp
    Support staff
    August 21, 2015 at 16:29

    Hello @Benny,

    Please add this code in custom.css:

    .product-information .cart button[type="submit"] {
       color: white;
    }

    Regards,
    Eva Kemp.

    Avatar: Benny
    Benny
    Participant
    August 21, 2015 at 16:36

    Great, problem solved.

    Thank you!

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    August 21, 2015 at 16:58

    Hello @Benny,

    You’re welcome.

    Best regards,
    Jack Richardson.

    Avatar: Benny
    Benny
    Participant
    August 25, 2015 at 12:31

    Hello Guys,

    unfortunately i discovered some additional problems.

    Also the “Continue Shopping” Button (Button after you put a product to cart, named “Weiter einkaufen” )and the Continue Button on the cart page (http://quallenaquarium.net/warenkorb/) are black in black as well.

    Your post before fixed a similar problem. Please provide the code for the two buttons i need to change.

    Thank you

    Avatar: Eva
    Eva Kemp
    Support staff
    August 25, 2015 at 12:37

    Hello @Benny,

    Please use this css code:

    .emodal .emodal-text .btn, .cart-collaterals .checkout-button {
        color: white !important;
    }

    Regards,
    Eva Kemp.

    Avatar: Benny
    Benny
    Participant
    August 25, 2015 at 12:49

    Unbelievable how fast and great your support works.

    Thanks a million times

    Avatar: Eva
    Eva Kemp
    Support staff
    August 25, 2015 at 13:08

    Hello @Benny,

    You’re welcome.

    Regards,
    Eva Kemp.

  • Viewing 30 results - 1 through 30 (of 30 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service

Helpful Topics

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.