WordPress. Cherry Framework 3.x keeps reverting my CSS changes

Below you can see the list of reasons that cause issues with CSS changes (like reverting changes performed to template styles).

1. Changes were performed in CherryFramework files instead of themeXXXXX child theme files.

2. Changes were performed in main-style.css file.

3. Changes performed in themeXXXXX/style.css file without declaration of !important property.

4. Changes performed in Custom CSS section were not saved before updating CherryFramework and were not put back and saved after update.

IMPORTANT: All CSS changes should be performed in child theme. Usually it is called like themeXXXXX. Please DO NOT perform changes in CherryFramework folder as all changes will be lost after CherryFramework update.

This tutorial shows how to perform changes to CSS properly.

WordPress. Cherry Framework keeps reverting my CSS changes

Let’s check structure of CSS files in child theme (themeXXXXX).

1. style.css – the main CSS file. It is required for the correct theme functionality, you can also add custom CSS styles here.

2. style.less – the .less file with the theme CSS styles.

3. main-style.css – the CSS file with the theme styles. It is generated automatically from style.less file, that is why you
   SHOULD NOT perform changes in main-style.css file.

   

Below you will see how implement changes to CSS properly.

How to define custom styles in style.css file?

1. Let’s change color of the button. Inspect element using Firebug software. We can see that styles for our button are defined in main-styles.css file. DO NOT perform changes in main-styles.css file as it is generated automatically from style.less and all changes performed to this file will be lost. Copy CSS style declaration.

   

2. Open style.css file (which is located in your themeXXXXX folder). Paste CSS style declaration. Leave modified part of code (in our case it’s background property) and add !important directive (in this case our style will have highest priority). Save changes.

   

3. Refresh page and check your site. We can see that color was changed due to override specified in style.css file.

   

How to define custom styles in style.less file?

1. You may define your custom styles in style.less file (in some cases styles defined in style.css file can be overridden by styles defined in style.less file). Inspect element using Firebug software. DO NOT perform changes in main-styles.css file as it is generated automatically from style.less and all changes performed to this file will be lost. Copy CSS styles declaration.

2. Open style.less file (which is located in your themeXXXXX folder). Paste CSS style declaration. Leave modified part of code (in our case it’s background property) and add !important code (in this case our style will have highest priority). Save changes.

   

3. Refresh page and check your site. Now we can see that the style we have specified in style.less file was compiled to main-style.css file. It means that previous file was removed and new one was generated instead. That is why you SHOULD NOT perform changes in main-style.css file.

   

How to define custom styles in Cherry Options?

IMPORTANT: Be sure to back up custom code (save on storage device or in cloud) as this custom code may not be saved after CherryFramework update. You will need to put this code when CherryFramework will be updated. You may save code as .txt file and store it on storage device or cloud.

1. You may define your custom styles under Cherry Options->General tab.

   

2. Scroll to Custom CSS section (you can find Custom CSS section at the bottom of General tab page). Inspect element using Firebug software. Copy CSS style declaration. In most cases !important should not be specified as custom styles defined in Custom CSS tab have the highest priority. Save changes.

   

3. Refresh the page and check your site. We can see that original styles were overridden. Once again, be sure to back up CSS styles you have specified in Custom CSS section of Cherry options. You may save them as .txt file and store in storage device or cloud.

   Be sure to open General tab in Cherry options and click Save when CherryFramework update was performed (such action is required after update).

   

Feel free to check the detailed video tutorial below:

WordPress. Cherry Framework keeps reverting my CSS changes

In the event you might need more templates to choose from, go ahead and see stylish wordpress themes.