- This topic has 3 replies, 2 voices, and was last updated 3 years, 6 months ago by
.
-
Posts
-
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,
ZlatanCustomer Support
Hi there,
if you go to Settings > GeneratePress you can export the Global Colors.
It will provide a.jsonfile.
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 😀 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 🙂
- You must be logged in to reply to this topic.
