{"id":35840,"date":"2015-06-22T05:08:12","date_gmt":"2015-06-22T09:08:12","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=35840"},"modified":"2017-12-13T09:53:49","modified_gmt":"2017-12-13T14:53:49","slug":"wordpress-cherry-framework-keeps-reverting-my-css-changes","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-cherry-framework-keeps-reverting-my-css-changes.html","title":{"rendered":"WordPress. Cherry Framework 3.x keeps reverting my CSS changes"},"content":{"rendered":"

<\/p>\r\n

Below you can see the list of reasons that cause issues with CSS changes (like reverting changes performed to template styles).<\/p>\r\n

    \r\n
  1. \r\n

    Changes were performed in CherryFramework files instead of themeXXXXX child theme files.\r\n <\/p>\r\n<\/li>\r\n

  2. \r\n

    Changes were performed in main-style.css<\/strong> file.<\/p>\r\n<\/li>\r\n

  3. \r\n

    Changes performed in themeXXXXX\/style.css<\/strong> file without declaration of !important property.<\/p>\r\n<\/li>\r\n

  4. \r\n

    Changes performed in Custom CSS<\/strong> section were not saved before updating CherryFramework and were not put back and saved after update.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

    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.<\/p>\r\n

    This tutorial shows how to perform changes to CSS properly.<\/p>\r\n

    WordPress. Cherry Framework keeps reverting my CSS changes<\/a><\/p>\r\n

    Let\u2019s check structure of CSS files<\/strong> in child theme (themeXXXXX).\r\n<\/p>\r\n

      \r\n
    1. \r\n

      style.css<\/strong> \u2013 the main CSS file. It is required for the correct theme functionality, you can also add custom CSS styles here.\r\n <\/p>\r\n<\/li>\r\n

    2. \r\n

      style.less<\/strong> \u2013 the .less file with the theme CSS styles.\r\n <\/p>\r\n<\/li>\r\n

    3. \r\n

      main-style.css <\/strong>\u2013 the CSS file with the theme styles. It is generated automatically<\/strong> from style.less file, that is why you
      \r\n SHOULD NOT<\/strong> perform changes in main-style.css<\/strong> file. <\/p>\r\n

      \"WordPress.<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n

      Below you will see how implement changes to CSS properly. <\/p>\r\n

      How to define custom styles in style.css<\/strong> file?<\/h3>\r\n
        \r\n
      1. \r\n

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

        \"WordPress.<\/a><\/p>\r\n<\/li>\r\n

      2. \r\n

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

        \"WordPress.<\/a><\/p>\r\n<\/li>\r\n

      3. \r\n

        Refresh page and check your site. We can see that color was changed due to override specified in style.css<\/strong> file.<\/p>\r\n

        \"WordPress.<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n

        How to define custom styles in style.less <\/strong>file?<\/h3>\r\n
          \r\n
        1. \r\n

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

        2. \r\n

          Open style.less<\/strong> file (which is located in your themeXXXXX <\/strong>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.<\/p>\r\n

          \"WordPress.<\/a><\/p>\r\n<\/li>\r\n

        3. \r\n

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

          \"WordPress.<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n

          How to define custom styles in Cherry Options<\/strong>?<\/h3>\r\n

          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.<\/em>\r\n<\/p>\r\n

            \r\n
          1. \r\n

            You may define your custom styles under Cherry Options->General tab.<\/strong><\/p>\r\n

            \"WordPress.<\/a><\/p>\r\n<\/li>\r\n

          2. \r\n

            Scroll to Custom CSS<\/strong> section (you can find Custom CSS section at the bottom of General <\/strong>tab page). Inspect element using Firebug software<\/a>. 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.<\/p>\r\n

            \"WordPress.<\/a><\/p>\r\n<\/li>\r\n

          3. \r\n

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

            Be sure to open General tab in Cherry options and click Save when CherryFramework update was performed (such action is required after update).<\/p>\r\n

            \"WordPress.<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n

            Feel free to check the detailed video tutorial below:<\/p>\r\n

            WordPress. Cherry Framework keeps reverting my CSS changes<\/a><\/p>\r\n

            <\/p>\r\n

            In the event you might need more templates to choose from, go ahead and see stylish wordpress themes<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"

            Below you can see the list of reasons that cause issues with CSS changes (like reverting changes performed to template styles).<\/p>\n","protected":false},"author":39,"featured_media":35858,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1711,1419,514,1048,1129,1362,1200,1712],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/35840"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=35840"}],"version-history":[{"count":2,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/35840\/revisions"}],"predecessor-version":[{"id":83509,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/35840\/revisions\/83509"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/35858"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=35840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=35840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=35840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}