For example, you want to change the size and the color of the price on a product listing.
To do that, you need your browser console or an add-on like “Firebug” for FireFox to see the HTML and CSS of your page.
Usually you have to press the F12 key to have the console show up. You should have something like that displayed:
In this case, I am using Firebug.
To find the element to edit, you can right click on it then choose “inspect the element”.
The window should display the HTML of the desired element, and you can find its class and/or id.
To edit the price display you have to edit the class “hikashop_product_price”.
Step 1: Log into your Joomla Dashboard
Step 2: In the top menu, hover over Components and click HikaShop to access the HikaShop Dashboard.
Step 3: Go to the System and click Configuration HikaShop menu in order to access the payment management screen.
In HikaShop > Configuration > Display > CSS, you can edit the Front-end CSS File to set your custom properties.
Step 4: Go to the Display and click CSS part and you can edit the Front-end CSS File to set your custom properties.
Step 5: To change the color and the size of the price you can use a property like:
.hikashop_product_price{ color: #99cc00;font-size: 14px;}
If you need to edit the class in, for example, only one module, you can prepend the id of the module to the CSS code.
When using the CSS code:
#module_25 .hikashop_product_price{ color: #99cc00;font-size: 14px;}
The color and the size of the price will be changed only in the module with the id “module_25”.
Remember that “#” is used for the IDs and “.” for the classes.
- JS Jobs Data Dictionary: How to Add New Entity? - January 3, 2017
- JS Jobs Categories: How to Add New Categories? - December 30, 2016
- JS Jobs Message System: Front End Messages - December 30, 2016
Recent Comments