Archived topic
Bulk Add Colors to the Customiser
3 replies · Started by Zlatan on January 28, 2023
Hi,
is there a way to add a lot of colors to the customiser at once?
I have them in this format and there are about 36 defined colors:
accents-plus-200: #FF7B59;
accents-plus-300: #FFB069;
accents-plus-400: #FCD936;
I am sorry if this has been answered somewhere else, but I did not find anything.
kind regards,
Zlatan
Hi there,
if you go to Settings > GeneratePress you can export the Global Colors.
It will provide a .json file.
You can edit that in a desktop IDE or an online JSON editor.
The code will look something like this:
{
"global-colors": [
{
"name": "contrast",
"slug": "contrast",
"color": "#222222"
},
{
"name": "contrast-2",
"slug": "contrast-2",
"color": "#575760"
},
{
"name": "contrast-3",
"slug": "contrast-3",
"color": "#b2b2be"
},
{
"name": "base",
"slug": "base",
"color": "#f0f0f0"
},
{
"name": "base-2",
"slug": "base-2",
"color": "#f7f8f9"
},
{
"name": "base-3",
"slug": "base-3",
"color": "#ffffff"
},
{
"name": "accent",
"slug": "accent",
"color": "#1e73be"
},
{
"name": "global-color-8",
"slug": "global-color-8",
"color": ""
}
]
}You would need to add a block for each color:
{
"name": "contrast-2",
"slug": "contrast-2",
"color": "#575760"
},Save the json and then import it into GP.... but to be honest i am not sure if that would be any quicker then adding them in the customizer
I greatly appreciate your help. I totally forgot bout the export/import feature.
I did some googling and experimented with some JavaScript code to find a solution that worked for me. I created a basic HTML page with JavaScript that converted my input into the JSON format. I then copied and pasted the result into a JSON file and imported it into GeneratePress. It worked perfectly for my problem.
Would have been quicker if I added it manually, though :D But at least I learned new stuff :)
Here is the code, if anyone is interested
<!DOCTYPE html>
<html>
<head>
<title>Color Form</title>
<script>
function updateJSON() {
var newColors = document.getElementById("new-colors").value;
var colorArray = newColors.split("\n");
var globalColors = JSON.parse(document.getElementById("global-colors").innerHTML);
for (var i = 0; i < colorArray.length; i++) {
var color = colorArray[i].split(":");
globalColors["global-colors"].push({
"name": color[0].trim(),
"slug": color[0].trim(),
"color": color[1].trim()
});
}
document.getElementById("global-colors").innerHTML = JSON.stringify(globalColors, null, 2);
}
</script>
</head>
<body>
<h1>Add New Colors</h1>
<form>
<textarea id="new-colors" rows="10" cols="30"></textarea><br>
<button type="button" onclick="updateJSON()">Add Colors</button>
</form>
<pre id="global-colors">
{
"global-colors": [
{
"name": "black",
"slug": "black",
"color": "#000000"
}
]
}
</pre>
</body>
</html>thats awesome - and thank you for sharing this :)