To start with, I would create a child-theme.
http://codex.wordpress.org/Child_Themes
Then start playing with the styling. The #content id is currently set to 62.667%, if you change that to 100%, your content area extends all the way to the right, but other elements shift, so you’ll have to also look at re-styling class “entry-header” “byline” , etc.
Thanks @roamingpro
Here’s a dumb follow-up question. When creating my child theme, do I retain the author, author url, and theme url from the original oxygen theme?
Like this:
Theme URI: http://alienwp.com/oxygen-child/
Author: AlienWP
Author URI: http://alienwp.com
Nevermind I figured that out. Now I just need to figure out where and how to change the #content id to 100%. Sorry, new at this!
It’s a little technical, and you need to know some about css. Review this page & some great links at the end of the article:
WordPress-CSS
You can check out these tutorials:
A beginners guide to customizing a WordPress site
But basically you create a style.css for your child theme, import the original css file (convered in the Child_Themes codex).
Then any element you want to modify, you list in your new child style.css file, and modify that style:
Regarding your content width: The original style for the #content id looks like this
#content {
float: left;
width: 62.66666666666667%;
margin: 0 0 30px 0;
}
to change the width to 100%, you would place this in your child theme:
#content {
width: 100%;
}
Again, this is just a start, lots of trial and error before things fall into place and you get comfortable with custom css styles. Good Luck!!
When I just change the #content width to 100%, it makes the post header bar and text full width, but not the photos, which are my main concern. I’m assuming I need to locate that line in the code and change it to 100% too? Or should I adjust the pixel dimensions. I opened style.css from my parent theme in dw and the #content is currently like this:
#content {
float: left;
width: 62.66666666666667%; /* 470 / 750 = 0.6266666666666667 */
margin: 0 0 30px 0;
}
am I on the right track? Think I’m looking at the wrong lines of code to change the photo width?
Actually I figured out it’s just the post header photos that are not full width. Everything else is good. Excuse me while I go find a needle in a haystack.
Found it!
Alright, so for anyone with Oxygen theme trying to make their posts full width and retain the left sidebar. Just stick this in your CSS and you’re good.
#content {
float: left;
width: 100%;
margin: 0 0 30px;
}
.entry-header {
float: left;
width: 100%;
}
.hentry .featured {
margin-bottom: 15px;
width: 100%
}
@katklopp,
That’s great! Can you figure a way to do that only on a certain page? Say, a page with a custom template that you can specify in the functions.php file?
Many thanks, Gabriel
@gabrielsolomon7: As per the Forum Welcome, please post your own topic.
Thank you for sharing that piece of code!!!
I notice that the header above the picture doesn’t go all the way to the end (it’s 738px and the pic is 750px, I think).
Any fix for that?
Thanks a lot for that piece of code @katklopp.
I am not used to tweak CSS stylesheets. Could you detail where I need to put that code in order to have full width posts? I now got something like this in style.css:
.page-template-fullwidth .content-wrap { width: 100%; }
#content {
float: left;
width: 100%;
margin: 0 0 30px;
}
with the rest of you code under .entry-header.
And I am sure that’s not the right way to go 🙂
Hello! I have actually another question:
i want to get rid of the whole left menu so i have more space for content
as i also want a slideshow on my home page.
But How do I get rid of the menu left, or.. Make left menu really small. just like
http://hyperreal.us/category/music/
I know a bit of css.
I hope someone can help me out 🙂
i.e. this page u can see that its cramped and doesnt allow me to make it bigger.
http://www.suzettehuwae.com/fashion
