Social Media Icons Help

[M³]

Hey there,

I've got this template mod in my 'thread'. However, if you'll notice this image, it has 2 paginations? Also, I have the title at the top of each thread.  Would this be a problem from making this work correctly?  Because, the icons must sit down on that same line as the title.  Further, I have placed the code below to show what I have in the 'thread' layout and am unsure of what to remove. Any help would be greatly appreciated.






<div class="container posts">
<div class="title-bar">
{if $[reply_button]}
<ul class="controls"><li>$[reply_button]</li></ul>
{/if}
<h1>$[thread.subject] (Read $[thread.views] time{if $[thread.views] != 1}s{/if})</h1>
</div>
<div class="control-bar ui-helper-clearfix $[scroll_class]">
<table width="100%;">
<td>
<div class="title_wrapper" style="color: transparent; padding-left:30px; padding-top:2px;">$[pagination]</div>
</td>
<td>
<div style="float: right;">
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
(function() {
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>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="M3L" data-related="m3leagues">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(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>
<fb:like send="false" layout="button_count" width="10" show_faces="false"></fb:like></div>
</td>
<td>
$[search]
<div style="padding-top: 4.5px; float: right;">
$[action_menu]
</div>
</td>
</table>
<div class="float-left">$[thread.icons]</div>
$[pagination]<div class="thread-title">$[thread.subject]</div>
</div>
<div class="content cap-bottom">
$[thread.labels]
$[poll]
<table class="list" role="presentation">
<tbody class="$[list_class]">
$[post_list]
</tbody>
</table>
{if !$[quick_reply]}{if $[bottom_reply_button]}
<div class="reply_button pad-all-double">$[bottom_reply_button]<br class="clear" /></div>
{/if}{/if}
</div>
</div>
$[quick_reply]
[/a]

[M³]

bump

[Tim Camara]

Alright, follow these steps:

1. Tunescool's code is horribly mangled.  Reset your thread template to default.
2. Starting on about line 10, you should see this div:

<div class="controls">
$[action_menu]
</div>
3. Make that div look like this (basically add the social media buttons code in right before the action_menu variable):

<div class="controls">
           <div style="float: left;">
               <div class="g-plusone" data-size="medium"></div>
               <script type="text/javascript">
                   (function() {
                       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>
               
               <a href="https://twitter.com/share" class="twitter-share-button" data-text="M3L" data-related="m3leagues">Tweet</a>
               
               <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
               <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
               <script>
                   (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>
               <fb:like send="false" layout="button_count" width="10" show_faces="false"></fb:like>
           </div>
$[action_menu]
</div>(The spacing is kinda messed up here, but you can just copy/paste it into your template and it should look alright)

4. Profit!

[M³]

Hey Tim Camara, thanks for the help. I'm almost there .. however, I've got a double-action drop down window ... below is what I now have in my thread template. Here's an image of what I'm seeing at the moment.



<div class="container posts">
<div class="title-bar">
{if $[reply_button]}
<ul class="controls"><li>$[reply_button]</li></ul>
{/if}
<h1>$[thread.subject] (Read $[thread.views] time{if $[thread.views] != 1}s{/if})</h1>
</div>
<div class="control-bar ui-helper-clearfix $[scroll_class]">
{if $[reply_button]}
<ul class="ui-pagination" style="float: right;"><li class="ui-pagination-page"><a id="pagReply" href="$[reply_button.href]">Reply</a></li></ul>
{/if}
$[search]
<div class="controls">
<div class="controls">
<div style="float: left;">
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
(function() {
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>

<a href="https://twitter.com/share" class="twitter-share-button" data-text="M3L" data-related="m3leagues">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>
(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>
<fb:like send="false" layout="button_count" width="10" show_faces="false"></fb:like>
</div>
$[action_menu]
</div>
$[action_menu]
</div>
<div class="float-left">$[thread.icons]</div>
$[pagination]<div class="thread-title">$[thread.subject]</div>
</div>
<div class="content cap-bottom">
$[thread.labels]
$[poll]
<table class="list" role="presentation">
<tbody class="$[list_class]">
$[post_list]
</tbody>
</table>
{if !$[quick_reply]}{if $[bottom_reply_button]}
<div class="reply_button pad-all-double">$[bottom_reply_button]<br class="clear" /></div>
{/if}{/if}
</div>
</div>
$[quick_reply]



I tried removing this from the code above ($[action_menu]</div>) .. and that makes it look like this.

[Tim Camara]

You've got this in there:

</div>
$[action_menu]
</div>
$[action_menu]
pare that down to just this:

</div>
$[action_menu]

[M³]

Tim Camara

This is what I have ... and below is a link as to what It looks like. :/

Forum View Of Code Above Here


<div class="container posts">
<div class="title-bar">
{if $[reply_button]}
<ul class="controls"><li>$[reply_button]</li></ul>
{/if}
<h1>$[thread.subject] (Read $[thread.views] time{if $[thread.views] != 1}s{/if})</h1>
</div>
<div class="control-bar ui-helper-clearfix $[scroll_class]">
{if $[reply_button]}
<ul class="ui-pagination" style="float: right;"><li class="ui-pagination-page"><a id="pagReply" href="$[reply_button.href]">Reply</a></li></ul>
{/if}
$[search]
<div class="controls">
<div class="controls">
<div style="float: left;">
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
(function() {
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>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="M3L" data-related="m3leagues">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>
(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>
<fb:like send="false" layout="button_count" width="10" show_faces="false"></fb:like>
</div>
$[action_menu]
<div class="float-left">$[thread.icons]</div>
$[pagination]<div class="thread-title">$[thread.subject]</div>
</div>
<div class="content cap-bottom">
$[thread.labels]
$[poll]
<table class="list" role="presentation">
<tbody class="$[list_class]">
$[post_list]
</tbody>
</table>
{if !$[quick_reply]}{if $[bottom_reply_button]}
<div class="reply_button pad-all-double">$[bottom_reply_button]<br class="clear" /></div>
{/if}{/if}
</div>
</div>
$[quick_reply]












Edit:  I reset the 'thread template' .. until I can figure out what's causing it to look this way.

[Tim Camara]

Fixed it for you. You left the code from step 2 in instead of replacing it with the code from step 3.

[M³]

Tim Camara

I just noticed my 'thread title' is missing ... the title that scrolls with the page so you don't have to scroll back up to see what the title was at the top.  Image Here  The image was an old image before you fixed it .. rather, showing you the title.  Is it possible to have the title placed to the left of the social icons?  Feel free to modify.  :/

[Tim Camara]

Looks like it was a template mod that got erased when we reset the template. I've added it back in for you.