Remove sidebar widget from posts & posts page

  • Unknown's avatar
    cloudnineeventdesign · Member ·

    I want to remove the sidebar widget from both the page that contains the posts (“Resources” page) and on the individual posts page themselves. There is no Change Template option on the page you choose to be the posts page once you choose it.

    http://c9ed.com is the website that I’m referring to and I do have the Premium Plan w/ Custom CSS option. I am using the Harmonic Theme. Please help me with writing the CSS needed to achieve this!

    Thank you in advance.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    aakashpatelsite · Member ·

    Hi,
    I have visited your blog to remove sidebar widget just add following CSS to your code 

    .widget-area {
    display: none;
}

    Thanks,
    Aakash Patel

  • Unknown's avatar
    cloudnineeventdesign · Member ·

    @aakashpatelsite

    But I don’t want to remove it from the entire website, I just want to remove it from the page called “Resources,” containing my blog posts.

  • Unknown's avatar
    aakashpatelsite · Member ·

    Hi,
    To remove sidebar from the “Resources page”, just give id to that widget area as shown below. 

    <div class="widget-area" id="resourcewidget">
			<aside id="text-4" class="widget widget_text"><h1 class="widget-title">Headquarters</h1>			<div class="textwidget"><img src="https://c9ed.files.wordpress.com/2017/02/map_marker-svg.png" align="left">&nbsp;&nbsp;West Chester, PA
<br><br>
<img src="https://c9ed.files.wordpress.com/2017/02/3498db-phone-512.png" align="left">&nbsp;&nbsp;(484) 597-0229
<br><br>
<img src="https://c9ed.files.wordpress.com/2017/02/mail1.png" align="left">&nbsp;&nbsp;(email visible only to moderators and staff)</div>
		</aside><aside id="text-3" class="widget widget_text"><h1 class="widget-title">Hours of Operation</h1>			<div class="textwidget">Hours:
<br>
Monday: 9AM - 5PM
<br>
Tuesday: 9AM - 5PM
<br>
Wednesday: 9AM - 5PM
<br>
Thursday: 9AM - 5PM
<br>
Friday: 9AM - 5PM
<br>
Saturday: 9AM - 1PM
<br><br>
<small>*Hours are subject to change based on event schedule.</small></div>
		</aside>		</div>

    And then add following CSS 

    #resourcewidget {
    display: none;
}

    Thanks,
    Aakash Patel

  • kathrynwp · Staff ·

    cloudnineeventdesign – you don’t need CSS to hide widgets on specific pages – I’d suggest you use the Visibility setting on each widget instead:

    Widgets

    The conditions you’ll want to set on each widget are:

    Hide if page is Posts page, AND
    Hide if page is Post type – post

    Let me know how it goes.

    aakashpatelsite – widgets are dynamically coded in WordPress – it’s not possible to add arbitrary classes or IDs to them like you’re suggesting. If you’d like to continue answering questions in the forums, it would be helpful for you to get a better understanding of how WordPress works first, in order to assist folks in ways that are doable in WordPress.

  • kathrynwp · Staff ·

    If you find the page layout too narrow once you hide the widgets, just let me know and I can help you with the CSS needed to widen it up.

  • Unknown's avatar
    cloudnineeventdesign · Member ·

    @kathrynwp that was SUPER helpful… I have used that visibility feature before but totally forgot it existed (duh!). Thanks a million.

    To your second comment — it would be great to use CSS to widen the layout on the pages with hidden widgets AND full page templates. Please advise!!

  • kathrynwp · Staff ·

    @kathrynwp that was SUPER helpful… I have used that visibility feature before but totally forgot it existed (duh!). Thanks a million.

    You’re welcome!

    To your second comment — it would be great to use CSS to widen the layout on the pages with hidden widgets AND full page templates. Please advise!!

    To widen the posts page as well as single posts, you can give something like this a try:

    .blog .entry-main, .single .entry-main {
  width: 90%;
}
  • Unknown's avatar
    cloudnineeventdesign · Member ·

    @kathrynwp thanks, that works great!

    One more thing… the buttons on my home page display a white background color (you can see in the bottom right corner of the button before the shadow) instead of being transparent like the uploaded PNG image is made to be.
    I tried using CSS to give that image class a transparent background color but it didn’t work. Any ideas?

  • kathrynwp · Staff ·

    I took a look and your image is not actually on a transparent background, as you can see here:

    Instead of an image, have you considered, making the buttons with HTML & CSS?

    I wrote a post here about how to do that:

    A Call to (Button) Action

    You’d first add the HTML like this:

    <a class="button" href="MY-URL">Read more</a>

    Harmonic comes with a built-in button style, but it’s a white-border style. You’ll need to tweak it a bit so it’ll show up against the white post background:

    .post-20 a.button {
    border: 2px solid #D5E8F7;
    border-radius: 4px;
    color: #D5E8F7;
}

    Let me know how it goes.

  • Unknown's avatar
    cloudnineeventdesign · Member ·

    Took a bit of styling, but went really well! Thanks again for all your help.

  • kathrynwp · Staff ·

    Looks good! Feel free to start a new thread if you need help with anything else.

  • The topic ‘Remove sidebar widget from posts & posts page’ is closed to new replies.