Beautifying the CMS Category Pages

[swaggerbear]

Hi there! :-) I'm totally new here so please go easy on me.

 

Someone MUST have asked this question before but I can't seem to find the right keywords to search for the responses.

 

I'm putting together my first Prestashop site and more or less I'm slowly Forrest Gumping it together and it's not too awful looking.

 

However, we have a collection of articles that we want to include, in two separate categories. I've installed the CMS module and have created a category for "resources for singers" and "the business of music". Underneath those categories, I've added the articles I'd like to display. Doing it this way seems to keep the breadcrumbs intact which is great.

 

However, while the CMS pages themselves are fine, the CMS category page is hideous! It's an unformatted text list of the articles that fall under the category.

 

I'd like to go in and pretty that up. At the very least I'd like to style the list, but if it's not too ambitious, I'd also like to maybe pull thumbnails of the article images and some metadata as well to display on the CMS category page. Make it look a little more friendly, like.

 

So far all I've been able to find that might reference this stuff is the CMSCategory.php file which terrifies me. LOL

 

Does anybody have any suggestions?

 

Thanks!

Geoff.

[zootalaws]

Bump - I am also trying to do this and while I am not terrified of the code, I can't for the life of me find where to change it... all the CMS tpl files I have found relate to the backend.

[vekia]

you have to edit cms.tpl file located in your theme directory /themes/YOUR_THEME/cms.tpl

you can personalize this file + css styles, it mean that you can create any desing of the cms pages you want. (cms categories too)

[zootalaws]

Fantastic! Thankyou very much.

[zootalaws]

Hmmm.... I looked at cms.tpl - I don't think it's what I am looking for.

 

Here is the page I want to modify:

 

http://www.5lm.co.nz/content/category/1-home

 

It is clunky

 

I want to display the list of CMS categories more like a file folder, showing the categories. Such as, instead of "

Home

List of subcategories in Home:

 

It just said: Contents:

 

When in the individual CMS category, instead of it saying " List of pages in Baking:

 

It would just read: Info Sheets.

 

I have tried to find the location to change this, but am stumped...

[vekia]

but you can customize this file, then you will have exactly what you expect.

 

{elseif isset($cms_category)}
<div class="block-cms">
 <h1><a href="{if $cms_category->id eq 1}{$base_dir}{else}{$link->getCMSCategoryLink($cms_category->id, $cms_category->link_rewrite)}{/if}">{$cms_category->name|escape:'htmlall':'UTF-8'}</a></h1>
 {if isset($sub_category) & !empty($sub_category)}
  <p class="title_block">{l s='List of sub categories in %s:' sprintf=$cms_category->name}</p>
  <ul class="bullet">
   {foreach from=$sub_category item=subcategory}
 <li>
  <a href="{$link->getCMSCategoryLink($subcategory.id_cms_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
 </li>
   {/foreach}
  </ul>
 {/if}
 {if isset($cms_pages) & !empty($cms_pages)}
 <p class="title_block">{l s='List of pages in %s:' sprintf=$cms_category->name}</p>
  <ul class="bullet">
   {foreach from=$cms_pages item=cmspages}
 <li>
  <a href="{$link->getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:'htmlall':'UTF-8'}">{$cmspages.meta_title|escape:'htmlall':'UTF-8'}</a>
 </li>
   {/foreach}
  </ul>
 {/if}
</div>
{else}

[zootalaws]

Doh! My searching skillz are weeeeeeeeak!

 

Thanks, both for your time and patience...

 

I don't know what's happening today...

 

One last question - I am trying to find the 'base' url for CMS categories - I could only find 'Home' - cat 1 - is there a page that will display that category in a list, along with any others?

Edited August 7, 2013 by zootalaws (see edit history)

[swaggerbear]

Hi guys! Thanks so much for the reply! I actually forgot I posted this. After much trial and error while poking around late the other night I found what I was looking for. I'm not very good at coding but I managed to make a simple category page that has some introductory text with an image.

 

The results are here: http://cranetraxmusic.com/content/category/2-sing

 

It's not terribly sophisticated so if anybody has suggestions I'm all ears! :-)

 

<div class="block-cms">
    <div class="cms-category-image">
	    <img src="{$base_dir}/images/cms-{strtolower($category->name)}.jpg"><br>Image © Depositphotos.com / {if strtolower($category->name) == 'sing' } hitdelight  {/if} {if strtolower($category->name) == 'learn' } STYLEPICS {/if}
    </div>
 <h1 class="cms-header"><a href="{if $category->id eq 1}{$base_dir}{else}{$link->getCategoryLink($category->id, $category->link_rewrite)}{/if}">{$category->name|escape:'htmlall':'UTF-8'}</a></h1>
 {if isset($sub_category) & !empty($sub_category)}
  <h4>{l s='List of sub categories in %s:' sprintf=$category->name}</h4>
  <ul class="bullet">
   {foreach from=$sub_category item=subcategory}
 <li>
  <a href="{$link->getCMSCategoryLink($subcategory.id_cms_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
 </li>
   {/foreach}
  </ul>
 {/if}
 {if isset($cms_pages) & !empty($cms_pages)}
 <h4>{l s='List of CraneTrax articles under "%s":' sprintf=$category->name}</h4>
				    <p>We hope you enjoy reading these articles as much as we enjoyed putting them together for you. If you'd like to learn more, or have us write specific material about this subject, please contact us and let us know. Your success makes us feel terrific!</p>
  <ul class="cms-list">
   {foreach from=$cms_pages item=cmspages}
 <li class="cms-bullet">
  <a href="{$link->getCMSLink($cmspages.id_cms, $cmspages.link_rewrite)|escape:'htmlall':'UTF-8'}">{$cmspages.meta_title|escape:'htmlall':'UTF-8'}</a>
 </li>
   {/foreach}
  </ul>
 {/if}
</div>

[vekia]

wow! looks fantastic! im impressed!

[swaggerbear]

Thanks very much, @vekia! :-)

 

@zootalaws I'm not sure if this helps but I managed to reference the CMS category in question with {$category->name} within the CMS.tpl file That's how I got my images in--I just gave the image file name the same name as the category I wanted to put it in. I don't know if it will work but it seems that if you're on a higher level within the hierarchy you might be able to loop your list of CMS categories with $subcategory.id_cms_category somehow. That's just a guess though I don't really know.

 

"Evolving little primates"...I just love that! *hug*

[zootalaws]

Love your work

 

Thats exactly the kind of thing I was looking to do, thanks.

[NOSaint]

Great information guys! I'd like to try it also :-)

 

But where in the code can I tell it to edit one specific CMS page and not another?

[swaggerbear]

Hey there, @NOSaint! I assume you mean one specific CMS category page and not another, right? (For individual CMS article pages, you can just edit the article itself).

 

For the category pages, I was a bit sneaky, at least in getting the images in there. I created a series of images that I wanted to include and named them the actual category name. So, for the "Sing" CMS category, i created a "cms-sing.jpg". for the "Learn" CMS category, I created a "cms-learn.jpg". And so on.

 

Then, in the cms.tpl file, I invoked the image with this code:

 

<img src="{$base_dir}/images/cms-{strtolower($category->name)}.jpg">

 

That way, the right image will appear on the right category page every time.

 

If you want to get more specific than just images, and want to have content be different, you could do an {if}...{/if} statement involving $category->name. That would open up more possibilities in terms of what you could display.

 

Hope that helps! :-)

[NOSaint]

I must admit your page looks amazing! LOL! I may not even attempt what you did with the pic...but I am curious about how you got the links to show up on that page. I looks like subcategories that are formatted including bullet points...am I correct?

[swaggerbear]

Hey, thanks very much, @NOSaint! Yah the links are there by default. When you create any subfolders in the main CMS directory, Prestashop automatically creates a category page for them. Normally that page is kind of ugly. It's just a bulleted list of page headings left aligned to the <div> that it's in.

 

Once I found where the page was called from ($theme_dir/cms.tpl, thanks to @vekia above), styling the list was pretty simple...just a matter of creating a CSS class for the <ul> and <li> items and adding some style parameters in the theme's CSS file. It's still just a bulleted list, just a bit nicer than the default. The CSS code I used is below. Nothing groundbreaking or anything. LOL

 

 

/* CMS Categories */

.cms-category-image {
	 width:350px;
	 height:500px;
	 float:right;
	 margin-right:110px;
	 padding-bottom:50px;
	 text-align:center;
}

.cms-header { display:none; }

.cms-list {
	 font-size:16pt;
	 line-height:2;
	 margin-left:125px;
	 list-style: none;
}

.cms-list li:before {
	 content: "\00BB \0020";
}

.cms-bullet a, .cms-bullet a:visited {
	 color:#5B5C5E;
	 font-family:Oswald;
}

.cms-bullet a:hover {
	 text-decoration:underline;
	 color:#0170AC;
}

Edited August 29, 2013 by swaggerbear (see edit history)

[NOSaint]

LOL! Ok I'll stick with the css lol!

 

Where did you put the css code for the CMS page though? I mean what file...

[swaggerbear]

It should be in your theme directory, CMS.tpl

[NOSaint]

I know that, but where in the cms.tpl file?

 

When I try to test using your code, the actual code appears on my website. Not the css it's meant to demonstrate.

 

I've placed it at the beginning and at the end with no luck.

[swaggerbear]

Hey, @NOSaint. The CSS will go into your theme's CSS file. It's tough to know where that will be as it will be different for everybody. You can check under /themes/[themename]/css. There should be a file named [themename].css in there. That will be the file that governs the base styling for most of your site. You would insert your new CSS code anywhere in there (preferably in a logical place you can find later because CSS files can be pretty big).

 

Back inside the CMS.tpl, you can invoke styles using classes.

 

For example, if you look way up top on this page in the code I posted there, you'll see this line:

 

<ul class="cms-list">

 

That means that for the <ul> tag, I want to use the "cms-list" class that's in the CSS file, which has the following properties in the CSS file:

 

.cms-list {
			 font-size:16pt;
			 line-height:2;
			 margin-left:125px;
			 list-style: none;
}

 

That way, you don't have to modify the CMS.tpl file very much. You use the existing code, and just refer to the styles you want by calling the class. Does that make sense?

 

Of course it's possible to put inline CSS right inside CMS.tpl but then you'd have to do it everytime you wanted to use it again.

Edited August 30, 2013 by swaggerbear (see edit history)

[NOSaint]

Thank you very much for your explanation!!!

[BoKr]

Thanks again for the nice approach making more of the CMS pages.

 

I was looking for a way to do so to night too and found this:

http://www.prestashop.com/forums/topic/266802-adding-cms-page-ids-to-class-selector-in-body-tag/?do=findComment&comment=1332304

 

As far as I understand things at the moment after doing some reading and no trial and error testing I think you could CSS

different CMS pages this way.

[BarryH]

For the category pages, I was a bit sneaky, at least in getting the images in there. I created a series of images that I wanted to include and named them the actual category name. So, for the "Sing" CMS category, i created a "cms-sing.jpg". for the "Learn" CMS category, I created a "cms-learn.jpg". And so on.

 

I've been playing with this technique tonight and one variation I've added beyond the image inclusion is to use the same method to include CMS category-specific text on each CMS category page. Adding the following line just after the header and before the list of articles lets you insert a custom HTML snippet unique to each of the specific CMS category pages.

 

{include file="img/cms/cms-{strtolower($category->link_rewrite)}.tpl"}

 

Just create each custom category text (descriptive paragraph, HTML snippet or whatever you want to insert) and save each file in the same directory as the images (not sure that's the best place for them but for the sake of simplicity), named the same as the image files but with .TPL extension. 

 

Not sure how acceptable this approach is but it sure is a simple solution! Thanks for the tip, swaggerbear!

 

[mhdcasa]

hello all can you help me i want display all categories in mycms page but i dont know how did that and im beginner in prestashop 

[Patrick Proot]

Hi

I'm trying to display the category page and sub-category pages

with the description and an image for the concerned category/sub-category before the category content (sub-categories or pages)

in version prestashop 1.7 (theme classic)

I have tryed to include the code in this topic in the cms/category.tpl but don't work

 

Does anybody have any suggestions?