Adding an email button in the social bar

Home Forums WordPress Themes – Premium Circumference Adding an email button in the social bar

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #15068
    Maria
    Member

    Hello,

    I was just looking to add an email button in my social bar. The person I am designing this site for doesn’t have any need for any of the social buttons except for the facebook one but wants to add the email contact button (envelope) next to the facebook button in the social bar in the header. I realize I have to alter the code in the social-bar.php, and have tried to mess around with what is there in the social-icons div, but haven’t had much success.

    Should I make the button background image, and call it up in the css, or is there a version of one of these lines

    
    
    if (!empty($options['twitter_uid'])) echo '
    ';

    that you guys can refer me to that will create an email/envelope icon? Either way, can you please help direct me to the correct code to do this?

    If you need any more info from me in order to help I’ll be happy to provide it.

    Thank you so much for your help!
    -Maria

    #19755
    Sushil Adhikari
    Moderator

    Doing big modifications like this should be done with a child theme if you are not already using it so that you can keep Circumference updated.

    There’s three parts to creating those icons…the first you already shown the example code.
    The second is the CSS which you will find the social icons in the theme’s style.css to see how it’s done for each one around line 649 and begins with:

    /* Social icons */

    You have three email icons available that you can use. Look at the icomoon folder demo that came with your download to see what they look like and the icon class name such as icon-mail

    The last part is the complicated one because it adds the new option setting to the theme customizer. However, I would not recommend you do that because it means you have to create a new function.php file (actually modify one) for a child theme if you want to keep the ability of updating the theme, otherwise you lose everything when you do updates.

    I would recommend doing the link manually in the social-bar.php file.

    #19761
    Amanda
    Member

    Maybe the Email Icon could be included in a future release? I wanted to add this too, but it seems far to complicated for me to handle.

    Thanks!

    #19764
    Sushil Adhikari
    Moderator

    I made a note to give that some consideration on the next update for the theme.

    #19765
    Maria
    Member

    oops. sorry about this one. please see below : )

    #19766
    Maria
    Member

    Hello,
    Thank you for the reply, and the advice! I have been working on a child theme and have tried manually adding the contact link & image I made to mimic the facebook icon so I was on the right track. The problem I’m running into though is It bumps the facebook icon to the next line. What should I be changing to make it appear as it would if it were a regular social link in the socialbar? Here is what I have:

    Email us <?php $options = get_theme_mods(); echo '
    '; if (!empty($options['twitter_uid'])) echo '
    ';

    …then the rest of the social links follow.

    This is my site http://thereikishareproject.org/wp/

    I commented out the above code I was playing with so I don’t freak out the person I’m designing this for, but I attached a screen shot of how my email link shows up incorrectly.

    I also included a jpg of how I want it to look, but can’t seem to figure out how to get it that way.

    I’d really appreciate any assistance completing this task.

    Thank you!!
    -Maria
    social_bar_correct_2014-04-23.jpg
    ScreenShot2014-04-23at11.05.17PM.jpg

    Attachments:
    You must be logged in to view attached files.
    #19769
    Sushil Adhikari
    Moderator

    Normally I don’t do custom stuff as support because this falls outside of theme support. However, I will give you a quick solution here:

    Right after this:

    echo '
    ';

    Add this:

    echo '
    ';

    then in your child theme style.css, add:

    #email:before { content: '\e65f'; }
    #19770
    Maria
    Member

    thank you thank you thank you thank you thank you thank you!

    I’m sorry if I went overboard with my questions. I really didn’t realize this was the wrong place for that. For the future should I go somewhere else or could I pay extra to email you guys or ask specific questions like this? I really like your themes & just want to go about using them and working with you in the correct manner.

    Thank you so much for helping me! Your solution worked like a charm.

    #19771
    Sushil Adhikari
    Moderator

    No worries… it’s just that this one falls into “end-user customization” which is not really covered in theme support. Theme support is generally reserved for questions relating to functions and features of the theme, finding out how to use them, or if you encounter any bugs and issues with the theme, etc.

    In situations such as customization, if a person needs to know where something is or what file they need to open and make changes, or need to know where certain code is located, that part is included in support. B)

    I wish I could help everyone with custom requests, but I would not have enough time to develop new themes. I used to offer paid customization services, but found it was taking up a lot of time.

    #15069
    Louis
    Participant

    Hi Maria, thank you for your topic, I have learned how to add custom icon on the social bar.
    Actually I found an easy way to add email icon, would you like to try.
    My website has this now, see http://www.wsw-china.com

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.