Option to change theme color

Hi, io also have other site which I am using theme called Spacious Pro. Currently I only can change my skin color either dark or light. Is their ways that I have more options to change my site skin color to as many different colors not just beside dark and light?

Thanks
Chad

  • Adam Czajczyk

    Hello Chad,

    I hope you're well today and thank you for your question!

    Is that the "Spacious Pro" theme from ThemeGrill? It's a premium theme and I do not have access to it but there's a free version available too and that one does indeed have only two skin color options (light and dark).

    I'm not sure though if Pro version does offer more options "out of the box" as I don't have access to it and I can't find any information on this on their website. If that's not a free but Pro version I would suggest getting in touch with ThemeGrill directly and asking them whether more skins is available and if they should be already included with your theme (and if so, why they are not).

    Apart from that, such "skins" are usually just sets of CSS rules so you could add your own based on existing one. However, the way it is handled in a theme depends on a particular theme code so it would be best to ask theme developers about how to do this.

    In case they weren't able to help you, let me know please and I'll do my best to find a way for you to create new skins.

    Best regards,
    Adam

  • CHAD

    Hi Adam,

    I asked themegrill and they are unable to help me. I don't think they are fully support their customer to satisfaction as you guys. I asked them other issues before but they couldn't help me instead Luis took my request and escalated to resolve my other issue.

    can you help to provide me some codes to allow me to change theme to several different skin color option?

    Thanks in advance for your help.
    Chad

  • Adam Czajczyk

    Hello Chad,

    Thank you for your replay!

    I'm a bit surprised that ThemeGrill's support weren't able to help you with such thing but I'll do my best to find a solution for you. I do however only have the free version of the theme at hand so I'm not sure how different it is from the Pro one. Having said that, there are two ways to proceed with that:

    1) I can work on my free theme and hopefully it turns out that the solution will work the same way with your Pro theme; I can't say that for sure though

    2) You could upload your pro version of the theme to some file storage space such as Dropbox or Google Drive (preferably not a public file sharing service as we do not want to distribute premium theme without developer consent!) and then share a private download link with me here. I would then download the theme (just for internal use!), install it on my test setup and work on it to find a solution for you. I have already marked this thread as internal so if you post download link here only you and WPMU DEV staff will have access to it. I can also remove the link once I download the theme.

    Let me know which option would you prefer and I'll be happy to assist you with this :slight_smile:

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Chad,

    Thank you for sorting out download access issue.

    I was able to download the theme and find a way to add new skins. I hope that will serve you well :slight_smile:

    I have attached the basic child theme for Spacious Pro to this post. It's a most basic one but it already supports adding additional skins and below I'm explaining how to add them. All the steps apply to the child theme and should be performed in child theme folders/files.

    1. Inside the "/spacious-pro-child/css/" folder you will find following files: "dark.css" and "red.css"

    The "dark.css" file is actually never used but it's for you to create your own modified skin. The "red.css" is just a "test skin" that is actually a full copy of "dark.css" skin with just one main color set to red so it would be easy to distinguish.

    Therefore the first step is to copy the "dark.css" file (inside that same folder) to another one, with a name relevant to the skin color. For example: for "red" skin it's "red.css", for "blue" skin it would be "blue.css", for "MyNewSkin" it would be "mynewskin.css".

    The important part is that the skin "name" and file name must be the same and should not include any special characters, spaces etc.

    2. Second step is to create a jpg image that will serve as skin "preview" in Customizer; that can actually be any image and you can replace it later but it's necessary. That image should be put in to the "/css/skins" folder (you'll notice that there's already a "red.jpg" image).

    3. Now you'll want to edit the "functions.php" file inside the child theme folder; look for this part of code:

    'choices' => array(
             'light' => SPACIOUS_ADMIN_IMAGES_URL . '/light-color.jpg',
             'dark' => SPACIOUS_ADMIN_IMAGES_URL . '/dark-color.jpg',
    		 // add more choices below
    		 'red' => SPACIOUS_CHILD_URL . '/css/skins/red-color.jpg',
          )

    The one important line is this one:

    'red' => SPACIOUS_CHILD_URL . '/css/skins/red-color.jpg',

    Here's where you define your custom skins. As you can see, I have added my "red" skin here. You would want to replicate that line (with small adjustments) for each of your custom skins like that

    'red' => SPACIOUS_CHILD_URL . '/css/skins/red-color.jpg',
    		 'blue' => SPACIOUS_CHILD_URL . '/css/skins/blue-color.jpg',
    		 'mycustomskin' => SPACIOUS_CHILD_URL . '/css/skins/mycustomskin-color.jpg',

    The image file name is the name of a file that you created in step #2.

    4. Install/upload the child theme to your site and activate it.

    You'll now notice you new skin in customizer and it will be activated and automatically loaded.

    The last one step is now to make CSS changes in your new skin css file to make it your own. All you need to do to make that skin own is to adjust colors etc in existing rules in the css file that you created in step 1 and those will be automatically applied to the site.

    That should work fine and should be "independent" of parent style updates unless they completely change the way skins are handled. However, if they e.g. add skins in parent theme etc, that should not interfere.

    I hope that helps :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.