1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fluid Logo

Discussion in 'XenForo Questions and Support' started by Dan, Oct 10, 2010.

  1. Dan

    Dan Well-Known Member

    Ok style gurus. Probably easy for you, damn near impossible for me :p. How would I go about making my header image fluid, ie adjust to window and forum size?

    You can see here that if you make the browser smaller the logo remains the same. Thanks!!
     
  2. Peggy

    Peggy Well-Known Member

    You usually have to slice the logo image and code it to expand with the forum. However I don't see how your logo can be sliced anywhere.
     
  3. Dan

    Dan Well-Known Member

    Although probably not correct, it does stretch and condense rather well if I could only get it to behave at a percentage and not a px.
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    An old trick I like to use is a table. For example:

    Code:
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
    	<td width="200">
    		<img src="path/to/leftpiece.gif" alt="" border="0" />
    	</td>
    	<td background="path/to/righttile.gif">
    		&nbsp;
    	</td>
    </tr>
    </table>
    
    This only works if your image is such that you can slice it into two pieces, where one piece repeats in a tile pattern. The tile piece fills space, while the fixed piece remains constant.

    But don't let Kier see you using tables. :eek:
     
    feldon30 and Dan like this.
  5. Peggy

    Peggy Well-Known Member

    That's what I've always used.
     
  6. Dan

    Dan Well-Known Member

    Oh course! Thanks Jake! We'll keep this between you and I, eh? ;)
     
  7. Peggy

    Peggy Well-Known Member

    and me......
     
    Jake Bunce likes this.
  8. Dan

    Dan Well-Known Member

    right! we'll never tell
     
  9. Peggy

    Peggy Well-Known Member

    My lips are zipped!
     
    Dan likes this.
  10. khurt

    khurt Member

    If you want to split your header image into a 2 separate images, you might look into setting a background image for #header.

    In the template "header.css" find:
    Code:
    #header
    {
        @property "header";
        background-color: @primaryMedium;
        @property "/header";
    }
    
    and replace it with something like:
    Code:
    #header
    {
        @property "header";
        background: @primaryMedium url('styles/default/xenforo/stlouis-skyline.png') no-repeat top;
        @property "/header";
    }
    
     
    Dan and glorify like this.
  11. Dan

    Dan Well-Known Member

    Works well. Thanks!
     
  12. Peggy

    Peggy Well-Known Member

    Which method did you use?
     
  13. Dan

    Dan Well-Known Member

    khurt's method. So Kier won't get mad at me ;)
     
  14. Carlos

    Carlos Well-Known Member

    I see where he's coming from though. Xenforo forces images to be resized to xenforo's image standards.

    I have a big logo, and it gets resized to acceptable level [on xenforo's part].
     
  15. Peggy

    Peggy Well-Known Member

    lol he wouldn't.
     
  16. Peggy

    Peggy Well-Known Member

    It shouldn't if you change the size attributes?
     
  17. Dan

    Dan Well-Known Member

    I know. Just being silly. I should note by using the method I used, I had to remove the <img src> out of the header template. FYI for anybody else using this method.
     
  18. Peggy

    Peggy Well-Known Member

    Thanks for the tip.
     
  19. Carlos

    Carlos Well-Known Member

    When I did, it only expands the size navigation, that's it. :(
     
  20. yoghurtfarmer

    yoghurtfarmer Well-Known Member

Share This Page