• 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?

Wing

Active member
#1
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,
 
#4
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

Well-known member
#5
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....
Code:
#header {
    background: url("http://www.optiksgaming.com/forums/styles/proDVGFX/imageset/FORUMLOGO.png") repeat scroll 0 0 transparent;
}
 

Wing

Active member
#6
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;
}

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

Shelley

Well-known member
#7
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;
}
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

Active member
#8
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

Well-known member
#9
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

Active member
#10
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... (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
 

Shelley

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

Shelley

Well-known member
#12
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; }
 

Shelley

Well-known member
#15
Update!

Your code worked in the extra.css file.

That dang extra.css file... always stirring up confusion :mad:
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.
 

Wing

Active member
#16
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.
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

Well-known member
#17
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

Active member
#18
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?