The Studio Press Atmosphere Pro child theme is a minimalist design. As a minimalist theme, Atmosphere Pro is designed to only display its content in the Genesis full screen layout. Two frequently asked questions about Atmosphere Pro are, "How can I enable sidebars?" or "What plugin can I use to create a sidebar?"
Keep in mind that these questions are being asked about the fully featured Genesis Framework. You do not need a plugin. There are six layouts built into the Genesis Framework as depicted in the above image. The six layouts starting at the top left and moving clockwise are:
- Full Screen Content
- SideBar-Content
- Content-Sidebar
- Content-Sidebar-Sidebar
- Sidebar-Content-Sidebar
- Sidebar-Sidebar-Content
These layouts are always available to child themes. If a child theme does not display a specific layout, it is because the theme author decided to disable that particular layout. Theme authors can disable specific Genesis Framework layouts by unregistering them in the child theme's functions.php file. If you open and view Atmosphere Pro's functions.php file, you will see the following code around line 106:
To enable the sidebars and additional layouts in Atmosphere Pro, either comment out or remove the above code from functions.php.
Keeping the Home Page Full Width
Out of the box Atmosphere Pro forces full-width content for the entire site. Since you want to use sidebars, this needs to change. Comment out the following code in functions.php:
In most cases, users prefer to leave the Atmosphere Pro home page in full width mode. Since we commented out the full-width content in functions.php, we need to move this code to front-page.php:
Adding the Sidebar CSS
Since Atmosphere Pro is designed as a minimal full-width site, its style.css file has no support for sidebars. This support needs to be added back. The easiest way is to copy sidebar CSS from another Studio Press theme, in this case I'm using the CSS from Executive Pro.
First, look for the .site-inner css in style.css and overwrite what's there with the following code:
Next, add the following sidebar code to style.css:
Mobile CSS
The media query CSS below is from the latest Genesis Sample Theme. Merge the CSS below into the media queries for your theme and adjust it until it works for your situation.
This should all get you started on the right path. Since everyone has their own preferences, you'll have to further tweak the CSS to achieve the look and feel you desire, but at least you have the foundation.
I followed the instructions. I a newbie to html programming. I see the primary sidebar and the ability to select the different layouts which I did, but the sidebar is not showing up on my blog pages.
Any suggestions?
Hi Kathryn,
Did you select the sidebar layout as the default layout for the site?
If you want the sidebar layout for all of your individual blog posts, it’s best to select that layout as the site default. Then, as you want to add exceptions, choose an alternate layout for the exception pages.
Thanks Victor for your precious guide. Atmosphere Pro is really a fantastic theme but it lacks the sidebar which can be an important element for some websites. I follow your guide and I hope I can arrange for the responsive part. Great!
txs very much, was very clear —
Hi. Thank you very much for this, you’re talented and i appreciate you.
I followed the instructions, and I am still having trouble getting the sidebar to show up. Anyone able to help out with this?
Here’s the site I’m working on if that helps: http://ovationdesignbuild.com/
Thank you for this tutorial, it’s exactly what I was trying to accomplish, however after implementing the code the front page image disappears on mobile devices and in Interenet Explorer, as well as at random times in Chrome. I’m not sure if this is due to losing mobile responsiveness or not.
Any suggestions?
I moved the following to front page.php and got near perfect results in Chrome, I believe this is a CSS issue but have not figured it out.
//* Force full-width-content layout setting
//* add_filter( ‘genesis_site_layout’, ‘__genesis_return_full_width_content’ );
Thanks.
I have played with the only setting I changed on the sytle-front.css and it has not fixed the problem with the front page image not appearing in Internet Explorer/Edge or disappearing in Chrome. So It must not be a CSS issue. It’s also not loading the background image since making the changes in Internet Explorer.
Any help you can shine on why this is happening would be amazing.
Please post a link to your site.
http://www.blueridgeheritageproject.com/
The first thing I see is that your backstretch image is not accessible. You are using the wrong URL. The correct URL is http://www.blueridgeheritageproject.com/wp-content/uploads/2015/10/VachonChimney2.png. You are using: //www.brhp.wunderhost.com/wp-content/uploads/2015/10/VachonChimney2.png which routes to lcoalhost.
I’m so sorry, the images were stored in my cache, thus I didn’t think to check….I have chemo fog and should I inspected the elements first instead of looking at the css.
Have you had time to look into the media queries? I’m going to venture into that later this week or next, but am afraid I will make a mess of it.
Thank you for your time!
Teresa, I’ve viewed the site on Chrome, Safari, Firefox on Windows and Mac, as well as Edge on Windows 10. The site looks fine on all of the browsers. I use the Studio Press Responsive test site for viewing. All looks good. You may be experiencing a caching issue, but the site is working well. It’s a nice design. Good work!
Hi Victor,
Great stuff. Worked like a charm.
However, I noticed that my content no longer becomes responsive when enabling the sidebar. It doesn’t scale right when tested on mobile. I was wondering if you knew of any fixes for this and what information I should provide.
Here’s an example of a page on the website link:
http://www.flwaterdamagerestoration.com/water-damage-restoration-services/
Thanks in advance,
AJ.
I didn’t address responsiveness in the article. The CSS for mobile responsive needs to be created in the theme’s media queries. I’ll add a section shortly. I’m moving this site to a new server today. I’ll add the responsive CSS when the move is complete.
Hi,
Thanks very much for taking the time to explain all this.
Has there been any advance on the responsiveness issue?
I’ve set up as you instructed but the blog is no longer responsive.
I wasn’t planning on adding any media query code. This was only meant to get you started in the right direction. I said,
That includes mobile. If you need media query CSS, copy it from another studio press theme like the Genesis Sample theme.
Sorry I was refering to this quote. Thanks anyway.
“I didn’t address responsiveness in the article. The CSS for mobile responsive needs to be created in the theme’s media queries. I’ll add a section shortly. I’m moving this site to a new server today. I’ll add the responsive CSS when the move is complete.”
Please see the article. The media queries are now included.
Just wanted to say that this worked great for me. I would say delete the code
//* Force full-width-content layout setting
//* add_filter( ‘genesis_site_layout’, ‘__genesis_return_full_width_content’ );
and move it to the front-page.php. I tried commenting it out but that didn’t work for me. Delete it from functions pho and move to front-page.php worked perfect.
Also, the sidebar styling may not lay out how you want because the css code is from another child theme, but the fixes are easy and you just play with it until you get it to what you like.
Anyway, great post Victor. Spot on groundwork. Thank you.
Hello Victor.
Thank you for this topic!
I’ve tried this solution. But for some reason it only works for front-page in my case. If I create a new page from the default template, the primary widget area appears under main content. I’ve made a totally clean installation, but the result was the same.
Could you please recommend, where сan I check the appropriate settings?
Hello Roman,
Open style.css and go to line 728. Remove padding: 10% 20%; in the .site-inner rule.
Thank you Victor. It works!
I’m updating my site with Atmosphere Pro (you’ll be seeing my old site right now). Between the Studiopress thread and the further guidance above, these are fantastic instructions! Thank you!
Glad it helped Carrie.
Thanks a lot for this post, Victor. I remove the code from the functions.php. Now in my widget area appears the primary and secondary sidebar…but when I place some widgets in the widget there is nothing showing up at my blog. Maybe you can help me? 🙂
Fabian, Keep in mind that Atmosphere Pro is designed for full width content. The line following the code you removed, forces the full width content.
//* Force full-width-content layout setting
add_filter( ‘genesis_site_layout’, ‘__genesis_return_full_width_content’ );
You’ll need to remove this as well. However, you may be better off moving this code to front-page.php so the home page remains full width.
Thanks a lot Victor. 🙂
i asked a question on studiopress.com and he gave me a very simple and direct answer and even made it a blog post. Thanks a lot man. You’re a smart man! 😀