[Skip to main content](#vessel-content) # Change Background Colour Dynamically ## - **[daza110](/forum/user/30854-daza110 "View daza110's Profile")** - [![daza110's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/30854-daza110 "View daza110's Profile") Topic Author - [ Offline](/forum/user/30854-daza110) Less More - Posts: 10 - Thank you received: 3 - - 12 years 7 months ago [\#146869](#146869) by [daza110](/forum/user/30854-daza110 "View daza110's Profile") *[Change Background Colour Dynamically](/forum/4-how-to/866378-change-background-colour-dynamically#146869 "I am wondering if the user can change the background colour of the image div. I have a variety of different colour stickers, and I would like the user to select the colour of their "car" and then the colour of theie desired sticker to see what it would like like roughly against their car. EG Is there car is RED they would select Red, this would then change the "hikashop_product_main_image" to a red background. Then they would select "White" as the colour and this would bring the White sticker up (I do this by uploading the relevent image to the product obviously). My images are a transparent png format so you can see the background colour where the transparency is. If this is possible that would be fantastic. Alternatively i dont mind uploading several different images, and then having the hikashop_product_main_image" div calling the relevent image. Any help would be great. Thanks")* was created by *[daza110](/forum/user/30854-daza110 "View daza110's Profile")* I am wondering if the user can change the background colour of the image div. I have a variety of different colour stickers, and I would like the user to select the colour of their "car" and then the colour of theie desired sticker to see what it would like like roughly against their car. EG Is there car is RED they would select Red, this would then change the "hikashop_product_main_image" to a red background. Then they would select "White" as the colour and this would bring the White sticker up (I do this by uploading the relevent image to the product obviously). My images are a transparent png format so you can see the background colour where the transparency is. If this is possible that would be fantastic. Alternatively i dont mind uploading several different images, and then having the hikashop_product_main_image" div calling the relevent image. Any help would be great. Thanks Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg2NjM3OC1jaGFuZ2UtYmFja2dyb3VuZC1jb2xvdXItZHluYW1pY2FsbHk/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")** - [![Mohamed Thelji's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar6861.png)](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") - [ Offline](/forum/user/6861-mohamed-thelji) Less More - Posts: 12953 - Thank you received: 1778 - - - 12 years 7 months ago [\#146911](#146911) by [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") Replied by *[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")* on topic *[Change Background Colour Dynamically](/forum/4-how-to/866378-change-background-colour-dynamically#146911 "I am wondering if the user can change the background colour of the image div. I have a variety of different colour stickers, and I would like the user to select the colour of their "car" and then the colour of theie desired sticker to see what it would like like roughly against their car. EG Is there car is RED they would select Red, this would then change the "hikashop_product_main_image" to a red background. Then they would select "White" as the colour and this would bring the White sticker up (I do this by uploading the relevent image to the product obviously). My images are a transparent png format so you can see the background colour where the transparency is. If this is possible that would be fantastic. Alternatively i dont mind uploading several different images, and then having the hikashop_product_main_image" div calling the relevent image. Any help would be great. Thanks")* Hi, The best solution will probably be to directly add different images with the good background , because if you want to dynamically change the CSS regarding the selected characteristic, you'll have to do some code customization which will require development skills. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg2NjM3OC1jaGFuZ2UtYmFja2dyb3VuZC1jb2xvdXItZHluYW1pY2FsbHk/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[daza110](/forum/user/30854-daza110 "View daza110's Profile")** - [![daza110's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/30854-daza110 "View daza110's Profile") Topic Author - [ Offline](/forum/user/30854-daza110) Less More - Posts: 10 - Thank you received: 3 - - 12 years 7 months ago [\#146937](#146937) by [daza110](/forum/user/30854-daza110 "View daza110's Profile") Replied by *[daza110](/forum/user/30854-daza110 "View daza110's Profile")* on topic *[Change Background Colour Dynamically](/forum/4-how-to/866378-change-background-colour-dynamically#146937 "I am wondering if the user can change the background colour of the image div. I have a variety of different colour stickers, and I would like the user to select the colour of their "car" and then the colour of theie desired sticker to see what it would like like roughly against their car. EG Is there car is RED they would select Red, this would then change the "hikashop_product_main_image" to a red background. Then they would select "White" as the colour and this would bring the White sticker up (I do this by uploading the relevent image to the product obviously). My images are a transparent png format so you can see the background colour where the transparency is. If this is possible that would be fantastic. Alternatively i dont mind uploading several different images, and then having the hikashop_product_main_image" div calling the relevent image. Any help would be great. Thanks")* I have some basic skills in PHP and jQuery, slightly more advanced in CSS and HTML but upon investigation I found a nifty little colour picker plug-in, see it in action here on my site. [ www.thetrailerbox.com/shop/categories/ca...-stick-figure-family](http://www.thetrailerbox.com/shop/categories/car-stickers/product/733-alien-nobody-cares-about-your-stick-figure-family) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg2NjM3OC1jaGFuZ2UtYmFja2dyb3VuZC1jb2xvdXItZHluYW1pY2FsbHk/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Eliot](/forum/user/1824-eliot "View Eliot's Profile")** - [![Eliot's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar1824.png)](/forum/user/1824-eliot "View Eliot's Profile") - [ Offline](/forum/user/1824-eliot) Less More - Posts: 2334 - Thank you received: 403 - - 12 years 7 months ago [\#146945](#146945) by [Eliot](/forum/user/1824-eliot "View Eliot's Profile") Replied by *[Eliot](/forum/user/1824-eliot "View Eliot's Profile")* on topic *[Change Background Colour Dynamically](/forum/4-how-to/866378-change-background-colour-dynamically#146945 "I am wondering if the user can change the background colour of the image div. I have a variety of different colour stickers, and I would like the user to select the colour of their "car" and then the colour of theie desired sticker to see what it would like like roughly against their car. EG Is there car is RED they would select Red, this would then change the "hikashop_product_main_image" to a red background. Then they would select "White" as the colour and this would bring the White sticker up (I do this by uploading the relevent image to the product obviously). My images are a transparent png format so you can see the background colour where the transparency is. If this is possible that would be fantastic. Alternatively i dont mind uploading several different images, and then having the hikashop_product_main_image" div calling the relevent image. Any help would be great. Thanks")* Good job! Thank you for sharing this with us, don't hesitate to post the name of the plugin you used, it might help other people ![;)](/media/kunena/emoticons/11.png ";)") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg2NjM3OC1jaGFuZ2UtYmFja2dyb3VuZC1jb2xvdXItZHluYW1pY2FsbHk/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[daza110](/forum/user/30854-daza110 "View daza110's Profile")** - [![daza110's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/30854-daza110 "View daza110's Profile") Topic Author - [ Offline](/forum/user/30854-daza110) Less More - Posts: 10 - Thank you received: 3 - - 12 years 7 months ago - 12 years 7 months ago [\#146963](#146963) by [daza110](/forum/user/30854-daza110 "View daza110's Profile") Replied by *[daza110](/forum/user/30854-daza110 "View daza110's Profile")* on topic *[Change Background Colour Dynamically](/forum/4-how-to/866378-change-background-colour-dynamically#146963 "I am wondering if the user can change the background colour of the image div. I have a variety of different colour stickers, and I would like the user to select the colour of their "car" and then the colour of theie desired sticker to see what it would like like roughly against their car. EG Is there car is RED they would select Red, this would then change the "hikashop_product_main_image" to a red background. Then they would select "White" as the colour and this would bring the White sticker up (I do this by uploading the relevent image to the product obviously). My images are a transparent png format so you can see the background colour where the transparency is. If this is possible that would be fantastic. Alternatively i dont mind uploading several different images, and then having the hikashop_product_main_image" div calling the relevent image. Any help would be great. Thanks")* [ www.eyecon.ro/colorpicker/](http://www.eyecon.ro/colorpicker/) The way I got this to work was with using the following in the <head> part of my index.php Code: <link href="/css/colorpicker.css" type="text/css" media="screen" rel="stylesheet"> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/colorpicker.js"></script> <script type="text/javascript" src="/js/eye.js"></script> <script type="text/javascript" src="/js/utils.js"></script> <script type="text/javascript" src="/js/layout.js></script> and then changing line 48 in the layout.js from $('#colorSelector div').css('backgroundColor', '#' + hex); to $('#hikashop_product_image_main').css('backgroundColor', '#' + hex); You also have to add in the following code to the product / show.php in hikashop display. <div id="colorSelector"> <div style="background-color: rgb(255, 0, 43);"></div> </div> Ohh and dont forget to create some width and height CSS styling for #colorSelector div otherwise you will be swearing like I was as to why it wasnt working!! Hope this will help someone in the future, If so wouldn't mind a Thank You ![:)](/media/kunena/emoticons/8.png ":)") Last edit: 12 years 7 months ago by [daza110](/forum/user/30854-daza110 "View daza110's Profile"). The following user(s) said Thank You: [Eliot](/forum/user/1824-eliot "View Eliot's Profile"), [Xavier](/forum/user/4105-xavier "View Xavier's Profile"), [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzg2NjM3OC1jaGFuZ2UtYmFja2dyb3VuZC1jb2xvdXItZHluYW1pY2FsbHk/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & 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.093 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)