Hi,
I'm trying to break away from the fixed width aspect
of my forum and would like for the container area and header image to scale 100% so that it looks well in different resolutions.
I'm no expert in CSS or HTML and I managed to design my theme by making trillions of minor changes here and there in the default MyBB theme. Can anyone please advise on how I would accomplish this?
Go to the themes global.css find the #container
and set width to 100%
or you may just be able to leave the width out have a play around.
You can't. The image has a fixed width, you can't scale it along with the container's width. It would look distorted.
(2010-10-23, 10:16 PM)faviouz Wrote: [ -> ]You can't. The image has a fixed width, you can't scale it along with the container's width. It would look distorted.
Is there any work arounds or suggested fixed widths to accomplish something similar to this?
You'd have to redo the whole header, considering it's an image right now. Make the white background in pure CSS, the little characters images as the logo and then line things up. Something like this for the CSS:
#header {
background: #FFF;
border: 4px solid #000;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
And the HTML:
<div id="header>
<div class="logo"><a href="http://example.com/mybb"><img src="http://example.com/logo.gif" /></a></div>
</div>
logo.gif being the transparent characters. But please note this is just an example, look up the actual MyBB templates and its stylesheet for the whole code.
Learn some HTML and CSS first if you're clueless on what to do. Either that, or stick with a fixed width. I recommend 960px which is widely supported by most monitors.
check out Zeroalpha.us - its running fixed width just fine with the header image scaling down as needed to fit a users screen. its set to a max-width of 1600px though, as that would scale the image to 97 or 100%. anything more would offset the image and content... in other words, youll need to remake the image and set a max and probably min width to keep the image from going beyond the size you created or below the size where itll look way too odd. on a large image like what you have there, it may not work right since the height will adjust a good amount to the width, unlike a typical header image.
hopefully that helps.