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

How would I work my logo into xenforo?

Discussion in 'XenForo Questions and Support' started by DaveL, Sep 27, 2011.

  1. DaveL

    DaveL Well-Known Member

    Currently running one of my sites on IPB3.1 and looking to make the change over to Xenforo.

    One major question - How easy would it be to work my logo into Xenforo?

    This is what I currently have on IPB

    dl.png
     
  2. bambua

    bambua Well-Known Member

    Very easy, change where the logo points to in the style properties and adjust the height in the admin control panel and it's in there.
     
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    For a big image like that you might consider using it as a background:

    Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Header -> Background

    And yes, you need to adjust the header height appropriately:

    Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Height of Header Logo
     
    DaveL and EasyTarget like this.
  4. DaveL

    DaveL Well-Known Member

    Thanks Jake. I seem to be getting there! Is there any setting I can change so the header background width is 100%? Ive found a setting to change the height, just not the width.
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Background images don't scale like that.

    With a background like this in a space without fixed dimensions I would set repeat and position, like so:

    Screen shot 2011-09-28 at 12.17.22 PM.png

    That will center it to the top middle, no repeat.
     
    DaveL likes this.
  6. DaveL

    DaveL Well-Known Member

    Hi Jake,

    Thanks for your reply. Ive tried that suggestion but it just dosent look right.
    header.png

    Im guessing theres just no easy way of getting my banner to be 100% width. That really is a shame as wanted to migrate from IPB.

    Thanks for your help, really been appreciated. (y)
     
  7. bambua

    bambua Well-Known Member

    You could pretty easily do that specifically with a template edit on the header and put an image in there rather than having it be the background of a css element. I know background-size: 100% is in CSS3 but the support on that isn't widespread yet.

     
    DaveL likes this.
  8. DaveL

    DaveL Well-Known Member

    Hi, Thanks for your reply.
    Ive set it as the logo, What would I need to add to the logo css to make it have a width of 100%?

    On prior software ive normally just put the image link in the header template with the image dimensions.

     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The forum width needs to match the width of the image. That is controlled by this style property:

    Admin CP -> Appearance -> Style Properties -> General -> Page Width Controller

    To specify a fixed width you can use this in the Miscellaneous box:

    Code:
    width: 780px;
    margin: auto;
    
     
  10. bambua

    bambua Well-Known Member

    This is the solution I used on my forum to fix this problem.
     
  11. DaveL

    DaveL Well-Known Member

    Hi Jake,

    Im happy with the default width of the forum, just want my logo to fill the entire top area. like ive currently got on IPB.
     
  12. DaveL

    DaveL Well-Known Member

    Sorry guys,

    I really dont follow what your saying. The only way to get my image to fill the top area is to make my actual forum smaller to it matches the image size? If thats the case, seems t bit backwards to me (n)
     
  13. bambua

    bambua Well-Known Member

    I went the width route because I liked the width of my forum. You can always do a template edit find where it puts the image in and set the width to 100% just like it is on your current theme.
     
    DaveL likes this.
  14. Brogan

    Brogan XenForo Moderator Staff Member

    Just increase the width of the image to match the site page width.

    It's going to have to be stretched one way or another as it is physically smaller than the width you want it to fill.
     
  15. DaveL

    DaveL Well-Known Member

    Thanks bambua,

    Ive looked in the header template, but cant see where the codes is for the actual logo.

    Im guessing it must be in the css, but not sure what css to add to make the width 100%
     
  16. DaveL

    DaveL Well-Known Member

    I prefer using the wifth 100% so it stretchs along with the browser when re-sized.
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    Have you tried setting it as a page background image?

    Style Properties -> General -> HTML
     
  18. bambua

    bambua Well-Known Member

    Should be the logo_block template, it's included by the header.
     
    DaveL likes this.
  19. DaveL

    DaveL Well-Known Member

    Hi Brogan,

    Tried that first of all after Jake Bunce suggested it, however you cant alter the width of the header background.
     
  20. DaveL

    DaveL Well-Known Member

    Thanks bambua,

    Really seem to be getting somewhere now! I added 100% height/width to that template and its made a vast improvement :)

    2.png

    One last thing, is there anyway to get the image so it covers the green on the left and right hand sides?
     

Share This Page