Board Logo Align all the way to the left?

[Wing]

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,

 

[LukeFisher]

Hey mate,

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

EDIT: never mind I see your issue.

 

[Wing]

Hmm, thats interesting. Yes here is my view:

 

[LukeFisher]

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=""/>

 

[EQnoble]

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,

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

#header {
    background: url("http://www.optiksgaming.com/forums/styles/proDVGFX/imageset/FORUMLOGO.png") repeat scroll 0 0 transparent;
}

 

[Wing]

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

#header {
    background: url("http://www.optiksgaming.com/forums/styles/proDVGFX/imageset/FORUMLOGO.png") repeat scroll 0 0 transparent;
}

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

 

[Shelley]

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

#header {
    background: url("http://www.optiksgaming.com/forums/styles/proDVGFX/imageset/FORUMLOGO.png") repeat scroll 0 0 transparent;
}

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]

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.

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]

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!

I just woken up EQnoble was the help. Style is looking great btw. Doing a great job with that one.

 

[Wing]

I just woken up EQnoble was the help. Style is looking great btw. Doing a great job with that one.

Appreciate it! Its getting there...

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:

#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:

/* 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...

 

[Shelley]

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

 

[Shelley]

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:

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

 

[Wing]

Tried both of those methods, and still the background image is not showing

 

[Wing]

Update!

Your code worked in the extra.css file.

That dang extra.css file... always stirring up confusion

 

[Shelley]

Update!

Your code worked in the extra.css file.

That dang extra.css file... always stirring up confusion

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

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

 

[Wing]

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

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

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.

 

[Shelley]

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.

.navTabs .navTab.PopupClosed .navLink { you css in here }

 

[Wing]

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?

 

[EQnoble]

Firebug

 

[Wing]

Firebug

Looks snazzy.