Resize logo depend on screen resolution?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • CommunityZ
    Member
    • Mar 2005
    • 32
    • 3.0.7

    Resize logo depend on screen resolution?

    Img capture 1 show logo.jpg in windows resolution 800X600
    Image capture2 show logo.jpg in windows resolution 1024X768

    Is there a way that i can resize so the logo.jpg will same big size same width with my forum?
    Attached Files
  • Jose Amaral Rego
    Senior Member
    • Feb 2005
    • 11058
    • 1.1.x

    #2
    You can do this by splitting your logo into three images and have the center/middle piece repeat itself?

    Comment

    • CommunityZ
      Member
      • Mar 2005
      • 32
      • 3.0.7

      #3
      How to do this?
      repeat itself?

      Comment

      • Jose Amaral Rego
        Senior Member
        • Feb 2005
        • 11058
        • 1.1.x

        #4
        This is the basic layout for creating and expandable and retractable logo.
        You have to make your center image for repeating one(1) pixel width.

        Code:
        <table border="0" cellpadding="0" cellspacing="0"  width="100%" align="center">
          <tr>
             <td width="??" height="??" style="background-image: url(images/logo_left.gif);" align="left" nowrap="nowrap"> alt="" border="0" /></a></td>
             <td height="??" width="100%" style="background-image: url(images/logo_middle-center.gif);" align="center"></td>				
             <td width="??" height="??" align="right" valign="top" nowrap="nowrap">
             <img  src="images/logo_right.gif" width="??" height="??" alt="" border="0" /></a></td>
          </tr>
        </table>

        Comment

        • CommunityZ
          Member
          • Mar 2005
          • 32
          • 3.0.7

          #5
          Code:
          <td align="center" width="100%" ><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
          This is my code, i still not sure what mean 1 pixel width repeating

          Comment

          • Jose Amaral Rego
            Senior Member
            • Feb 2005
            • 11058
            • 1.1.x

            #6
            You need to split the banner/logo into three parts
            Left side is a solid large piece
            Right side is a solid large piece
            Center is 1 pixel wide and ?? pixel hieght of banner...This fills this space between Left and Right banner/logo images.

            example: You ever see a style/skin with images wrapping around catagories/forums? It does the same effect by making the center image 1 pixel wide and it repeats itself to fill in the space between the Left and Right side images. It expands the 1 pixel across to fill in the gap and that is a way to have your banner increase or decrease in sizes.

            Comment

            • Jose Amaral Rego
              Senior Member
              • Feb 2005
              • 11058
              • 1.1.x

              #7
              Read the post above to create center image. You pretty much have to slice it up.
              The red XX for logo_left.gif can be the same width as logo_right.gif or not. You notice that logo_center.gif has already a set width of 100%, that is to fill the space between the left and right image logo. The only constant is YY for height, now that has to be all same size.

              Creating a center image takes some knowing of photoshop or what ever tool you use to create images. You have to make an image repeat without left or right borders, basically make it wrappable. Remeber to create center image in 1px width

              XX=size of pixel width ex: 15px
              YY=size of pixel height ex: 15px

              Code:
              <table border="0" cellpadding="0" cellspacing="0"  width="100%" align="center">
              <tr>
              	  <td width="[COLOR="Red"]XX[/COLOR]" height="[COLOR="blue"]YY[/COLOR]" align="left"nowrap="nowrap">
              	  <img border="0" src="images/misc/logo_left.gif" width="[COLOR="red"]XX[/COLOR]" height="[COLOR="blue"]YY[/COLOR]" alt="" /></td>
              	  <td height="[COLOR="Blue"]YY[/COLOR]" width="100%" style="background-image: url(images/misc/logo_center.gif);" align="center"></td>
              	  <td width="[COLOR="red"]XX[/COLOR]" height="[COLOR="Blue"]YY[/COLOR]" align="right" valign="top" nowrap="nowrap">
              	  <img  src="images/misc/logo_right.gif" width="[COLOR="red"]XX[/COLOR]" height="[COLOR="blue"]YY[/COLOR]" alt="" border="0" /></a></td>
              </tr>
              </table>

              Comment

              • Artist67
                New Member
                • Sep 2007
                • 3
                • 3.6.x

                #8
                Originally posted by Jose Amaral Rego
                This is the basic layout for creating and expandable and retractable logo.
                You have to make your center image for repeating one(1) pixel width.

                Code:
                <table border="0" cellpadding="0" cellspacing="0"  width="100%" align="center">
                  <tr>
                     <td width="??" height="??" style="background-image: url(images/logo_left.gif);" align="left" nowrap="nowrap"> alt="" border="0" /></a></td>
                     <td height="??" width="100%" style="background-image: url(images/logo_middle-center.gif);" align="center"></td>                
                     [QUOTE[COLOR=red][B]]<td width="??" height="??" align="right" valign="top" nowrap="nowrap">[/[/B][/COLOR]QUOTE]
                     <img  src="images/logo_right.gif" width="??" height="??" alt="" border="0" /></a></td>
                  </tr>
                </table>
                Hello, Jose!

                I am a little perplexed as to what I should enter for the bits I have highlighted above. I have my three images: left, centre and right but haven't a clue what sizes, or what for, I should enter here. I hope you can help and thank you in advance.

                Comment

                • Artist67
                  New Member
                  • Sep 2007
                  • 3
                  • 3.6.x

                  #9
                  Originally posted by Artist67
                  Hello, Jose!

                  I am a little perplexed as to what I should enter for the bits I have highlighted above. I have my three images: left, centre and right but haven't a clue what sizes, or what for, I should enter here. I hope you can help and thank you in advance.
                  Its Ok I have sussed it out, I didnt realise the top & bottom duplicate- similar code had to be repeated with the same fields for left & right, I now realise they are for the transparent table and the image - hope this is of help to others who may of got flumoxed with 5 different fields to fill in.

                  Cheers.

                  Comment

                  • jfazio
                    Member
                    • Feb 2008
                    • 99

                    #10
                    I have tried to do what Jose asked so as to make the logo work in different screen resolutions, but now I have a big gap in the middle of logo. Please help. The url is http://www.thedachshundnetwork.com/vbb

                    Thanks.

                    Jeannie Fazio
                    Jeannie Fazio
                    The Dachshund Network
                    http://www.thedachshundnetwork.com/vbb

                    Comment

                    • Jose Amaral Rego
                      Senior Member
                      • Feb 2005
                      • 11058
                      • 1.1.x

                      #11
                      Try ones within links below and see if they suite your forum.


                      Comment

                      • southeastsxs
                        Member
                        • Jul 2010
                        • 43
                        • 4.0.x

                        #12
                        Hi all,

                        Can someone please tell me where I add or edit this code?

                        Thanks
                        vBulletin - v4.0.4u1 (CMS), GoDaddy Hosting, Linux OS, MY SQL Database

                        Addons:- vBH Add New Tabs 1.2, Forum Category Icons Advanced 1.2.4, Mini Photo Edit 1.0.1, VBadvanced CMPS 4.0.1, VSa Advanced New Posts 3.0.2, VSa Advanced Registration 2.0.1

                        Comment

                        • Papee
                          New Member
                          • Jul 2010
                          • 6
                          • 4.0.x

                          #13
                          I used this code and it looks ok in FireFox but my center and right images are missing in IE and the right image is align left. On my IE it even pushes the menu down.

                          Code:
                          <div><a name="top" <table border="0" cellpadding="0" cellspacing="0"  width="100%" align="center">
                            <tr>
                               <td width="705" height="135" <img src="images/logoleft.gif"></a></td>
                               <td height="135" width="100%" style="background-image: url(images/logocenter.gif);" align="center"></td>                
                               <td width="316" height="135" align="right" valign="top" nowrap="nowrap">
                               <img  src="images/logoright.gif" width="316" height="135" alt="" border="0" /></a></td>
                            </tr>
                          </table></div>
                          Attached Files

                          Comment

                          widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                          Working...