K2 Flexible Width

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.

  1. Make necessary backup to your theme header.php and style.css
  2. Open your header.php, replace the BODY start tag with <body class="flex <?php k2_body_class(); ?>" <?php k2_body_id(); ?>>
  3. 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%
    }
    
  4. Save and close both files.
  5. 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.

14 Comments

IngSiang

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.

Zeo

IngSiang, there’s an error (missing closing double quote) in your BODY tag.

IngSiang

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.

Zeo

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.

Paul

The closing double quote does not work if you copy and paste. Just overwrite it with a double quote of your own :)

Eric

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.

Arunn

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.)

metropol

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.

Zeo

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.

el barto was here

nice post men, was looking at the paulstamatiou.com k2 modification series, and didnt work… yours was fast and easy.

thankz

James Conroy-Finn

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!

Leave a Comment

(required)
(will not be published) (required)