The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Social Links (Rework) Help

3 posters

Go down

Social Links (Rework) Help Empty Social Links (Rework) Help

Post by Eyeball 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

Social Links (Rework) Help Clanco10


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
Eyeball
Forumember

Male Posts : 43
Reputation : 1
Language : English

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

Back to top Go down

Social Links (Rework) Help Empty Re: Social Links (Rework) Help

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

What exactly is the issue? What are you trying to do?
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

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

Back to top Go down

Social Links (Rework) Help Empty Re: Social Links (Rework) Help

Post by Eyeball 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
Eyeball
Forumember

Male Posts : 43
Reputation : 1
Language : English

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

Back to top Go down

Social Links (Rework) Help Empty Re: Social Links (Rework) Help

Post by SLGray 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.


Social Links (Rework) Help Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Social Links (Rework) Help Empty Re: Social Links (Rework) Help

Post by Eyeball 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
Eyeball
Forumember

Male Posts : 43
Reputation : 1
Language : English

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

Back to top Go down

Back to top

- Similar topics

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