How to change the social buttons at header to language choice button with national flags!

edited October 2014 in HealthCentre
:P :\">


  • Sorry, but I put the following 4 lines from your advice to the css Windows, and the 4 Images to the Images Directory of the theme, but it does not work!
    head_social_icons li.facebook {background:url(./images/f1) no-repeat;}

    head_social_icons li.twitter {background:url(./images/f2) no-repeat;}

    head_social_icons {background:url(./images/f3) no-repeat;}

    head_social_icons li.linkedin {background:url(./images/f4) no-repeat;}
  • Hi  

    I have check your images and  that is in .gif format.

    And also use correct url of the image that is  , use the below image  url 

    head_social_icons li.twitter {background:url(../images/social/f2.gif) no-repeat;}

    head_social_icons {background:url(../images/social/f3.gif) no-repeat;}

    head_social_icons li.linkedin {background:url(../images/social/f4.gif) no-repeat;}



  • Thanks, but I tried all that, it does not work! :\"> No also with f1.png format.
  • HI 

    Tell me in which file,  you have use the above css code .


  • At the css Windows in Dashboard/Appearance/Option Panel. Thanks
  • Hi

    The above  image url   I was told with respect of blue.css file .

    So Pls add the above code snippet  ( which I suggest you in previous  post )  into  css folder  >> and find the blue.css file .



  • Thanks a million! Do I have to delete that at the css Window in Option Panel? :\">
  • It works, Thanks. Can I change the Size-Format for the icons there to 50x30 px? And where to change the linked URL from facebook etc. to my one choise?
  • edited October 2014
    To change the URL 
    For this you need to edit core theme file.

    Firstly I recommend you to create a child theme .To create a child theme  follow this link . Than, copy paste the file  header.php of parent theme  in the child theme folder.

    Secondly Edit the file and find this line of code 

    <ul class="head_social_icons">
    <?php if($hc_current_options['social_media_facebook_link']!='') { ?>
    <li class="facebook"><a title="Facebook" href="<?php echo $hc_current_options['social_media_facebook_link']; ?>"></a></li>
    <?php }
    if($hc_current_options['social_media_twitter_link']!='') { ?>
    <li class="twitter"><a title="Twitter" href="<?php echo $hc_current_options['social_media_twitter_link']; ?>"></a></li>
    <?php }
    if($hc_current_options['social_media_google_plus']!='') { ?>
    <li class="google"><a title="Google Plus" href="<?php echo $hc_current_options['social_media_google_plus']; ?>"></a></li>
    <?php }
    if($hc_current_options['social_media_linkedin_link']!='') { ?>
    <li class="linkedin"><a title="LinkenId" href="<?php echo $hc_current_options['social_media_linkedin_link']; ?>"></a></li>
    <?php } ?>

  • and Replace it  with below line of code 

    <ul class="head_social_icons">
    <li class="facebook"><a title="Facebook" href="add your url"></a></li>
    <li class="twitter"><a title="Twitter" href="add your url"></a></li>
           <li class="google"><a title="Google Plus" href="add your url"></a></li>
    <li class="linkedin"><a title="LinkenId" href="add your url"></a></li>


  • Many thanks, I try to replace that in a child theme. How to Change the size/space of the place for the social media Icons at Header from 50x50px to 50x30px?
  • O.k. pls forget the last question. I modify the size and figure of the flags. Now it is fine. Many thanks! I choose 25x25px of the hole Icon with transparent background an insert the flags there. That works.
  • edited October 2014

    Your Welcome 

    Can  I close this Ticket ?

  • Yes, I appreciate your advice very much, thanks! :\">
  • I also changed the header.php in the health child for different URL's. It works fine. :\">
This discussion has been closed.