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

Board Logo Align all the way to the left?

Discussion in 'Styling and Customization Questions' started by Wing, Apr 12, 2013.

  1. Wing

    Wing Active Member

    Hello all,

    As shown here: www.optiksgaming.com ,

    I am having troubles getting my header logo to fit all the way to the left of the browser view... which is causing a square of empty black to the left of the logo leading up to your browser window.

    Any ideas to get this thing to fit flush against the browser window?!

    Thanks,
     
  2. LukeFisher

    LukeFisher New Member

    Hey mate,

    Could you please provide a screenshot as it looks okay from my side.

    EDIT: never mind I see your issue.
     
  3. Wing

    Wing Active Member

    Hmm, thats interesting. Yes here is my view: Untitled.png
     
  4. LukeFisher

    LukeFisher New Member

    Have you tried an align function? <p align='left> <insert logo here> </p>

    or something like this <imgsrc="FullSize.jpg"style="width:100%;height:100%;"alt=""/>
     
  5. EQnoble

    EQnoble Well-Known Member

    It is because #logo is within the pageWidth class which pending the browser width wont extend to the margins of the browser.
    If you apply that as a background to your .header class you should be alright...I can help you with that if you like.

    If you want to play around cleaning it up yourself you can start with this....
    Code:
    #header {
        background: url("http://www.optiksgaming.com/forums/styles/proDVGFX/imageset/FORUMLOGO.png") repeat scroll 0 0 transparent;
    }
     
    Shelley likes this.
  6. Wing

    Wing Active Member


    Yes, sounds like setting it as a header background would be my best bet. Where exactly would I head to do so?
     
    Shelley likes this.
  7. Shelley

    Shelley Well-Known Member

    Yup this is what I did. @OP like Eqnoble mentioned if you apply the background image to the #header (that's in style properties) and use your normal logo in it's current place (though you will need to remove the background in the logo) and make it transparent just text only.
     
    Wing likes this.
  8. Wing

    Wing Active Member

    I see what you are saying,
    Thanks for the input Shelley. You are always so helpful around here.

    Thankyou Eqnoble and Luke as well for the kind guidance. I will go try this now!
     
    Shelley likes this.
  9. Shelley

    Shelley Well-Known Member

    I just woken up EQnoble was the help. :) Style is looking great btw. Doing a great job with that one. :)
     
    Wing likes this.
  10. Wing

    Wing Active Member

    Appreciate it! Its getting there... (y)

    So I tried adding the image as a background to the header via Style Properties: Header and Navigation - Nothing happened.
    Then I went into the header.css as it showed this:
    Code:
    #header
    {
        @property "header";
        background: @primaryMedium_alt url('@imagePath/xenforo/gradients/main-bar-gradient.png') no-repeat top;
        @property "/header";
    }
    Edited the background in there - Nothing happened.

    Finally I checked the extra.css in which the header section of the code showed this:
    Code:
    /* XF Style Tweaks */
     
    #content {
        background-image: url('http://www.optiksgaming.com/forums/styles/proDVGFX/theme/images/bg.png');
    }
     
    #header
    {
    background-image: url('http://www.optiksgaming.com/images/LOGObackground.png');
    background: #000000;
    }
    
    Edited the background in there - Nothing happened.

    Sooo, I am still a bit stumped. This style seems to have things setup a bit different from the usual around here... o_O
     
  11. Shelley

    Shelley Well-Known Member

    I'd suggest you go into the Style properties >> Header & Navigation >> Header add the image background path position and repeat in there.
     
  12. Shelley

    Shelley Well-Known Member

    did you apply the position and repeat in style properties? if not you need to apply this.

    If that still doesn't work try the following:

    Code:
    #header
    {
    background-image: url('http://www.optiksgaming.com/images/LOGObackground.png');
    background-position: left;
    background-repeat: repeat-x; }
     
    Wing likes this.
  13. Wing

    Wing Active Member

    Tried both of those methods, and still the background image is not showing :cautious:
     
  14. Wing

    Wing Active Member

    Update!

    Your code worked in the extra.css file.

    That dang extra.css file... always stirring up confusion :mad:
     
    Shelley likes this.
  15. Shelley

    Shelley Well-Known Member

    You'll soon familiarise yourself with it more you use it. :D

    BTW you may want to remove the text from the background header as it's clashing with the logo text.
     
  16. Wing

    Wing Active Member

    Yup, just reuploaded the image. Now time to figure a good way to make the nav links easy to see while on top of the new banner.
     
  17. Shelley

    Shelley Well-Known Member

    The following is the area you want to be looking at if your modifying the text. I tried to add a text-shadow: 0 0 2px white; to the class but it's still quite difficult to read, make it more prominent. I'm sure you'll find something that will expose them more, perhaps try different colour text.

    Code:
    .navTabs .navTab.PopupClosed .navLink { you css in here }
     
    Wing likes this.
  18. Wing

    Wing Active Member

    Great, I will begin fiddling around with it. BTW, how are you able to mess with my css code? Is it a browser plugin of some sort?
     
  19. EQnoble

    EQnoble Well-Known Member

    Firebug
     
    Shelley likes this.
  20. Wing

    Wing Active Member

    Looks snazzy.
     

Share This Page