If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

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

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