Themes
Spectrum Color Picker Theme Change for VamShop 2
Submitter: VaM
Released: Sun, 28-Jun-2015
Release status:
Downloads: 941
File size: 293.29 kB
File Type: zip
Download times
Modem(56k) : 48s
ISDN(64k) : 42s
DSL(768k) : 3s
LAN(10M) : 0.27s
ISDN(64k) : 42s
DSL(768k) : 3s
LAN(10M) : 0.27s
Rating (0 Votes)
Reviews (0
)
Price: Free
Platform: None
License: None
Limitations: None
Platform: None
License: None
Limitations: None
Spectrum Color Picker Theme Change for VamShop 2.
How to install
1. Copy files from archive.
2. Open Admin - Layout - Templates - Main Layout, after
{bender src="{base_path}/css/jquery/plugins/colorbox/colorbox.css"}
add:
{bender src="{base_path}/css/jquery/plugins/color-picker/spectrum.css"}
after:
{bender src="{base_path}/js/jquery/plugins/colorbox/jquery.colorbox-min.js"}
add:
{bender src="{base_path}/js/jquery/plugins/jquery.cookie.js"}
{bender src="{base_path}/js/jquery/plugins/color-picker/spectrum.js"}
And add this code to the most suitable place:
<input id="color-picker" />
3. Add this code to /app/webroot/js/vamshop.js
// Color Picker
function updateColors(color) {
var col = "transparent";
if(color) {
col = color.toHexString();
}
if(color != $.cookie("vamshop-color")) {
$.cookie("vamshop-color", color.toHexString(), { expires: 30, path: '/' })
}
$(".navbar-default").css("background", col);
$(".navbar-default .navbar-collapse").css("border-color", col);
$(".navbar-default .navbar-form").css("border-color", col);
$(".btn-warning").css({"background": col,"border": "1px solid "+col});
$(".btn-warning.checkout").css("background", col);
$(".featured-categories .thumbnail .title").css("background", col);
$(".shop-products .thumbnail .price").css("background", col);
}
$(function() {
var col = "transparent";
if(typeof $.cookie("vamshop-color") != "undefined"){
col = $.cookie("vamshop-color");
}
$(".navbar-default").css("background", col);
$(".navbar-default .navbar-collapse").css("border-color", col);
$(".navbar-default .navbar-form").css("border-color", col);
$(".btn-warning").css({"background": col,"border": "1px solid "+col});
$(".btn-warning.checkout").css("background", col);
$(".featured-categories .thumbnail .title").css("background", col);
$(".shop-products .thumbnail .price").css("background", col);
if (!col) { var col = "#ff6633";}
$("#color-picker").spectrum({
allowEmpty:true,
color: col,
showInput: true,
showButtons: false,
showInitial: true,
showPalette: true,
showSelectionPalette: true,
hideAfterPaletteSelect:true,
clickoutFiresChange: true,
showAlpha: true,
preferredFormat: "hex",
localStorageKey: "vamshop",
move: function (color) {
updateColors(color);
},
show: function () {
},
beforeShow: function () {
},
hide: function (color) {
updateColors(color);
},
palette: [
["rgb(255, 102, 51)", "rgb(0, 129, 194)", "rgb(26, 177, 36)", "rgb(208, 22, 22)", "rgb(210, 193, 82)", "rgb(163, 163, 163)", "rgb(85, 85, 85)"]
]
});
});
4. Reset cache files at Admin - Configurations - Store Settings - Reset Cache button at bottom right.
5. Delete /app/webroot/css/vamshop-packed.css file.
Support http://support.vamshop.com
How to install
1. Copy files from archive.
2. Open Admin - Layout - Templates - Main Layout, after
{bender src="{base_path}/css/jquery/plugins/colorbox/colorbox.css"}
add:
{bender src="{base_path}/css/jquery/plugins/color-picker/spectrum.css"}
after:
{bender src="{base_path}/js/jquery/plugins/colorbox/jquery.colorbox-min.js"}
add:
{bender src="{base_path}/js/jquery/plugins/jquery.cookie.js"}
{bender src="{base_path}/js/jquery/plugins/color-picker/spectrum.js"}
And add this code to the most suitable place:
<input id="color-picker" />
3. Add this code to /app/webroot/js/vamshop.js
// Color Picker
function updateColors(color) {
var col = "transparent";
if(color) {
col = color.toHexString();
}
if(color != $.cookie("vamshop-color")) {
$.cookie("vamshop-color", color.toHexString(), { expires: 30, path: '/' })
}
$(".navbar-default").css("background", col);
$(".navbar-default .navbar-collapse").css("border-color", col);
$(".navbar-default .navbar-form").css("border-color", col);
$(".btn-warning").css({"background": col,"border": "1px solid "+col});
$(".btn-warning.checkout").css("background", col);
$(".featured-categories .thumbnail .title").css("background", col);
$(".shop-products .thumbnail .price").css("background", col);
}
$(function() {
var col = "transparent";
if(typeof $.cookie("vamshop-color") != "undefined"){
col = $.cookie("vamshop-color");
}
$(".navbar-default").css("background", col);
$(".navbar-default .navbar-collapse").css("border-color", col);
$(".navbar-default .navbar-form").css("border-color", col);
$(".btn-warning").css({"background": col,"border": "1px solid "+col});
$(".btn-warning.checkout").css("background", col);
$(".featured-categories .thumbnail .title").css("background", col);
$(".shop-products .thumbnail .price").css("background", col);
if (!col) { var col = "#ff6633";}
$("#color-picker").spectrum({
allowEmpty:true,
color: col,
showInput: true,
showButtons: false,
showInitial: true,
showPalette: true,
showSelectionPalette: true,
hideAfterPaletteSelect:true,
clickoutFiresChange: true,
showAlpha: true,
preferredFormat: "hex",
localStorageKey: "vamshop",
move: function (color) {
updateColors(color);
},
show: function () {
},
beforeShow: function () {
},
hide: function (color) {
updateColors(color);
},
palette: [
["rgb(255, 102, 51)", "rgb(0, 129, 194)", "rgb(26, 177, 36)", "rgb(208, 22, 22)", "rgb(210, 193, 82)", "rgb(163, 163, 163)", "rgb(85, 85, 85)"]
]
});
});
4. Reset cache files at Admin - Configurations - Store Settings - Reset Cache button at bottom right.
5. Delete /app/webroot/css/vamshop-packed.css file.
Support http://support.vamshop.com
Features
System requirements
User reviews
Other files by VaM
- Spanish language for VamShop (Wed, 14-Nov-2018)
- Portuguese language for VamShop (Tue, 24-Apr-2018)
- Gift Module (Tue, 15-Aug-2017)
- Italian language for VamShop (Sun, 19-Mar-2017)
- Stripe Payment Module (Wed, 16-Nov-2016)
- VamShop (Fri, 04-Nov-2016)
- Cerulean (Fri, 04-Nov-2016)
- Cosmo (Fri, 04-Nov-2016)
- Cyborg (Fri, 04-Nov-2016)
- Darkly (Fri, 04-Nov-2016)
- Flatly (Fri, 04-Nov-2016)
- Journal (Fri, 04-Nov-2016)
- Lumen (Fri, 04-Nov-2016)
- Paper (Fri, 04-Nov-2016)
- Readable (Fri, 04-Nov-2016)
- Sandstone (Fri, 04-Nov-2016)
- Simplex (Fri, 04-Nov-2016)
- Slate (Fri, 04-Nov-2016)
- Spacelab (Fri, 04-Nov-2016)
- Superhero (Fri, 04-Nov-2016)