Game Template - Social position

GAME uses a top position for all social icons (above the content).
Can this be switched to the bottom of the content?

Thank you

Please edit this file:
templates/gk_game/html/com_k2/templates/default/item.php
and move this block of code:

Code: Select all

          <?php if($params->get('itemTwitterButton',1) || $params->get('itemFacebookButton',1) || $params->get('itemGooglePlusOneButton',1)): ?>
          <div class="itemSocialSharing">
              <?php if($params->get('itemRating')): ?>
              <div class="itemRatingBlock"> <span><?php echo JText::_('K2_RATE_THIS_ITEM'); ?></span>
                    <div class="itemRatingForm">
                          <ul class="itemRatingList">
                                <li class="itemCurrentRating" id="itemCurrentRating<?php echo $this->item->id; ?>" style="width:<?php echo $this->item->votingPercentage; ?>%;"></li>
                                <li> <a href="#" rel="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_1_STAR_OUT_OF_5'); ?>" class="one-star">1</a> </li>
                                <li> <a href="#" rel="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_2_STARS_OUT_OF_5'); ?>" class="two-stars">2</a> </li>
                                <li> <a href="#" rel="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_3_STARS_OUT_OF_5'); ?>" class="three-stars">3</a> </li>
                                <li> <a href="#" rel="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_4_STARS_OUT_OF_5'); ?>" class="four-stars">4</a> </li>
                                <li> <a href="#" rel="<?php echo $this->item->id; ?>" title="<?php echo JText::_('K2_5_STARS_OUT_OF_5'); ?>" class="five-stars">5</a> </li>
                          </ul>
                          <div id="itemRatingLog<?php echo $this->item->id; ?>" class="itemRatingLog"> <?php echo $this->item->numOfvotes; ?> </div>
                    </div>
              </div>
              <?php endif; ?>
             
              <?php if($params->get('itemTwitterButton',1)): ?>
              <div class="itemTwitterButton"> <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal"<?php if($params->get('twitterUsername')): ?> data-via="<?php echo $params->get('twitterUsername'); ?>"<?php endif; ?>><?php echo JText::_('K2_TWEET'); ?></a>
                        <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
              </div>
              <?php endif; ?>
                           
              <?php if($params->get('itemFacebookButton',1)): ?>
              <div class="itemFacebookButton">
                <script type="text/javascript">                                                         
                window.addEvent('load', function(){
                  (function(){
                        if(document.id('fb-auth') == null) {
                           var root = document.createElement('div');
                           root.id = 'fb-root';
                           $$('.itemFacebookButton')[0].appendChild(root);
                              (function(d, s, id) {
                                var js, fjs = d.getElementsByTagName(s)[0];
                                if (d.getElementById(id)) {return;}
                                js = d.createElement(s); js.id = id;
                                js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                                fjs.parentNode.insertBefore(js, fjs);
                              }(document, 'script', 'facebook-jssdk'));
                          }
                    }());
                });
              </script>
                <div class="fb-like" data-send="false" data-width="260" data-show-faces="true"> </div>
              </div>
              <?php endif; ?>
             
              <?php if($params->get('itemGooglePlusOneButton',1)): ?>
              <div class="itemGooglePlusOneButton">
                <g:plusone annotation="inline" width="120"></g:plusone>
                <script type="text/javascript">
                    (function() {
                      window.___gcfg = {lang: 'en'}; // Define button default language here
                      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                      po.src = 'https://apis.google.com/js/plusone.js';
                      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                    })();
              </script>
              </div>
              <?php endif; ?>
          </div>
          <?php endif; ?>


just before this block of code:

Code: Select all

<?php if($params->get('itemComments') && !JRequest::getInt('print') && ($params->get('comments') == '1' || ($params->get('comments') == '2')) && empty($this->item->event->K2CommentsBlock)):?>
          <div class="itemComments" id="itemCommentsAnchor">


Hi There,

Is it possible to change the icons to display in a horizontal line instead of vertically? Also is it possible to add a linkedIN button?

Thanks,
Steven

Could you please post an url to your site where I can see the icons?

http://www.recupeit.co.za/index.php/infrastructure/infrastructure/software/v-locity

Please edit: /templates/gk_game/css/override.css and add at its end:

Code: Select all

.itemSocialSharing > div {
float: none;
width: auto;
clear: none;
display: inline-block;
}


Remember to enable "CSS override" in template settings - advanced section.

Please edit: /templates/gk_game/css/override.css and add at its end:

Code: Select all

.itemSocialSharing > div {
float: none;
width: auto;
clear: none;
display: inline-block;
}


Remember to enable "CSS override" in template settings - advanced section.

It works!
Thank you

Thanks, the icons are now next to one another. However, when I move the code as you suggested in your original answer to the poster, the icons move to the bottom but the box they are in extends from the top of the article all the way to the bottom of the icons instead of just being around the icons themselves.

I have left it in this state so that you can see: http://www.recupeit.co.za/index.php/infrastructure/infrastructure/software/v-locity

I have tried moving it around but haven't been able to get this block to move down with the icons.

You can add:

Code: Select all

.itemSocialSharing {
clear: both;
}


or limit it to particular devices using @media (max-width: xxx px) media query.