SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: masking widget

  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    masking widget

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hi memastudio. Welcome to the forums.

    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:

    Code:
    #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. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph for your greeting and help. 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. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    you will need to edit the header.php file
    in the body tag, you will need to add something like


    Code:
    <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')



    Code:
    #secondary {display: none; }
    have
    Code:
    .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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by memastudio View Post
    it takes the sidebar out of "all" pages.
    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. #6
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    .page-id-17 #secondary, .page-id-47 #secondary {display: none;}
    Those page-id classes are on the body tag of each page.

  8. #8
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeay, it is working now! Thanks so much Ralph!

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by memastudio View Post
    yeay, it is working now! Thanks so much Ralph!
    Glad to hear it, Mahsa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •