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 (but not aligned left or right) 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