[Skip to main content](#vessel-content)

#   Product display:template css style--&gt;hikashop css

##

- **[lenvo](/forum/user/27970-lenvo "View lenvo's Profile")**
- [![lenvo's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/27970-lenvo "View lenvo's Profile") Topic Author
- [ Offline](/forum/user/27970-lenvo)

Less More

- Posts: 8
- Thank you received: 0
-
-

13 years 1 month ago -  13 years 1 month ago [\#123619](#123619) by [lenvo](/forum/user/27970-lenvo "View lenvo's Profile")  *[Product display:template css style--&gt;hikashop css](/forum/26-product-category-display/861998-product-display-template-css-style-hikashop-css#123619 "First at all I must say i am a beginner in webdesign. I need some help to copy template css style --&gt; hikashop css style --&gt; hikashop&#95;subcontainer.  CSS TEMPLATE:  CSS Container included mouse-over effect: (I conclude it should be the syntax's below using chrome element inspect) &quot;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;&quot;   I've tried to use these syntax to effect each of my product containers separately but i can't make it work (hikashop&#95;subcontainer). I tried many css syntax's like here but nothing changes: 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")* was created by *[lenvo](/forum/user/27970-lenvo "View lenvo's Profile")*

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

CSS TEMPLATE:
[ ![&#91;img](http://static.afbeeldinguploaden.nl/1309/45251/RPuy.png) ](http://static.afbeeldinguploaden.nl/1309/45251/RPuy.png "&#91;img")

[ Mainpage](http://www.tasmanvakantie.nl) 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: [ ](http://bavotasan.com/2011/a-simple-fade-with-css3/)[ bavotasan.com/2011/a-simple-fade-with-css3/](http://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!
[ ![&#91;img](http://static.afbeeldinguploaden.nl/1309/45252/f0IRvWlN.png) ](http://static.afbeeldinguploaden.nl/1309/45252/f0IRvWlN.png "&#91;img")

Best regards,

Lennart

Last edit: 13 years 1 month ago by [lenvo](/forum/user/27970-lenvo "View lenvo's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjE5OTgtcHJvZHVjdC1kaXNwbGF5LXRlbXBsYXRlLWNzcy1zdHlsZS1oaWthc2hvcC1jc3M/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[lenvo](/forum/user/27970-lenvo "View lenvo's Profile")**
- [![lenvo's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/27970-lenvo "View lenvo's Profile") Topic Author
- [ Offline](/forum/user/27970-lenvo)

Less More

- Posts: 8
- Thank you received: 0
-
-

13 years 1 month ago -  13 years 1 month ago [\#123642](#123642) by [lenvo](/forum/user/27970-lenvo "View lenvo's Profile")  Replied by *[lenvo](/forum/user/27970-lenvo "View lenvo's Profile")* on topic *[Product display:template css style--&gt;hikashop css](/forum/26-product-category-display/861998-product-display-template-css-style-hikashop-css#123642 "First at all I must say i am a beginner in webdesign. I need some help to copy template css style --&gt; hikashop css style --&gt; hikashop&#95;subcontainer.  CSS TEMPLATE:  CSS Container included mouse-over effect: (I conclude it should be the syntax's below using chrome element inspect) &quot;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;&quot;   I've tried to use these syntax to effect each of my product containers separately but i can't make it work (hikashop&#95;subcontainer). I tried many css syntax's like here but nothing changes: 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]

Last edit: 13 years 1 month ago by [lenvo](/forum/user/27970-lenvo "View lenvo's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjE5OTgtcHJvZHVjdC1kaXNwbGF5LXRlbXBsYXRlLWNzcy1zdHlsZS1oaWthc2hvcC1jc3M/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Jerome](/forum/user/80-jerome "View Jerome's Profile")**
- [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile")
- [ Offline](/forum/user/80-jerome)
- HikaShop core developer

Less More

- Posts: 26394
- Thank you received: 4078
-
- [](http://obsi.dev)
-

13 years 1 month ago [\#123652](#123652) by [Jerome](/forum/user/80-jerome "View Jerome's Profile")  Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Product display:template css style--&gt;hikashop css](/forum/26-product-category-display/861998-product-display-template-css-style-hikashop-css#123652 "First at all I must say i am a beginner in webdesign. I need some help to copy template css style --&gt; hikashop css style --&gt; hikashop&#95;subcontainer.  CSS TEMPLATE:  CSS Container included mouse-over effect: (I conclude it should be the syntax's below using chrome element inspect) &quot;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;&quot;   I've tried to use these syntax to effect each of my product containers separately but i can't make it work (hikashop&#95;subcontainer). I tried many css syntax's like here but nothing changes: 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")*

Hi,

You can override the views if you want to change the HTML structure.
[ www.hikashop.com/support/documentation/1...ize-the-display.html](http://www.hikashop.com/support/documentation/153-customize-the-display.html)

Regards,

---

Jerome - Obsidev.com
HikaMarket &amp; HikaSerial developer / HikaShop core dev team.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjE5OTgtcHJvZHVjdC1kaXNwbGF5LXRlbXBsYXRlLWNzcy1zdHlsZS1oaWthc2hvcC1jc3M/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[lenvo](/forum/user/27970-lenvo "View lenvo's Profile")**
- [![lenvo's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/27970-lenvo "View lenvo's Profile") Topic Author
- [ Offline](/forum/user/27970-lenvo)

Less More

- Posts: 8
- Thank you received: 0
-
-

13 years 1 month ago -  13 years 1 month ago [\#123656](#123656) by [lenvo](/forum/user/27970-lenvo "View lenvo's Profile")  Replied by *[lenvo](/forum/user/27970-lenvo "View lenvo's Profile")* on topic *[Product display:template css style--&gt;hikashop css](/forum/26-product-category-display/861998-product-display-template-css-style-hikashop-css#123656 "First at all I must say i am a beginner in webdesign. I need some help to copy template css style --&gt; hikashop css style --&gt; hikashop&#95;subcontainer.  CSS TEMPLATE:  CSS Container included mouse-over effect: (I conclude it should be the syntax's below using chrome element inspect) &quot;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;&quot;   I've tried to use these syntax to effect each of my product containers separately but i can't make it work (hikashop&#95;subcontainer). I tried many css syntax's like here but nothing changes: 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")*

Change the HTML structure? I've read the documentation but did not helped me further or I just don't understand.. ![:unsure:](/media/kunena/emoticons/22.png ":unsure:")

**This is the working part of the class CSS --&gt; .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

Last edit: 13 years 1 month ago by [lenvo](/forum/user/27970-lenvo "View lenvo's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjE5OTgtcHJvZHVjdC1kaXNwbGF5LXRlbXBsYXRlLWNzcy1zdHlsZS1oaWthc2hvcC1jc3M/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Jerome](/forum/user/80-jerome "View Jerome's Profile")**
- [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile")
- [ Offline](/forum/user/80-jerome)
- HikaShop core developer

Less More

- Posts: 26394
- Thank you received: 4078
-
- [](http://obsi.dev)
-

13 years 1 month ago [\#123660](#123660) by [Jerome](/forum/user/80-jerome "View Jerome's Profile")  Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Product display:template css style--&gt;hikashop css](/forum/26-product-category-display/861998-product-display-template-css-style-hikashop-css#123660 "First at all I must say i am a beginner in webdesign. I need some help to copy template css style --&gt; hikashop css style --&gt; hikashop&#95;subcontainer.  CSS TEMPLATE:  CSS Container included mouse-over effect: (I conclude it should be the syntax's below using chrome element inspect) &quot;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;&quot;   I've tried to use these syntax to effect each of my product containers separately but i can't make it work (hikashop&#95;subcontainer). I tried many css syntax's like here but nothing changes: 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")*

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,

---

Jerome - Obsidev.com
HikaMarket &amp; HikaSerial developer / HikaShop core dev team.

The following user(s) said Thank You: [lenvo](/forum/user/27970-lenvo "View lenvo's Profile")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjE5OTgtcHJvZHVjdC1kaXNwbGF5LXRlbXBsYXRlLWNzcy1zdHlsZS1oaWthc2hvcC1jc3M/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[lenvo](/forum/user/27970-lenvo "View lenvo's Profile")**
- [![lenvo's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/27970-lenvo "View lenvo's Profile") Topic Author
- [ Offline](/forum/user/27970-lenvo)

Less More

- Posts: 8
- Thank you received: 0
-
-

13 years 1 month ago -  13 years 1 month ago [\#123664](#123664) by [lenvo](/forum/user/27970-lenvo "View lenvo's Profile")  Replied by *[lenvo](/forum/user/27970-lenvo "View lenvo's Profile")* on topic *[Product display:template css style--&gt;hikashop css](/forum/26-product-category-display/861998-product-display-template-css-style-hikashop-css#123664 "First at all I must say i am a beginner in webdesign. I need some help to copy template css style --&gt; hikashop css style --&gt; hikashop&#95;subcontainer.  CSS TEMPLATE:  CSS Container included mouse-over effect: (I conclude it should be the syntax's below using chrome element inspect) &quot;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;&quot;   I've tried to use these syntax to effect each of my product containers separately but i can't make it work (hikashop&#95;subcontainer). I tried many css syntax's like here but nothing changes: 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")*

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 ](http://www.tasmanvakantie.nl)
**Mainpage --&gt; CSS as I want for Hikashop --&gt;**
*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"**
[ ![&#91;img](http://static.afbeeldinguploaden.nl/1309/45313/7nm.png) ](http://static.afbeeldinguploaden.nl/1309/45313/7nm.png "&#91;img")

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

Last edit: 13 years 1 month ago by [lenvo](/forum/user/27970-lenvo "View lenvo's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjE5OTgtcHJvZHVjdC1kaXNwbGF5LXRlbXBsYXRlLWNzcy1zdHlsZS1oaWthc2hvcC1jc3M/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")**
- [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile")
- [ Offline](/forum/user/4105-xavier)

Less More

- Posts: 13201
- Thank you received: 2322
-
-
-
- [](http://www.kidiweb.fr)
-

13 years 1 month ago [\#123742](#123742) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile")  Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[Product display:template css style--&gt;hikashop css](/forum/26-product-category-display/861998-product-display-template-css-style-hikashop-css#123742 "First at all I must say i am a beginner in webdesign. I need some help to copy template css style --&gt; hikashop css style --&gt; hikashop&#95;subcontainer.  CSS TEMPLATE:  CSS Container included mouse-over effect: (I conclude it should be the syntax's below using chrome element inspect) &quot;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;&quot;   I've tried to use these syntax to effect each of my product containers separately but i can't make it work (hikashop&#95;subcontainer). I tried many css syntax's like here but nothing changes: 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")*

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;

The following user(s) said Thank You: [lenvo](/forum/user/27970-lenvo "View lenvo's Profile")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjE5OTgtcHJvZHVjdC1kaXNwbGF5LXRlbXBsYXRlLWNzcy1zdHlsZS1oaWthc2hvcC1jc3M/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[lenvo](/forum/user/27970-lenvo "View lenvo's Profile")**
- [![lenvo's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/27970-lenvo "View lenvo's Profile") Topic Author
- [ Offline](/forum/user/27970-lenvo)

Less More

- Posts: 8
- Thank you received: 0
-
-

13 years 1 month ago [\#123767](#123767) by [lenvo](/forum/user/27970-lenvo "View lenvo's Profile")  Replied by *[lenvo](/forum/user/27970-lenvo "View lenvo's Profile")* on topic *[Product display:template css style--&gt;hikashop css](/forum/26-product-category-display/861998-product-display-template-css-style-hikashop-css#123767 "First at all I must say i am a beginner in webdesign. I need some help to copy template css style --&gt; hikashop css style --&gt; hikashop&#95;subcontainer.  CSS TEMPLATE:  CSS Container included mouse-over effect: (I conclude it should be the syntax's below using chrome element inspect) &quot;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;&quot;   I've tried to use these syntax to effect each of my product containers separately but i can't make it work (hikashop&#95;subcontainer). I tried many css syntax's like here but nothing changes: 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")*

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! ![:)](/media/kunena/emoticons/8.png ":)")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjE5OTgtcHJvZHVjdC1kaXNwbGF5LXRlbXBsYXRlLWNzcy1zdHlsZS1oaWthc2hvcC1jc3M/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop- Install &amp; Update- Product &amp; Category Display- Content Creation- Sales and Orders- - Orders management- - Reports &amp; Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import &amp; Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel &amp; Slider- - Mass Actions- - Filters &amp; Search- - Discount &amp; Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.098 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)

[](#top)
