stxmarketing

You’re welcome, and thanks for marking the thread “resolved”.

You can edit the style declarations above to take up 100% of the width.

.featured-wrapper {
	float: left;
        width: 100%;
}

.content-wrap {
	float: left;
        width: 100%;
}

However, when you do so the “featured post images” won’t automatically adjust, their size is set by the theme to be the size it is. I’d have to do a little more research to figure that out.

For my site I didn’t bother, since I do use the Secondary widget area for my shopping cart pages.

First, create a child theme. Search codex.www.ads-software.com for how to do that.

The sidebar on the right is the “Secondary” sidebar in the Oxygen Theme.

If you view the source code on a page with items in that widget location, you’ll see that they are placed inside a div tag that looks like this:

<div id="sidebar-secondary" class="sidebar">

So, you’ll edit the Child Theme style.css, or use the “Custom CSS” Jetpack plugin, and set this id to not display at all:

#side-bar-secondary {
  display: none;
}

That just collapses the space used to nothing. The second part of the puzzle is to get your content to USE that extra space.

You can do that within the style.css as well:

.featured-wrapper {
	width: 100%;
}

.content-wrap {
	width: 100%;
}

That’s a separate question, probably should start another thread for that, but yes, you can control that on a post-by-post basis, editing the permalink, or by going to Settings, Permalinks and picking a site-wide preference. Pages (as opposed to Posts), default to using a name rather than a post querystring.

If I answered your original question correctly, please mark the thread “resolved” so anyone else searching in the future can see there is a solution at hand.

Thanks!

On the latest Oxygen theme, there isn’t CSS for this. You indeed must edit php. That being said, please read up on creating a child theme, it’s not that hard. Your edits will be done to your child theme, so that when your main Oxygen theme is updated down the road, you won’t lose the edits you’re about to make! Go to codex.www.ads-software.com and search for Child Theme, there is a step-by-step. Please do this before trying any php or css edits. You’ll thank me later by taking the time now.

So, that done, you will edit either the Front Page Page template, or the featured content template. I’m guessing the featured content template, that’s what I did at stxmarketing.com to add my welcome blurb.

Appearance, Editor, pick featured-content.php.

Then, between these lines of code:

</div><!-- #slider-nav-->

	</div><!-- .featured-wrapper-->

..you can add your own stuff. Put it in an div with a class, and you can define that class to control the look and feel.

Something like this:

</div><!-- #slider-nav-->

<div class="myBlurb">Welcome to my site...</div>

	</div><!-- .featured-wrapper-->

You would then edit the child theme’s style.css to define a class for “myBlurb”. Or if you’re using the “Customize CSS” plugin, part of Jetpack, you can define the class there.

If you’re running the Jetpack and have enabled the Custom CSS, you can add this to it. That worked for me.

.featured-wrapper {
	float: left;
}

.content-wrap {
	float: left;
}

Ordinarily, in the main style.css, these classes float right to force them to the right of any sidebar you have loaded on the left.

You have two main “content” areas, the “content-wrap” class is used for pages, posts, and on the main featured content page, for Recent Articles etc. However, the featured posts with the slider live inside the “featured-wrapper” class so you have to float that left as well.

Important note: if you add items back into the Primary Widget area, they’ll appear to the RIGHT now of your main content. So the “float” attribute acts as a “swap” or “flip-flop” for where the widget will appear.

That’s fine for my purposes, but if you want to actually completely remove the sidebar from the markup and have your content then act “full width”, that’s another question!

Nothing like answering your own question as soon as you post it.

Adding this to the Custom CSS did the trick for me.

.featured-wrapper {
	float: left;
}

.content-wrap {
	float: left;
}