moving social icons on article view

Hi,
How do I move the social icons from the left side on article view to underneath the date and author info?
Thanks in advance

Hi,

It requires some CSS modifications, add this code into css/override.css file (first enable this override option from template options -> Advanced tab):

Code: Select all

article.gk-has-aside .gk-article-body {
   padding-left: 0;
}
#gk-social-aside {
   position: relative;
        width: auto;
}
#gk-social-api > * {
   display: inline-block;
   min-height: 50px;
   margin: 0 30px;
}


Hi,
this doesn't seem to work, just moves them above the image but still in a vertical row. Perhaps I need to edit in the article layout css?

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Add also this code into override.css file:

Code: Select all

#gk-social-api > div {
   width: 50px!important;
}


use your own value and you'll have to porbably adjust margin/padding between social icons and the post content.

Add also this code:

Code: Select all

article.gk-has-aside .gk-article-body {
   padding-left: 0;
}


Hello,
and I am interested in these changes.
I edited file override.css as described, but the icons are still arranged in a column.

I would like all icons are at the bottom of the page after the last paragraph and be in a horizontal position.
please help

Hi @Momcharov,
Could you provide your website URL? (here or via private message).

Try to replace all content from override.css file with the following:

Code: Select all

/**
 *
 * -------------------------------------------
 * Override
 * -------------------------------------------
 *
 **/

/*
 *
 * 16. Override
 *
 *
------------------------------------ */

/* 16.1. Overrided elements
==================================== */

article.gk-has-aside .gk-article-body {
   padding-left: 0;
}
#gk-social-aside {
   position: relative;
        width: 100%;
}
#gk-social-api > * {
   display: inline-block;
   min-height: 50px;
   margin: 0 20px;
}

article.gk-has-aside .gk-article-body {
   padding-left: 0;
}

#gk-social-api > div {
    width: auto!important;

}
#gk-social-api {
    width: 100%;
}


The position of the buttons may be below content and aligned left or right?
Currently buttons are over the content and In the center.

If you want to move it under the content, please remove this fragment from News2/layouts/content.post.featured.php file:

Code: Select all

<?php if(is_singular()) : ?>
   <?php if($social_api_output != '' ): ?>
      <aside id="gk-social-aside">
         <?php echo $social_api_output; ?>
      </aside>
   <?php endif; ?>
<?php endif; ?>


and paste it into News2/layouts/content.post.footer.php file after or before this line:

Code: Select all

<?php gk_post_fields(); ?>


You can also use this code to align left/right the social icons:

Code: Select all

#gk-social-aside {
   text-align: left;
}