Social Media Icons in Header

Discussion in 'SwiftRay WordPress Theme' started by marketingtypes, Jan 29, 2015.

Thread Status:
Not open for further replies.
  1. marketingtypes

    marketingtypes New Member

    Joined:
    Nov 27, 2013
    Messages:
    13
    Likes Received:
    0
    Hi Guys,

    I would like to place social media icon in the center of the header on a Swiftray theme. I use (per your suggestion) the floating social media icon, and the short code is:

    <?php if (function_exists("DISPLAY_ACURAX_ICONS")) { DISPLAY_ACURAX_ICONS(); } ?>

    I just don't know where to place it in the header.php file to get it to display in the center of the header -- between the logo and the contact info on the right.

    Possible?

    Also, when I read through the other threads trying to find a way to change the header color, I only seem to change the top 40 pixels or so. Can I change the white background in the header to blue? I've tried this but it didn't work:

    .header-container {
    background: green;
    }

    Thanks!
    Chris
     
  2. praveen

    praveen Support Staff

    Joined:
    Jan 1, 2015
    Messages:
    2,344
    Likes Received:
    67
    Hello !

    Please follow the screenshot given below.
    add_social_icon_in_header.png

    Code:
      <div class="header_social_icons">   
                              <ul class="social_icons">
            <?php if (get_option('inkthemes_twitter') != '') { ?>
            <li><a title="Tweet Us" class="twitter" href="<?php echo get_option('inkthemes_twitter'); ?>"></a></li>
            <?php } ?>       
            <?php if (get_option('inkthemes_rss') != '') { ?>
            <li><a title="Feed Rss" class="rss" href="<?php echo get_option('inkthemes_rss'); ?>"></a></li>
            <?php } ?>       
            <?php if (get_option('inkthemes_linked') != '') { ?>
            <li><a title="Share on Linkedin" class="linkedin" href="<?php echo get_option('inkthemes_linked'); ?>"></a></li>
            <?php } ?>       
            <?php if (get_option('inkthemes_forrst') != '') { ?>
            <li><a title="Forrst" class="dribble" href="<?php echo get_option('inkthemes_forrst'); ?>"></a></li>
            <?php } ?>       
            <?php if (get_option('inkthemes_facebook') != '') { ?>
            <li><a title="Share on Facebook" class="facebook" href="<?php echo get_option('inkthemes_facebook'); ?>"></a></li>
            <?php } ?>       
            <?php if (get_option('inkthemes_dribble') != '') { ?>
            <li><a title="Dribbble" class="frosst" href="<?php echo get_option('inkthemes_dribble'); ?>"></a></li>
            <?php } ?>       
        </ul>
                              </div>
    Now, paste the code given below in Custom CSS section
    (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.
    Code:
    .header_social_icons {
    float: right;
    margin-right: -15%;
    }
    .header .logo {
    float: left;
    }
    
    Thanks,
    Praveen
     
  3. marketingtypeguys

    marketingtypeguys Member

    Joined:
    Apr 15, 2014
    Messages:
    79
    Likes Received:
    1
Thread Status:
Not open for further replies.

Share This Page