{"id":49567,"date":"2015-06-22T01:10:38","date_gmt":"2015-06-22T05:10:38","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=49567"},"modified":"2017-08-01T05:48:06","modified_gmt":"2017-08-01T09:48:06","slug":"wordpress-how-to-change-pages-pre-loader","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-change-pages-pre-loader.html","title":{"rendered":"WordPress Cherry 3.x. How to change pages pre-loader"},"content":{"rendered":"

\r\n

The following tutorial will show you how to edit pages pre-loader in WordPress.<\/p>\r\n

WordPress. How to change pages pre-loader<\/a><\/p>\r\n

\r\n\r\n\r\n<\/a>\r\n<\/div>\r\n
    \r\n
  1. \r\n

    You’ll need to use a developer tool <\/a>like Firebug<\/strong> to locate code that needs to be changed in CSS. Please reload the site, right click on loader and choose Inspect with Firebug<\/strong>:<\/p>\r\n

    \t\t\"1\"<\/a><\/p>\r\n<\/li>\r\n

  2. \r\n

    In the Style<\/strong> field you’ll see the css code that displays the loader:<\/p>\r\n

    \t\t\"2\"<\/a><\/p>\r\n<\/li>\r\n

  3. \r\n

    Please copy all the rules you located with needed selector (in our case #loader) to the bottom of your Cherry options -> General -> Custom css<\/strong> field to edit there:<\/p>\r\n

    \"3\"<\/a>\r\n<\/p>\r\n<\/li>\r\n

  4. \r\n

    You can change the animation features, color, thickness of the lines and so on:<\/p>\r\n

    \t\t\"4\"<\/a><\/p>\r\n<\/li>\r\n

  5. \r\n

    Please check here<\/a> for more detailed explanation on how to work with animation in CSS. <\/p>\r\n<\/li>\r\n

  6. \r\n

    Here let’s try to change the HEX color<\/a> and the thickness of the lines in the loader by changing values next to color and border:<\/p>\r\n

    \t\t\"5\"<\/a><\/p>\r\n<\/li>\r\n

  7. \r\n

    Once you’re done editing, please hit Save options<\/strong> and reload the front-end of your site to see the result:<\/p>\r\n

    \"6\"<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n

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

    WordPress. How to change pages pre-loader<\/a><\/p>\r\n

    <\/p>","protected":false},"excerpt":{"rendered":"

    The following tutorial will show you how to edit pages pre-loader in Wordpress.<\/p>\n","protected":false},"author":81,"featured_media":49576,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[572,2003,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/49567"}],"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\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=49567"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/49567\/revisions"}],"predecessor-version":[{"id":82401,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/49567\/revisions\/82401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/49576"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=49567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=49567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=49567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}