How to change the design of the layout

hello all again,

i am just testing hikashop so i can do some designs and so on

i was trying to figure out where i can change the design which file should i chage lets say for example i want to add scrolling picture at the top of the product lists also lets say i need to add around the products some shadows or borders


lets say i want to do something like this

cms.template-help.com/virtuemart_28977/


where all those things can be done


Regards,

When you edit/create a hikashop products listing menu, you can access the hikashop options on the right side of the screen. In those options, you have an option to display the current category description. In the category description you can add images and text. If you want to add image scrolling modules in it, you will have to edit the file listing of the view product via the menu Display->Views and change:
echo $this->element->category_description;
to:
echo JHTML::_('content.prepare',$this->element->category_description);

In that menu Display->Views, you can edit any view of hikashop to suit your needs.
If you want to change products displays on listing, based on your changes you will either want to modify the product view files via that menu or, for less invasive modifications, edit your HikaShop CSS file in the configuration under the tab display.

You don't need to and shouldn't edit the files directly as your modifications will be lost when you update. By doing them via the interface, you will keep them when updating.

thank you nicolas

i really appreciate all your help

I will be trying it soon

thanks a million

hi all,

I've been playing with the Joomla 1.6 version for 2 days now. Product really looks promising, however

can you please advise:
- How can I change the size of the small thumbnail version (this appears when you have more than 1 image per product) heritagehomesofmalta.com/index.php/categ.../category_pathway-12
- How can I change the general aesthetics of the product page?

thanks!

ian.

Hi,

You can edit the hikashop CSS in the config, under the tab display and change the height in that code :
div#hikashop_product_left_part img.hikashop_child_image {
margin: 2px;
height: 25px;
}

You can already change a lot of stuff by changing just the CSS relative to the product page. If you want to change even things in it, you can go in the menu Display->Views and edit the file show of the view product.

Thanks. really helpful!

ian.

one last question please, can you please let me know how to edit / remote the mouse-over image functionality?

many thanks.

ian

In the view file mentioned in my last post, if you change the line:
echo $this->image->display($image->file_path,'hikashop_main_image',$image->file_name,'class="hikashop_child_image"');
to:
echo $this->image->display($image->file_path,true,$image->file_name,'class="hikashop_child_image"');

that should remove the mouse over functionality.

It's not possible to change it easily without hacking in the core files of hikashop.

Thanks for the promt feedback ... however, it didn't seem to do the job.

the same thing also applies for the mouse-over functionality in the category views

heritagehomesofmalta.com/index.php/categories-listing

in this page for example, www.demo.hikashop.com/index.php?option=c...ys&Itemid=59&lang=en there isn't any mouse-over functionality ... which is just fine :).

Ah you mean the popup effect ?

You're talking about the limit blue rectangles next to the images ?

That's actually because of your template styling. You could try to add that CSS in the hikashop CSS:

#hikashop_image_small_link { background: white }

But your template override it.
The easiest will be to add it directly in the styles of the image links:
echo $this->image->display($image->file_path,'hikashop_main_image',$image->file_name,'class="hikashop_child_image"','style="background:white;"');

And for categories and products listings, it's in the file listing_img_title of the view products and categories:
<a href="<?php echo $link;?>" style="background:white;">

hi,

Many thanks for your immense help. No I'm not referring to the popups.

I've changed the code for the product view as suggested.

heritagehomesofmalta.com/index.php/categ.../category_pathway-12

Still, there is a "green" background on the small images on mouse over. Furthermore, the small images "move" (and thus become mis-aligned) on mouse over

tnx.

ian

Are you sure that you changed the code
echo $this->image->display($image->file_path,'hikashop_main_image',$image->file_name,'class="hikashop_child_image"');
to:
echo $this->image->display($image->file_path,'hikashop_main_image',$image->file_name,'class="hikashop_child_image"','style="background:white;"');
in the show file of the product view ? Because I didn't see that CSS style on your page...

The small iamges "move" because of the border added to them. You can remove that by editing the file administrator/components/com_hikashop/helpers/image.php and removing the line:
obj.childNodes[0].style.border=\'1px solid\';
But that modification will be lost of you update hikashop.

wow a lot of question and a great reply from a gr8 person.

i will ask one question

lets say i need to change the background picture of the product only

when i click on products i need to have a background image at the back of the products where this can be done

I guess it should also be done with the CSS


Regards,

perfect support ... just suberb.

note that template is only temporary.

ian.

another one

from where one can edit the following display items on this page:
heritagehomesofmalta.com/index.php/products-page
- decreasing the distance (width) between the "big" image and the "small" images
- moving the description text from the bottom part to the right hand side of the images (as there's a very big "empty" space.

tnx once again.

ian

Hi,

There is no div enclosing the whole product page so you can't put a background image easily with just CSS. You will first need to edit the file show of the view product via the menu Display->Views and add a div around it with the attribute: style="background-image:url( mywebsite.com/my_image.jpg )"

The distance between the image and the small images is fixed automatically by hikashop based on the height of thumbnails that you specified in your configuration under the tab files. Reducing the height of thumbnails will reduce the gap there.

If you want to move the description, you will have have to edit the file show of the view product via the menu Display->Views and move the description related code to the right part div.

thanks!

ian

Hi,

I'd like to add a slide layout, and use the existing div item layouts in it... is that possible? I uploaded a file named listing_slider for products, but the 'slider' option is coming in the item layout dropdown.

Thanks,
zebee

The layout files are indeed not loaded dynamically.
You could use put your code in the file listing_list of the view product via the menu Display->Views so that your code is in the override file of the list layout. Then, by selecting the list layout, you will get your modifications.