• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Reading progress barr in CSS only

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Reading progress barr in CSS only

This topic is: not resolved

Tagged: css, header, progress bar

  • This topic has 13 replies, 4 voices, and was last updated 2 years, 3 months ago by ssamioglu.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 21, 2020 at 12:04 pm #501541
    Krzysztof
    Participant

    This might be a long shot but here it comes.


    @Anitac
    has helped me to solve a long standing problem with the reading time.

    Recently I have spotted an extra layer of information for our readers. A progress bar. As usually I have to do things the hard way which means no plugins. I had very bad experience with them and try to avoid them. We also want to have our site to work without scripts.

    So I did a bit of digging and found something like this:

    Pure CSS Scroll Depth Indicator

    The thing is that it would have to be somehow accommodated into my Essence-pro theme.

    We sometimes have very long articles, and the minutes calculation at the top is very good, but when there is 30 minutes of reading it might not be enough and a progress bar might be helpful.

    Is this even feasible?

    Could this be integrated into the normal header or a secondary would have to be created?

    It looks easy on that website but when I look at the Essence-pro file it stops looking that easy.

    Any hints for a simple solution?

    http://infolotnicze.pl
    October 21, 2020 at 4:18 pm #501542
    Krzysztof
    Participant

    I have found another example.
    https://www.silocreativo.com/en/time-progress-bar-css/

    I have used the option to add additional css from WordPress theme customization options but it broke everything. Any hints where to smack it to make it work?

    October 25, 2020 at 2:16 pm #501592
    Anita
    Keymaster

    @Krzysztof I have *removed* my previous message from here since the answer did not work for your use.


    Love coffee, chocolate and my Bella!

    October 26, 2020 at 6:09 am #501601
    andytc
    Participant

    Hi Anita , I tried your tutorial CSS , it works fine on blog posts , but messes up the blog archive on Essence pro for some reason and it also appears on every page.

    October 26, 2020 at 6:18 am #501602
    Krzysztof
    Participant

    I can confirm that. It is shown on home page and in other places. If it could be tweaked to only appear in single posts it would be awesome!

    For me it also breaks the author box in a single post view. It is gone and a big blank space is shown.

    October 26, 2020 at 6:00 pm #501608
    Anita
    Keymaster

    I fixed my Gist but they have other issues with their code that I am looking into.


    Love coffee, chocolate and my Bella!

    October 27, 2020 at 12:32 am #501614
    Krzysztof
    Participant

    I have removed the extra code from my funcitins.php for testing and it looks like that this extra code doesn't brake the single post look. I still can't see the author box - just a blank space. As i recall I have made no other changes to the Essnce Pro except removing a bit of css to show the search in mobile view.

    October 27, 2020 at 4:07 am #501616
    andytc
    Participant

    Anita , the CSS causes the leave a Comment box and author box to be hidden

    October 27, 2020 at 4:58 am #501617
    Anita
    Keymaster

    Appreciate the response. I know about this already. I am working on a resolving this and almost finished. Essence Pro has a lot of things in other files. And they too have things stuffed in there too.


    Love coffee, chocolate and my Bella!

    October 27, 2020 at 7:23 am #501620
    Anita
    Keymaster

    In answering the initial question here of merely adding it to Essence Pro, it does work, however... a few things. Everything is inside the one element. In order to make all of that work with Author Box, Comments and anything else stuffed in that element, the blog page would need to be deconstructed to separate those things out. The main reason is because the title is overlaid across the hero image so I cannot target just the title. If the title was not on the overlay, this would could be done. I am going to need to leave this now for someone who may be more experienced and who may have the time and willingness to deconstruct this.


    Love coffee, chocolate and my Bella!

    October 27, 2020 at 10:34 am #501624
    andytc
    Participant

    You could do this with a little bit of JS if you're prepared to use a small script- this version will calculate the length of the 'article' and not the whole page , most I've seen calculate the whole body of the page , but that will include comments and other content on the page , which might not be ideal if you've got tons of comments or content after.

    We'll control where it's shown with a conditional for single posts -

    Add to childtheme functions.php

    // Add Scroll Indicator for single posts 
    
    add_action( 'genesis_before_content', 'pl_page_scroll_indicator' );
    
    function pl_page_scroll_indicator () {
    
    	if ( is_single () ) { ?>	
    
    	   <div class="progress-bar"></div>
    			
    	<script>
        jQuery(document).ready(function($) { 
    	
    	    $(window).scroll(function() {
    		    // calculate the percentage the user has scrolled the article
    		    var scrollwin = $(window).scrollTop();
    		    var articleheight = $('article').outerHeight(true);
    		    var windowWidth = $(window).width();
    		    if(scrollwin >= $('article').offset().top){
    		        if(scrollwin <= ($('article').offset().top + articleheight)){
    		        $('.progress-bar').css('width', ((scrollwin - $('article').offset().top) / articleheight) * 100 + "%"  );
    		        }else{
    		        $('.progress-bar').css('width',"100%");
    		        }
    			    }else{
    			    $('.progress-bar').css('width',"0px");
    		    }
    		});
    	}); 
    	</script>
    
    <?php }
    
    }

    Add to custom CSS -

    .progress-bar {
      height: 5px;
      background-color: #009ACF;
      width: 0px;
      z-index: 1000;
      position: sticky;
      top: 0px;
      left: 0;
    }

    that's it , your done. Make coffee , enjoy

    October 27, 2020 at 10:58 am #501625
    andytc
    Participant

    TO ADD - You could also add a custom field to that conditional that would give you the option to select which posts to show it on , post by post

    October 28, 2020 at 1:21 am #501637
    Krzysztof
    Participant

    I have tested the code, and it works OK, but had to revert the whole website to a js website. Maybe someone else will use it. For us it would be a 180 degree turn so we just settle at not having it. Maybe there will be another way to do it without js in the future. All the best!

    December 5, 2020 at 9:52 am #502213
    ssamioglu
    Participant

    Hi Guys,

    I am using news pro latest version on akillisebekeler.com. And I have put https://gist.github.com/nutsandbolts/16e74d427490ef6a7911 code into function.php to show the post views. But I could not customize the CSS.

    Can you help?

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble