[Tutorial] - Adding a responsive top nav and footer
* was helping someone with this the other day so figured why not add it to yet another tutorial as I used to do while helping others in the past, such help often tends to then be turned into a shared tutorial...
In theme settings:
change to:
CSS edits:
for testing purposes we must comment out/edit the container and wrapper min-width in global.css so as then we can resize the window in browser:
edit: global.css
find:
comment out/ edit for example:
now create stylesheet attached to your theme called extras.css attached to all pages
Containing:
Edit templates:
Edit Template: headerinclude
Find:
Add before:
Find:
Add before:
Find:
Add after:
Edit Template: header
Replace with:
Edit Template: header_menu_calendar
Replace with:
Edit Template: header_menu_memberlist
Replace with:
Edit Template: header_menu_portal
Replace with:
Edit Template: header_menu_search
Replace with:
Edit Template: header_welcomeblock_guest
Replace with:
Edit Template: header_welcomeblock_member
Replace with:
Edit Template: header_welcomeblock_admin
Replace with:
Edit Template: header_welcomeblock_moderator
Replace with:
Edit Template: header_welcomeblock_user
Replace with:
Edit Template: footer
Replace with:
Edit Template: footer_showteamlink
Replace with:
Edit Template: footer_contactus
Replace with:
& then you can continue editing further for your usages. ** (note these are only an example and not actually tweaked to precise specifics and are meant as a starting point to the reader to then expand upon, edit and improve...)
Best of luck!![Big Grin]( "Big Grin")
~ V
* was helping someone with this the other day so figured why not add it to yet another tutorial as I used to do while helping others in the past, such help often tends to then be turned into a shared tutorial...
In theme settings:
Quote:Board Logo
Location of the board logo used in this theme (this is the logo that appears at the top of each page).
change to:
images/logo_white.pngCSS edits:
for testing purposes we must comment out/edit the container and wrapper min-width in global.css so as then we can resize the window in browser:
edit: global.css
find:
#container {
color: #333;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
min-width: 990px;
}
.wrapper {
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto auto;
}
comment out/ edit for example:
#container {
color: #333;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
/*min-width: 990px;*/
min-width: 330px;
}
.wrapper {
width: 85%;
/*min-width: 970px;*/
max-width: 1500px;
margin: auto auto;
min-width: 310px;
}
now create stylesheet attached to your theme called extras.css attached to all pages
Containing:
/*** Respo Top Nav and Footer Tutorial by: V ***/
/** top nav section **/
#logo {
padding: unset;
}
#content {
margin: 0px 60px 0px 60px;
padding: 0px 10px;
}
.nav-wrapper {
background: #393D3F;
position: fixed;
width: 100%;
top: 0;
z-index: 9999 !important;
}
.nav-wrapper nav {
position: relative;
display: flex;
max-width: calc(100% - 200px);
margin: 0 auto;
height: 70px;
align-items: center;
justify-content: space-between;
}
nav .content {
display: flex;
align-items: center;
}
nav .content .links {
margin-left: 80px;
display: flex;
}
.content .logo a {
color: #fff;
font-size: 30px;
font-weight: 600;
}
.content .logo img {
height: 60px;
}
.content .links li {
list-style: none;
line-height: 70px;
}
.content .links li a,
.content .links li label {
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 9px 17px;
border-radius: 5px;
transition: all 0.3s ease;
text-decoration: none;
}
.content .links li label {
display: none;
}
.content .links li a:active,
.content .links li label:active,
.content .links li a:hover,
.content .links li label:hover {
background: #007FD0;
}
/* add active class */
nav .content .links .active {
color: #ddd !important;
background: #007FD0;
}
.nav-wrapper .search-icon,
.nav-wrapper .menu-icon {
color: #fff;
font-size: 18px;
cursor: pointer;
line-height: 70px;
width: 70px;
text-align: center;
}
.nav-wrapper .menu-icon {
display: none;
}
.nav-wrapper #show-search:checked ~ .search-icon i::before {
content: "\f00d";
}
.nav-wrapper .search-box {
position: absolute;
height: 100%;
max-width: calc(100% - 70px);
width: 100%;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.nav-wrapper #show-search:checked ~ .search-box {
opacity: 1;
pointer-events: auto;
}
.search-box input {
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 17px;
color: #fff;
background: #303030;
/*padding: 0 100px 0 15px;*/
padding: 0 0 0 15px;
}
.search-box input::placeholder {
color: #f2f2f2;
}
.search-box .go-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
line-height: 60px;
width: 70px;
background: #303030;
border: none;
outline: none;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.nav-wrapper input[type="checkbox"] {
display: none;
}
/* Dropdown Menu code start */
.content .links ul {
position: absolute;
background: #303030;
top: 80px;
opacity: 0;
visibility: hidden;
margin: 0;
padding: 0;
}
.content .links li:hover > ul {
top: 70px;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
}
.content .links ul li a {
display: block;
line-height: 30px;
border-radius: 0px !important;
border-top: 1px solid #444;
}
.content .links ul ul {
position: absolute;
top: 0;
right: calc(-100% + 8px);
border-top: 1px solid #444;
}
.content .links ul li {
position: relative;
}
.content .links ul li:hover ul {
top: 0;
}
/* Responsive code start */
/* max-width 1250px */
@media screen and (max-width: 1250px) {
.nav-wrapper nav {
max-width: 100%;
padding: 0 20px;
}
nav .content .links {
margin-left: 30px;
}
.content .links li a {
padding: 8px 13px;
}
.nav-wrapper .search-box {
max-width: calc(100% - 100px);
}
.nav-wrapper .search-box input {
/*padding: 0 100px 0 15px;*/
padding: 0 0 0 12px;
}
}
/* max-width 900px */
@media screen and (max-width: 900px) {
.nav-wrapper .menu-icon{
display: block;
}
.nav-wrapper #show-menu:checked ~ .menu-icon i::before {
content: "\f00d";
}
nav .content .links {
display: block;
position: fixed;
background: #303030;
width: 100%;
margin-left: 0;
max-width: 350px;
padding-bottom: 100px;
transition: all 0.3s ease;
/*max-height: calc(100vh - 9rem);*/
overflow-y: auto;
overflow-x: auto;
top: 57px;
bottom: 0;
left: -100%;
right: 0;
box-sizing: border-box;
min-height: 100vh !important;
border-top: 1px solid #444;
}
nav #show-menu:checked ~ .content .links {
left: 0%;
}
.content .links li {
margin: 15px 20px;
}
.content .links li a,
.content .links li label {
line-height: 40px;
font-size: 20px;
display: block;
padding: 8px 18px;
cursor: pointer;
}
.content .links li a.desktop-link {
display: none;
}
/* dropdown responsive code start */
.content .links ul,
.content .links ul ul {
position: static;
opacity: 1;
visibility: visible;
background: none;
max-height: 0px;
overflow: hidden;
}
.content .links #show-forum:checked ~ ul,
.content .links #show-guest:checked ~ ul,
.content .links #show-user:checked ~ ul,
.content .links #show-items:checked ~ ul {
max-height: 100vh;
}
.content .links ul li {
margin: 7px 20px;
}
.content .links ul li a {
font-size: 18px;
line-height: 30px;
border-radius: 5px!important;
border-top: 0px solid #444;
}
.content .links ul ul {
border-top: 0px solid #444;
}
.modal {
width: 300px;
}
}
/* max-width 400px */
@media screen and (max-width: 400px){
.nav-wrapper nav{
padding: 0 10px;
}
.content .logo a {
font-size: 27px;
}
.nav-wrapper .search-box {
max-width: calc(100% - 88px);
}
.nav-wrapper .search-box .go-icon {
width: 30px;
right: 0;
}
.nav-wrapper .search-box input {
}
.wrapper {
width: unset;
}
#content {
margin: unset !important;
padding: unset !important;
margin: 5px 5px !important;
}
}
/** footer nav section **/
.content-page {
margin: 70px auto 30px auto;
justify-content: space-between;
}
.content-page .text {
font-size: 2.5rem;
font-weight: 600;
color: #202020;
}
.content-page .p {
font-size: 2.1875rem;
font-weight: 600;
color: #202020;
}
footer {
color: #d9d9d9;
position: relative;
bottom: 0px;
width: 100%;
background: #393D3F;
z-index: 99999 !important;
text-align: left;
}
/* add active class */
footer .main-content .active {
color: #F7E398 !important;
}
.main-content {
display: flex;
width: 85%;
margin: auto auto;
}
.main-content .box {
flex-basis: 50%;
padding: 10px 20px;
}
.box h2 {
font-size: 1.125rem;
font-weight: 600;
text-transform: uppercase;
}
.box .content {
margin: 20px 0 0 0;
position: relative;
}
.box .content:before {
position: absolute;
content: '';
top: -10px;
height: 2px;
width: 100%;
background: #303030;
}
.box .content:after {
position: absolute;
content: '';
height: 2px;
width: 15%;
background: #007FD0;
top: -10px;
}
/* left content */
.left .content p {
text-align: justify;
}
.left .content .social {
margin: 20px 0 0 0;
}
.left .content .social a {
padding: 0 2px;
}
.left .content .social a span {
height: 40px;
width: 40px;
background: #303030;
line-height: 40px;
text-align: center;
font-size: 18px;
border-radius: 5px;
transition: 0.3s;
color: #d9d9d9;
}
.left .content .social a span:active,
.left .content .social a span:hover {
background: #007FD0;
}
/* center content */
.center .content .fas {
font-size: 1.4375rem;
background: #303030;
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
border-radius: 50%;
transition: 0.3s;
cursor: pointer;
}
.center .content .fas:active,
.center .content .fas:hover {
background: #007FD0;
}
.center .content .text {
font-size: 1.0625rem;
font-weight: 500;
padding-left: 10px;
}
.center .content .text a {
color: #fff;
}
.center .content .text a:active,
.center .content .text a:hover {
color: #007FD0;
}
.center .content .contact {
margin: 15px 0;
}
/* right content */
.right .content .fas {
font-size: 1.4375rem;
background: #303030;
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
border-radius: 50%;
transition: 0.3s;
cursor: pointer;
}
.right .content .fas:active,
.right .content .fas:hover {
background: #007FD0;
}
.right .content .text {
font-size: 1.0625rem;
font-weight: 500;
padding-left: 10px;
}
.right .content .text a {
color: #fff;
}
.right .content .text a:active,
.right .content .text a:hover {
color: #007FD0;
}
.right .content .rss {
margin: 15px 0;
}
.right .content .mark-all {
margin: 15px 0;
}
/* bottom center */
.bottom center {
padding: 5px;
font-size: 0.9375rem;
background: #303030;
}
.bottom center span {
color: #A0A0A0;
}
.bottom center a {
color: #fff;
text-decoration: none;
}
.bottom center a:active,
.bottom center a:hover {
text-decoration: underline;
color: #007FD0;
}
/* max-width 900px */
@media screen and (max-width: 900px) {
footer {
position: relative;
bottom: 0px;
}
.main-content {
flex-wrap: wrap;
flex-direction: column;
}
.main-content .box {
margin: 5px 0;
}
#content {
margin: 0px 10px 0px 10px;
padding: 0px 10px;
}
}
#footer .upper {
background: unset !important;
border-top: unset !important;
border-bottom: unset !important;
}
#footer .upper .theme {
margin-right: 5%;
}
#footer .lower #current_time {
margin-right: 5% !important;
}
Edit templates:
Edit Template: headerinclude
Find:
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
Add before:
<!-- viewport start -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport end -->
Find:
{$stylesheets}
Add before:
<!-- font awesome start -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<!-- font awesome end -->
Find:
{$stylesheets}
Add after:
<!-- add active class start -->
<script type="text/javascript">
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
</script>
<!-- add active class end -->
Edit Template: header
Replace with:
<div id="container">
<a name="top" id="top"></a>
<div id="header">
<!-- nav start -->
<div class="nav-wrapper">
<nav>
<input type="checkbox" id="show-search">
<input type="checkbox" id="show-menu">
<label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
<div class="content">
<!-- logo start -->
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
<!-- logo end -->
<ul class="links">
<!-- home & about start -->
<li><a href="{$mybb->settings['homeurl']}"><i class="fas fa-home"></i> {$mybb->settings['homename']}</a></li>
<!--<li><a href="#"><i class="fas fa-info-circle"></i> About</a></li>-->
<!-- blog start -->
<!--<li><a href="#"><i class="fas fa-blog"></i> Blog</a></li>-->
<!-- blog end -->
<!-- home & about end -->
<!-- forum start -->
<li>
<a href="#" class="desktop-link"><i class="fas fa-comment"></i> {$lang->forumbit_forum}</a>
<input type="checkbox" id="show-forum">
<label for="show-forum"><i class="fas fa-comment"></i> {$lang->forumbit_forum}</label>
<ul>
{$menu_portal}
<li><a href="{$mybb->settings['bburl']}/index.php"><i class="fas fa-comments"></i> {$lang->forumbit_forum}s</a></li>
{$menu_search}
{$menu_memberlist}
{$menu_calendar}
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="fas fa-question"></i> {$lang->toplinks_help}</a></li>
</ul>
</li>
<!-- forum end -->
{$welcomeblock}
<!-- </div> in header_welcomeblock_guest -->
<!-- </div> in header_welcomeblock_member -->
</div>
</div>
<div id="content">
<div class="wrapper">
{$pm_notice}
{$remote_avatar_notice}
{$bannedwarning}
{$bbclosedwarning}
{$modnotice}
{$pending_joinrequests}
{$awaitingusers}
<navigation>
<br />
Edit Template: header_menu_calendar
Replace with:
<li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fas fa-calendar"></i> {$lang->toplinks_calendar}</a></li>
Edit Template: header_menu_memberlist
Replace with:
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fas fa-users"></i> {$lang->toplinks_memberlist}</a></li>
Edit Template: header_menu_portal
Replace with:
<li><a href="{$mybb->settings['bburl']}/portal.php"><i class="fas fa-bell"></i> {$lang->toplinks_portal}</a></li>
Edit Template: header_menu_search
Replace with:
<li><a href="{$mybb->settings['bburl']}/search.php"><i class="fas fa-search"></i> {$lang->toplinks_search}</a></li>
Edit Template: header_welcomeblock_guest
Replace with:
<!-- guest start -->
<li>
<a href="#" class="desktop-link"><i class="fas fa-user"></i> Guest</a>
<input type="checkbox" id="show-guest">
<label for="show-guest"><i class="fas fa-user"></i> Guest</label>
<ul>
<li><a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;"><i class="fas fa-key"></i> {$lang->welcome_login}</a></li>
<li><a href="{$mybb->settings['bburl']}/member.php?action=register"><i class="fas fa-pencil"></i> {$lang->welcome_register}</a></li>
</ul>
</li>
<!-- guest end -->
</ul>
</div>
<!-- search start -->
<label for="show-search" class="search-icon"><i class="fas fa-search"></i></label>
<form action="{$mybb->settings['bburl']}/search.php" class="search-box">
<input name="keywords" type="text" placeholder="{$lang->search_button}..." required>
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<button type="submit" class="go-icon"><i class="fas fa-long-arrow-alt-right"></i></button>
</form>
<!-- search end -->
</nav>
</div>
<!-- nav end -->
<!-- content page start -->
<div class="content-page">
<div id="panel">
<div class="upper">
<div class="wrapper">
<!-- Continuation of div(class="upper") as opened in the header template -->
<span class="welcome">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;" class="login">{$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register">{$lang->welcome_register}</a></span>
</div>
</div>
<div class="modal" id="quick_login" style="display: none;">
<form method="post" action="{$mybb->settings['bburl']}/member.php">
<input name="action" type="hidden" value="do_login" />
<input name="url" type="hidden" value="" />
<input name="quick_login" type="hidden" value="1" />
<input name="my_post_key" type="hidden" value="{$mybb->post_code}" />
<table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$lang->login}</strong></td>
</tr>
{$loginform}
</table>
</form>
</div>
<script type="text/javascript">
$("#quick_login input[name='url']").val($(location).attr('href'));
</script>
</div><!-- in header_welcomeblock_guest -->
Edit Template: header_welcomeblock_member
Replace with:
<!-- user start -->
<li>
<a href="#" class="desktop-link"><i class="fas fa-user"></i> User</a>
<input type="checkbox" id="show-user">
<label for="show-user"><i class="fas fa-user"></i> User</label>
<ul>
<li><a href="{$mybb->settings['bburl']}/member.php?action=logout&logoutkey={$mybb->user['logoutkey']}"><i class="fas fa-power-off"></i> {$lang->welcome_logout}</a></li>
<li>
<a href="#" class="desktop-link"><i class="fas fa-wrench"></i> Controls </a>
<input type="checkbox" id="show-items">
<label for="show-items"><i class="fas fa-wrench"></i> Controls</label>
<ul>
{$usercplink}
{$modcplink}
{$admincplink}
</ul>
</li>
</ul>
</li>
<!-- user end -->
</ul>
</div>
<!-- search start -->
<label for="show-search" class="search-icon"><i class="fas fa-search"></i></label>
<form action="{$mybb->settings['bburl']}/search.php" class="search-box">
<input name="keywords" type="text" placeholder="{$lang->search_button}..." required>
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<button type="submit" class="go-icon"><i class="fas fa-long-arrow-alt-right"></i></button>
</form>
<!-- search end -->
</nav>
</div>
<!-- nav end -->
<!-- content page start -->
<div class="content-page">
<div id="panel">
<div class="upper">
<div class="wrapper">
<!-- Continuation of div(class="upper") as opened in the header template -->
<span class="welcome">{$lang->welcome_back} <a href="{$mybb->settings['bburl']}/member.php?action=logout&logoutkey={$mybb->user['logoutkey']}" class="logout">{$lang->welcome_logout}</a></span>
</div>
</div>
<div class="lower">
<div class="wrapper">
<ul class="menu panel_links">
</ul>
<ul class="menu user_links">
{$buddylink}
{$searchlink}
{$pmslink}
</ul>
</div>
<br class="clear" />
</div><!-- in header_welcomeblock_member -->
Edit Template: header_welcomeblock_admin
Replace with:
<li><a href="{$mybb->settings['bburl']}/{$admin_dir}/index.php"><i class="fas fa-cog"></i> {$lang->welcome_admin}</a></li>
Edit Template: header_welcomeblock_moderator
Replace with:
<li><a href="{$mybb->settings['bburl']}/modcp.php"><i class="fas fa-cog"></i> {$lang->welcome_modcp}</a></li>
Edit Template: header_welcomeblock_user
Replace with:
<li><a href="{$mybb->settings['bburl']}/usercp.php"><i class="fas fa-cog"></i> {$lang->welcome_usercp}</a></li>
Edit Template: footer
Replace with:
<debugstuff>
</div>
</div>
<div id="footer">
<div class="upper">
<div class="wrapper">
{$lang_select}
{$theme_select}
</div>
</div>
<div class="lower">
<div class="wrapper">
<span id="current_time">{$lang->welcome_current_time}</span>
</div>
</div>
</div>
</div>
</div>
<!-- content page end -->
<!-- footer start -->
<footer>
<div class="main-content">
<!-- left box -->
<div class="left box">
<h2><i class="fas fa-info-circle"></i> About us</h2>
<div class="content">
<!-- about -->
<p>Suspendisse non blandit urna, non feugiat quam. Fusce quis elementum ligula, laoreet volutpat nulla. Vivamus vulputate pellentesque lorem, eget posuere diam mollis in.</p>
<!-- social -->
<div class="social">
<a href="https://facebook.com"><span class="fab fa-facebook-f"></span></a>
<a href="https://twitter.com"><span class="fab fa-twitter"></span></a>
<a href="https://instagram.com"><span class="fab fa-instagram"></span></a>
<a href="https://youtube.com"><span class="fab fa-youtube"></span></a>
</div>
</div>
</div>
<!-- center box -->
<div class="center box">
<h2><i class="fas fa-question-circle"></i> Forum</h2>
<div class="content">
<div class="showteam">
<!-- show team -->
<span class="fas fa-users"></span>
<span class="text">{$showteamlink}</span>
</div>
<div class="contact">
<!-- contact us -->
<span class="fas fa-phone-alt"></span>
<span class="text">{$contact_us}</span>
</div>
<div class="backtotop">
<!-- backtotop -->
<span class="fas fa-arrow-up"></span>
<span class="text"><a href="#top"> {$lang->bottomlinks_returntop}</a></span>
</div>
</div>
</div>
<!-- right box -->
<div class="right box">
<h2><i class="fas fa-check-circle"></i> Links</h2>
<div class="content">
<div class="lite-mode">
<!-- archive mode -->
<span class="fas fa-lightbulb"></span>
<span class="text"><a href="<archive_url>"> $lang->bottomlinks_litemode}</a></span>
</div>
<div class="mark-all">
<!-- mark all -->
<span class="fas fa-check"></span>
<span class="text"><a href="{$mybb->settings['bburl']}/misc.php?action=markread{$post_code_string}"> {$lang->bottomlinks_markread}</a></span>
</div>
<div class="rss">
<!-- rss -->
<span class="fas fa-rss"></span>
<span class="text"><a href="{$mybb->settings['bburl']}/misc.php?action=syndication"> {$lang->bottomlinks_syndication}</a></span>
</div>
</div>
</div>
</div>
<!-- footer end -->
<!-- bottom -->
<div class="bottom">
<center>
<!-- MyBB is free software developed and maintained by a volunteer community.
It would be much appreciated by the MyBB Group if you left the full copyright and "powered by" notice intact,
to show your support for MyBB. If you choose to remove or modify the copyright below,
you may be refused support on the MyBB Community Forums.
This is free software, support us and we'll support you. -->
<span class="copyright">
{$lang->powered_by} <a href="https://mybb.com" target="_blank" rel="noopener">MyBB{$mybbversion}</a>, © 2002-{$copy_year} <a href="https://mybb.com" target="_blank" rel="noopener">MyBB Group</a>.
<!-- End powered by -->
</span>
|
<span class="credit">Tutorial <i class="fas fa-heart"></i> By <a href="https://github.com/vintagedaddyo" target="_blank" rel="noopener">Vintagedaddyo</a> </span>
<span class="far fa-copyright"></span><span> 2021 All rights reserved.</span>
</center>
</div>
</footer>
<!-- The following piece of code allows MyBB to run scheduled tasks. DO NOT REMOVE -->{$task_image}<!-- End task image code -->
{$auto_dst_detection}
</div>
Edit Template: footer_showteamlink
Replace with:
<a href="showteam.php"> {$lang->bottomlinks_forumteam}</a>
Edit Template: footer_contactus
Replace with:
<a href="{$mybb->settings['contactlink']}"> {$lang->bottomlinks_contactus}</a>
& then you can continue editing further for your usages. ** (note these are only an example and not actually tweaked to precise specifics and are meant as a starting point to the reader to then expand upon, edit and improve...)
Best of luck!
~ V