move social icons from the bottom to the top - Feedback or Suggestions Discussions on ThemeID: Support Community

bitjericho

I'd like to move the social menu from the bottom to the very top in place of the top menu. If this is not something you wanna implement, any tips on doing it by hand? I tried but it I couldn't get it to look right

Emil Uzelac

http://themeid.com/public/responsive-icons-top.zip there you go

bitjericho wrote:

I'd like to move the social menu from the bottom to the very top in place of the top menu. If this is not something you wanna implement, any tips on doing it by hand? I tried but it I couldn't get it to look right

bitjericho

works great. Thanks a bunch!

Emil Uzelac

No problem

Please rate the Theme @ http://wordpress.org/extend/themes/responsive

Emil

bitjericho wrote:

works great. Thanks a bunch!

ashima.goyal

Hello Emil,

I just moved my blog from WP.com to self hosting and I started using your theme.. Just wanted to say it's amazing!

I'm still exploring all the options.. And the best part is that most of the questions are answered in this forum!

Thanks!
Ashima

Emil Uzelac

Site looks good Ashima!

Emil

HarryMohan

Hi Emil,

I am new to wp and your theme. I have seen examples how others have customized your theme., it is amazing. Since I am Newbie I will be asking few questions Please be patient with me,I have already found some answers in your forum. I am on building my site on WP .

1.I have already installed child theme, in order for me to to implement icon-top zip above do I download the above child theme again or do I put the code in the child theme already installed.

2.I want to front page to have one image across with transparent message on side and keep the three widgets as is.

3.I want same image on each menu page with different message but not the widgets and .
Example in :http://www.atlantapcfix.com/index.html

But above example shows pages in bottom, which I don't want

Any help will be greatly appreciated

Thanks
Harry

Emil Uzelac

You can just download the Child Theme with social icons at the top, or copy header.php from Responsive to your Child Theme and paste this part in:

<?php $options = get_option('responsive_theme_options');
                    
            // First let's check if any of this was set
        
                echo '<ul class="social-icons">';
                    
                if (!empty($options['twitter_uid'])) echo '<li class="twitter-icon"><a href="' . $options['twitter_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/twitter-icon.png" width="24" height="24" alt="Twitter">'
                    .'</a></li>';

                if (!empty($options['facebook_uid'])) echo '<li class="facebook-icon"><a href="' . $options['facebook_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/facebook-icon.png" width="24" height="24" alt="Facebook">'
                    .'</a></li>';
  
                if (!empty($options['linkedin_uid'])) echo '<li class="linkedin-icon"><a href="' . $options['linkedin_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/linkedin-icon.png" width="24" height="24" alt="LinkedIn">'
                    .'</a></li>';
                    
                if (!empty($options['youtube_uid'])) echo '<li class="youtube-icon"><a href="' . $options['youtube_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/youtube-icon.png" width="24" height="24" alt="YouTube">'
                    .'</a></li>';
                    
                if (!empty($options['stumble_uid'])) echo '<li class="stumble-upon-icon"><a href="' . $options['stumble_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/stumble-upon-icon.png" width="24" height="24" alt="StumbleUpon">'
                    .'</a></li>';
                    
                if (!empty($options['rss_uid'])) echo '<li class="rss-feed-icon"><a href="' . $options['rss_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/rss-feed-icon.png" width="24" height="24" alt="RSS Feed">'
                    .'</a></li>';
       
                if (!empty($options['google_plus_uid'])) echo '<li class="google-plus-icon"><a href="' . $options['google_plus_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/googleplus-icon.png" width="24" height="24" alt="Google Plus">'
                    .'</a></li>';
                    
                if (!empty($options['instagram_uid'])) echo '<li class="instagram-icon"><a href="' . $options['instagram_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/instagram-icon.png" width="24" height="24" alt="Instagram">'
                    .'</a></li>';
                    
                if (!empty($options['pinterest_uid'])) echo '<li class="pinterest-icon"><a href="' . $options['pinterest_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/pinterest-icon.png" width="24" height="24" alt="Pinterest">'
                    .'</a></li>';
                    
                if (!empty($options['yelp_uid'])) echo '<li class="yelp-icon"><a href="' . $options['yelp_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/yelp-icon.png" width="24" height="24" alt="Yelp!">'
                    .'</a></li>';
                    
                if (!empty($options['vimeo_uid'])) echo '<li class="vimeo-icon"><a href="' . $options['vimeo_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/vimeo-icon.png" width="24" height="24" alt="Vimeo">'
                    .'</a></li>';
                    
                if (!empty($options['foursquare_uid'])) echo '<li class="foursquare-icon"><a href="' . $options['foursquare_uid'] . '">'
                    .'<img src="' . get_stylesheet_directory_uri() . '/icons/foursquare-icon.png" width="24" height="24" alt="foursquare">'
                    .'</a></li>';
             
                echo '</ul><!-- end of .social-icons -->';
         ?>

Great place for icons would be immediately after:

<?php get_sidebar('top'); ?>

once that's in now we would need few lines of CSS as well:

/* =Social Icons
-------------------------------------------------------------- */
#header .social-icons {
    list-style: none;
    line-height: normal;
    margin: 0;
    text-align: right;
}


#header .yelp-icon,
#header .vimeo-icon, 
#header .youtube-icon, 
#header .twitter-icon,
#header .facebook-icon, 
#header .linkedin-icon, 
#header .rss-feed-icon, 
#header .instagram-icon,
#header .pinterest-icon, 
#header .foursquare-icon,
#header .google-plus-icon, 
#header .stumble-upon-icon {
    display: inline;
    margin: 1px;
    padding-left: 3px;
}

and this needs to be in /responsive-child-theme/style.css which you can access from your editor too.

The easiest would be with the Child Theme and that's already created.

Thanks,
Emil

TheHoov

Is this .zip a plug in or a child theme? If this is also a child theme what should I do to get my icons at the top?

Thanks
TheHoov

Emil Uzelac wrote:

http://themeid.com/public/responsive-icons-top.zip there you go

bitjericho wrote:

I'd like to move the social menu from the bottom to the very top in place of the top menu. If this is not something you wanna implement, any tips on doing it by hand? I tried but it I couldn't get it to look right

Emil Uzelac

Child Theme with needed modifications to move your icons to the top

Emil

TheHoov wrote:

Is this .zip a plug in or a child theme? If this is also a child theme what should I do to get my icons at the top?

Thanks
TheHoov

Emil Uzelac wrote:

http://themeid.com/public/responsive-icons-top.zip there you go

bitjericho wrote:

I'd like to move the social menu from the bottom to the very top in place of the top menu. If this is not something you wanna implement, any tips on doing it by hand? I tried but it I couldn't get it to look right

TheHoov

I already have one of your child themes. If I load this one will it keep my changes to the child theme I have in place?

Emil Uzelac wrote:

Child Theme with needed modifications to move your icons to the top

Emil

TheHoov wrote:

Is this .zip a plug in or a child theme? If this is also a child theme what should I do to get my icons at the top?

Thanks
TheHoov

Emil Uzelac wrote:

http://themeid.com/public/responsive-icons-top.zip there you go

Emil Uzelac

Yes, as far as Theme Options and anything you did with the WordPress features/options, if you added any customizations via style.css that will be overridden,

Thanks,
Emil

TheHoov wrote:

I already have one of your child themes. If I load this one will it keep my changes to the child theme I have in place?

Emil Uzelac wrote:

Child Theme with needed modifications to move your icons to the top

Emil

TheHoov wrote:

Is this .zip a plug in or a child theme? If this is also a child theme what should I do to get my icons at the top?

Thanks
TheHoov

Barclay

Hi Emil,
Thanks for the informative link, found many helping stuff there and bookmarked the link to share with others also.

DAVS

Hi there. Great theme! I followed your directions on how to move the social buttons to the top, but it seems to have eliminated/overridden my previous top widgets I had on top (Link for a quote, phone number etc.). Is there a way to position the social buttons in between the menu and the main content so that I can retain the top widgets?

Thanks!

Emil Uzelac

Hi,

Yes, this Child Theme will include header.php which will override previously made customizations. So what you can do is add your info in Appearance > Top Widget.

Thanks,
Emil

DAVS wrote:

Hi there. Great theme! I followed your directions on how to move the social buttons to the top, but it seems to have eliminated/overridden my previous top widgets I had on top (Link for a quote, phone number etc.). Is there a way to position the social buttons in between the menu and the main content so that I can retain the top widgets?

Thanks!

28palms

Hi there,

Love this theme!

I successfully moved the social icons to the top, but can't see the search option in the top widget from theme options. (I'm using Ulrich's child theme) The box is there:

header-widget class=grid col-300 fit

I tried adding sidebar-top.php and adding to the header, neither made the search bar visible.

<

p>Any ideas?

grappler

Delete the header.php from the child theme and then it should display

28palms

Thanks for the theme extensions. Yes this worked, but now I've lost my social media links and logo padding. So I guess I will put this in the parent css? Makes me nervous.

thanks K

grappler

Please see my previous post. Please only post in one place. It reduces the work for us.

Ulrich

clay

Hey I tried to upload the .zip file and put in the code listed above. neither worked. where in style.css do i put the code?

grappler

Closing Post due to repeat questions. http://themeid.com/help/discussion/6066/moving-social-icons

Howdy, Stranger!

Categories

In this Discussion

Most Popular This Week