Topic: Social Links positioning

Hello,

I am using the Kosel theme, and previously used the solution in the topic "Adding a facebook 'F' logo link [SOLVED]" to add Facebook page icon and link at the top of the page.

I just upgraded to Showkase 1.4.2 and was wondering if it is possible to move the Social links that reside in the footer (when URL is entered into the Page Footer section in Site Settings) to the top of the page, preferably below the Navigation links, aligned to the right. Thanks.

Re: Social Links positioning

It is not possible to move the position of the Social Media icons via the interface but you could try the following:

(1) Open the 'showkase/_themes/base/pagetypes/basetheme.tpl' file in a plain text editor.

(2) Move lines 179-189 inclusive (the following block of code) to line 165 (which is currently blank) immediately below the closing </nav> tag.

        <div class="socmedia">
          <a href="{$facebookLink}" title="facebook"><span class="icon-facebook2"></span></a>
          <a href="{$flickrLink}" title="flickr"><span class="icon-flickr3"></span></a>
          <a href="{$googleplusLink}" title="Google+"><span class="icon-google-plus2"></span></a>
          <a href="{$instagramLink}" title="Instagram"><span class="icon-instagram"></span></a>
          <a href="{$linkedinLink}" title="LinkedIn"><span class="icon-linkedin"></span></a>
          <a href="{$pinterestLink}" title="Pinterest"><span class="icon-pinterest2"></span></a>
          <a href="{$tumblrLink}" title="Tumblr"><span class="icon-tumblr2"></span></a>
          <a href="{$twitterLink}" title="Twitter"><span class="icon-twitter2"></span></a>
          <a href="{$vimeoLink}" title="Vimeo"><span class="icon-vimeo2"></span></a>
        </div>

(3) Open the 'showkase/_themes/kosel/css/custom.css' file in a plain text editor.

(4) As Showkase expects the Social Media icons to be in the footer, the CSS rule which usually sets the icon size will no longer be used. Add the following CSS code to the 'showkase/_themes/kosel/css/custom.css' file to solve this problem and to align the icons to the right.

.socmedia {
    clear: both;
    text-align: right;
}

.socmedia a {
    font-size: 1.5em;
}

(5) Republish your site after making the changes above.

Please note that as Showkase was not designed with this layout in mind, you might encounter other unforeseen issues which you might need to tackle (perhaps with additional CSS rules).
Also, the line numbers above refer to the most recent version of Showkase (v1.4.2).

I hope this helps.

Re: Social Links positioning

The solution above worked very well. Thank you very much.

Re: Social Links positioning

You're welcome! I'm glad it worked.

As the addition of the social media icons to your site header will add height to the header, the body (and footer) content of your page will be pushed down a little and any Juicebox or Showkase pages will not fit the browser window exactly as they did before the modification.
You can compensate for this by going to 'Site -> Customize Theme -> Gallery Pages' and entering a negative integer into the 'External fit px' input field (such as "-32").

Re: Social Links positioning

Thanks Steve it was  a big help!

Re: Social Links positioning

@rajdian14

You're welcome!