Full Width Post for Oxygen Theme

To start with, I would create a child-theme.

https://codex.www.ads-software.com/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: https://alienwp.com/oxygen-child/
Author: AlienWP
Author URI: https://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
https://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.
https://www.suzettehuwae.com/fashion