MyBB Community Forums

Hi, I would like to know how to increase the width of the page. What i found out from the other forums is that you have to go to your theme,then edit the #container and in the width option increase it as desired. But it does not work, for me atleast.
I also tried coping the container files of themes that have full width like the blackbb theme
#container {
background: #080808;
width: 98%;
color: #9a9a9a;
margin: auto auto;
text-align: left;
padding: 5px;
or the pro navy theme
#container {
width: 96%;
background: #efefef;
border: 0px solid;
color: #000000;
margin: auto auto;
padding: 15px;
text-align: left; /* IE 5 fix */
But none of them worked.
Could someone help me out with this. I have been struggling with it for more than a week.

its likely the same setup as mybbgamer had. I needed to modify it to be fluid from its set width, and it was a bit more of a pain then i'd of liked. the css was simple though (the logo modifications, not so much XD)

youll probably notice a pattern of fixed widths in the css file. it more then likely applies to multiple sections of the theme in their individual portions of the css (navigation, header, footer, content, etc)

the easiest way was to locate the constant width (i think 908 was the mybbgamer one, but im guessing yours wont be exactly that) and then just running a search on them to locate each one and change it to a percentage. Once you do that, reload the page and (using chrome at least), right click the sections that dont display properly (still set to fixed width) and click inspect element. in there you should be able to locate the information you need to search for so you can modify that incorrect section.

you can see the original of what i started with if you go here: http://demo.mybbthemes.co.uk/index.php
and the fluid version of it here: http://zeroalpha.us/index.php

hope that helps,
--pyr0

These are the files with width 960

.mainwrap {
text-align:left;
margin: 0 auto;
font-size: .8em;
width: 960px;
}

#header .header_main {
background: #104d83 url(images/thecure/style/header_main.jpg) 0 0 repeat-x;
height: 126px;
width: 960px;
}

#navbar {
background: #0e1c2a url(images/thecure/style/nav_main.jpg) 0 0 no-repeat;
width: 960px;
height: 50px;
}

#container .footer_main {
background: url(images/thecure/style/footer_main.jpg) 0 0 no-repeat;
height: 18px;
width: 960px;
line-height: 1px;
}

What width should I change it to? I want it to be in such a way that on the left side it touches the end of the screen and on the left side there is a little space so that I can post a few ads.
Really liked your zero ads concept on your forum.

Appreciate it

for the width, set a specific percentage you'd like, say 100% or some such. then add a margin-left or right for 6% or however far off from the side youd like it to be. you may find it easier to wrap the whole site content in one container, set that to 100%, then inside of it, set a div for the left of the site at 6% and height 100%, then the second div for the actual content to 94% or auto and 100% height as well...

i know the mybbgamer came with individual sections for each, leaving me modifying 10 or so set widths to a specific percentage. i set them to a value, then did a full wrapper for it all for a different percentage (the main wrap ended up being removed, but it was 100%, then the content itself was set to 98% for a while and a max-width of 1600px. i could have done a main wrap of 100% and max-width of 1600px, a div running a fixed width (say, 100px for the ads) and a height of 100%, then a div to wrap the actual site content for auto to take up the excess up to the 100% or 1600px, whichever came first).

hope that explains it. its only 6p, but ive been up 36 hours now, so im a little loopy

if you need anymore help, let me know.
--pyr0

This is what I have Changed.
.mainwrap { text-align:left; margin: 0 auto; -size: .8em; width: 85%; (This Works Fine, No Problems here, Except that I have a avatar picture of the user in the header and it appears right in the middle,would like to move it to the extreme right.It moves automatically in Internet explorer, but am having problems with chrome)

This is the code of the avatar picture in my header(What should i change in here?)
#panel { background: url(images/thecure/style/panel_main.jpg) 0 0 no-repeat; width: 266px; height: 68px; float: right;}

#panel .panel_wrap { padding: 6px 6px 2px 80px; font-size: .9em; color: #FFFFFF;}


#panel { background: url(images/thecure/style/panel_main.jpg) 0 0 no-repeat; width: 266px; height: 68px; float: right;}

#panel .panel_wrap { padding: 6px 6px 2px 80px; font-size: .9em; color: #FFFFFF;}

NAVBAR(The problem over here is that I have the search & search button in here, so when i increase the percentage the search and the button move out of screen, also the background of the search button is transparent so if it is not aligned properly I get a black hole behind the search)
#navbar { background: #0e1c2a url(images/thecure/style/nav_main.jpg) 0 0 no-repeat; width: 90%; height: 50px;}

#navbar ul#nav { padding: 0 10px; margin: 0; list-style: none; float:left; display: block; width: 600px;}#navbar #search { padding: 8px 14px 0 0; float:right; width: 310px;}

#navbar #search .search_input_wrap { background: url(images/thecure/style/nav_search_input.jpg) 0 0 no-repeat; width: 238px; height: 30px; float: left;}

#navbar #search .nav_search_input { background: transparent; width: 200px; padding: 4px; border: 0; margin: 3px 3px 3px 30px; display: block;}

#navbar #search .nav_search_button { background: transparent url(images/thecure/style/nav_search_go.jpg) 0 0 no-repeat; width: 62px; height: 30px; float: right; padding: 0; margin: 0; border: 0; cursor: pointer;}

#navbar ul#nav li { margin: 0; padding: 18px 12px 0 10px; float:left;}

#navbar ul#nav li a { color: #203446; font-weight: bold; text-shadow: #FFFFFF 1px 1px 0; font-size: 1.1em;}

#navbar ul#nav li a:hover {color: #228ae7}

#container { padding: 0 0 16px 0; background: #203446 url(images/thecure/style/main_bg.jpg) 0 0 repeat-x;}

#container .container_wrap {background: url(images/thecure/style/container_wrap.jpg) 50% 0 no-repeat}

FOOTER (I am not able to get the footer_main to increase, I have tried 120%,160%,65% it still remains the same. Not sure if that was the right option)
#container .footer_main {
background: url(images/thecure/style/footer_main.jpg) 0 0 no-repeat;
height: 18px;
width: 100%;
line-height: 1px;
}

#footer {
border-top: 1px solid #30475c;
padding: 14px 0 20px;
}

#footer .footer_menu {
width: 250px;
background: url(images/thecure/style/footer_menu_main.jpg) 100% 0 no-repeat;
float: left;
}

#footer .footer_menu ul {
margin: 0;
padding: 0 0 10px 0;
list-style: none;

}

#footer .footer_menu ul li {
margin: 6px 14px 0 0;
padding: 0;
float: left;
clear: both;
width:232px;
}

#footer .footer_menu ul li a {
background: #0a1620;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 4px 6px 4px 32px;
display: block;
color: #8fb0cd;
}

#footer .footer_menu ul li a:hover{color:#228ae7}
#footer .footer_menu ul li a.bot_home {background: #0a1620 url(images/thecure/style/footer_links.gif) 3px -39px no-repeat}
#footer .footer_menu ul li a.bot_contact {background: #0a1620 url(images/thecure/style/footer_links.gif) 3px -1px no-repeat}
#footer .footer_menu ul li a.bot_archive {background: #0a1620 url(images/thecure/style/footer_links.gif) 3px -75px no-repeat}
#footer .footer_menu ul li a.bot_rss {background: #0a1620 url(images/thecure/style/footer_links.gif) 3px -111px no-repeat}

#footer .footer_content {
width: 690px;
background: url(images/thecure/style/footer_logo.jpg) 100% 20% no-repeat;
float: right;
padding: 40px 0 20px 0;
}
You can have a look at www.aviation-forum.com
Could you point out to me what changes I should make and in which sections please.
Thankyou for your help.
PS- If I want to add ads to it also like a banner on the right hand side and keep the header full so that the banner is underneath the header, what should I add and where?

Looks like everyone has given up? any solutions please reply. I have been checking this thread every 2 hours hoping for a reply and its been 2 days now.

@sheldon365

I have just visited your forum. Can you tell me how did you change the width of navabar and footer?

not solved
how to increase the navbar size

(2012-05-30, 02:15 AM)tamislam Wrote: [ -> ]not solved
how to increase the navbar size

It's an image, so you'll have to break it up into 3 parts (left, right, and main gradient). Add these into the global css.

After you've done that, change the value in your CSS from 600px to whatever you want (eg. 90%).

#navbar ul#nav {
    display: block;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0 10px;
    width: 600px;