How to start a classified ads website: Basic tasks to complete
0.00 (0 votes)
5 stars 0
4 stars 0
3 stars 0
2 stars 0
1 stars 0

A few years ago, the background effects such as gradients, rounded corners, shapes and shadows were able to do with images cut from PSD project only. We had to create a pyramid of code to achieve desired result in the template.
Nowadays, with the help of CSS3 styles, we can achieve the same result as well as optimize the template code and in a result simplify the work.


What are slices?

Each of our latest Joomla template is provided with PSD slices to make the template background images modification easier.
It means that every image that is used in the template is provided as layers in the PSD file.
After the image layer modification, it will be saved with the same dimensions and with the same file extension as the image that is used in the template.

Worth to mention is the fact that other elements such as banners and icons that we use on a demo site are also provided as PSD files.


How to modify slices?

First of all, you will need to install an application that runs PSD files, e.g. GIMP (free) or Adobe Photoshop. 
We will use the Adobe Photoshop CS6 and PSD slices for our JM-School-Tools Joomla 3.x template in our example.

Let's suppose that you want to change the blue template color version to other color.
Many template elements were made using CSS3 styles, so you will have to make changes in the CSS files (Joomla 2.5) or in the LESS files (Joomla 3.x) as well.

We will focus on changing the color of some background images.
The images for the blue template color version are located in templates/jm-school-tools/images/style4 directory:




Let's open slices.psd file.
On the right side you will find groups and layers. Leave only the blue group visible as it contains all slices we will need for our example:



Now, click the right mouse button on the layer that you want to modify and you will see a dropdown menu.
Choose Blending options -> Color overlay



Click on the color field:



Choose the color you wish and click the "Ok" button.
Now you will notice that the selected layer has a different color:



Now, repeat this for all the rest of layers that you need to modify.
After making all changes, you can save slices as images.

Go to File -> Save for Web... and you will see the following screen.
Choose the slice tool and select all slices that you want to save as images:




Click the "Save" button. Let's see our new images:



As you can see, the saved images have the same names as images in the template. All you need to do now is copying them into images/style4 directory and overwrite the existing images.

Congratulations! You have modified images of your template :)



Users' comments

Total rating (go to the top to rate): (0 votes) Log-in to comment

Video Tutorials

EF4 Framework for Joomla! 3 - introduction

Joomla! 3 Quickstart Installation Guide

Speed up your website! Must watch video!

How to create Joomla article?

Joomla ReCaptcha - how to set up?

How to use Joomla editors?

How to display a module in Joomla article?

How to configure Joomla contact form?

How to check Joomla module positions names?

How to configure your language for Joomla 3?

How to create Joomla custom HTML module?

How to create Joomla menu?


ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2021 All rights reserved. and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.