Center the Gridly Theme

CMS & WordPress
1

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 :

Here is the PHP&HTML code for NAV:

       <?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:


<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:

/* 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:

/* 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

Hi Brachamul . Welcome to the forums. :slight_smile:

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

$('#container').masonry({
  	itemSelector: '#container li',
  	columnWidth: 0,
  	isAnimated: true,
  	[COLOR="#FF0000"]isFitWidth: true[/COLOR]
});

(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/showthread.php?1041498-Forum-Posting-Basics

3

Website is hosted at www.krenaud.fr.

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

4

Thanks for the link. The relevant file for Masonry is this one:

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

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

// masonry code 
$(document).ready(function() {
  $('#post-area').masonry({
    // options
    itemSelector : '.post',
    // options...
  isAnimated: true,
[COLOR="#FF0000"]  isFitWidth: true,[/COLOR]
  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):

#nav ul {
[COLOR="#0000FF"]display: inline;
margin-left: 156px;[/COLOR]
list-style: none;
padding: 0px;
height: 42px;
line-height: 42px;
clear: both;
[COLOR="#FF0000"]margin: 0 auto;
display: table;[/COLOR]
}
5

As per your suggestion the menu is now effectively fixed.

As for masonry, I have completed the suggested change :

// 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

Yeah, sorry, I forgot to mention that you have to make one change in the CSS:

#post-area {margin: 0 auto;}

I forgot about that, but it will do the job. :slight_smile:

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

As per your suggestion the menu is now effectively fixed.

Great. :slight_smile:

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:

#nav ul li a {
display: block;
height: 42px;
[COLOR="#FF0000"]margin: 10px 10px 0;[/COLOR]
text-decoration: none;
}
7

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

No problem. Add the line in red (light.css, line 50):

#copyright p {
padding-top: 15px;
color: #4F5356;
font-size: 12px;
[COLOR="#FF0000"]text-align: center;[/COLOR]
}

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. :slight_smile: