Categories

Featured templates

WordPress Blogging themes. How to change pre-loader icon to an image

Joy Anderson April 10, 2017
Rating: 5.0/5. From 2 votes.
Please wait...

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:

  1. Log into the WordPress admin panel with your login credentials.

  2. Navigate to the Appearance -> Editor section. Open style.css file under the activated theme – in this case, it’s a King News theme.

  3. 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;
            }
         
  4. 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.

  5. 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
Responsive Wordpress Themes
This entry was posted in WordPress Tutorials and tagged image, preloader, WordPress Blogging themes. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket