{"id":49992,"date":"2015-07-01T03:19:06","date_gmt":"2015-07-01T07:19:06","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=49992"},"modified":"2016-02-25T04:22:09","modified_gmt":"2016-02-25T09:22:09","slug":"cherryframework-4-how-to-add-custom-css-styles","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cherryframework-4-how-to-add-custom-css-styles.html","title":{"rendered":"CherryFramework 4. How to add custom CSS styles"},"content":{"rendered":"

\r\n

Hello! This video tutorial shows how to add custom CSS styles in CherryFramework 4 templates.<\/p>\r\n

CherryFramework 4. How to add custom CSS styles<\/a><\/p>\r\n

There are some custom CSS styles<\/strong> that you may want to implement to your site to make some element\/section look the way you need.<\/p>\r\n

Great functionality of CherryFramewok allows you to add such styles directly from WordPress dashboard, so you do not have to edit any files.<\/p>\r\n

Let’s learn how to do it.<\/p>\r\n

Let’s say, you would like to edit the header navigation menu links hover color<\/strong>:<\/p>\r\n

\"cherryframework_4._how_to_add_custom_css_styles_1\"<\/a><\/p>\r\n

If you still have not heard about the Firebug extension<\/a> for Firefox browser, you should definitely get familiar with it!<\/p>\r\n

    \r\n
  1. \r\n

    Using Firebug<\/strong> or Inspect element<\/strong> feature of your browser locate the CSS class<\/strong> assigned to header navigation menu links hover<\/strong>:<\/p>\r\n

    \"cherryframework_4._how_to_add_custom_css_styles_2\"<\/a>\r\n<\/li>\r\n

  2. \r\n

    Click on the CSS class<\/strong> with your right mouse button and choose “Copy Rule Declaration”<\/strong> option to copy it to the clipboard:<\/p>\r\n

    \"cherryframework_4._how_to_add_custom_css_styles_3\"<\/a>\r\n<\/li>\r\n

  3. \r\n

    Now, access your WordPress dashboard and navigate to Cherry -> Options<\/strong>:<\/p>\r\n

    \"cherryframework_4._how_to_add_custom_css_styles_4\"<\/a>\r\n<\/li>\r\n

  4. \r\n

    On the appeared screen, the General<\/strong> tab will be active by default – this is the section of Cherry Options<\/strong> we need. Scroll down to the bottom of the Cherry Options<\/strong> interface to locate the “User CSS”<\/strong> field:<\/p>\r\n

    \"cherryframework_4._how_to_add_custom_css_styles_5\"<\/a>\r\n<\/li>\r\n

  5. \r\n

    Paste the previously copied CSS rule<\/strong> to the “User CSS”<\/strong> field using CTRL+V\/CMND+V<\/strong> key (Windows OS\/Mac OS).<\/p>\r\n<\/li>\r\n

  6. \r\n

    Replace the color code (#f62e46<\/strong>) with any desired one, e.g. black (#000000<\/strong>).<\/p>\r\n<\/li>\r\n

  7. \r\n

    Click the “Save options”<\/strong> button to apply changes:<\/p>\r\n

    \"cherryframework_4._how_to_add_custom_css_styles_6\"<\/a>\r\n<\/li>\r\n<\/ol>\r\n

    Navigate to your site front-end and refresh the page to see changes.<\/p>\r\n

    You can see the header navigation links hover color is changed to black now:<\/p>\r\n

    \"cherryframework_4._how_to_add_custom_css_styles_7\"<\/a><\/p>\r\n

    This is the end of the tutorial, you have learnt how to add custom CSS styles in your CherryFramework 4 template.<\/p>\r\n

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

    CherryFramework 4. How to add custom CSS styles<\/a><\/p>","protected":false},"excerpt":{"rendered":"

    This video tutorial shows how to add custom CSS styles in CherryFramework 4 templates.<\/p>\n","protected":false},"author":68,"featured_media":50001,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[514,789,517,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/49992"}],"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\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=49992"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/49992\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/50001"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=49992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=49992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=49992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}