projectperception

Actually, I believe I figured it out. Naeslund, add this to the category.php template, directly above the Loop like so:

<?php
  $posts = query_posts($query_string . '&orderby=title&order=ASC&posts_per_page=-1');
?>

<?php
  while (have_posts()) {
    the_post();
    ldl_get_template_part('listing', 'compact');
  }
?>

Yep, here is what they included to add the separator in the title:

<title><?php wp_title('|', true, 'right'); ?></title>

I would also like to know how to sort the listings on the category page alphabetically.

Thanks so much, it absolutely does!

No not that. Just this, within the { } brackets.

height: 650px;

Change the number based on how tall the widget is.

The way that I worked around it was go into the CSS of the each widget and gave them a specific height value. It really only works with widgets that don’t alter in size based on the content in them

So the widgets I had trouble with were ones that come from plugins (like my Twitter and Facebook widgets and a fancier Recent Post widgets). From the Dashboard, I went to Plugins -> Editor and in the top right there is a drop down selector for the plugins to edit, and I selected the one I wanted to adjust.

Usually a plugin has a .css file associated with it. I clicked on that, and added a “height: XXXpx;” line in the top level element of the css stylesheet. For example, my Smart Recent Posts plugin looked like this before:

.smart_post { 

width: 280px;

}

But then I added the height line, based on how large it is on the screen.

.smart_post { 

width: 280px;
height: 650px;

}

This seems to push the widgets under it and in place. I’m sure it’s not the best way to do it, but I found it to be the easiest without disabling Masonry altogether. I did this to each individual plugin widget I was using (only about 4). I hope this helped and made sense.

Thanks so much for the clarification, Sami.

That’s a good idea. I’ll try only enabling it for mobile devices next. For now, I’ve just assigned absolute height values to each of the widgets, which seems to put everything in place correctly on Chrome, Firefox, and IE at least.

Also, I originally tried to disable the plugin by removing that line in functions.php, but it also disabled the homepage slider. I triple checked to make sure that was the only line I removed, and after removing it all that appears is the small loading circle. Does the slider rely on anything in Masonry?

Yep, I took out the Masonry JS code from the functions.php, and sure enough the problem isn’t there anymore. However, it’s there so that when a mobile device loads the page, the widgets at the bottom stack nice and neatly without gaps. So without Masonry, it doesn’t look as nice in mobile view. At least I’ve narrowed it down significantly. Thanks again for all of your help WPyogi. You’ve pushed me in the right direction.

Is there anyone that has worked with the Max Magazine theme and been able to fix this issue with jQuery Masonry?

Thank you again for your responses, and I’ll definitely be validating the website for errors.

I saw that line when I was looking at it in Firebug, but I’m not sure how to edit that. As I said, nowhere in theme’s CSS does it tell widgets to have absolute positioning (nor in the CSS of the individual widget plug-ins), so I don’t know why the page is loading like that.

Also, there are no IDs or Classes existing in the theme’s stylesheet that the DIV you posted above is referencing. I’m assuming the masonry-brick is referencing jQuery Masonry, so could it have something to do with that?

Thanks so much for your response!

I’ve done some fiddling with it, and it appears to be something with the Max Magazine theme itself. I’ve mixed and matched various different widgets and it happens the same no matter what widget I use. I’ve also tested out the exact same widgets on different themes, and there are no overlapping issues.

I have limited experience with CSS, and after looking into it, I’ve been trying to edit the #sidebar .widget section, since it seems to be universal to all widgets (as opposed to individual widgets). These are the default rules:

#sidebar .widget{
	padding-bottom: 20px;
	margin-bottom:20px;
	width:280px;
	overflow:hidden;
}

There doesn’t seem to be any rule telling it to be an absolute positioning. Even after adding “position: relative;” as a rule, it does nothing to change it. So, I’m assuming, there is something else I’m missing.

It’s odd that after you resize the window to make it smaller, and then resize it back to full screen, everything snaps in place just fine. I’d like it to just do that upon initial loading.

EDIT: And of course after I said that, I thought to look at what the code looks like in Firebug once I’ve resized the window, but the only difference is that the “top” value for the absolute positioning changes to fit perfectly, instead of on top of each other.

So basically, something other than the stylesheet is telling the widgets to do absolute positioning and assigning them a “top” value that I’m not quite sure how to manipulate.

This is under the “book_header_style()” function. I just took out all of it since I’m not using any header image at all.

<?php
		if( is_single() ) :

			if( has_post_thumbnail() ) : 

				$featured_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'featured');
				$header_image = "background: url(" . $featured_image_url[0] . ") center 0 no-repeat; background-attachment: fixed;";
				$textcolor = "#fff";
				$background = "url( ". get_template_directory_uri() ."/images/nav-bg.png)";
				$libackground = "url( ". get_template_directory_uri() ."/images/diamond-white.png)";
				$bgcolor = "#111";
				$height = "500px";
				$paddingbot = "0";

			else :

				$header_image = "";
				$textcolor = "#000";
				$libackground = "url( ". get_template_directory_uri() ."/images/diamond.png)";
				$bgcolor = "none";
				$height = "auto";
				$background = "none";
				$paddingbot = "auto";

			endif;
			?>
			<?php if( has_post_thumbnail() ) : ?>
			hgroup {
				position: absolute;
				bottom: 50px;
				width: 100%;
			}
			<?php endif; ?>
			#masthead {
				<?php echo $header_image; ?>
				margin-top: 0;
				padding-bottom: <?php echo $paddingbot; ?>;
				max-width: 100%;
				height: <?php echo $height; ?>;
				position: relative;
				background-color: <?php echo $bgcolor; ?>;
			}
			.admin-bar.custom-header #masthead {
				background-position: center 28px;
			}
			#page {
				max-width: 100%;
			}
			#main, #colophon {
				max-width: 750px;
				margin: 0 auto;
			}
			.main-navigation {
				background: <?php echo $background; ?>;
			}
			.main-navigation ul a {
				color: <?php echo $textcolor; ?>;
			}
			.home .main-navigation ul li, .main-navigation ul li {
				background: <?php echo $libackground; ?> 0 24px no-repeat;
			}
			.main-navigation ul li:first-child {
				background: none;
			}
			.site-title a {
				color: <?php echo $textcolor; ?>;
			}			

		<?php

		else :

			$header_image = get_header_image();

			if ( ! empty( $header_image ) ) : 

				$textcolor = "#ccc";
				$background = "url( ". get_template_directory_uri() ."/images/nav-bg.png)";
				$libackground = "url( ". get_template_directory_uri() ."/images/diamond-white.png)";

			 ?>
			#masthead {
				background: url( <?php echo esc_url( $header_image ); ?> ) center 0 no-repeat;
				margin-top: 0;
				padding-bottom: 0;
				max-width: 100%;
				height: <?php echo get_custom_header()->height; ?>px;
				position: relative;
				background-attachment: fixed;
			}
			hgroup {
				position: absolute;
				bottom: 50px;
				width: 100%;
			}
			.site-title {
				max-width: 750px;
				margin: auto;
			}
			.site-description {
				max-width: 525px;
			}
			#page {
				max-width: 100%;
			}
			#main, #colophon {
				max-width: 750px;
				margin: 0 auto;
			}
			.main-navigation {
				background: <?php echo $background; ?>
			}
			.main-navigation ul a {
				color: <?php echo $textcolor; ?>
			}
			.home .main-navigation ul li, .main-navigation ul li {
				background: <?php echo $libackground; ?> 0 24px no-repeat ;
			}
			.main-navigation ul li:first-child {
				background: none;
			}

		<?php endif; ?>
	<?php endif; ?>

So I’m an idiot. I didn’t even see the custom-header.php template. I was able to remove it from there just fine.