SVG Preloader using CSS

Support
#1

Hello, so i have a html file with a div that has a logo svg inside it, a css file that has all of the styles and animations for the logo and a js that stops the preloader when the content is loaded … my big question is where do i put these ? I mean i’m pretty sure the css and js code is put in the theme’s general css and js tabs but where do i put this html ? What am i missing ? I want this preloade to be site wide … Thanks !

#2

Hello Alexandru,

Thanks for writing in!

The custom CSS and JS code should be placed in the Theme Options’ css and js section. As for the html code, it should be place exactly where you want it to display. If your custom html is a preloader then it must be added or integrated into the theme and to do that, since what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

Once you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/FOOTER/BASE.PHP
// -----------------------------------------------------------------------------
// Includes the wp_footer() hook and closes out the .x-site <div>, .x-root
// <div>, <body> and <html> tags.
// =============================================================================

?>

    <?php do_action( 'x_before_site_end' ); ?>

    </div> <!-- END .x-site -->

    <?php do_action( 'x_after_site_end' ); ?>

  </div> <!-- END .x-root -->

  <!-- Insert the custom html code between here -->

  <!-- Insert the custom html code between here -->

<?php wp_footer(); ?>

</body>
</html>

3] Save the file named as base.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/views/footer/

You will have to create the folder path since it does not exist yet in your child theme.

We would love to know if this has worked for you. Thank you.

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.