Home/ Questions/Q 8504349
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T02:00:17+00:00

So i’m trying to get the category filter on my Expression Engine blog to

  • 0

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="#">&#8592; Older Entries </a></div>
                    <div class="nav-previous"><a href="#">Newer Entries &#8594;</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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s the ../assets/[...] relative link to your styles in embeds/header-inner. That’d work from http://localhost/index.php/whatever/you-want/ or from http://localhost/blog, but not from anything that looks to the browser like a deeper folder structure (http://localhost/blog/categories/[something]) those wouldn’t work.

    Try something from the site root if you can, like <link rel="stylesheet" href="/assets/css/file.css">.

    • 0