Breadcrumbs

Home / Help / FAQ / Tutorials / DJ-Catalog2 FAQ / How to change CSS or layout files

Top Menu

Content

How to change CSS or layout files
How to change CSS or layout files 4.6 out of 5 based on 17 votes.

The best thing that you can do, considering changes in DJ-Catalog2 CSS code, is creating your own theme.

  1. Create a new folder in /components/com_djcatalog2/themes/my_theme
  2. 'themes' folder already contains the standard ('default') theme - DO NOT remove OR modify it.
  3. Copy css and images folders from 'default' folder into your new theme folder. Theme folder should represent following structure:
    /components/com_djcatalog2/themes/my_theme
    |_ css
    |___ theme.css
    |_ images
    |___ {all images from /default/images/ directory}
  4. DO NOT copy theme.php file nor js folder into your theme, unless you know what you are doing and plan to modify theme's PHP or JavaScript code. The same applies to email directory and files in it, unless you wish to modify templates of email notifications from the Query Cart.
  5. Navigate to Joomla! back-end, DJ-Catalog2 options and in General Configuration tab, change current theme to 'my_theme'.
  6. From now, DJ-Catalog2 uses 'my_theme' instead of default one. Any modifications that you wish to make, you should perform within your new theme - the changes will not be overridden when you decide to update the component.

Sometimes changing just the CSS code may be not enough for you and you feel like making modifications in DJ-Catalog2 layouts. There two ways to do this.

The first, standard approach is to override layouts within your Joomla! template which involves copying component's layout files:

/components/com_djcatalog2/views/{view_name}/tmpl/{layout_name}.php

into:

/templates/{your_template}/html/com_djcatalog2/{view_name}/{layout_name}.php

The second way is very similar to the first one, although instead of copying files into template's html folder you should copy them into following directory:

/components/com_djcatalog2/themes/my_theme/views/{view_name}/ 

For example, in order to override the general layout of Single Product View you should copy following file:

/components/com_djcatalog2/views/item/tmpl/default.php

to:

/components/com_djcatalog2/themes/my_theme/views/item/default.php

NOTICE: Copy only those files that want to override (change) - it will save you a lot of time in case the future update of the component brings lots of changes in layout files.

Click here in order to download the sample theme. Un-zip the file and read the README.txt file to learn what to do next.


Found this article interesting? Subscribe for more.
Or share this article with your friends.
Friday, 12 July 2013 07:13
 
User Rating:  (17)
PoorBest
 

Footer Menu