Window Size Issue

[MajorKokosnuss]

If i am using full screen, everything is perfect :

http://prntscr.com/49i4gp

if i go in window mode i get this :

http://prntscr.com/49i4o1

is there any fix for this :O ?

[Dave]

We will not be able to help you without a direct link to your forum.

[MajorKokosnuss]

www.boomboomforums.com :)

[Max Taxable]

When I go full screen with FF 32, I get what we see in the second image you posted.

[Max Taxable]

And wow.... This image which you have hosted off site (3rd party) is almost 90% of your entire page load, coming in at a whopping 1.3 megabytes:

http://i61.tinypic.com/316p5bq.png

You should convert this image into a progressive jpeg and host it on your server, saving at least 1 megabyte of bandwidth. You can get the look without all the glut.

[MajorKokosnuss]

Do you know if there is a fix for the issue ?

[tbworld]

I am not the expert in this area, graphics are not my thing, but I believe you either need to go to a fixed vbulletin layout or use a column on the left and the right, instead of a fixed graphic. This method would also cut down on the image size as @Max Taxable has already indicated. There are threads here on vBulletin.org on how to setup the HTML. (They might be a bit difficult to find.) :( If you cannot find the threads, look at a few sites and examine the source HTML -- that should give you the presentation logic that you need. :)

You might try searching for the term "graphical borders", "graphic border".

[MajorKokosnuss]

Well i tryed that already, but my editing skills are horrible
i find nothing

[ozzy47]

You need to edit the stylevar, body_padding, found under the group Global, and set the left and right to auto.

[tbworld]

Add this to the bottom of your additional.css template. This might be what you are looking for. You still might l want to set a fixed width on your page.


.body_wrapper {
padding: none;
margin: 0 auto;
max-width: 960px;
}
Thanks @Ozzy47, I see that he posted a link, so I could check his .body-wrapper selector.

[MajorKokosnuss]

Still the same :O it changed to 0 when i press save

--------------- Added 1407183187 at 1407183187 ---------------

[QUOTE=tbworld;2509703]Add this to the bottom of your additional.css template. This might be what you are looking for.


.body_wrapper {
padding: none;
margin: 0 auto;
max-width: 960px;
}


Not working :s

[ozzy47]

Care to provide me with a admin account so I can see what is going on?

[MajorKokosnuss]

Sorry i am not giving out any administrative rights :S

[ozzy47]

Well then I guess I can not help no further. :(

[tbworld]

Still the same :O it changed to 0 when i press save

--------------- Added 04 Aug 2014 at 13:13 ---------------

[quote=tbworld;2509703]Add this to the bottom of your additional.css template. This might be what you are looking for.


.body_wrapper {
padding: none;
margin: 0 auto;
max-width: 960px;
}
Not working :s

Did you add it to the correct style?

[MajorKokosnuss]

Yep i did

[ozzy47]

Then you need to get in contact with your style developer and have them sort it, as the things that should be working are not. :confused: :confused:

[MajorKokosnuss]

Well, this is the default style :P i made there some changes :) in the default style (additional css)

[ozzy47]

Hmmm, then tbworld's suggestion should have worked, lets try this, add this to your additional.css:

.body_wrapper {
padding: none !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 960px;
}

[MajorKokosnuss]

Well i guess the wrapper is not the problem :O

i guess the blue thing above is making the trouble

//Edit:

Because the wrapper is okey but the blue thing above is still changing

[tbworld]

This is what is currently showing on your page,

.body_wrapper {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px;
margin-left: 295px;
max-width: 1188px;
padding: 10px 20px;
}


If you added it to the bottom of your additional.css template. I would be seeing the CSS code I gave you. You may have an error in your CSS, so it is ignoring the block of CSS I gave you.

[MajorKokosnuss]

well, i already have .body_wrapper defined

but why is the wrapper the issue :O ?

--------------- Added 1407184145 at 1407184145 ---------------


/*
.body_wrapper {
padding: 10px 20px 10px 20px;
background: rgb(255, 255, 255) none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
max-width: 1188px;
margin-left: 295px;
}*/

.body_wrapper {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px;
margin-left: 295px;
max-width: 1188px;
padding: 10px 20px;
}



this is now in my css

[ozzy47]

Well first off, why do you have body_wrapper defined twice?

[MajorKokosnuss]

Well first off, why do you have body_wrapper defined twice?

it is not defined twice :P

the first one is out "/* */"

[tbworld]

First of all, the code I gave you should have been placed on the bottom and you should have not commented out your body wrapper. You are not allowing the CSS to cascade.

I can easily view the active CSS, so If you would have left the CSS I gave you on the page then I could have examined what the problem was. I cannot help if you do not follow my steps. Sorry :(

[ozzy47]

Well duhh, lol sorry. :)

Do you have .navbar defined in your additional.css?

[MajorKokosnuss]

My current css:



html {
background: url("http://i61.tinypic.com/316p5bq.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.logo-image {
clear:both;
display:block;
float:none;
text-align:center;
}

.postbitlegacy .userinfo {
float: left;
position: relative;
width: 180px;
padding: 2px 10px 5px;
font-size: 11px;
display: block;
background: #f2f6f8 none;
clear: both;
width: 210px;
}

fieldset, img {
border: 0;
max-width: 200px;
}

.navtabs li a.navtab {
border-top: 1px solid #Cedfeb;
border-left: 1px solid #Cedfeb;
display: block;
background: #0099FF;
min-width: 60px;
width: auto !important;
width: 60px;
text-align: center;
color: #ffffff;
font: bold 12px Arial, Calibri, Verdana, Geneva, sans-serif;
text-decoration: none;
line-height: 26px;
padding: 0 10px;
}

.thread_info h4 {
font-size: 12px;
font-weight: bold;
color: rgb(255, 255, 255);
background: #0099FF;
_background-image: none;
border: 1px solid #606060;
margin-top: 5px;
-moz-box-shadow: -2px 2px 2px #c8c8c8;
-webkit-box-shadow: -2px 2px 2px #c8c8c8;
box-shadow: -2px 2px 2px #c8c8c8;
}

.postbit .posthead, .postbitlegacy .posthead, .eventbit .eventhead {
background: #0099FF;
_background-image: none;
border: 1px solid #5A7F97;
clear: both;
display: block;
float: left;
width: 100%;
color: #ffffff;
margin: -1px -1px 0;
font: normal 12px Tahoma,Calibri,Verdana,Geneva,sans-serif;
padding: 4px 0;
}

.blockhead {
font: normal 12px Tahoma, Calibri, Verdana, Geneva, sans-serif;
color: #ffffff;
background: #0099FF;
_background-image: none;
padding: 4px 10px 4px 10px;
border: 1px solid #5a7f97;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

.newcontent_textcontrol {
background: #0099FF;
_background-image: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 3px 8px #dddddd;
-webkit-box-shadow: 0 3px 8px #dddddd;
box-shadow: 0 3px 8px #dddddd;
font: normal 14px Arial, sans-serif;
color: rgb(255, 255, 255);
padding: 4px 15px 4px 15px;
border: 0;
display: block;
float: left;
clear: right;
}
body a {
color: #417394;
text-decoration: none;
}

.forum_info .blockhead {
font-size: 12px;
font-weight: bold;
color: rgb(255, 255, 255);
background: #0099FF;
_background-image: none;
border: 1px solid #606060;
margin-top: 5px;
-moz-box-shadow: -2px 0 2px #c8c8c8;
-webkit-box-shadow: -2px 0 2px #c8c8c8;
box-shadow: -2px 0 2px #c8c8c8;
}

.navtabs li:first-child {
border-left: 0px;
border-right: 0px;
}
.threadlisthead {
font: bold 12px Tahoma,Calibri,Verdana,Geneva,sans-serif;
margin: 0;
width: 100%;
border: 1px solid #5a7f97;
background: #0099FF;
color: #ffffff;
float: left;
display: block;
-moz-border-radius-topright: 0px;
-moz-border-radius-topleft: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
-moz-box-shadow: -2px 2px 2px #c8c8c8;
-webkit-box-shadow: -2px 2px 2px #c8c8c8;
box-shadow: -2px 2px 2px #c8c8c8;
position: relative;
}

.forumhead {
background: #0099FF;
_background-image: none;
padding: 0;
font: bold 12px Arial, Tahoma,Calibri,Verdana,Geneva,sans-serif;
color: #ffffff;
clear: both;
margin-top: 8px;
float: left;
border: 1px solid #5a7f97;
width: 100%;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
}

.footer {
clear: both;
margin-top: 15px;
text-align: right;
display: block;
-moz-box-shadow: -2px 2px 2px #c8c8c8;
-webkit-box-shadow: -2px 2px 2px #c8c8c8;
box-shadow: -2px 2px 2px #c8c8c8;
background: #089CFF;
padding: 5px 0px 5px 0px;
border: 1px solid #425769;
color: ;
font: normal 13px Tahoma, Calibri, Verdana, Geneva, sans-serif;
}

.wgo_block .blockhead {
font-size: 12px;
font-weight: bold;
color: rgb(255, 255, 255);
background: #089CFF;
_background-image: none;
border: 1px solid #606060;
}
* { -moz-box-shadow: none !important; }
* { -webkit-box-shadow: none !important; }
* { box-shadow: none !important; }

* { -moz-border-radius: 0px !important; }
* { -webkit-border-radius: 0px !important; }
* { border-radius: 0px !important; }

.above_body {
background: transparent;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

/*
.body_wrapper {
padding: 10px 20px 10px 20px;
background: rgb(255, 255, 255) none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
max-width: 1188px;
margin-left: 295px;
}*/

.body_wrapper {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px;
margin-left: 295px;
max-width: 1188px;
padding: 10px 20px;
}

.navtabs ul {
position: absolute;
top: 26px;
left: 0px;
width: 100%;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-right: -80px;
direction: ltr;
border-top: 10px;
}

.navbar {
position: relative;
height: 53px;
background: #089CFF;
margin: 10px 0px 0px 0px;
color: rgb(255, 255, 255);
font: 11px Arial, Calibri, Verdana, Geneva, sans-serif;
margin-left: 295px;
margin-right: 310px;
margin-bottom: -20px;
}

.navtabs {
padding: 0px 0px 0px 20px;
height: 26px;
background-color: #089CFF;
background: transparent;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
}

.navtabs li.selected a.navtab {
color: #FFFFFF;
background: transparent;
position: relative;
padding-top: 4px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
}

.glow-admin{
color: #FF0000;
font-weight: bold;
text-shadow: 0px 0px 6px #FF0000;
background: transparent url("http://i59.tinypic.com/15dntbn.jpg") no-repeat;
}

.glow-forumdonator{
color: white;
font-weight: bold;
text-shadow: 0px 0px 6px #FFFF00;
}

.glow-supergm{
color: #0015FF;
font-weight: bold;
text-shadow: 0px 0px 6px #00F3FF;
}

.glow-gm{
color: #AB00FF;
font-weight: bold;
text-shadow: 0px 0px 6px #FF00EB;
}

.glow-wzeditor{
color: #007215;
font-weight: bold;
text-shadow: 0px 0px 6px #00FF2F;
}

.glow-graphicsdesigner{
color: Black;
font-weight: bold;
text-shadow: 0px 0px 6px #DAFF00;
}

.glow-donation{
color: white;
font-weight: bold;
text-shadow: 0px 0px 6px #FFFF00;
}

.glow-banned{
color: Grey;
font-weight: bold;
text-decoration: line-through;
text-shadow: 0px 0px 6px Grey;
}

.glow-member{
color: Grey;
font-weight: bold;
text-shadow: 0px 0px 6px #58FAF4;
}

.glow-normal{
color: Black;
text-shadow: 0px 0px 0px Black;
}

.glow-manager{
color: cyan;
font-weight: bold;
text-shadow: 0px 0px 6px #FF00FF;
}

[ozzy47]

Ok comment out the body_wrapper, and navbar, and add this at the bottom:

.navbar {
background: none repeat scroll 0 0 #089cff;
color: rgb(255, 255, 255);
font: 11px Arial,Calibri,Verdana,Geneva,sans-serif;
height: 53px;
margin: 10px 310px -20px 193px;
position: relative;
}

.body_wrapper {
background: none repeat scroll 0 0 rgb(255, 255, 255);
border-radius: 5px;
margin-left: auto;
margin-right: auto;
max-width: 1188px;
padding: 10px;
}

[MajorKokosnuss]

Edit / sry double posted >.<

[ozzy47]

Read my post above your last one. :)

[MajorKokosnuss]

Added :) but it is still not working :S

[ozzy47]

Looks fine to me now.

[ozzy47]

Here is a screenshot.

[MajorKokosnuss]

http://prntscr.com/49keww

http://prntscr.com/49kesc

// EDIT

http://prntscr.com/49kfdl
http://prntscr.com/49kfj7

[ozzy47]

Hmmm, what is the screen resolutions for the two screenshots?

[MajorKokosnuss]

1919x1010 (full window mode and just the stuff between under the URL and above the taskbar)

and for the small window if i change the size the forum mess up

and my pc has 1920x1080

[ozzy47]

Ok replace what I said to do with this:

.body_wrapper {
background: none repeat scroll 0 0 rgb(255, 255, 255);
border-radius: 5px;
padding: 10px;
margin-left: 200px;
margin-right: 200px;
}

.navbar {
background: none repeat scroll 0 0 #089cff;
border: 0 solid rgb(255, 255, 255);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
color: rgb(255, 255, 255);
font: 11px Arial,Calibri,Verdana,Geneva,sans-serif;
height: 53px;
position: relative;
margin-left: 200px;
margin-right: 200px;
}

[MajorKokosnuss]

Thanks ! worked but is there a way to fix this ?

http://prntscr.com/49kqtj

And Can i ask you a few more questions here ? or do i have to start a new topic

[ozzy47]

Fix what the space inbetween the navbar and the forums?

[MajorKokosnuss]

Yep :)

[ozzy47]

Add this to the .navbar:

margin-bottom: -10px;

[MajorKokosnuss]

Do you know maby why <center> / </center> and <br> is not working in postbit_legacy ?

Because i can't add there spaces or center the user informations.

And uhmm to resize my user rank image i added this code:

fieldset, img {
border: 0;
max-width: 200px;
}

but now is my website logo also that small :S

[ozzy47]

Do you know maby why <center> / </center> and <br> is not working in postbit_legacy ?

Because i can't add there spaces or center the user informations.

And uhmm to resize my user rank image i added this code:

fieldset, img {
border: 0;
max-width: 200px;
}

but now is my website logo also that small :S

Not really, I don't see any posts on the site to look at.

[MajorKokosnuss]

<a href="http://boomboomforums.com/showthread.php?2-Forum&p=2#post2" target="_blank">http://boomboomforums.com/showthread...orum&p=2#post2</a>

[ozzy47]

Ok for the postbit, try adding this to your additional.css

/* center avatar, username, title, rank in postbit legacy 4.0.1 */
.postbitlegacy .userinfo .username_container, .postbitlegacy .userinfo .rank, .postbitlegacy .userinfo .usertitle {text-align:center;}
.postbitlegacy .userinfo .postuseravatar, .postbitlegacy .userinfo .postuseravatar img {float:none; text-align:center;}
.postbitlegacy .userinfo .usertitle {display: block; float:none; text-align:center; clear: both;}

[ozzy47]

And why change the user ranks via css? You should load the size image you want to be there.

[cellarius]

Do you know maby why <center> / </center> and <br> is not working in postbit_legacy ?

Because i can't add there spaces or center the user informations.
1. There are no center or br tags present.
2. You should not use them at all. Use CSS on existing elements to create the effect you want.

And uhmm to resize my user rank image i added this code:

fieldset, img {
border: 0;
max-width: 200px;
}

but now is my website logo also that small :S
Well, yes, of course. Your css sets all fieldsets and images to a max-width of 200px, globally. You need to clearly specify what elements to use it on - for example:
.ranks img { ... }

BTW: Are you German?

[MajorKokosnuss]

Somehow the extra user informations are not centerd :O

--------------- Added 1407189351 at 1407189351 ---------------


BTW: Are you German?

Yes :)

[ozzy47]

Ok do this:

.postbitlegacy .userinfo .userinfo_extra {
text-align: center;
padding-left: 30px;
}

[MajorKokosnuss]

Thanks :)

Uhmm i have fixed the Logo and Rank Image issue :) And thanks alot for your help <3<3

[ozzy47]

Not a problem, glad to help. :)

[Max Taxable]

Sorry i am not giving out any administrative rights :SThis is understandable, however when you see the word "Advisor" under someone's name here, they are trustworthy and your credentials are safe with them.

Understand that when asking for help here, you are using people's time free of charge, on their own volunteer. It does behoove one to try to cut that time borrowed as much as possible - that is if you really respect volunteer help.

It doesn't hurt either, to at least "like" a person's post who has bailed you out of a jam.

There are alot of very trustworthy and capable, competent people here who volunteer their time helping folks like you out, and who ask nothing at all in return.