This is an example of how to break out of the main content column. To do so, use the css classes “pull-1″ (to pull one column, such as the example below) and “pull-2″ (to pull all the way to the left side). If you’re using images, they should be 580 or 700 pixels wide (use style=”max-width:580px;” or style=”max-width:700px;” in the image tag) to line up with the grid columns. As long as the text before the image in your post is taller than the title on the left, then it looks snazzy like this:
You can also break out of the grid with text like so:
This is a blockquote pulled out by one column.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Doesn’t that look pretty?
I’m just starting my first wordpress blog and I love this elegant theme.
Now, I was trying to do the cool thing above with a ‘pull-2′ class in my img tag and I get an image that is located too far right and then stretched over to the left margin. What am I doing wrong?
My image is 700px wide and my class tags look v. similar to yours.
my website is here.
http://www.kaffematthews.com/kaffeblog/?p=57
please excuse some of the content on the site. It’s satirical.
Hi Kaffe, the problem was due to a bug in the Wu Wei theme CSS. I’ve fixed the bug, and uploaded it to the WordPress theme directory as version 1.2.3. You can wait until it’s approved before you can download it, or you can change the line in the style.css file yourself.
From:
.pull-2 {margin-left:-17.143em; width:58.334em;}To:
.pull-2 {margin-left:-17.143em; width:50em;}Jeff, many thanks for the fix!
Wow, this is a pretty theme indeed. Will use it for my next project. Thank you for sharing.
This is a comment example
Very nice and clean
I’m testing this theme
What happens when you have a ton of comments ?
Beautiful theme
Two digits in the count bubble
Hi Jeff,
I’m using your theme for my blog and I think it’s really great. I was just wondering how exactly to break out photos…I’m not hugely tech savvy and I’ve done my best but I still can’t work it out. Ideally I’d like my photos to stretch to the full length of the column. So I figure when you upload them you have to scale them to 700 pixels, but then I can’t work out how to shift them leftways a bit. Where would I find the section to change the CSS and do that pull thingy?
Doing a great job with your own website. Cheers!
also wondering if it’s possible to widen the posts at all?
Is there a way to change the header, date etc. color to black instead of gray? Thanks
Hello!
Just installed this theme couple of days ago. It`s great! Thanx.
But still, I have made some modyfications, like turned comment submission button into picture to fit the whole design etc.
Test comment
PS: the theme looks awesome, but not very readable on some places..
Hi Jeff,
I’m trying to break out of the grid with the images I use in my blog but I don’t know what to do. You wrote the following:
”To do so, use the css classes “pull-1″ (to pull one column, such as the example below) and “pull-2″ (to pull all the way to the left side)”
How do I have to use this classes? (I’m a css/php dummy). Do I have to custumize/adjust the index.php, page.php, the css style sheet or somethingelse? Or do I have to do something in my wordpress dasgboard?
Kind regards,
Arno
It’s fairly simple if detailed to explain. Check out my post on how to do exactly that. I’ve tried to keep it as simple as possible so please let me know if it’s not clear enough.
Breaking out of Wu Wei
Mike,
I was about to ask exactly the same question Arno did.
This template is splendid but I would really like to see the images extend to the whole width of the column.
An explanation as how to use the “pull-1″, “pull-2″ classes would be a God-sent, and I was hoping to find in the “Breaking out of Wu Wei”.
Alas, the link is broken.
Anticipated thanks for republishing, if you could,
Viorel George
I copied the text from the google cache of “breaking out of wu wei” and pasted it in pastebin. Here’s the link: http://pastebin.com/srwGgH0k
Hi,
I’ve been able to pull images to the left given the helpful instructions and links above.
Please could somebody provide me with slightly more detailed instructions of how to shift text or blockquotes to the left by changing the CSS as I haven’t managed it so far.
Thanks very much,
Naomi
Fantastic minimalist theme, typography usage is also great loving it ! Thanks for sharing.
Hi Jeff. I’ve just installed your template (v 2.x)..but i can’t display the full post inserted..
i.e.; click on Read more… –> 404 Not Found
Oops! This page does not exist. Maybe you can try searching for it again.
I LOVE Wu-Wei.
Thanks in advance.
Mario.
Greeting Jeff:
Like others, my client expressed an interest for your theme. The flash based site noted in this post’s header is being replaced.
I have looked and because of the numerous posts, may have missed the answer to this question.
Please accept my apologies if this is not the correct forum.
As I am re-creating a commercial site, is there a means where -for compensation-, your name and design tag in the lower left could be removed from the Wu Wei framework?
I mean no dis-respect, and wish to present a professional image for my client, paying for the privilege of using another’s work.
Thanks,
Terry