{"id":80241,"date":"2017-04-10T10:27:54","date_gmt":"2017-04-10T14:27:54","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=80241"},"modified":"2017-12-12T08:14:58","modified_gmt":"2017-12-12T13:14:58","slug":"wordpress-blogging-themes-change-pre-loader-icon-image","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-blogging-themes-change-pre-loader-icon-image.html","title":{"rendered":"WordPress Blogging themes. How to change pre-loader icon to an image"},"content":{"rendered":"<p>This tutorial shows how to change a pre-loader icon to an image in your <a href=\"https:\/\/www.templatemonster.com\/blog-wordpress-themes\/\" target=\"_blank\" title=\"Blog WordPress Themes\">WordPress Blogging theme<\/a>.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/izewo7SyXYY\"><\/iframe>\r\n<\/div>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n  <p>In order to change the pre-loader icon, you should perform the following steps:<\/p>\r\n  <ol>\r\n    <li>\r\n      <p>Log into the WordPress <strong>admin panel<\/strong> with your login credentials.<\/p>\r\n    <\/li>\r\n    <li>\r\n      <p>Navigate to the <strong>Appearance -> Editor<\/strong> section. Open <strong>style.css<\/strong> file under the activated theme \u2013 in this\r\n      case, it\u2019s a <strong>King News theme<\/strong>.<\/p>\r\n\t  \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_1.png\" alt=\"\" width=\"1200\" height=\"720\" class=\"alignnone size-full wp-image-80242\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_1.png 1200w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_1-150x90.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_1-300x180.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_1-768x461.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_1-1024x614.png 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a>\t  \r\n    <\/li>\r\n    <li>\r\n      <p>Add the following css rule to the bottom of this <strong>style.css<\/strong> file:<\/p>\r\n      <pre class=\"brush:css\">\r\n        .tm-folding-cube .tm-cube {\r\n          display:none!important;\r\n        }\r\n        .tm-folding-cube {\r\n          width: 400px;\r\n          height: 100px;\r\n          top: 50%;\r\n          left: 50%;\r\n          margin-top: -50px;\r\n          margin-left: -200px;\r\n          position: relative;\r\n          background:url('your_full_image_link') no-repeat center center;\r\n          background-size:contain;\r\n          -webkit-transform: rotateZ(0deg) !important;\r\n          -ms-transform: rotate(0deg) !important;\r\n          transform: rotateZ(0deg) !important;\r\n        }\r\n     <\/pre>\r\n    <\/li>\r\n    <li>\r\n      <p>Insert your image link into the rule instead of your_full_image_link and click on <strong>\u201cUpdate File\u201c<\/strong>.<\/p>\r\n      <p>You can manage desired image size by adjusting the width and height properties values. Top and left should remain with 50% to provide image center positioning. The same purpose serve margin-top and margin-left properties, so they are set with a value of half of width and height.<\/p>\r\n\t  \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_2.png\" alt=\"\" width=\"1210\" height=\"734\" class=\"alignnone size-full wp-image-80243\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_2.png 1210w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_2-150x91.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_2-300x182.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_2-768x466.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/03\/WPBlogging_How_to_change_pre-loader_icon_to_an_image_2-1024x621.png 1024w\" sizes=\"(max-width: 1210px) 100vw, 1210px\" \/><\/a>\t  \r\n    <\/li>\r\n    <li>\r\n      <p>Refresh the frontend to check the result.<\/p>\r\n    <\/li>\r\n  <\/ol>\r\n    <p>Now you know how to change a pre-loader icon to an image in your WordPress Blogging theme.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=izewo7SyXYY?width=1280&amp;height=720\" rel=\"prettyPhoto\">WordPress Blogging themes. How to change pre-loader icon to an image<\/a>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to change a pre-loader icon to an image in your WordPress Blogging theme.<\/p>\n","protected":false},"author":127,"featured_media":80244,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[537,2447,2302],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80241"}],"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\/127"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=80241"}],"version-history":[{"count":8,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80241\/revisions"}],"predecessor-version":[{"id":83414,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80241\/revisions\/83414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/80244"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=80241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=80241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=80241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}