HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    Hover group legend

    avatar
    • Administrator

        Reputation : 315
        Registered on : 2012-02-22
        Posts : 2317
        School of codes courses: coming soon
      Hover group legend

      Description


      Using this special tutorial you will be able to have a different kind of Legend: An interactive legend.... :Good: But this tutorial works only with templates Wink

      Set up


      First, add this code in your overall_header template, into the /head tag

      Code:
      <script type="text/javascript" src="http://stanlemon.net/javascript/jquery.js"></script>
         <script type="text/javascript" src="http://stanlemon.net/javascript/jquery.jgrowl.js"></script>


      Then, Add this in your CSS code

      Code:
      .groups li {
      display:inline;
      margin:0;

      }

      Now, GO to ACP > Display > templates > home page template

      find this code:
      Code:
      <p>{LEGEND} : {GROUP_LEGEND}</p>

      and replace it with this:
      Code:
      <!--- Subject: "Hover group legend" - Copyright 2012 by www.fmcodes.com. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified code. Distribution is not allowed without written consent from FMCodes---!>
      <p><center><ul class="groups">
          <li><a onclick="$.jGrowl('The Administrator Of the forum:
      Niko');" href="javascript:void(0);"> Administrators</a></li>
       
          <li><a onclick="$.jGrowl('The Global Moderators Of the forum:
      Niko', { sticky: true });" href="javascript:void(0);">Global Moderators</a></li>
       
          <li><a onclick="$.jGrowl('The Support Moderators Of the forum:
      Niko', { sticky: true });" href="javascript:void(0);">Support Moderators</a></li>
       
          <li><a onclick="$.jGrowl('The Graphic Designers Of the forum:
      Niko', {sticky: true });" href="javascript:void(0);">Graphic Designers</a></li>
       
          <li><a onclick="$.jGrowl('Forum Members:
      Mathias', { beforeClose: function(e,m) { alert('About to close this notification!'); }, animateOpen: { height: 'show' } });" href="javascript:void(0);">Forum Members</a></li>
      </ul></center></p>

      Customize the tutorial


      If you want to edit the messages you have just to edit the part that you can read easily... Like "The Administrators of the forum" etc... :Good:
      If you need help we can help you... :birra:

      Technical problems


      The tutorial was tested on this forum and with the browser Google Chrome; If you notice that the tutorial doesn't work for a browser or for a version of forum (PhpBB2, PhpBB3, PunBB, Invision) contact an administrator and we will fill this field with your reporting.

      Thanks, the staff
      For every problem or question please, contact us in the section Support for the tutorials, The staff will answer you as soon as it is possible...

      Friendly,
      The team of the Forum of Codes.



      Last edited by Niko on Sat May 26, 2012 12:52 pm; edited 1 time in total



      Niko wants you in the team Guest

      Community manager and Administrator at Forumattivo.com

      avatar
      • Veteran staff member

          Reputation : 14
          Registered on : 2012-02-25
          Posts : 98
        Very Good ;)

        avatar
        • Veteran staff member

            Reputation : 4
            Registered on : 2012-02-25
            Posts : 69
          Nice resource ;)

          avatar
          • Administrator

              Reputation : 315
              Registered on : 2012-02-22
              Posts : 2317
              School of codes courses: coming soon
            Thanks guys



            Niko wants you in the team Guest

            Community manager and Administrator at Forumattivo.com

            • Veteran staff member

                Reputation : 11
                Registered on : 2012-03-27
                Posts : 116
              I like it, very good achievement. Keep at it!

              avatar
              • ***


                  Reputation : 0
                  Registered on : 2012-05-07
                  Posts : 35
                What's this meant to achieve because I've done everything right but the only thing that's changed is the way they are layed out. If you hover over them nothing happens!

                avatar
                • Administrator

                    Reputation : 315
                    Registered on : 2012-02-22
                    Posts : 2317
                    School of codes courses: coming soon
                  @Syabria wrote:What's this meant to achieve because I've done everything right but the only thing that's changed is the way they are layed out. If you hover over them nothing happens!

                  You have to click :D



                  Niko wants you in the team Guest

                  Community manager and Administrator at Forumattivo.com

                  avatar
                  • Manager

                      Reputation : 20
                      Registered on : 2012-04-01
                      Posts : 407
                    Could we get a screen shot of how this looks before and after the click?



                    avatar
                    • **


                        Reputation : 0
                        Registered on : 2012-06-06
                        Posts : 10
                      A screenshot would be much obliged.

                      avatar
                      • **


                          Reputation : 1
                          Registered on : 2012-06-19
                          Posts : 14
                        I did exactly what you said and it does not work, do not know why..


                        YOUR BANNER HERE
                        728x90
                        DMCA.com Protection Status
                        Private forum on Forumotion | © PunBB | Free forum support | Contact | Report an abuse | Create a forum on Forumotion