[solved] News layout with categories left, news right

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
Maschenka
New Member
New Member
Posts: 2
Joined: Thu Nov 10, 2011 8:16 am

[solved] News layout with categories left, news right

Post by Maschenka »

I recently downloaded and installed CMSMS 1.10 which includes the news module 2.12.2. It is running on Apache 2.2 with PHP 5.2.17. The current online version is accessible via http://www.ett-anwalt.de/cms/index.php/news.html.

I would like to set up the news section of the site with all the active categories listed vertically on the left hand side, and all individual news items on the right hand side.

What I have done so far:
1. Set up a template "news" to be used for news pages with the following contents for the body:

Code: Select all

  </__body>
    <div id="menu_vert">
      {news browsecat='1'}
    </div>
    <div id="content">
      <h2>{title}</h2>
      {news}
      {content}
    </div>
  <__body>
2. Set up an associated CSS template.

3. Created a "News" page that uses the template.

4. Within the news module, added a bunch of categories.

5. Within the news module, set up a category template with the following contents:

Code: Select all

{if $count > 0}
<ul class="list1">
{foreach from=$cats item=node}
{if $node.count > 0}
{if $node.depth > $node.prevdepth}
{repeat string="<ul>" times=$node.depth-$node.prevdepth}
{elseif $node.depth < $node.prevdepth}
{repeat string="</li></ul>" times=$node.prevdepth-$node.depth}
</li>
{elseif $node.index > 0}</li>
{/if}
<li class="newscategory">
{if $node.count > 0}
	<a href="{$node.url}">{$node.news_category_name}</a>
{/if}
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node.depth-1}</li>
</ul>
{/if}
This has the wanted effect of only showing categories that have news items associated with them, and it removes the number of available news items in the corresponding category.

6. Created a new summary template and removed everything above the line "{* if you don't want category browsing on your summary page, remove this line and everything above it *}".

What I would like to achieve:
1. When I click on a category I would like to get only news items from that category displayed on the right hand side, without the general list of news items above.

2. The same applies to when I click on the heading of a news item or its "Read more" link.

Both goals are accomplished when I remove the {news} tag within the content div from the template, but then the initial page won't show any news items.

I have already tried creating another template "newsdetails" with the following content:

Code: Select all

  </__body>
    <div id="menu_vert">
      {news browsecat='1'}
    </div>
    <div id="content">
      <h2>{title}</h2>
      {content}
    </div>
  <__body>
created an associated page "newsdetails" and I changed the code from step 1 to the following:

Code: Select all

  </__body>
    <div id="menu_vert">
      {news browsecat='1'}
    </div>
    <div id="content">
      <h2>{title}</h2>
      {news detailpage="newsdetails"}
      {content}
    </div>
  <__body>
This does not seem to make a difference, so maybe I misunderstand what the detailpage parameter is used for.

Am I generally going into the right direction, and would it be possible to get any pointers for achieving my goals?
Last edited by Maschenka on Wed Nov 16, 2011 1:45 pm, edited 1 time in total.
spcherub
Power Poster
Power Poster
Posts: 402
Joined: Fri Jun 06, 2008 5:54 pm

Re: News layout with categories left, news right

Post by spcherub »

Here's something that works (a little convoluted):
1. In your template, inser the following code:

Code: Select all

    <div id="menu_vert">
      {news browsecat='1'}
    </div>
    <div id="content">
      <h2>{title}</h2>
{capture assign="default_content"}{content}{/capture}
{if $default_content=="EMPTY"}{news}{else}{$default_content}{/if}
    </div>
2. In the page that you make from this template, disable the WYSIWYG and type in the word "EMPTY" (without quotes and without any other characters).
3. Now load the page and you will see all the news items show by default. Then when you click a category on the left, only the news items from the selected category will display.

Hope that helps.
S
Maschenka
New Member
New Member
Posts: 2
Joined: Thu Nov 10, 2011 8:16 am

Re: News layout with categories left, news right

Post by Maschenka »

That did not sound convoluted at all, and it seems to be exactly what I have been looking for, thank you very much!
Post Reply

Return to “Layout and Design (CSS & HTML)”