The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Social Links (Rework) Help

View previous topic View next topic Go down

Social Links (Rework) Help

Post by Eyeball on October 9th 2016, 9:23 am

So I was following the tutorial provided by @DadyKing regarding his "Touch Social Buttons" post.

I was attempting to rework the code so that it may better fit an RPG style forum.
As instructed in the original post by DadyKing I added the codes to the forum (both HTML/CSS)

This is the code that I was rewrote for both portions

CSS
Code:
 
 
        #takip {
            position: fixed;
            right: 0;
            top: 220px;
            z-index: 999;
        }
        .takip {
        background-image: url('http://i1381.photobucket.com/albums/ah235/FluxCannonShoe/sidebar%20clan%20popout%20images/clancollectionsidebar_zpspdxj4wek.png');
        background-repeat: no-repeat;
        height: 42px;
        width: 42px;
        top: 100px;
        margin-left: auto;
        opacity:0.3;
        filter:alpha(opacity=50); /* For IE8 and earlier */
        }
        .takip:hover {
        background-image: url('http://i1381.photobucket.com/albums/ah235/FluxCannonShoe/sidebar%20clan%20popout%20images/clancollectionsidebar_zpspdxj4wek.png');
        cursor: pointer;
        opacity:1;
        filter:alpha(opacity=100); /* For IE8 and earlier */
        }
     
        .mako {
            background-position: 0px 0px;
        }
        .nattori {
            background-position: 0px -42px;
        }
        .matisyahu {
            background-position: 0px -84px;
        }
        .yoshimato {
            background-position: 0px -126px;
        }
        .hiro {
            background-position: 0px -168px;
        }

        .chosokabe {
            background-position: 0px -210px;
        }

        .satake {
            background-position: 0px -252px;
        }

        .mecco {
            background-position: 0px -264px;
        }
     



HTML
Code:
 
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Social Media Buttons</title>
        <script src="dkthemes.forumotions.in/38797.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function(){
        $(".takip").mouseover(function(){
              $(this).filter(':not(:animated)').animate({width:135},{duration:500});
        });
        $(".takip").mouseout(function(){
            $(this).animate({width:42});
        });
        });
        </script>
     
     
        <div id="takip">
            <div class="mako" onclick="location.href='http://www.fukitsuna.com/f54-mako-clan'">
            </div>
            <div class="nattori" onclick="location.href='http://www.fukitsuna.com/f55-nattori-clan'">
            </div>
            <div class="matisyahu" onclick="location.href='http://www.fukitsuna.com/f56-matisyahu-clan'">
            </div>
            <div class="yoshimato" onclick="location.href='http://www.fukitsuna.com/f57-yoshimato-clan'">
            </div>
            <div class="hiro" onclick="location.href='http://www.fukitsuna.com/f58-hiro-clan'">
            </div>
            <div class="chosokabe" onclick="location.href='http://www.fukitsuna.com/f59-chosokabe-clan'">
            </div>
            <div class="satake" onclick="location.href='http://www.fukitsuna.com/f60-satake-clan'">
            </div>
            <div class="mecco" onclick="location.href='http://www.fukitsuna.com/f61-mecco-clan'">
            </div>


Now as you can see I derived quite a bit from the original code, and added a newbackground image for the tabs that would open when hovered to the following




Below is my OVERALL_FOOTER_END template

Code:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <div>
                     <ul>
                        <li>
<!-- END html_validation -->
                        </li>
                     </ul>
                     <!-- BEGIN switch_footer_links -->
                     <ul class="linklist clearfix">
                        <li class="rightside">
                           <!-- BEGIN footer_link -->
                              <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
                              {switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                           <!-- END footer_link -->
                        </li>
                     </ul>
                     <!-- END switch_footer_links -->
                     <span class="corners-bottom"><span></span></span>
                  </div>
               </div>
               <p class="copyright">
                  <strong>{ADMIN_LINK}</strong>
               </p>
            </div>
            {PROTECT_FOOTER}
         </div>
      </div>
   </div>
</div>
 
 
 
 
 
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Social Media Buttons</title>
        <script src="dkthemes.forumotions.in/38797.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function(){
        $(".takip").mouseover(function(){
              $(this).filter(':not(:animated)').animate({width:135},{duration:500});
        });
        $(".takip").mouseout(function(){
            $(this).animate({width:42});
        });
        });
        </script>
     
     
        <div id="takip">
            <div class="mako" onclick="location.href='http://www.fukitsuna.com/f54-mako-clan'">
            </div>
            <div class="nattori" onclick="location.href='http://www.fukitsuna.com/f55-nattori-clan'">
            </div>
            <div class="matisyahu" onclick="location.href='http://www.fukitsuna.com/f56-matisyahu-clan'">
            </div>
            <div class="yoshimato" onclick="location.href='http://www.fukitsuna.com/f57-yoshimato-clan'">
            </div>
            <div class="hiro" onclick="location.href='http://www.fukitsuna.com/f58-hiro-clan'">
            </div>
            <div class="chosokabe" onclick="location.href='http://www.fukitsuna.com/f59-chosokabe-clan'">
            </div>
            <div class="satake" onclick="location.href='http://www.fukitsuna.com/f60-satake-clan'">
            </div>
            <div class="mecco" onclick="location.href='http://www.fukitsuna.com/f61-mecco-clan'">
            </div>
 
 
 

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    FB.init({
      appId      : {switch_facebook_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (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/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
   if ($('a#logout'))
   {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
         document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
   }
});

$(document).ready( function() {
   $('a#logout').click( function() {
      FB.logout();
   } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>


I am unsure if anyone would have a fix for this, but you guys have been great help to my issues before!
Thank you for taking the time to look into my issue!


FORUM VERSION: phpbb3
FORUM LINK: http://www.fukitsuna.com/

Eyeball
New Member

Male Posts : 21
Reputation : 1
Language : English

http://fukitsuna-clan.forumotion.com/

Back to top Go down

Re: Social Links (Rework) Help

Post by Sir. Mayo on October 10th 2016, 4:52 am

What exactly is the issue? What are you trying to do?

Sir. Mayo
Forumember

Male Posts : 969
Reputation : 87
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Re: Social Links (Rework) Help

Post by Eyeball on October 10th 2016, 6:58 am

@Sir. Mayo wrote:What exactly is the issue? What are you trying to do?

With the image I provided (With the clan names)
I was trying to make it work like the Social Links, when you hover they become visible on screen.
I messed with the code and added as instructed from the tutorial thread.
Though when adding the code and altering it, it seems broken and only displays the first image.

Eyeball
New Member

Male Posts : 21
Reputation : 1
Language : English

http://fukitsuna-clan.forumotion.com/

Back to top Go down

Re: Social Links (Rework) Help

Post by SLGray on October 10th 2016, 9:26 am

Is this the forum: http://www.fukitsuna.com/ ?

I need to inform you that you are breaking the Terms of Service by hiding the footer links: forum version copyright, report an abuse, etc.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36641
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Social Links (Rework) Help

Post by Eyeball on October 10th 2016, 9:45 am

Yes, that is our domain link.

I do apolgize. I was not aware I had altered anything that was a violoation of any rules. Ill be sure to have the footer set back to default.

I had purchased the copyright portion with credits as well, im unsure if that had altered anything! D:


EDIT: the OVERALL_FOOTER_END template has been reset to default. I do apologize for any inconvenience regarding violation of terms and agreements.

EDIT 2: Links of VERSION/STATS/CONTACT/ABUSE are visible, just our background and font color make it difficult to see. If there is a way I could box said links so that they may be more visible, I would certainly do so!

Eyeball
New Member

Male Posts : 21
Reputation : 1
Language : English

http://fukitsuna-clan.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum