To those that want to implement back the flexible width on K2, here’s a quick modification for it. Flexible width option was removed from the code base since revision 106. Some might find this useless but for others it might come in handy.
Make that page flexy again
Follow this simple step and you’ll get back that flexible width.
- Make necessary backup to your theme header.php and style.css
- Open your header.php, replace the
BODYstart tag with<body class="flex <?php k2_body_class(); ?>" <?php k2_body_id(); ?>> - Open your style.css and at the end of the style sheet (or anywhere that’s suitable) add the following selectors:
body.flex #page { width: 98% } body.flex #primary { width: 65% } body.flex .secondary { width: 25% } - Save and close both files.
- View your blog and see whether the changes takes effect.
Need help?
If you are not sure what you doing, feel free to ask someone for help.
Hello, I saw your technique from the K2 Wiki, and it’s much appreciated. However, there’s an error. The white background(of the post area and sidebar) dissappeared, leaving behind the grey background only. By the way, I am running the latest version of K2 0.9.1.
And I would like to know if there’s a way for me to fix the width at around 780 wide? I am a beginner, thanks.
IngSiang, there’s an error (missing closing double quote) in your BODY tag.
What do you mean? I am sorry, I know it might something very simple but I thought it’s closed with the >> at the end of the line?
I copied the above : †>
What should be added? I am sorry for my erm, noob.
There’s nothing wrong with copy paste the above code. It just there’s some problem. Just view source from your browser and you know what I mean.
[...] Put the Flexible Width back into the K2 theme. I use a 19″ and a 27″ Widescreen LCD’s at home so I like to have my website take up a reasonable amount of space. I also use a 12″ notebook so it makes sense to have the screen as wide as possible rather than high. I currently have it set to about 80% width which isn’t too bad. [...]
The closing double quote does not work if you copy and paste. Just overwrite it with a double quote of your own :)
I’m using the 3columnK2 but I’m having trouble with the whole thing. I would like it to remain a fixed width but I would like the width to be 1000px. I would also like to narrow the width of the middle column and widen the far right column. I don’t have any formal training in php or css. I’m trying to teach myself as I go. I’ve been able to accomplish all of this with other themes but not with this. What am I doing wrong? Thanks for the help.
in the recent K2 version, the flex class works once we remove the ‘;’ next to the numerical values in each of the style lines (i.e. take out the’;’ after 98% in the above suggestion etc.)
Hi.
Got here from this other post.
The hack worked for me (K2 0.95 RC1).
I don’t know CSS and can’t say if the “anywhere that’s suitable” remark in step 3 makes any sense. However, the hack did NOT work when I placed the body.flex selectors below other existing body.page things. It DID work when I placed body.flex at the end of style.css.
Thanks.
Since it’s a Wiki, you can contribute by editing that page. I haven’t tested that hack for ages on K2. I’ll look into it.
nice post men, was looking at the paulstamatiou.com k2 modification series, and didnt work… yours was fast and easy.
thankz
[...] 找到一篇文章有链接到这里 http://zeo.unic.net.my/notes/k2-flexible-width/ 这里面就有说明如何修改 [...]
[...] 改用很多人推薦的K2，但是因為我不喜歡固定寬度的，所以用了K2 Flexible Width的改法，改成浮動寬度。因為我只有1024跟1280的環境可以測試，所以請有1650或1920的長輩們看看效果如何再跟我講。 [...]
This hack works in terms of making the page div fluid but the floating primary and secondary divs don’t move properly when the window is resized. You end up with loads of empty space on the right!