Product display:template css style-->hikashop css

First at all I must say i am a beginner in webdesign.
I need some help to copy template css style --> hikashop css style --> hikashop_subcontainer.

CSS TEMPLATE:


Mainpage CSS Container included mouse-over effect:
(I conclude it should be the syntax's below using chrome element inspect)
"width: 27.8%;
float: left;
padding: 10px!important;
margin: 15px !important;
background: #fff !important;
box-shadow: 0px 0px 3px #aaa;
-moz-transition: 0.7s ease-in-out;
-webkit-transition: 0.7s ease-in-out;
height: 346px;"


I've tried to use these syntax to effect each of my product containers separately but i can't make it work (hikashop_subcontainer). I tried many css syntax's like here but nothing changes: bavotasan.com/2011/a-simple-fade-with-css3/ It should be great if somebody could tell me where to put these rules into the css of hikashop. I already tried a lot to make this work and I had a topic before but still no solution. Could anybody help me out so I can build further on. Should be great!


Best regards,

Lennart

This is the working part of the class:

.hikashop_subcontainer{
padding-top:10px;
padding-bottom:10px;
float: left;
margin: 15px !important;
background: #FFF !important;

Can't make this part work for this class:
box-shadow: 0px 0px 3px #aaa;
-moz-transition: 0.7s ease-in-out;
-webkit-transition: 0.7s ease-in-out;[/b][/b]

Hi,

You can override the views if you want to change the HTML structure.
www.hikashop.com/support/documentation/1...ize-the-display.html

Regards,

Change the HTML structure? I've read the documentation but did not helped me further or I just don't understand..

This is the working part of the class CSS --> .hikashop_subcontainer:
.hikashop_subcontainer{
padding-top:10px;
padding-bottom:10px;
float: left;
margin: 15px !important;
background: #FFF !important;

PROBLEM
Can't make this part work for CSS class above (.hikashop_subcontainer):

box-shadow: 0px 0px 3px #aaa;
-moz-transition: 0.7s ease-in-out;
-webkit-transition: 0.7s ease-in-out;[/b][/b]

Why is this part not working for my subcontainer? Not any effect. I've tried to much already..really hope you could help me out..

Best regards,

Lennart

Hi,

We need a link to a page if we want to help you correctly.
Please note that we are not designer but developers.

Regards,

I know Jerome, but I'm glad you take a look for me. It's just those three lines css which won't work for me. I also tried other fora but I did not get a solutions yet..

This is the Website adres
Mainpage --> CSS as I want for Hikashop -->
box-shadow: 0px 0px 3px #aaa;
-moz-transition: 0.7s ease-in-out;
-webkit-transition: 0.7s ease-in-out;
Why does this not have any effect on the .hikashop_subcontainer?

See menu-item HikaShop for the "HikaShop"


If needed I can dm you my joomla inlog for the css. Really hope you can help me out..

Hi,

It seems that you have solved your problem.
The problem generally come from another property which can override your properties.
So you can use "!important" to use yours instead of the other one.

ex: color: red !important;

Thanks for your good advice. Indeed I just fixed it. I found out that I forgot a hover part to effect the container. Now it's the effect I want!