Masking widget

HTML & CSS
1

Hi,
I am very new to websdesign and for the first time I am strying to build my website. I am trying to hide the sidebar on the left on the homepage and the about page. How can I do that? I appreciate if someone can help me. Here is the eb and the css:
http://www.memastudio.ca/
/*
Theme Name: Mahsa
Version: 1.0
Theme URI:
Description: Custom for memastudio.ca Twentytwelve child theme.
Author: memastudio.ca
Author URI: http://memastudio.ca
Template: twentytwelve
*/

/* Import layout */
@import url(…/twentytwelve/style.css);

/–visually hide site title but keep SEO –/
.site-title { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE7 */ clip: rect(1px, 1px, 1px, 1px); }

/*
At 1060px ( but could be 1200px )

content
320/1060*100=30.1886792453

slideshow
500/1060*100=47.1698113208

padding left and right for slideshow
30/1060*100=2.83018867925

sidebar
180/1060*100=16.9811320755
*/

.site-header { margin-bottom: 0; padding: 12px 0;
}
.site-logo { text-align: center; }
.entry-content img, .comment-content img,
.widget img, img.header-image,
.author-avatar img, img.wp-post-image { border-radius: 0; box-shadow: none; }

.site-content article { border: 0; }

#respond form p.form-allowed-tags { display: none; }
footer[role=“contentinfo”] { text-align: right; }

.entry-content p {
font-size: 88%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
margin-top: 10px;
}

.showbox .slideshow-wrapper .pager img { width: 60px; }
.slideshow-nav { font-size: 90%; }

/* Minimum width of 600 pixels. /
@media screen and (min-width: 600px) {
.site { max-width: 1060px; }
.site-logo { text-align: left; }
.page-template-project-showcase-php .site-content { width: 30.1886792453%; }
.page-template-project-showcase-php .widget-area { width: 16.9811320755%; }
.page-template-project-showcase-php .showbox { float: left; width: 50%; margin: 0px; }
.site-content { float: left; width: 67.9245283019%; / 720px at 1060px / }
.widget-area { position: absolute; text-indent: -200px ; width: 26.4150943396%; / 280px at 1060px */ }
.main-navigation li a {line-height: 2.2; }
.main-navigation {margin-top: 12px; margin-top: 0.857142857rem; }
.entry-header .entry-title { font-size: 1.3rem; margin-top: 1.2rem; }
.entry-header {margin-bottom: 12px; margin-bottom: 0.857142857rem; }
}
.widget-area .widget a {text-decoration: none; }
a:hover {font-weight: bold; }
.widget-area .widget a:hover {
color: #6a6a6a;
}

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
body, body.custom-background-empty{ background: #fff; }
html body .site { box-shadow: none; margin-top: 0; margin-bottom:0; }
footer[role=“contentinfo”] { max-width: 1060px; }
}

/– start IE8 –/
.ie .site { max-width: 1060px; }
.ie .site-logo { text-align: left; }
.ie body, .ie body.custom-background-empty{ background: #fff; }
html.ie body .site { box-shadow: none; margin-top: 0; margin-bottom:0; }
.ie footer[role=“contentinfo”] { max-width: 1060px; text-align: right; }
.ie .site-header { margin-bottom: 0; }
.ie .site-content { float: right; width: 67.9245283019%; }
.ie .widget-area { float: left; width: 26.4150943396%; }
.ie .site-content article { border: 0; }
.ie #respond form p.form-allowed-tags { display: none; }
.ie .page-template-project-showcase-php .site-content { width: 30.1886792453%; }
.ie .page-template-project-showcase-php .widget-area { width: 16.9811320755%; }
.ie .page-template-project-showcase-php .showbox { float: left; width: 47.1698113208%; margin: 24px 2.83018867925% 0; }
.ie .showbox .slideshow-wrapper .pager img { width: 60px; }
/– end IE8 –/

2

Hi memastudio. Welcome to the forums. :slight_smile:

Well, it’s better to dig into your templates (sidebar.php?) and remove the code that places the sidebar there. But if you can’t face doing that, then you can use the “poor man’s” method, and just add this to your CSS styles:

#secondary {display: none;}

It’s quick and gets the job done … sort of. The HTML is still there, but it’s not visible on screen … though Google and others might still see it.

3

Thanks Ralph for your greeting and help. :slight_smile: good to be here! I tried the code you mentioned, but it takes the sidebar out of “all” pages. I just want to take them out of “home” and “About” pages. So I thought I should do a conditional tag in my template.php
looking at different websites, I wrote the code below and added to my project-showcase.php (it is the template that I am using). But It gives error when i load the page! Any suggestions?

<?php if (!is_page( array( ‘about’, ‘home’ ) ) { ?>
<?php get_sidebar(); ?>
<?php } ?>

The whole template is like this:

<?php
/*

  • Template Name: Project Showcase
  • Description: A Page Template with Portfolio Slide Show.
    */

get_header(); ?>

<header class=“entry-header”>
<h1 class=“entry-title”><?php the_title(); ?></h1>
</header>

<div class=“showbox”>
<?php echo do_shortcode(‘[portfolio_slideshow]’); // http://wordpress.org/plugins/portfolio-slideshow/ ?>
</div><!-- .showbox –>

<div id=“primary” class=“site-content”>
<div id=“content” role=“main”>

<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( ‘content’, ‘pagecustom’ ); ?>
<?php //comments_template( ‘’, true ); ?>
<?php endwhile; // end of the loop. ?>

</div><!-- Content –>
</div><!-- #primary –>

<?php if (!is_page( array( ‘about’, ‘home’ ) ) { ?>
<?php get_sidebar(); ?>
<?php } ?>

<?php get_footer(); ?>

thanks alot for your help,
Cheers,
Mahsa

4

you will need to edit the header.php file
in the body tag, you will need to add something like

<body <?if(is_page()){echo 'class="this-page-', $wp_query->post->ID,'"'; }?>>

Find what the number ID of the pages you want to hide the widget you want to hide , and the widget ID. You probably can get the former from the dashboard, , but you will have to go to your browser and view source fo find the id/class name added to yoru widget by wordpress. Make sure you use the one that uniquely identifies that widget ( so something: like: ‘widget-41’ as opposed to just ‘widget’)

#secondary {display: none; }

have

.this-page-14 .widget-41{display:none; }

you can hide any number of widgets /page combination selectors to that rule.

Again tho, this just HIDES the widget with CSS. You may want to check your dashboard setting and see if you can merely unpublish it for that page

5

Sorry about that. The PHP route is the better way to go, but if you get stuck, you can probably do this with CSS too. In WP, there are often classes special to each page, so you could target just those two pages. I can’t check right now, because your site is throwing a PHP error.

6

Thanks Dresden, i gave it try, couldnt make it work, couldn’t figure out! I tried the .this-page-47 .widget-area{display:none; } didnt work though!
Thanks Ralph, I removed the code that made the site not running, must be working now. I like the idea of turning the class off, should it be something like this???
#class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-414” {display: none; }

the other thing is, about the navigation bar. It is not following the order of the menue1 I have in the dashboard.
I am trying to make this order : HOME TEAM PROJECTS CONTACT
Any idea?

Thanks a lot for your help
Enjoy the weekend

7

Hi Mahsa,

I’m assuming the Aout page is the one called “Team”? It does seem that sidebar (which is nearly off screen) appears on several pages, such as Home, Team and Project. Anyhow, let’s say you just want to hide it on the Home and Team pages. You could do this:

.page-id-17 #secondary, .page-id-47 #secondary {display: none;}

Those page-id classes are on the body tag of each page.

8

yeay, it is working now! Thanks so much Ralph!

9

Glad to hear it, Mahsa. :slight_smile: