Skip to content

Issues with Progress Bar on v3

Solved Customisation
48 4 17.8k 1
  • how i can fix it? as i know i use also your css codes, i did not anything wihtouth you 🙂

    @cagatay I’m not sure yet. I will need to look at this when I have some free time. For now, you could disable the progress bar by removing the header.

  • @cagatay The reason this fails for you is because you have to auto-hide the bottom bar

    b103c8c9-eb9f-45ee-9c7d-335a73e83fed-image.png

    I’ve made this change and it’s now working for the most part - but it should also float with the bottom bar depending on it’s position. Not sure why that’s not working but looking now.

    @phenomlab said in Issues with Progress Bar on v3:

    @cagatay The reason this fails for you is because you have to auto-hide the bottom bar

    b103c8c9-eb9f-45ee-9c7d-335a73e83fed-image.png

    I’ve made this change and it’s now working for the most part - but it should also float with the bottom bar depending on it’s position. Not sure why that’s not working but looking now.

    i did disable mode auto hide 🙂 now working normally on phones.

  • @phenomlab said in Issues with Progress Bar on v3:

    @cagatay The reason this fails for you is because you have to auto-hide the bottom bar

    b103c8c9-eb9f-45ee-9c7d-335a73e83fed-image.png

    I’ve made this change and it’s now working for the most part - but it should also float with the bottom bar depending on it’s position. Not sure why that’s not working but looking now.

    i did disable mode auto hide 🙂 now working normally on phones.

    @cagatay Excellent.

  • yop Mark 🙂

    I see this on progress bar :

    On small screen resolutions, the space between the arrows and the background div (progress bar) is not fixed.
    It wouldn’t hurt to add fixed spaces no matter the resolution

    image.png

  • yop Mark 🙂

    I see this on progress bar :

    On small screen resolutions, the space between the arrows and the background div (progress bar) is not fixed.
    It wouldn’t hurt to add fixed spaces no matter the resolution

    image.png

    @DownPW I already have that here?

    a959fe2a-7fdf-4663-88fa-aa042d755576-image.png

    EDIT - I see what you mean here

    b35c5d62-460d-4204-8d45-401f36a852fd-image.png

  • OMG. Why on earth did I use percentages??? 😱

    .pageUp {
        font-size: 1.25rem !important;
        left: 6%;
        line-height: 1.5;
        position: absolute;
        z-index: 10;
    }
    .pageDown {
        font-size: 1.25rem !important;
        line-height: 1.5;
        position: absolute;
        right: 6%;
        z-index: 10;
    }
    

    Change the left and right values shown above to be 1rem (or whatever value you’d prefer) and not 6% 😕

    So

    .pageUp {
        font-size: 1.25rem!important;
        left: 1rem;
        line-height: 1.5;
        position: absolute;
        z-index: 10;
    }
    
    .pageDown {
        font-size: 1.25rem!important;
        line-height: 1.5;
        position: absolute;
        right: 1rem;
        z-index: 10;
    }
    
  • OMG. Why on earth did I use percentages??? 😱

    .pageUp {
        font-size: 1.25rem !important;
        left: 6%;
        line-height: 1.5;
        position: absolute;
        z-index: 10;
    }
    .pageDown {
        font-size: 1.25rem !important;
        line-height: 1.5;
        position: absolute;
        right: 6%;
        z-index: 10;
    }
    

    Change the left and right values shown above to be 1rem (or whatever value you’d prefer) and not 6% 😕

    So

    .pageUp {
        font-size: 1.25rem!important;
        left: 1rem;
        line-height: 1.5;
        position: absolute;
        z-index: 10;
    }
    
    .pageDown {
        font-size: 1.25rem!important;
        line-height: 1.5;
        position: absolute;
        right: 1rem;
        z-index: 10;
    }
    

    @phenomlab said in Issues with Progress Bar on v3:

    OMG. Why on earth did I use percentages???

  • I often use my mobile landscape, and then this progress bar takes up a lot of the screen.
    Screenshot_20230627_202643_Chrome.jpg

    Id rather remove it entirely.
    How can I do that, another CSS fix?

  • I often use my mobile landscape, and then this progress bar takes up a lot of the screen.
    Screenshot_20230627_202643_Chrome.jpg

    Id rather remove it entirely.
    How can I do that, another CSS fix?

    @Panda Yes, that would be the only way as this is part of the core.

  • @Panda Yes, that would be the only way as this is part of the core.

    @phenomlab ok how could I do that please?

    I have an old flarum forum I had given up with, but I have to say its looking nicer than nodebb on mobile now. I prefer minimalistic and uncluttered look.

  • @phenomlab ok how could I do that please?

    I have an old flarum forum I had given up with, but I have to say its looking nicer than nodebb on mobile now. I prefer minimalistic and uncluttered look.

    @Panda You could use the below

    .page-topic .pagination-block.ready {
        display: none;
    }
    

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • External Links - New Window

    Solved Customisation nodebb links settings
    8
    2 Votes
    8 Posts
    2k Views
    @Sampo2910 search the forum here for ogproxy which is the client side version of that plugin I wrote. It’s in use here on this forum.
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    3k Views
    Thank you Mark, the changes look fantastic!!
  • Fancybox zoom

    Unsolved Customisation fancybox zoom image
    2
    1
    0 Votes
    2 Posts
    852 Views
    @DownPW Technically, it should be possible with the addition of the below Toolbar: { display: { left: ["infobar"], middle: [ "zoomIn", "zoomOut", "toggle1to1", "rotateCCW", "rotateCW", "flipX", "flipY", ], right: ["slideshow", "thumbs", "close"], }, }, Meaning your code block becomes function fancybox() { if (top.location.pathname !== '/login') { $(document).ready(function() { $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"], a[href*=".svg"]').addClass("noanimate"); }); }); Fancybox.bind( 'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"], a[href*=".svg"]', { Toolbar: { display: { left: ["infobar"], middle: [ "zoomIn", "zoomOut", "toggle1to1", "rotateCCW", "rotateCW", "flipX", "flipY", ], right: ["slideshow", "thumbs", "close"], }, }, } ); } } Note, that you just need to add/remove the elements in the toolbar you do not need. Obviously, zoomIn and zoomOut are the ones you are specifically interested in. However, if Fancybox detects that the image has already been zoomed as far as possible, then this will not work. You’d need an external library such as zoom.js to add this functionality, or perhaps simpler https://www.jacklmoore.com/zoom/ A good example of how you’d make these two independent libraries work together is below https://codepen.io/ezra_siton/pen/VgrjKw It’s worth nothing that this specific code is based on Fancybox 3, so may need to be refactored to work with the latest version 5.
  • What is this bar called?

    Solved Customisation nodebb
    92
    1
    36 Votes
    92 Posts
    37k Views
    This is good
  • Header Menu After Upgrading V3.1.1

    Solved Customisation header nodebb
    2
    1
    2 Votes
    2 Posts
    1k Views
    @cagatay this relates to a change the css classes used for the brand header meaning it will now float to the left instead of right. If you’d like to retain the original behavior, you can add this css class [data-widget-area="brand-header"] { justify-content: end; display: flex; } Further information here https://community.nodebb.org/topic/17090/manual-build-a-custom-header-in-harmony/19?_=1684069325296
  • NodeBB v3 Vote Icon

    Solved Customisation icons vote icons
    9
    2 Votes
    9 Posts
    3k Views
    @phenomlab forget it, look likes good with your codes.
  • [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    258
    49 Votes
    258 Posts
    149k Views
    mark hi, Refused to apply style from ‘https://efelsefe.com/assets/customfonts/FontAwesome-6-Pro/pro/css/v4-font-face.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. I keep getting this error.
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    8k Views
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.