(2022-02-08, 04:42 PM)OakleY Wrote: [ -> ]Hello, I would like to know how to most easily add progbar under your theme?
Uses this theme - https://community.mybb.com/mods.php?acti...w&pid=1500
I want to remember that the member Vintagedaddyo had progbar under his themes.
![[Image: d8WVr4H.png]](https://camo.mybb.com/53c03e501e09e3719f51b1bc22b6867fbbbdca3b/68747470733a2f2f692e696d6775722e636f6d2f643857567234482e706e67)
Greetings, while you already noted that I posted a starting point tutorial here:
https://community.mybb.com/thread-235662.html related to this particular thread here recently after reading this post, I did not respond to this post at that time as was rather busy with other things, sorry about that. Ok, while you ask specific about two different themes, one that a past user created a good while ago that has the menu and progress bar you are asking about added to such menu and is a rather completed theme from back then with full default color stylesheets and such and while that contributor is no longer active as you noted in your post I did make note to you via pm that particular past contributr appears to have at least updated that old theme to 1.8.30 via github, but alas that already has the progress bar in such and then you mention another very similar theme by another newer contributor that does not have progress bar nor say the menu functionality implemented to any respect that I saw on quick glance either as the older theme did have, so while yes, the tutorial I provided recently in relation to this post and such questions I read here was posted more as a general tutorial on how to add the progress bar to any theme, I did just now have a few moments of free time and figured I would respond here with a more specific "how to" specific for you that while ignoring either themes mentioned in initial post, instead shows you step by step on how to start your very own theme project adding such menu (but the responsive menu that was not added in the original shared theme that had a functional menu, nor as already noted was there any functional menu added to the the newer contributors share of a similar type theme when I looked at it quickly after reading this post initially, thus I said why not provide you beyond the simple tutorial already provided in the tutorials sections simply a different tutorial response here on say, forget adding such to the newer contributors theme, and same if you did not also choose to use the older past contributors theme that already had the progressbar in such.., then why not just create your own via a tutorial to start youoff , If this interest you, then here is a tutorial to simply start you off on how to start your own theme, create the file paths, stylesheets, make only a few template edits and at the end of such have a menu, progress bar,, fonts, etc, etc added as a starting point and then can continue on from there.... hopefully that rather long winded response all makes sense, haha, had a bit of coffee before writing such, sorry, haha.
ie:
[attachment=45145]
[attachment=45146]
[attachment=45147]
Create a new theme...
for example:
Called "Dev"
then create a template set for example called:
"Dev Templates"
and attach them to the newly created theme called for example "dev"
Then in that new theme settings edit the following paths:
Image Directory:
Change to:
themes/dev/images
Board Logo:
Change to:
themes/dev/images/logo-knockout.png
then go into any remaining stylesheets in the new dev theme and change all instances of
images/
to:
themes/dev/images/
as this will simply and correctly reflect the defined file path for your new development theme.
Then you would dowload the included attachment "Upload.zip" shared below (as such contains various needed files) and extract such and upload the contents to your forum root directory as the containing files inside are correctly place so you should be fine with factoring simply that just when you extract the like the mybb dist core package "upload" is = to forum root directory, hopefully that makes sense on the ease of simply downloading and extracting the attachment and then uploading correctly...
Download related files:
[attachment=45144]
in this new theme add a stylesheet attached globally
and select write your own content...
then add the following:
.thead {
color:#fff;
background:#007fd0;
border:none;
font-size:1.1em;
padding:8px 12px;
}
.tcat {
color:#fff;
font-size:12px;
background:#444;
padding:8px 12px;
border:none;
}
#container {
min-width:unset;
}
.wrapper {
width:unset;
min-width:unset;
}
#content {
width:unset !important;
}
.modal{
width:300px;
}
.hidden{
display:none !important;
visibility:hidden;
}
.visually-hidden{
border:0;
clip:rect(0 0 0 0);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px;
}
.nowrap{
white-space:nowrap;
}
.logo{
display:block;
text-decoration:none;
}
.logo__icon>img{
height:44px;
width:48px;
display:inline-block;
vertical-align:middle
}
.logo__text{
font-family:"Asap",sans-serif;
font-style:italic;
color:#D9DADB;
text-indent:5px;
}
.logo:hover{
text-decoration:none;
}
.logo--light .logo__icon>svg *{
fill:#fff;
}
.logo--light:hover .logo__icon>svg *{
fill:#ccc;
}
.logo--primary .logo__icon>svg *{
fill:#007fd0;
}
.logo--primary:hover .logo__icon>svg *{
fill:#ff7500;
}
.header{
background:#393D3F;
}
@media only screen and (min-width: 768px){
.header{
display:flex;
flex-direction:row;
height:75px;
}
}
.header__title{
height:100%;
margin:0;
}
@media only screen and (min-width: 768px){
.header__title{
float:left;
}
}
.header__title .logo{
height:75px;
align-items:center;
display:flex;
}
@media only screen and (min-width: 768px){
.header__title .logo{
height:100%;
}
}
.header .wrapper{
position:relative;
}
.header .menu-button,.header .menu-close-button{
display:block;
position:absolute;
top:0;
right:0;
padding:24px 15px;
cursor:pointer;
}
.header .menu-button .icon svg,.header .menu-close-button .icon svg {
width:30px;
height:30px;
vertical-align:middle;
margin-top:-2px;
margin-left:0;
margin-right:0;
}
.header .menu-button .icon svg *,.header .menu-close-button .icon svg *{
fill:#fff !important;
}
.header .menu-button--hide,.header .menu-close-button--hide{
display:none;
}
@media only screen and (min-width: 768px){
.header .menu-button,.header .menu-close-button{
display:none;
}
}
.header__checkbox{
display:none;
}
.main-menu{
height:100%;
}
@media only screen and (max-width: 767px){
.main-menu{
display:none;
}
}
.main-menu__links{
height:100%;
list-style:none;
margin:0;
padding:0;
font-size:0;
display:flex;
}
@media only screen and (max-width: 767px){
.main-menu__links{
flex-wrap:wrap;
background:#444;
margin:0 -6%;
border-bottom:1px solid #666;
}
}
.main-menu__links__gap{
flex-grow:2;
}
@media only screen and (max-width: 767px){
.main-menu__links__gap{
display:none;
}
}
.main-menu__links__item{
flex-grow:1;
}
@media only screen and (max-width: 767px){
.main-menu__links__item{
width:100%;
box-sizing:border-box;
text-align:left;
border-top:1px solid #666;
}
}
.main-menu__links__item__link{
display:block;
margin:0;
font-size:1.8rem;
height:100%;
font-weight:300;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
transition:background .25s ease;
}
@media only screen and (max-width: 767px){
.main-menu__links__item__link{
text-align:left;
padding:8px 20px;
font-size:1.6rem;
justify-content:flex-start;
}
}
.main-menu__links__item__link:link,.main-menu__links__item__link:visited{
color:#fff;
text-decoration:none;
}
.main-menu__links__item__link:hover,.main-menu__links__item__link:active{
background:rgba(85,85,85,0.6);
}
.main-menu__links__item--search{
flex-grow:0;
padding:0 0 0 20px;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}
@media only screen and (max-width: 767px){
.main-menu__links__item--search{
display:none;
}
}
.main-menu__links__item--search__icon .icon svg{
width:20px;
height:20px;
vertical-align:middle;
margin-top:-2px;
margin-left:0;
margin-right:0;
}
.main-menu__links__item--search__icon .icon svg *{
fill:#999 !important;
}
.main-menu__links__item--search__icon:hover,.main-menu__links__item--search__icon:active{
cursor:pointer;
}
.main-menu__links__item--search__icon:hover .icon svg *,.main-menu__links__item--search__icon:active .icon svg *{
fill:#ccc !important;
}
.main-menu__links__item--active{
background:#007fd0;
color:#fff;
}
.main-menu__links__item--active .main-menu__links__item__link{
color:inherit;
}
.main-menu__links__item--active .main-menu__links__item__link:hover,.main-menu__links__item--active .main-menu__links__item__link:active{
background:#007fd0;
}
.site-search{
background:#393D3F;
display:none;
}
@media only screen and (min-width: 768px){
.site-search{
display:block;
text-align:right;
padding:15px 0 14px 0;
position:absolute;
top:0;
right:0;
width:77%;
will-change:transform;
transition:transform .25s linear,opacity .25s linear;
transform:translateY(-100%);
opacity:0;
}
.site-search input[type="text"].site-search__field{
margin:1px 5px 1px 0;
width:250px;
padding:7px 7px 8px 7px;
border-color:#fff;
}
.site-search__button--cancel.button{
margin-right:0;
display:inline-block;
}
}
@media only screen and (max-width: 767px){
.site-search{
margin:10px -10px 0 -10px;
}
.site-search input[type="text"].site-search__field{
width:63%;
display:inline-block;
padding:7px 7px 8px 7px;
margin:0 0 10px 0;
border-color:#fff;
box-sizing:border-box;
float:left;
}
.site-search__button--search.site-button{
width:35%;
margin:0 0 10px 0;
box-sizing:border-box;
float:right;
}
.site-search__button--cancel.site-button{
display:none;
}
}
@media only screen and (min-width: 768px){
#show-site-search:checked ~ .site-search{
opacity:1;
transform:translateY(0%);
}
}
@media only screen and (max-width: 767px){
#show-mobile-menu:checked ~ .main-menu{
display:block;
}
}
@media only screen and (max-width: 767px){
#show-mobile-menu:checked ~ .site-search{
display:block;
}
}
.js .header{
position:fixed;
z-index:10;
right:0;
left:0;
top:0;
}
.headroom{
will-change:transform;
transition:transform 200ms linear;
}
.headroom--pinned{
transform:translateY(0%);
}
.headroom--unpinned{
transform:translateY(-100%);
}
.headroom--unpinned.headroom--disabled{
transform:translateY(0%);
}
html,button,input,select,textarea{
color:#222;
word-wrap:break-word;
}
::selection{
background:#ff7500;
color:#fff;
text-shadow:none;
}
html{
font-size:10px;
}
body{
margin:0;
font:16px/26px "Open Sans",sans-serif;
background:#fff;
}
input,select,textarea,button{
font:16px "Open Sans",sans-serif;
}
a:link,a:visited{
color:#007fd0;
text-decoration:none;
}
a:hover,a:active{
color:#ff7500;
text-decoration:underline;
}
a:focus,button:focus{
outline:0;
}
img{
vertical-align:middle;
}
fieldset{
border:0;
margin:0;
padding:0;
}
.wrapper{
width:88%;
margin:0 6%;
box-sizing:border-box;
}
.wrapper:after{
content:"";
display:table;
clear:both;
}
@media only screen and (min-width: 1140px){
.wrapper{
max-width:1250px;
margin:0 auto;
}
}
.form{
border:1px solid #dfdfdf;
margin-bottom:40px;
border-radius:4px;
}
.form .buttons{
margin:-5px;
}
.form__submit{
border-radius:0 0 4px 4px;
background:#f7f7f7;
text-align:center;
padding:10px 0;
}
.textbox{
border:1px solid #ccc;
padding:5px 6px;
width:100%;
font-size:16px;
outline:0;
border-radius:4px;
box-sizing:border-box;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.site-button{
background: unset;
display:inline-flex;
justify-content:center;
align-items:center;
margin:5px;
padding:4px 10px;
font-size:0.9em;
line-height:26px;
border:1px solid;
border-radius:4px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.site-button:hover{
text-decoration:none;
outline:none;
cursor:pointer;
}
.site-button .icon svg{
width:16px;
height:16px;
vertical-align:middle;
margin-top:-2px;
margin-left:0;
margin-right:8px;
}
.site-button .icon svg *{
fill:#fff !important;
}
.site-button,.site-button:link,.site-button:visited{
color:#fff;
background-color:#007fd0;
border-color:#007fd0;
}
.site-button .icon svg *,.site-button:link .icon svg *,.site-button:visited .icon svg *{
fill:#fff !important;
}
.site-button:hover{
color:#fff;
background-color:#ff7500;
border-color:#ff7500;
}
.site-button:hover .icon svg *{
fill:#fff !important;
}
#forum {
font-family:"Open Sans", sans-serif;
font-size:14px;
line-height:1.5;
}
#forum #panel .upper{
background:#e1e1e1;
border:none;
color:#777;
padding:0;
}
#forum #panel .upper .wrapper{
padding-top:90px;
padding-bottom:12px;
}
#forum #panel .lower {
background:#f2f2f2;
border:none;
padding:0;
}
#forum #panel .lower .wrapper{
padding-top:10px;
padding-bottom:10px;
}
#forum #panel a:link,
#forum #panel a:visited{
color:#555;
text-decoration:none;
}
#forum #panel a:hover,
#forum #panel a:active{
color:#ff7500;
text-decoration:underline;
}
#forumMenu ul.top_links{
float:right;
font-weight:bold;
text-align:right;
margin:0 5px 0 0;
}
#forumMenu ul.top_links a.search{
background-position:0 0;
}
#forumMenu ul.top_links a.memberlist{
background-position:0 -20px;
}
#forumMenu ul.top_links a.calendar{
background-position:0 -40px;
}
#forumMenu ul.top_links a.help{
background-position:0 -60px;
}
#forum #footer .upper{
border-radius:5px;
border:1px solid #bbb;
width:88%;
margin:auto auto;
margin-top:8px;
}
Now there are only a few template edits next:
Edit Template: headerinclude
Find:
{$stylesheets}
Add this after:
<!-- Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add Favicon -->
<link rel="Shortcut icon" href="{$theme['imgdir']}/favicon.ico" />
<!-- Fonts -->
<link href="{$mybb->asset_url}/themes/dev/inc/css/opensans.css?family=Asap:400,600,600i|Open+Sans:300,400,700" rel="stylesheet">
<!-- Progress Bar -->
<link type="text/css" rel="stylesheet" href="{$mybb->asset_url}/themes/dev/progressbar/nprogress.css">
<script type="text/javascript" src="{$mybb->asset_url}/themes/dev/progressbar/nprogress.js"></script>
<script>
NProgress.configure({ showSpinner: false });
$(document).ready(function() {
NProgress.start();
NProgress.done();
});
</script>
<!-- Main-menu item --active -->
<script type="text/javascript">
$(document).ready(function(){
$(".main-menu__links__item__link").each(function () {
if (location.href.indexOf(this.href) > -1)
{
$(this).parent().attr("class", "main-menu__links__item main-menu__links__item--active");
return false;
}
});
});
</script>
Edit Template: footer
Find:
{$auto_dst_detection}
</div>
Add this after:
<!-- Add Headroom -->
<script type="text/javascript" src="themes/dev/inc/jscripts/headroom.min.js"></script>
<script type="text/javascript">
$('html').addClass('js');
// Headroom
var myElement = document.querySelector("header");
// construct an instance of Headroom, passing the element
var headroom = new Headroom(myElement);
// initialise
headroom.init();
</script>
Edit Template: header
Replace with:
<div id="container">
<a name="top" id="top"></a>
<header class="header headroom headroom--top headroom--not-bottom">
<div class="wrapper">
<h1 class="header__title">
<a href="{$mybb->settings['bburl']}/index.php" class="logo logo--light header__title__logo">
<span class="logo__icon"><img src="{$theme['logo']}" title="{$mybb->settings['bbname']}" /></span>
<span class="logo__text">{$mybb->settings['bbname']}</span>
</a>
</h1>
<label class="menu-button" for="show-mobile-menu"><span class="icon"><span class="icon"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license Copyright 2022 Fonticons, Inc. --><path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/></svg></span>
</span></label>
<label class="menu-close-button menu-close-button--hide" for="show-mobile-menu"><span class="icon"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license Copyright 2022 Fonticons, Inc. --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span>
</span></label>
<input type="checkbox" class="header__checkbox" id="show-mobile-menu">
<input type="checkbox" class="header__checkbox" id="show-site-search">
<nav class="main-menu">
<ul class="main-menu__links">
<li class="main-menu__links__gap"> </li>
<li class="main-menu__links__item main-menu__links__item--home">
<a href="{$mybb->settings['homeurl']}" class="main-menu__links__item__link">{$mybb->settings['homename']}</a>
</li>
<li class="main-menu__links__item main-menu__links__item--portal">
<a href="{$mybb->settings['bburl']}/portal.php" class="main-menu__links__item__link">{$lang->toplinks_portal}</a>
</li>
<li class="main-menu__links__item main-menu__links__item--community">
<a href="{$mybb->settings['bburl']}/index.php" class="main-menu__links__item__link">{$mybb->settings['bbname']}</a>
</li>
<li class="main-menu__links__item main-menu__links__item--statistics">
<a href="{$mybb->settings['bburl']}/stats.php" class="main-menu__links__item__link">Stats</a>
</li>
<li class="main-menu__links__item main-menu__links__item--showteam">
<a href="{$mybb->settings['bburl']}/showteam.php" class="main-menu__links__item__link">{$lang->bottomlinks_forumteam}</a>
</li>
<li class="main-menu__links__item main-menu__links__item--blog">
<a href="{$mybb->settings['bburl']}/blog" class="main-menu__links__item__link">Blog</a>
</li>
<li class="main-menu__links__item main-menu__links__item--search">
<label class="main-menu__links__item__icon main-menu__links__item--search__icon" for="show-site-search"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license Copyright 2022 Fonticons, Inc. --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg></span>
</label>
</li>
</ul>
</nav>
<div class="site-search">
{$quicksearch}
</div>
</div>
</header>
<div id="forum">
<div id="header">
<div id="panel">
<div class="upper">
<div class="wrapper">
<nav id="forumMenu"><ul class="menu top_links">
{$menu_search}
{$menu_memberlist}
{$menu_calendar}
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
</ul></nav>
{$welcomeblock}
<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
</div>
</div>
<div id="content">
<div id="main" role="main">
<div class="wrapper">
{$pm_notice}
{$remote_avatar_notice}
{$bannedwarning}
{$bbclosedwarning}
{$modnotice}
{$pending_joinrequests}
{$awaitingusers}
<navigation>
<br />
Edit Template: header_quicksearch
Replace all with:
<form action="{$mybb->settings['bburl']}/search.php">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<label for="qWidget">
<input value="" id="qWidget" name="keywords" maxlength="255" type="text" class="site-search__field textbox" placeholder="{$lang->search_button}" class="site-search__field" />
</label>
<button class="site-button site-search__button site-search__button--search" id="submit" type="submit"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license Copyright 2022 Fonticons, Inc. --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg></span>
{$lang->search_button}</button>
<label class="site-button button--dark site-search__button site-search__button--cancel" for="show-site-search"><span class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license Copyright 2022 Fonticons, Inc. --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span>
Cancel</label>
</form>
Now this simply is a starting point and by no means a finished project or what not and simply gets you started by adding a progress bar to a top menu, adds a top menu, some fonts, headroom.js, and simply gets you started on something very similar to the two past themes you mentioned in initial post but hopefully with this you can begin, get the general idea on howto and then you can continue to expand upon such simply provided if at all found helpful, plus you can then also look at the other two themes you mentioned, once you see where this tutorial leaves of and see from there if there is anything you want to learn from them further, say for just one example maybe looking at the color stylesheets in the older one or whatever else you may find useful but just may now undertsand more easily after doing this tutorial and creating your own dev theme to work on from such. I hope at least this much is helpful, sorry I would have added more to the tutorial but my free time was limited and as such figured this would at least give you a good start. Best of luck
oh, also on a completely different note,but mildly related as it is a menu and might have such progressbar added to such and since it is something I decided to start doing over again for 1.8 again if and or when my free time for mybb related deving may allow, as I deleted a mostly completed project of the sort a while back sadly and just recently have started to do such over as limited free time allows, I am only mentioning such, because I thought maybe of adding the progress bar to such and if so just might at least add only a tutorial on only adding such menu and progress bar for folks if my free time allows, dunno yet when that might be, but thinking abot it, haha
[attachment=45148]
[attachment=45149]