- This topic has 8 replies, 4 voices, and was last updated 7 years, 10 months ago by mirthar.
-
AuthorPosts
-
May 21, 2016 at 4:37 am #195641Roberto Enrique
Have you ever noticed the red loading bar in youtube’s topmost part?
Well, adding that functionality to your GP powered site is pretty easy with Pace.js
You just need to add the script and the desired style to your child theme folder (i usually create dedicated folders for /js and /css stuff in my child themes) and then add this to your functions.phpfunction pacejs_styles_and_scripts() { wp_enqueue_style( 'pace', get_stylesheet_directory_uri() . '/css/pace-theme-flash.css'); wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/js/pace.min.js'); } add_action( 'wp_enqueue_scripts', 'pacejs_styles_and_scripts' );
As you can see in the Pace.js website there are a lot of styles already available, my personal favorite is the flash theme but you can choose another one just replacing/adding the css file in the css folder with the one you like and eventually modifying the wp_enqueue_style in the function accordingly.
If you feel lazy you can use a ready made child theme that can be downloaded here:
http://www.artomultiplo.net/extra/gp-pacejs.zipYou can see a working example here: filippogismondo.artomultiplo.net
I think it really helps reducing the perceived slowlyness of a website π
Hope you like it
May 21, 2016 at 9:37 am #195689TomLead DeveloperLead DeveloperOooh, fancy! Thanks Roberto! π
May 24, 2016 at 3:49 am #196330mirtharHi there!
I was messing around with this code, but I really can’t get it working on my local installation of generate press.
I tried with a couple of others child themes of mine and seems to work flawlessy in each one of them.
The result I get with generate press is a violet bar loading at the center of the screen and the regular animation you choose via css. I really don’t get what I am missing…
Could you please shed some light? π
(I love this theme soooooooo much, just bought the add-on bundle yesterday)May 24, 2016 at 7:23 am #196377MoscheI personally love playing around with css. And making child themes.
Especially since Generatepress with its ad-ons makes it so easy.
However for the less technically savvy. I’d recommend the plugin:https://wordpress.org/plugins/brozzme-material-loading/
It’s interface lets you choose all the options.Line height, color, style etc.
Much easier for novice users.May 24, 2016 at 7:40 am #196386mirtharThanks for the info Mosche!
I really appreciate your answer and I will definitely give it a look.However, I still don’t get why I can’t get the effects I want only in generatepress π
It’s like if the script gets loaded twice. Once with the standard default loading bar in the center and in the meantime the correct animation gets loaded too…I tried the same snippet on 4 different child themes without any issue and obtaining exactly the effect I should have
Can someone help me to point out why?
May 24, 2016 at 7:52 am #196389Roberto EnriqueWhy don’t you share your child?
May 24, 2016 at 9:54 am #196416mirtharOf course!
Thanks for your interest in helping me out π
Here it is!<?php /** * Generate child theme functions and definitions * * @package Generate */ function pacejs_styles_and_scripts() { wp_enqueue_style( 'pace', get_stylesheet_directory_uri() . '/css/pace-theme-corner-indicator.css'); wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/js/pace.min.js'); } add_action( 'wp_enqueue_scripts', 'pacejs_styles_and_scripts' );
Here you have link to see it in action:
https://drive.google.com/open?id=0B90-Gwn3YdBFc3JteVh2ekZSYTQMay 24, 2016 at 10:42 pm #196549Roberto EnriqueThat’s actually really weird.
Are you using any plugin that could be messing things up?May 24, 2016 at 11:36 pm #196554mirtharI deactivated everything, one by one and still no solution about it π
The really weird thing, is that this behaviour only happens with generatepress and not with any other theme. When I tried to switch between them all the plugins were active.
Any other guess?
Let me thank you all again for your kind interest π
-
AuthorPosts
- You must be logged in to reply to this topic.