[For 1.8] Implement nprogress bar in theme or style
#1
Basic tutorial added upon reading through posts and noticing someone recently requested how to do exactly this specific simple task and no answer to such was yet supplied.

1) Ok, to add such to themes, first, in headerinclude template find:

{$stylesheets}

Add this initialization snippet found below after such:

<!-- Progress Bar -->
<link type="text/css" rel="stylesheet" href="{$mybb->asset_url}/progressbar/nprogress.css">
<script type="text/javascript" src="{$mybb->asset_url}/progressbar/nprogress.js"></script>
<script>
    NProgress.configure({ showSpinner: false });
        $(document).ready(function() {
            NProgress.start();
            NProgress.done();
        });
</script>


-- this initialization placed in the header include requires 2 files, nprogress.css (stylesheet) & nprogress.js (js file)

-- since you will note that the dir used in snippet example is /progressbar/ and as such we would need to create such directory and place said files within it* (also you most likely might then consider that you would just maybe want to add such dir say specific to each theme directory instead and modify include snippet to reflect such as then you could style / edit the respective corresponding files specific to each theme if so desired, though that is entirely up to you)

*Note: said dir and files are zipped and provided as attachment below.

2) Ok, on that note, secondly you would now download, unzip and upload that dir and files to respective location on host.


For anyone seeking to add such to admin styles, such can also be done but it must be added in style.php wherever you want such initialized and the corresponding files must be added to the respective acp style directory

basic example of such include:

        // ADD Progressbar
        echo" <link rel=\"stylesheet\" href=\"styles/".$this->style."/inc/progressbar/nprogress.css\"/>\n";
        echo" <script type=\"text/javascript\" src=\"styles/".$this->style."/inc/progressbar/nprogress.js\"></script>\n";
        echo "<script>
            NProgress.configure({ showSpinner: false });
            $(document).ready(function() {
            NProgress.start();
            NProgress.done();
            }); 
            </script>\n"; 

Ok, hopefully that is easy enough to understand for either if desired implementations.


Attached Files
.zip   progressbar.zip (Size: 4.4 KB / Downloads: 0)
Reply
#2
Preview would be appreciated
Reply
#3
This is the reference with preview:
https://ricostacruz.com/nprogress/

[ETS]
MyBB Forum + innovative full-responsive Theme
Live-Escape-Game-Forum
Reply
#4
Thanks for the tip.

But I do not get this in order even though you follow the guide. These two files what should these be?
Reply
#5
(2022-05-15, 04:46 AM)OakleY Wrote: Thanks for the tip.

But I do not get this in order even though you follow the guide. These two files what should these be?

Hmm, hopefully I am understanding what you are asking...

Ok, see this part of the include before initialization?

<link type="text/css" rel="stylesheet" href="{$mybb->asset_url}/progressbar/nprogress.css">
<script type="text/javascript" src="{$mybb->asset_url}/progressbar/nprogress.js"></script>

that would mean as mentioned you would download the attached zip file attached to the initial post and extract it..., thus it will have a folder called progressbar and as such in such you will find:

/progressbar/
|---> nprogress.css
|---> nprogress.js

-- note: this is how you would upload it

also note: nprogress.css is the stylesheet for nprogress bar thus this file is what you would edit if you want to change the styling of the progress bar to reflect say relating colour to your respective theme desired colour formatting...

now you can choose to rename /progressbar/ directory folder to whatever you want, but, you will need to change the include path to reflect such...

so say  for example say you wanted to change the directory folder name to say /progbar/

you would change path to reflect such...

as in the initial post we begin and use

{$mybb->asset_url}

ie:

<link type="text/css" rel="stylesheet" href="{$mybb->asset_url}/progbar/nprogress.css">
<script type="text/javascript" src="{$mybb->asset_url}/progbar/nprogress.js"></script>

note: that this modified path and the initial tutorial example path places the progressbar directory folder in the forum root directory and could be used by multiple themes as such but if so such would be styled reflective to only that progressbar directory stylesheet.., hence why I mentioned that you just might want to if you so desired, make the path and directories specific to each theme thus allowing to style the progressbar stylesheet on a per theme basis.

ie:

via theme dir call:
{$theme['imgdir']}/progressbar

ie:

using default images dir with themename dir inside such:

Quote:images/themename

images/themename/progressbar/
|----------------------------> nprogress.css
|----------------------------> nprogress.js

-- note: this is how you would upload it


for example:
<link type="text/css" rel="stylesheet" href="{$theme['imgdir']}/progressbar/nprogress.css">
<script type="text/javascript" src="{$theme['imgdir']}/progressbar/nprogress.js"></script>


Or still via theme directory but in diff folder than images as images directory tends to get way cluttered if using as a themes directory so it tends to be cleaner say for example in using a primary /themes/ directory folder placed in the root dir via a folder called /themes/ that then holds /themename/ directories:  (this is something you may have seen some contributors over the years do in their releases rather than clutter the images directory as themes often contain much more than image files and as such cluttering such in the primary image folder is not necessarily preferred and is why something like a themes directory should have been implemented years ago, but regardless, back to the subject at hand, some folks opt to instead keep their theme directory and theme files organized by completely omitting any usage of the /images/ directory if that makes sense as to why you may see some releases use a forumroot/themes/themename/ directory path instead, haha.)

<link type="text/css" rel="stylesheet" href="{$mybb->asset_url}/themes/themename/progressbar/nprogress.css">
<script type="text/javascript" src="{$mybb->asset_url}/themes/themename/progressbar/nprogress.js"></script>

note: if you define the above directory in your theme settings correctly then you could still revert back to such usage as previously mentioned if desired

ie:

Quote:themes/themename

themes/themename/progressbar/
|----------------------------------> nprogress.css
|----------------------------------> nprogress.js

-- note: this is how you would opt to upload it per theme if so desired on a per theme basis


<link type="text/css" rel="stylesheet" href="{$theme['imgdir']}/progressbar/nprogress.css">
<script type="text/javascript" src="{$theme['imgdir']}/progressbar/nprogress.js"></script>



Now if your question was related to adding the files to say an admin style

        echo" <link rel=\"stylesheet\" href=\"styles/".$this->style."/inc/progressbar/nprogress.css\"/>\n";
        echo" <script type=\"text/javascript\" src=\"styles/".$this->style."/inc/progressbar/nprogress.js\"></script>\n";

You will note that in the example, the progressbar folder and files would be placed in the admin styles directory within the admin style itself inside the inc folder but again such could be changed by modifying the path in the include, again such is up to you.

For example, the admin style include snippet example adds a folder called inc inside the specific admin style and then places progressbar inside such since progressbar is an include thus the thought process of adding an inc folder to then place include related folders and files into such if that makes sense...

For example if as example you were to use the supplied snippet and files to add to default acp style...

ie:

Quote:forumroot/admin/styles/default/inc/progressbar

forumroot/admin/styles/default/inc/progressbar
|---------------------------------------------------> nprogress.css
|---------------------------------------------------> nprogress.js

-- note: this is how you would opt to upload it per acp style if so desired on a per acp style basis


Hopefully that all makes sense and may answer your question. Best of luck.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)