Building the site: Plustek Project (2)

Monday, a new day.  After fixing a variety of problems before lunch, I can finally start working on the projects after a light lunch. 

I take a peek at the schedule I made on friday, and spend some time thinking on how to execute them.  I really want to use K2 for the “Products” page, and I’ve seen an interesting extension that I plan on using as well.

Installing components

  • Since this is going to be a multi-langual site, I install Joomfish.  This tool will allow me to translate all articles with ease.  Because my default language will be Dutch, I make a change in the language settings. 
  • Second of all, I install K2; because I’m planning to use this component extensively.  I leave the configuration for later. 
  • I also install UberPageBreak.  I plan to use it for the product pages; so I can “break” the article into different sections:  Overview, Video’s, Support.  This plug-in support both Joomla! articles and K2 items. I can add another great Joomlaworks extension to my list. 
  • Finally, I install the JCE editor.  Since ‘discovering’ the editor, I haven’t looked back to TinyMCE. 

I’ve also downloaded JC Advanced Links so I can use the “advanced link” functionality of JCE for K2, but wait with installing it. 

Categories

Next, I create the categories.  I start with a “Global” category which I’ll use for items that don’t fit in any of the product categories. 

I change the K2 settings of the category:

  • All Author information is disabled
  • Most Item View options are disabled
  • Most of the Item View options are disabled, as well.

Then, I create a “Products” category.  The settings are identical to the “Global” category settings, with one exception:  The Category is shown below each item.  This way, people can click the category and see an overview of all products in that category. 

Next, I create two subcategories which inherit the settings of “Products”. 

Changing K2.css

I’ve decided to make a change to the category item view.  I change the size of the images first.  Then, I decide to change the image position.  By default, this image hovers above the intro text.  I decide to move it to the left, and let the text “wrap” around this image. 

To achieve this, I remove a <div class=”clr”> entry in components/com_k2/templates/default/category_item.php

I then make a change to K2.css.  I add the following to span.CatItemImage:

  • float:left; and margin-right:10px;

This gives me what I want:  the item image is moved to the left, and the text wraps around it.  This gives me room for more products on one page. 

You can find the instructions for this change here

The basic lay-out is now complete.  I add the About Articles, and perform some tests with the “Products” Category.  After some tinkering with the settings, I reach the result I want.

Got a comment on today’s event?  Feel free to reply!

Advertisements