Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Adjust code in Page.ss - Last tweak but can't do it!


Reply


7 Posts   598 Views

Avatar
Lemonie

Community Member, 70 Posts

25 October 2012 at 10:43pm

Edited: 26/10/2012 2:31am

I have finally figured out how to add social sharing buttons to my website. I have added the following code to Page.ss which I am going to fine tune.

How do I move the sharing icons to show directly at the end of content added and not at the bottom of the page. If i put the code directly after:

$Layout

it shows in the right place but the first 2 icons are on the far right top as though on the end of the line before?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
      <link rel="shortcut icon" href="/favicon.ico" />
<% base_tag %>
      <title>$Title &raquo; $SiteConfig.Title</title>
      $MetaTags(false)
      <link rel="shortcut icon" href="/favicon.ico" />
      
      <% require themedCSS(layout) %>
      <% require themedCSS(typography) %>
      <% require themedCSS(form) %>
      
      <!--[if IE 6]>
         <style type="text/css">
          @import url(themes/blackcandy/css/ie6.css);
         </style>
      <![endif]-->
      
      <!--[if IE 7]>
         <style type="text/css">
          @import url(themes/blackcandy/css/ie7.css);
         </style>
      <![endif]-->
   <script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "577128f1-65ac-4969-8abd-14c8dfe5bd1e"});</script></head>
<body>
<div id="BgContainer">
   <div id="Container">
      <div id="Header">
         $SearchForm
          <h1>$SiteConfig.Title</h1>
       <p>$SiteConfig.Tagline</p>
      </div>
      
      <div id="Navigation">
         <% include Navigation %>
</div>
       
       <div class="clear"><!-- --></div>
            
<div id="Layout">
         
      $Layout
   </div>

<div id="share-buttons" class="clear">
   <div class="topliner_grey">

<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_email_large' displayText='Email'></span>
<span class='st_sharethis_large' displayText='ShareThis'></span>

   </div>
</div>
<div class="clear"><!-- --></div>
   </div>
<div id="Footer">
      <% include Footer %>
   </div>
</div>
</body>
</html>

<br/>
<p style="text-align:center;"><a href="http://www.tinycounter.com" target="_blank" title="web counter"><img border="0" align="center" alt="web counter" src="http://mycounter.tinycounter.com/index.php?user=Homeless"></a></p>
<br/>
<p style="font-family:arial;color:#333;font-size:11px;text-align:center;">free hosting provided by <a href="https://www.vidahost.com/web-hosting/package/charity-hosting">Vidahost</a>
</p>

Avatar
Adrexia

Moderator, 3 Posts

26 October 2012 at 9:54am

You should probably move the mark-up you've added to be within the Layout Div. If that doesn't fix it, you'll need to tweak the css.

If you haven't done anything with css before, there are some decent resources here: http://www.w3schools.com/css/default.asp

There's not really a generic css fix that will work for every website, but if it's live somewhere I can tell you what you need to add.

Avatar
Lemonie

Community Member, 70 Posts

26 October 2012 at 9:17pm

Hi Adrexia

Thanks for the reply. Sorry I should have added the link .. Doh!!

www.homelesshounds.org.uk

Thank you. It's driving me mad. I can't figure how to link to it in the css at all ? Very newbie :-)

Avatar
Lemonie

Community Member, 70 Posts

26 October 2012 at 9:32pm

Edited: 26/10/2012 9:59pm

Have taken your advice and moved the mark-up up and that has put the share icons on the page properly. Have gone to css now but can't figure out how to get the icons to show directly under the content but will go and try and work on it :-)

Would greatly appreciate your help as there is always the next job waiting for me to try and muddle my way though lol It looks like it might be the static sidebar that is interfering?

Avatar
Lemonie

Community Member, 70 Posts

27 October 2012 at 9:50pm

Could anybody have a quick look and tell me what needs changing?

I am going round in circles and can't figure it out .. thanks

Avatar
Johan

Community Member, 49 Posts

27 October 2012 at 10:34pm

Edited: 27/10/2012 10:36pm

but can't figure out how to get the icons to show directly under the content

Go into the CMS and delete the blank paragraph tags under the content that is pushing your icons down. Because this is not a SS issue you are not getting many replies.

You must promise in future that you will use Firebugs inspector and read the section "Find elements with the mouse" here. Then everything becomes easy:
https://getfirebug.com/html

Avatar
Lemonie

Community Member, 70 Posts

28 October 2012 at 9:29pm

Edited: 28/10/2012 9:35pm

Hi Johan

I am in the early stages of trying to teach myself. I have firebug and have used it but cannot understand it.

The share buttons are showing at the bottom of the page below the static sidebar. They are not being pushed down by the content?

To be fair this is a ss issue as in all my other websites I would just add the code to the page but ss strips it out.