Paulos
  • 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.

    Niko
    • Administrator

        Reputation : 319
        Registered on : 2012-02-22
        Posts : 2366
        School of codes courses: coming soon
      Read this:
      http://codes.forumotion.co.uk/t125-write-a-tutorial



      Niko wants you in the team Guest

      Community manager and Administrator at Forumattivo.com

      Paulos
      • Veteran staff member

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

        Niko
        • Administrator

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



          Niko wants you in the team Guest

          Community manager and Administrator at Forumattivo.com

          Sir Chivas
          • Veteran staff member

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

            MartinoPio
            • 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: (

              magicm00n
              • **


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

                TheKing
                • **


                    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! :)

                  Nick
                  • Manager

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



                    Effects on the logo (PunBB, Phpbb3, Invision, Phpbb2) 15px10
                    Ace Suazo
                    • ***


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

                      HenriqueBr
                      • **


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

                        PandahFish
                        • ****


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