So i'm trying to get the category filter on my Expression Engine blog to stay within the same layout when a category is clicked...but everytime i click on a category it jumps me over to a blank white page (so seems like its not getting any styles from anywhere for some reason). Which is odd because my header is included w/ all my styles, etc.
I'VE GOT MY INITIAL TEMPLATE GROUP: "PAGE-COMPS" (w/ two templates):
(1) index
(2) blog - which is as follows
{embed="embeds/header-inner" my_body_class="blog" my_page_title="Blog"}
<div class="mid-wrapper">
<div class="row blog">
<div class="span9">
{embed="posts/index"}
</div>
<div class="span2">
{snp_blog_sidebar}
</div>
</div><!-- end of row -->
</div> <!-- end of mid-wrapper -->
{snp_footer}
THEN I'VE GOT MY 2ND TEMPLATE GROUP: "EMBEDS"
I'VE GOT MY HEADER FILE: "HEADER-INNER" SEEN IN THE FILE ABOVE CODE AS FOLLOWS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{site_name} | {embed:my_page_title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Carousel jscrollpane Styles -->
<link rel="stylesheet" type="text/css" href="../assets/css/jquery.jscrollpane.css" media="all" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Load jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js"></script>
<!-- Load LocalScroll -->
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript">// <![CDATA[
// When the document is loaded...
$(document).ready(function()
{
// Scroll the whole document
$('#section-links').localScroll({
target:'body'
});
});
// ]]>
</script>
</head>
<body class="{embed:my_body_class}">
<header>
</header>
<div class="container">
<div class="hero-unit">
<img class="the" src="../assets/img/the.png">
<p><a class="logo" href="{site_url}">Site Name<span> More Name</span><img class="image" src="{site_url}assets/img/image.png" alt="{site_name}"></a></p>
<nav id="section-links">
<a href="{site_url}">Return to the Home Page</a>
</nav>
</div>
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<div class="slogan">
<h1>blog name</h1>
<p>more description...</p>
</div>
</div>
THEN I'VE GOT A LAST TEMPLATE GROUP FOR BLOG ENTRIES: CALLED "POSTS"
POSTS HAS ONE TEMPLATE:
"INDEX" WHICH IS AS FOLLOWS:
<!-- posts list -->
<div id="posts-list" class="cf">
<!-- THIS ONLY KICKS IN WHEN CATEGORY IS SELECTED (CATEGORY MODE) -->
{exp:channel:category_heading}
<h1>{category_name}</h1>
{if category_description}
<p>{category_description}</p>
{/if}
{/exp:channel:category_heading}
{exp:channel:entries channel="blog_audio|blog_video|blog_link|blog_quote|blog_post|blog_image" limit="10"}
{!-- Choose appropriate snippet based on source channel --}
{if channel_short_name == "blog_audio"}
{snp_blog_audio}
{/if}
{if channel_short_name == "blog_video"}
{snp_blog_video}
{/if}
{if channel_short_name == "blog_link"}
{snp_blog_link}
{/if}
{if channel_short_name == "blog_quote"}
{snp_blog_quote}
{/if}
{if channel_short_name == "blog_post"}
{snp_blog_post}
{/if}
{if channel_short_name == "blog_image"}
{snp_blog_image}
{/if}
{!-- Commenting out for now, we'll come back to it
<!-- page-navigation -->
<div class="page-navigation cf">
<div class="nav-next"><a href="#">← Older Entries </a></div>
<div class="nav-previous"><a href="#">Newer Entries →</a></div>
</div>
<!--ENDS page-navigation -->
--}
{/exp:channel:entries}
</div>
<!-- ENDS posts list -->
LASTLY I'VE GOT A SNIPPET FOR MY SIDEBAR W/ THE CATEGORIES AS FOLLOWS:
SNP_BLOG_SIDEBAR
<!-- sidebar -->
<aside id="sidebar">
<ul>
<li class="block">
<h4>Our Blog</h4>
Description of our blog goes here
</li>
<li class="block">
<h4>Categories</h4>
<ul>
{exp:channel:categories channel="blog_audio|blog_video|blog_link|blog_quote|blog_post|blog_image" style="linear" show_empty="no"}
<li class="cat-item"><a href="{path='blog/index'}" title="{category_name}">{category_name}</a></li>
{/exp:channel:categories}
</ul>
</li>
<li class="block">
<h4>Archives</h4>
<ul>
{exp:channel:month_links channel="blog_audio|blog_video|blog_link|blog_quote|blog_post|blog_image" limit="50"}
<li class="cat-item"><a href="{path='blog/index'}" title="title"> {month}, {year}</a></li>
{/exp:channel:month_links}
</ul>
</li>
</ul>
</aside>
<!-- ENDS sidebar -->
I'D GREATLY APPRECIATE ANY HELP AS TO WHAT MIGHT BE GOING WRONG...AGAIN WHEN I CLICK A CATEGORY IT TAKES ME TO A BLANK WHITE PAGE LISTING THE BLOG POSTS OF THAT CATEGORY RATHER THAN KEEPING ME ON THE CURRENT BLOG DESIGN...
THANKS A TON!
