I've got two questions about template stuff.
1) Why is it that 6A does not ship MT with a "width of 100%" or "full screen" option? I have never understood forced width designs, I really would prefer an "in the box" option to do this without resorting to tweaking of templates/css/etc...
2) With the redesigned templates in 4.2 beta's - where do I need to go in the css to change the width of the overall blog to 100%?
Thanks.
P.S. I like these new forums - they look so much cleaner than the old Invision stuff 6a was using. Good job (although preview and edit would be nice).
Er, the one I'm using is minimalist grey.
I have played with these before to try and get the main column (alpha) to stretch whilst maintaining the widths of the sidebar (beta and gamma) and never managed to work it out using just CSS changes.
What I ended up doing was going back to the old school and changing the layout mechanism to tables! It may not have been optimal, but it gave me the look i was after.
I've since changed my site many times and am fairly happy with just having a fixed with alpha as there's just too many other layout pieces that will need changing.
If you're convinced you want the 100%, then tables is certainly the easiest way to go, but you will be making lots of amendments to lots of templates. But just becuase I couldn't get it via CSS, doesn't mean that someone else can't!
Hello Joe!
Glad you asked this question. What you'd like to do it very simple with css!
When using a classic blog template set and theme and the layout is set to Wide-Thin-Thin (default)...
Add this to your Stylesheet index template after the two @import lines:
header-inner, content-inner, footer-inner {} .layout-wtt #alpha { width: 100%; } .layout-wtt #beta { clear: both; } .layout-wtt #beta, .layout-wtt #gamma { width: 50%; position: static; left: 0; right: 0; }
Or if you're feeling really crafty...
Update the theme stylesheet to contain ad additional layout:
Find the line starting with "layouts:" and add the new layout "layout-w-b" for Layout-Wide-Bottom (you can call it whatever you want!) so that it will look like this:
Then go to Design > Styles, choose the them, and choose the new layout you've just added.
Edit your Stylesheet index template and add the following after the @import lines:
/* Layout-Wide-Bottom: display the sidebars below the main content */ .layout-w-b #header-inner, .layout-w-b #content-inner, .layout-w-b #footer-inner { width:100%; } .layout-w-b #alpha { width: 100%; } .layout-w-b #beta { clear: both; } .layout-w-b #beta, .layout-w-b #gamma { width: 50%; position: static; left: 0; right: 0; }Save the template and rebuild your blog.
Easy?
OK, I re-read your remark. I think you misunderstood my original post (or I wasn't clear enough). Basically I was using two column, wide/thin, and I wanted to expand all of THAT to 100% width, not just one column, and put the rest underneath.
I'm also curious to know why 6A does not ship an option with the default css/templates that gives me a 100% width. Why do I have to go through all this to use all the screen real estate?
OK, I re-read your remark. I think you misunderstood my original post (or I wasn't clear enough). Basically I was using two column, wide/thin, and I wanted to expand all of THAT to 100% width, not just one column, and put the rest underneath.
I'm also curious to know why 6A does not ship an option with the default css/templates that gives me a 100% width. Why do I have to go through all this to use all the screen real estate?
Beau, this is what I'm trying to do. Please forgive the mis communication in the first message, I probably should ahve been clearer.
http://img294.imageshack.us/img294/29/fullscreenta8.png
I must stink at css. I can't figure out how to do this
It was easier in earlier versions, but I can't find anything on MT 4 templates on how to do what I want to do in the screen capture. Perhaps this should be made easier.
I must stink at css. I can't figure out how to do this
It was easier in earlier versions, but I can't find anything on MT 4 templates on how to do what I want to do in the screen capture. Perhaps this should be made easier.
Beau, this is what I'm trying to do. Please forgive the mis communication in the first message, I probably should ahve been clearer.
http://img294.imageshack.us/img294/29/fullscreenta8.png
Well, I'm using just two columns - wide thin. I changed your css code from wtt to just wt, which I believe is the right code. The problem is it put the right hand column content underneath the main column. Either I did it wrong, or it's something else.
Hi Joe, the width is controlled by the containing div "content-inner". If you are using the universal website template you can add a style definition after the @import tags in the stylesheet to correct the width to your liking:
header-inner, #main-navigation-inner, #content-inner, #footer-inner {width:100%;}You'll probably need to tweak the widths of the other columns but hey;-)
Hi guys,
I'm having exactly the same problem. My blog is a fixed width; 940 or thereabouts. I'm using wide-thin-thin, minimalist red. I tried both the suggestions given here, first the suggestion (#1) given by Beau Smith, which caused my alpha column to become 940px wide, pushing the beta and gamma columns to the bottom of the page. There was still lots of white space on either side, as my browser window is about 1200px wide. Then I tried the suggestion given by dug, which got me back to square one: the blog is still 940px. What next?
Mary
P.S. If you'd like to view it, my blog is at http://llandryn.net/blog
I figured this out. In case anyone's still checking this thread for a solution, I figured out how to get this working for either a two-column wide-thin layout or a three-column thin-wide-thin layout. I couldn't get it to work with a three-column wide-thin-thin layout, no matter what I tried. I'm using a t-w-t layout now, check it out: http://llandryn.net/blog
First I had to hand-edit the screen.css file in mt-static/themes/minimalist-red. There were several places in there where a 940px or 938px width was hard-coded. I changed all of them to 100%. Then I used design-->templates to edit the stylesheet. I added these lines below the import lines:
.layout-twt #alpha { width: auto; margin-right: 380px; }
.layout-twt #beta { border: 1px solid #CCC; width: 190px; position: absolute; left: 5px; }
.layout-twt #gamma { border: 1px solid #CCC; width: 190px; position: absolute; right: 5px; }
I added the borders to the sidebars just to set them off a bit. Using left: 5px and right: 5px instead of 0px and 0px gave the sidebars small margins so the borders show all the way around.
There's only one strange thing happening: in posts with photos, the alpha column won't shrink thinner than the photos, so if you squeeze your browser window down the sidebar on the right will move over the top of the alpha column.