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


    Effects on the logo (PunBB, Phpbb3, Invision, Phpbb2)

    avatar
    • Veteran staff member

        Reputation : 12
        Registered on : 2012-03-23
        Posts : 17
      Translation of the banner
      Hello members,

      Description


      Adding this CSS code on your forum you will be able to translate the banner when you pass hover with your mouse.

      Set up


      Choose the correct code relative to your forum version. Copy and paste the code in your CSS (ACP > Display > Images & Colors > CSS stylesheet)



      PunBB

      Code:
              #pun-logo {
                float: left;
                -webkit-transition-duration: 1s;
                -moz-transition-duration: 1s;
                -o-transition-duration: 1s;
                transition-duration: 1s;
                background-repeat: no-repeat;
              }
             
             
              #pun-logo:hover {
                -webkit-transform:translate(60px);
                -moz-transform: translate(60px);
                -o-transform:translate(60px);
              }
             
              #pun-logo:active {
                -webkit-transform:scale(0.9);
                -moz-transform:scale(0.9);
                -o-transform:scale(0.9);
              }




      Phpbb3 - Invision

      Code:
              #logo {
                float: left;
                -webkit-transition-duration: 1s;
                -moz-transition-duration: 1s;
                -o-transition-duration: 1s;
                transition-duration: 1s;
                background-repeat: no-repeat;
              }
             
             
              #logo:hover {
                -webkit-transform:translate(60px);
                -moz-transform: translate(60px);
                -o-transform:translate(60px);
              }
             
              #logo:active {
                -webkit-transform:scale(0.9);
                -moz-transform:scale(0.9);
                -o-transform:scale(0.9);
              }



      Phpbb2

      Code:
                  #i_logo {
                    float: left;
                    -webkit-transition-duration: 1s;
                    -moz-transition-duration: 1s;
                    -o-transition-duration: 1s;
                    transition-duration: 1s;
                    background-repeat: no-repeat;
                  }
             
             
                  #i_logo:hover {
                    -webkit-transform:translate(60px);
                    -moz-transform: translate(60px);
                    -o-transform:translate(60px);
                  }
             
                  #i_logo:active {
                    -webkit-transform:scale(0.9);
                    -moz-transform:scale(0.9);
                    -o-transform:scale(0.9);
                  }





      Customize the tutorial


      You can edit (60px) to a bigger/smaller value to increase/decrease the translation...

      Technical problems


      The code will apply to the signature if you haven't apply a color to it. The tutorial was tested on PhpBB2 and PhpBB3 forums and works with every browsers; 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 segnalation.

      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.

      avatar
      • Administrator

          Reputation : 315
          Registered on : 2012-02-22
          Posts : 2317
          School of codes courses: coming soon
        Read this:
        http://codes.forumotion.pro/t125-write-a-tutorial



        Niko wants you in the team Guest

        Community manager and Administrator at Forumattivo.com

        avatar
        • Veteran staff member

            Reputation : 12
            Registered on : 2012-03-23
            Posts : 17
          OK But this way you spend more time on an issue

          avatar
          • Administrator

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



            Niko wants you in the team Guest

            Community manager and Administrator at Forumattivo.com

            avatar
            • Veteran staff member

                Reputation : 1
                Registered on : 2012-03-23
                Posts : 85
              Nice ;)

              avatar
              • Veteran staff member

                  Reputation : 14
                  Registered on : 2012-02-25
                  Posts : 98
                Excellent guide, good. I also wanted to create a guide like this but I have not had time: (

                avatar
                • **


                    Reputation : 2
                    Registered on : 2012-03-24
                    Posts : 20
                  Very cool, thanks^^!

                  avatar
                  • **


                      Reputation : 1
                      Registered on : 2012-04-03
                      Posts : 20
                    Excellent! I have been looking for this! Thank You!

                    I simply took out the

                    Code:
                    #pun-logo:active {
                              -webkit-transform:scale(0.9);
                              -moz-transform:scale(0.9);
                              -o-transform:scale(0.9);
                            }

                    Because I don't like that feature. Thank You once again! :)

                    avatar
                    • Manager

                        Reputation : 20
                        Registered on : 2012-04-01
                        Posts : 407
                      Pretty neat.



                      avatar
                      • ***


                          Reputation : 1
                          Registered on : 2012-08-19
                          Posts : 31
                        Nice work.

                        avatar
                        • **


                            Reputation : 0
                            Registered on : 2012-09-21
                            Posts : 21
                          very good!!!!!

                          avatar
                          • ****


                              Reputation : 2
                              Registered on : 2012-05-19
                              Posts : 52
                            Works great! THanks!


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