SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center the Gridly Theme

    Hello there,

    I'm customizing the Gridly theme for a friend of mine. I'm having trouble centering two specific elements on the site :
    - The menu <div id="nav">
    - The masonry <div id="post-area">

    Here is an image showing both elements uncentered :
    Uncentered.jpg

    Here is the PHP&HTML code for NAV:
    Code:
           <?php if ( has_nav_menu( 'main_nav' ) ) { ?>
      		 <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'main_nav' ) ); ?></div>
           <?php } else { ?>
     	 	 <div id="nav"><ul><?php wp_list_pages("depth=1&title_li=");  ?></ul></div>
    	   <?php } ?>
    Here is the PHP&HTML code for MASONRY:
    Code:
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <?php if ( has_post_thumbnail() ) { ?>			
    		<div class="gridly-image">
    		<?php the_post_thumbnail( 'detail-image' );  ?>
    		</div>
            <?php } ?>    
    		<div class="gridly-copy">
    		<h1><?php the_title(); ?></h1>
               	<?php the_content(); ?>                 
    		php wp_link_pages(); ?>                
    		<?php comments_template(); ?> 
                    </div>
           </div>
    Here is the CSS code for NAV:
    Code:
    /* header nav styles */ 
      #header 			 { width:100% }
      #logo 			 { margin-top:35px; margin-bottom:15px; }
      #nav 				 { width:770px; margin:auto; background:url(../images/light/bg-row.png) top left repeat-x; height:57px; overflow:hidden; }
      #nav ul 			 { display: inline; margin:0px; list-style: none; padding:0px; height:42px; line-height:42px; clear:both;   }
      #nav ul li 		 { display: inline-block;  font-size: 12px; margin:0px; padding:0px;  margin-right:auto; margin-left:auto;  }
      #nav ul li a 		 { display:block; height:42px; margin-right:20px; text-decoration:none; margin-top:10px;  }
      #nav ul li a:hover { }
    Here is the CSS code for MASONRY:
    Code:
    /* post index styles */ 
      #post-area .post 				{ width:310px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; position:relative;  }
      #post-area .post .gridly-copy 		{ width:250px; margin-left:auto; margin-right:auto; padding-top:10px; paddingbottom:20px; overflow:hidden; clear:both;}
      #post-area .post .gridly-date 		{ width:150px;  color:#8e8e8e; font-size:11px;  border-bottom:1px dotted #cccccc; padding-bottom:0; padding-top:0; }
      #post-area .post .gridly-link 		{ width:150px; border-top:1px dotted #e8e8e8; color:#494e51;}

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,594
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi Brachamul . Welcome to the forums.

    There's an option in the Masonry settings to center it, so it's best to use that setting. E.g.

    Code:
    $('#container').masonry({
      	itemSelector: '#container li',
      	columnWidth: 0,
      	isAnimated: true,
      	isFitWidth: true
    });
    (Trying to alter the CSS isn't worth it, as there's too much absolute positioning etc. to cope with.)

    As for the menu, if you can't post a live link to it, then please make up an HTML demo that we can test and debug. Read this thread first, though: http://www.sitepoint.com/forums/show...Posting-Basics

  3. #3
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Website is hosted at www.krenaud.fr.

    Thank you for the Masonry suggestion, will have a look.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,594
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Thanks for the link. The relevant file for Masonry is this one:

    http://krenaud.fr/wp-content/themes/...s.js?ver=3.6.1

    Try editing the code at the top with the extra line:

    Code:
    // masonry code 
    $(document).ready(function() {
      $('#post-area').masonry({
        // options
        itemSelector : '.post',
        // options...
      isAnimated: true,
      isFitWidth: true,
      animationOptions: {
        duration: 400,
        easing: 'linear',
        queue: false
      }
    	
      });
    });
    One way to center the menu is to delete the code in blue and add the code in red here (light.css, line 32):

    Code:
    #nav ul {
    display: inline;
    margin-left: 156px;
    list-style: none;
    padding: 0px;
    height: 42px;
    line-height: 42px;
    clear: both;
    margin: 0 auto;
    display: table;
    }

  5. #5
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As per your suggestion the menu is now effectively fixed.

    As for masonry, I have completed the suggested change :
    Code:
    // masonry code 
    $(document).ready(function() {
      $('#post-area').masonry({
        // options
        itemSelector : '.post',
        // options...
      isAnimated: true,
      isFitWidth: true,
      animationOptions: {
        duration: 400,
        easing: 'linear',
        queue: false
      }
    	
      });
    });
    However, I assume I have to limit the width of this item and center it somewhere. I'm unsure how to do this.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,594
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Yeah, sorry, I forgot to mention that you have to make one change in the CSS:

    Code:
    #post-area {margin: 0 auto;}
    I forgot about that, but it will do the job.

    BTW, here's the reference: http://desandro.github.io/masonry/demos/centered.html

    As per your suggestion the menu is now effectively fixed.
    Great.

    You still have a right margin on the links in the menu. To make it perfectly center, perhaps divide that margin in half and place it on both sides of the links:

    Code:
    #nav ul li a {
    display: block;
    height: 42px;
    margin: 10px 10px 0;
    text-decoration: none;
    }

  7. #7
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very cool ! Thank you so much !

    Could I use you one last time and ask you how to center the part at the very bottom saying " 2013 Kevin Renaud | Theme by Eleven Themes " ?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,594
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Brachamul View Post
    Very cool ! Thank you so much !

    Could I use you one last time and ask you how to center the part at the very bottom saying " 2013 Kevin Renaud | Theme by Eleven Themes " ?
    No problem. Add the line in red (light.css, line 50):

    Code:
    #copyright p {
    padding-top: 15px;
    color: #4F5356;
    font-size: 12px;
    text-align: center;
    }
    I made some edits to my last post re the menu, in case you missed them.

    Glad this is working. I usually can't help with JS stuff, but luckily I had to use Masonry a few months ago and had the same issue.


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
  •