- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
WordPress Blogging themes. How to change pre-loader icon to an image
April 10, 2017
This tutorial shows how to change a pre-loader icon to an image in your WordPress Blogging theme.
In order to change the pre-loader icon, you should perform the following steps:
-
Log into the WordPress admin panel with your login credentials.
-
Navigate to the Appearance -> Editor section. Open style.css file under the activated theme – in this case, it’s a King News theme.
-
Add the following css rule to the bottom of this style.css file:
.tm-folding-cube .tm-cube { display:none!important; } .tm-folding-cube { width: 400px; height: 100px; top: 50%; left: 50%; margin-top: -50px; margin-left: -200px; position: relative; background:url('your_full_image_link') no-repeat center center; background-size:contain; -webkit-transform: rotateZ(0deg) !important; -ms-transform: rotate(0deg) !important; transform: rotateZ(0deg) !important; }
-
Insert your image link into the rule instead of your_full_image_link and click on “Update File“.
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.
-
Refresh the frontend to check the result.
Now you know how to change a pre-loader icon to an image in your WordPress Blogging theme.
Feel free to check the detailed video tutorial below:
WordPress Blogging themes. How to change pre-loader icon to an image