Sunday, 30 March 2014 00:00

K2 Templates - Handling Custom CSS

Written by 
Rate this item
(13 votes)

Since I stopped the support of CSS4K2 plugin, I regularly get asked how we can provide custom css per k2 template that is used in a template.
In this guide, I share a technique that I use.

OK, before we start, it is assumed that you already have an understanding of Joomla MVC and creating component over rides.

I am going to explain how to set up from a fresh Joomla + K2 install with a Joomla template which does not have a K2 over ride.

Now, I have a little package of files and folders which I just drop into any Joomla template which I am modifying.
This essentially consists of the com_k2 over ride which is placed into the html folder of the Joomla template, althought the process is quick, when you do it as often as I do, it just saves a little time.  
I have provided that attachment for you to use too.

What is this for?

This package is for developers using the K2 component from Joomlawork, who wish to create a custom component over ride or a new K2 template with its own styling.

How do I use it?

Upload the file and folder structure that is contained in the zip file to:

templates/JOOMLATEMPLATE/html

As this is set to the default template for K2, then once the files are uploaded, then refresh a K2 item which is in a category that has been assigned with the default k2 template.

As we provide a basic over ride for the item.php, we have restyled the title and removed the default font-family styling that k2 created and instead, inherit fromt he template instead. In this case, you should see the title style change.

How can I extend this?

You can right click in your browser on any part you want to modify, this will declare the css class or ID and settings used.
As I split the new css structure into typo, color and layout, then simply copy the required css selector and paste to the appropriate css over ride file. Make your changes and save.

Now you have your default setup, you can copy the included default folder and then rename to create a new template.
Just make sure that your new 2nd template is assigned to a K2 category.

CSS Setup

In the item.php, we provide an import link to load a css file, k2.css.
You could copy all css from the component copy of k2.css and place it here. I prefer to only over ride what is required.
In the k2.css we provide links to 3 additional css just to split out the typo, layout and colors, you do not have to use them if you do not wish, I split them to help out after requests form clients.

Conclusion

I appreciate that some may not like this method as it includes servers file count, but not a huge amount of space. It will potentially add to page load speed as additional files are being loaded, but if only the required classes are included, this should be minimal and if some css compression is used it should have little noticeable effect.

Hope you find it useful.

 

Read 13705 times Last modified on Sunday, 30 March 2014 09:19