MyBB Community Forums

MyBB Community Forums > 1.8 Support > General Support > Modify Footer
Full Version: Modify Footer
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3

User 6029

2018-08-23, 05:06 PM
Here is an example of a footer of a theme I did  awhile ago that has footer columns:


[Image: 28saohh.png]

<!-- Back to Top -->
<script type="text/javascript">
$(function($) {
$("#backtop").hide();
  $(window).scroll(function () {
    if ($(this).scrollTop() > 400) {
      $('#backtop').fadeIn(200);
    } else {
      $('#backtop').fadeOut(200);
    }
  });
  $('.go-top').click(function () {
    $('html,body').animate({
      scrollTop: 0
    }, 1000);
    return false;
  });
});
</script>
<debugstuff>
</div>
</div>
<div id="foot">
  <div class="col">
    <h3>About</h3>
    <p>Rhoncus rapide nibh pro rutrum aliquam initialmente accumsan sollicitudin sed posuere morbi diam turpis duis vostre quotidian magna lorem consectetur quis malo active nisl specimen nisi sed nulla nunc sed risus initialmente amet nec consequat duis convallis nunc luctus. eget via magna egestas.</p>
    <br />
    <br />
  </div>
  <div class="col">
    <h3>Navigation</h3>
    <ul clas="col">
      <li><a href="{$mybb->settings['contactlink']}">{$lang->bottomlinks_contactus}</a></li>
      <li><a href="{$mybb->settings['homeurl']}">{$mybb->settings['homename']}</a></li>
      <li><a href="#top">{$lang->bottomlinks_returntop}</a></li>
      <li><a href="<archive_url>">{$lang->bottomlinks_litemode}</a></li>
      <li><a href="{$mybb->settings['bburl']}/misc.php?action=syndication">{$lang->bottomlinks_syndication}</a></li>
    </ul>
  </div>
  <div class="col">
    <h3>Links</h3>
    <ul>
      <li><a href="link 1">link 1</a></li>
      <li><a href="link 2">link 2</a></li>
      <li><a href="link 3">link 3</a></li>
      <li><a href="link 4">link 4</a></li>
      <li><a href="link 5">link 5</a></li>
    </ul>
  </div>
  <div class="col">
    <div id="foot-logo">
      <div class="wrapper"> <br class="clear" />
        <br class="clear" />
        <div id="foot-logo-text"> <a href="{$mybb->settings['bburl']}/index.php"><i class="i-foot-comments" aria-hidden="true"></i>MyBB</a> </div>
        <br class="clear" />
        <br class="clear" />
        <span id="current_time">{$lang->welcome_current_time}</span> </div>
    </div>
    <span id="copyright"> 
    <!-- 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. --> 
    {$lang->powered_by} <a href="http://www.mybb.com" target="_blank">MyBB{$mybbversion}</a>, &copy; 2002-{$copy_year} <a href="http://www.mybb.com" target="_blank">MyBB Group</a>. 
    <!-- End powered by --> 
    </span> <br />
  </div>
</div>
</div>
</div>
</div>
<div id="footer">
  <div class="lower">
    <div class="wrapper"> </div>
  </div>
  <div class="upper">
    <div class="wrapper"> {$lang_select}
      {$theme_select} 
      <!-- Begin Theme Credits --> 
      Theme by: <a href="http://community.mybb.com/user-60940.html" target="_blank">mmadhankumar</a> &amp; <a href="http://community.mybb.com/user-6029.html" target="_blank">vintagedaddyo</a> 
      <!-- End Theme Credits --> 
    </div>
  </div>
</div>
<div id='backtop'> <a class="go-top" href="#top" title="Back to Top"><i class="fa fa-arrow-up backtop">&nbsp;</i> </div>
</div>
<!-- The following piece of code allows MyBB to run scheduled tasks. DO NOT REMOVE -->{$task_image}<!-- End task image code --> 
{$auto_dst_detection}

Note: this is only an example to give you a rough idea of perhaps how to implement columns and most likely will have to be implemented slightly different for your respective theme.

kingkong

2018-08-23, 05:10 PM
https://imgur.com/a/7f9k9Lf

No success

Wires

2018-08-23, 05:21 PM
A link to your forum would help.

User 6029

2018-08-23, 07:13 PM
(2018-08-23, 05:10 PM)kingkong Wrote: [ -> ]https://imgur.com/a/7f9k9Lf

No success

Here is some of the css from the pictured example previously I shared. Perhaps you can modify it to your usages.


#foot-logo {	padding: 10px 0;	font-family: 'Bungee', cursive;}
#foot-logo a {	font-size: 55px;	color: #0066A2;}
#foot-logo a:hover {	color: #0F0F0F;	text-decoration: none;}
#foot-logo a i {	float: left;	color: #0F0F0F;	font-size: 55px;	padding-top: -7px;	margin-right: 10px;	transition: all 0.4s ease 0s;	font-family: FontAwesome;	display: inline-block;	text-rendering: auto;	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale;	transform: translate(0, 0);}
#foot-logo a:hover i {	color: #0066A2;}
#foot-logo-text {	margin: auto;}
.i-foot-comments:before {	content: "\f086";}

#footer {	clear: both; }
#footer ul.menu {	margin: 0;	padding: 0;	list-style: none;}
#footer ul.menu li {	margin: 0 5px;	display: inline;}
#footer .upper {	background: #efefef;	border-bottom: 1px solid #bbb;	padding: 6px;	font-size: 12px;	overflow: hidden;	position: relative; 	max-width: 100%; background: #EFEFEF;	margin-bottom: -38px;	min-width: 990px; }
#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {	color: #777;}
#footer .upper .language {	float: right;	margin: -1px;	margin-left: 15px;}
#footer .upper .language select {	border-color: #ccc;}
#footer .upper .theme {	float: right;	margin: -1px;	margin-left: 15px;}
#footer .upper .theme select {	border-color: #ccc;}
#footer .upper ul.bottom_links {	float: left;	margin: 4px 0 0 0;}
#footer .lower {	color: #666;	padding: 6px 6px 12px 6px;	overflow: hidden;	font-size: 11px;	background: #EFEFEF;}
#footer .lower a:link, #footer .lower a:visited {	color: #444;	font-weight: bold;}
#footer .lower a:hover, #footer .lower a:active {	color: #333;	text-decoration: underline;	font-weight: bold;}
#footer .lower #current_time {	float: right;	color: #888;}

/** Scroll to Top **/ 
#backtop { position: fixed; bottom: 50px; right: 10px; margin: 0; padding: 0; width: 36px; height: 36px; z-index: 100; font-size: 32px;}

/* columns footer */ 
#foot *{ box-sizing:border-box;} 
#foot { width: 100%; height: 250px; background: #EFEFEF; border-top: 1px solid #ddd;	margin-top: 10px;	margin-bottom: -10px;} 
.col { background: #EFEFEF; float: left; padding: 5px 15px; width: 25%;	height: 200px;} 
h3 { background: none;	font-family: 'Bungee', cursive; font-size: 16px;	font-weight: bold; margin: 0 0 20px 0; padding: 9px 0 0 19px; height: 33px; color:#0066A2;} 
div.col ul{ list-style: none; margin: 0; padding: 0;} 
div.col li { height: 35px; margin: 3px 0; padding: 0;} 
div.col li a { color: #111; display: block; font: normal 12px Verdana, Geneva, sans-serif; padding: 10px 0 0 19px; text-decoration: none;} 
div.col li:hover { background: #ddd;	-moz-border-radius: 3px;	-webkit-border-radius: 3px; 	border-radius: 3px;}

kingkong

2018-08-24, 03:38 PM
Hello!

After trying more than 3 hours,i got a result that i like 90%.

The last things i would like to improve shown in the following screenshot,please check.

[attachment=40751]

So,i would like to have:

-The text " All rights reserved" in the center (horizontal) of the logo.

-The text " Current time" and "powered by" must be either alligned properly to the text "All rights reserved".

Here are my templates:

Footer template:

<!-- Back to Top -->
<script type="text/javascript">
$(function($) {
$("#backtop").hide();
 $(window).scroll(function () {
   if ($(this).scrollTop() > 400) {
     $('#backtop').fadeIn(200);
   } else {
     $('#backtop').fadeOut(200);
   }
 });
 $('.go-top').click(function () {
   $('html,body').animate({
     scrollTop: 0
   }, 1000);
   return false;
 });
});
</script>
<debugstuff>
	</div>
	</div>
<div id="foot">
 <div class="col">
   <h3>About us</h3>
   <p>Join us.</p>
   <br />
   <br />
 </div>
 <div class="col">
   <h3>Navigation</h3>
   <ul clas="col">
     <li><a href="https://........">Home</a></li>
	  <li><a href="{$mybb->settings['contactlink']}">{$lang->bottomlinks_contactus}</a></li>
     <li><a href="<archive_url>">{$lang->bottomlinks_litemode}</a></li>
	  <li><a href="#top">{$lang->bottomlinks_returntop}</a></li>
   </ul>
 </div>
 <div class="col">
   <h3>Links</h3>
   <ul>
     <li><a href="https://.........">Gold Membership Benefits</a></li>
	 <li><a href="https://........">Forum Rules</a></li>
     <li><a href="..........">Latest Announcements</a></li>
     <li><a href=".............">Feedback and suggestions</a></li>   
   </ul>
 </div>
 <div class="col">
   <div id="foot-logo">
     <div class="wrapper"> <br class="clear" />
       <br class="clear" />
       <div id="foot-logo-text"> <a href="{$mybb->settings['bburl']}/index.php"><i class="i-foot-comments" aria-hidden="true"></i>&copy; CS - All Rights Reserved.</a></div>
       <br class="clear" />
       <br class="clear" />
       <span id="current_time">{$lang->welcome_current_time}</span> </div>
   </div>
   <span id="copyright">
   <!-- 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. -->
   {$lang->powered_by} <a href="http://www.mybb.com" target="_blank">MyBB{$mybbversion}</a>, &copy; 2002-{$copy_year} <a href="http://www.mybb.com" target="_blank">MyBB Group</a>.
   <!-- End powered by -->
   </span> <br />
<div id='backtop'> <a class="go-top" href="#top" title="Back to Top"><i class="fa fa-arrow-up backtop">&nbsp;</i> </div>
</div>
<!-- The following piece of code allows MyBB to run scheduled tasks. DO NOT REMOVE -->{$task_image}<!-- End task image code -->
{$auto_dst_detection}

Added css:


#foot {
	width: 95%;
	max-width: 2000px;
	margin: auto auto;
}
#foot-logo {    padding: 10px 0;    font-family: Tahoma, Verdana, Arial, Sans-Serif ;}
#foot-logo a {    font-size: 15px;    color: #0066A2;}
#foot-logo a:hover {    color: #0F0F0F;    text-decoration: none;}
#foot-logo a i {    float: left;    color: #0F0F0F;    font-size: 40px;    padding-top: -7px;    margin-right: 10px;    transition: all 0.4s ease 0s;    font-family: FontAwesome;    display: inline-block;    text-rendering: auto;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    transform: translate(0, 0);}
#foot-logo a:hover i {    color: #0066A2;}

.i-foot-comments:before {    content: "\f086";}

/** Scroll to Top **/ 
#backtop { position: fixed; bottom: 50px; right: 10px; margin: 0; padding: 0; width: 36px; height: 36px; z-index: 100; font-size: 32px;}

/* columns footer */ 
#foot *{ box-sizing:border-box;}
#foot { height: 250px; background: #222222; border-top: 2px solid #0072BC;    margin-top: 10px;    margin-bottom: -10px;} 
.col { background: #222222; float: left; padding: 5px 15px; width: 25%;    height: 200px;} 
h3 { background: #222222;    font-family: Tahoma, Verdana, Arial, Sans-Serif ; font-size: 16px;    font-weight: bold; margin: 0 0 20px 0; padding: 9px 0 0 19px; height: 33px; color:#efefef;} 
div.col ul{ list-style: none; margin: 0; padding: 0;} 
div.col li { height: 35px; margin: 3px 0; padding: 0;} 
div.col li a { color: #0072BC; display: block; font: normal 14px Tahoma, Verdana, Arial, Sans-Serif; padding: 10px 0 0 19px; text-decoration: none;} 
div.col li:hover { background: #383838;    -moz-border-radius: 3px;    -webkit-border-radius: 3px;     border-radius: 3px;}
Please help.

User 6029

2018-08-24, 08:07 PM
Works fine with the theme you are using with a few changes like for example:

[Image: 2qlvdk7.png]

Replace footer with:


<!-- Back to Top -->
<script type="text/javascript">
$(function($) {
$("#backtop").hide();
 $(window).scroll(function () {
   if ($(this).scrollTop() > 400) {
     $('#backtop').fadeIn(200);
   } else {
     $('#backtop').fadeOut(200);
   }
 });
 $('.go-top').click(function () {
   $('html,body').animate({
     scrollTop: 0
   }, 1000);
   return false;
 });
});
</script>
<debugstuff>
</div>
</div>
<div id="foot">
 <div class="col">
   <h3>About</h3>
   <p>Rhoncus rapide nibh pro rutrum aliquam initialmente accumsan sollicitudin sed posuere morbi diam turpis duis vostre quotidian magna lorem consectetur quis malo active nisl specimen nisi sed nulla nunc sed risus initialmente amet nec consequat duis convallis nunc luctus. eget via magna egestas.</p>
   <br />
   <br />
 </div>
 <div class="col">
   <h3>Navigation</h3>
   <ul clas="col">
     <li><a href="{$mybb->settings['contactlink']}">{$lang->bottomlinks_contactus}</a></li>
     <li><a href="{$mybb->settings['homeurl']}">{$mybb->settings['homename']}</a></li>
     <li><a href="#top">{$lang->bottomlinks_returntop}</a></li>
     <li><a href="<archive_url>">{$lang->bottomlinks_litemode}</a></li>
     <li><a href="{$mybb->settings['bburl']}/misc.php?action=syndication">{$lang->bottomlinks_syndication}</a></li>
   </ul>
 </div>
 <div class="col">
   <h3>Links</h3>
   <ul>
     <li><a href="link 1">link 1</a></li>
     <li><a href="link 2">link 2</a></li>
     <li><a href="link 3">link 3</a></li>
     <li><a href="link 4">link 4</a></li>
     <li><a href="link 5">link 5</a></li>
   </ul>
 </div>
 <div class="col">
   <div id="foot-logo">
     <div class="wrapper"> <br class="clear" />
       <br class="clear" />
       <div id="foot-logo-text"> <a href="{$mybb->settings['bburl']}/index.php"><i class="i-foot-comments" aria-hidden="true"></i>MyBB</a> </div>
       <br class="clear" />
       <br class="clear" />
       <span id="current_time">{$lang->welcome_current_time}</span> </div>
   </div>
   <span id="copyright">
   <!-- 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. -->
   {$lang->powered_by} <a href="http://www.mybb.com" target="_blank">MyBB{$mybbversion}</a>, &copy; 2002-{$copy_year} <a href="http://www.mybb.com" target="_blank">MyBB Group</a>.
   <!-- End powered by -->
   </span> <br />
 </div>
</div>
</div>
</div>
</div>
<div id="footer">
 <div class="lower">
   <div class="wrapper"> </div>
 </div>
 <div class="upper">
   <div class="wrapper"> {$lang_select}
     {$theme_select}
     <!-- Begin Theme Credits -->
     Theme by: <a href="http://community.mybb.com/user-60940.html" target="_blank">mmadhankumar</a> &amp; <a href="http://community.mybb.com/user-6029.html" target="_blank">vintagedaddyo</a>
     <!-- End Theme Credits -->
   </div>
 </div>
</div>
<div id='backtop'> <a class="go-top" href="#top" title="Back to Top"><i class="fa fa-arrow-up backtop">&nbsp;</i> </div>
</div>
<!-- The following piece of code allows MyBB to run scheduled tasks. DO NOT REMOVE -->{$task_image}<!-- End task image code -->
{$auto_dst_detection}


In headerinclude add:


<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet"/>



In global.css find:


#footer {
	clear: both;
}

#footer ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer ul.menu li {
	margin: 0 5px;
	display: inline;
}

#footer .upper {
	background: #222;
	border-top: 1px solid #111;
	border-bottom: 1px solid #111;
	padding: 6px;
	font-size: 12px;
	overflow: hidden;
}

#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active {
	color: #777;
}

#footer .upper .language {
	float: right;
	margin: -1px;
	margin-left: 15px;
}

#footer .upper .language select {
	border-color: #ccc;
}

#footer .upper .theme {
	float: right;
	margin: -1px;
	margin-left: 15px;
}

#footer .upper .theme select {
	border-color: #ccc;
}

#footer .upper ul.bottom_links {
	float: left;
	margin: 4px 0 0 0;
}

#footer .lower {
	color: #efefef;
	padding: 6px 6px 12px 6px;
	overflow: hidden;
	font-size: 11px;
}

#footer .lower a:link,
#footer .lower a:visited {
	color: #efefef;
	font-weight: bold;
}

#footer .lower a:hover,
#footer .lower a:active {
	color: #efefef;
	text-decoration: underline;
	font-weight: bold;
}

#footer .lower #current_time {
	float: right;
	color: #efefef;
}


Remove and replace with:


#content {
	padding: 0px 10px !important;
}

#foot-logo {    
	padding: 10px 0;    
	font-family: 'Bungee', cursive;
}

#foot-logo a {    
	font-size: 55px;    
	color: #0066A2;
}

#foot-logo a:hover {    
	color: #0F0F0F;    
	text-decoration: none;
}

#foot-logo a i {    
	float: left;    
	color: #efefef;    
	font-size: 55px;    
	padding-top: -7px;    
	margin-right: 10px;    
	transition: all 0.4s ease 0s;    
	font-family: FontAwesome;    
	display: inline-block;    
	text-rendering: auto;    
	-webkit-font-smoothing: antialiased;    
	-moz-osx-font-smoothing: grayscale;    
	transform: translate(0, 0);
}

#foot-logo a:hover i {    
	color: #0066A2;
}

#foot-logo-text {    
	margin: auto;
}

.i-foot-comments:before {    
	content: "\f086";
}

#footer {    
	background: #212121; 
	clear: both; 
}

#footer ul.menu {    
	margin: 0;    
	padding: 0;    
	list-style: none;
}

#footer ul.menu li {    
	margin: 0 5px;    
	display: inline;
}

#footer .upper {    
	background: #212121;    
	border-bottom: 0px solid #212121;    
	padding: 6px;    
	font-size: 12px;    
	overflow: hidden;    
	position: relative;     
	max-width: 100%; 
	background: #212121;    
	margin-bottom: -38px;    
	min-width: 990px; 
}

#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {    
	color: #777;
}

#footer .upper .language {    
	float: right;    
	margin: -1px;    
	margin-left: 15px;
}

#footer .upper .language select {    
	border-color: #212121;
}

#footer .upper .theme {    
	float: right;    
	margin: -1px;    
	margin-left: 15px;
}

#footer .upper .theme select {    
	border-color: #212121;
}

#footer .upper ul.bottom_links {    
	float: left;    
	margin: 4px 0 0 0;
}

#footer .lower {    
	color: #666;    
	padding: 6px 6px 12px 6px;    
	overflow: hidden;    
	font-size: 11px;    
	background: #212121;
}

#footer .lower a:link, #footer .lower a:visited {    
	color: #efefef;    
        font-weight: bold;
}

#footer .lower a:hover, #footer .lower a:active {    
	color: #efefef;    
	text-decoration: underline;
	font-weight: bold;
}

#footer .lower #current_time {    
	float: right;   
	color: #888;
}

/** Scroll to Top **/ 

#backtop { 
	position: fixed; 
	bottom: 50px; 
	right: 10px; 
	margin: 0; 
	padding: 0; 
	width: 36px; 
	height: 36px; 
	z-index: 100; 
	font-size: 32px;
}

/** columns footer **/ 

#foot *{ 
	box-sizing:border-box;
} 

#foot { 
	width: 100%; 
	height: 250px; 
	background: #212121; 
	border-top: 1px solid #0066A2;    
	margin-top: 0px;    
	margin-bottom: -10px;
} 

.col { 
	background: #212121; 
	float: left; 
	padding: 5px 15px; 
	width: 25%;    
	height: 200px;
} 

h3 { 
	background: none;    
	font-family: 'Bungee', cursive; 
	font-size: 16px;    
	font-weight: bold; 
	margin: 0 0 20px 0; 
	padding: 9px 0 0 19px; 
	height: 33px; 
	color:#0066A2;
} 

div.col ul{ 
	list-style: none; 
	margin: 0; 
	padding: 0;
} 

div.col li { 
	height: 35px; 
	margin: 3px 0; 
	padding: 0;
} 

div.col li a { 
	color: #efefef; 
	display: block; 
	font: normal 12px Verdana, Geneva, sans-serif; 
	padding: 10px 0 0 19px; 
	text-decoration: none;
} 

div.col li a:hover { 
	color: #0072BC;; 
}

div.col li:hover { 
	background: #0A0A0A;    
	-moz-border-radius: 3px;    
	-webkit-border-radius: 3px;     
	border-radius: 3px;
}
Note: Of course from there on you can edit and modify the css and such further to suit your needs.

kingkong

2018-08-25, 11:28 AM
Hello my friend!

I have it almost done and i would really like to thankyou for helping me.

The one and the only problem is here now:

[attachment=40752]

When i change that value under 100%,then the footer looks like this:

[attachment=40753]

But if set that value to 100%,it looks like as it should,like in your screenshot.

I have also tried changing the width from 100 to 95 in the following css without success.


#foot {
    width: 100%;
	max-width: 2000px;
    height: 250px;
    background: #212121;
    border-top: 1px solid #0066A2;    
    margin: auto auto;
}


I would like to have 90 or 95 % width on my forum,setting it to 100% doesn't look too good.

Could you please help.

Thanks

Serpius

2018-08-25, 12:45 PM
(2018-08-23, 05:06 PM)vintagedaddyo Wrote: [ -> ]
-- SNIP --

Note: this is only an example to give you a rough idea of perhaps how to implement columns and most likely will have to be implemented slightly different for your respective theme.

@vintagedaddyo

If I were to use this little line to insert the time in one of my themes, would this show as the USER's current time or as the WEBSITE's current time?

<span id="current_time">{$lang->welcome_current_time}</span>

kingkong

2018-08-25, 03:15 PM
I think,my problem has been solved, i added the following .css


.wrapper {
    width: 95%;
    min-width: 450px;
    max-width: 2000px;
    margin: auto auto;
}


I added min-width: 450px and it worked.

If i add min-width: 970px as on MyBB community forum,it will still work but it is make me some blank space on the right side of the page,where when scrolled,is nothing.

Now,the result looks like exactly like your footer,shown in the screenshot you posted.

I would like to thankyou again for helping me out.

Regards.

Diamante

2019-01-14, 02:52 PM
(2018-08-24, 08:07 PM)vintagedaddyo Wrote: [ -> ]Works fine with the theme you are using with a few changes like for example:

[Image: 2qlvdk7.png]

Hi.

Please. I have two questions.

How do I change the text color in About?

How do I change Mybb for another image?
Pages: 1 2 3
MyBB Community Forums > 1.8 Support > General Support > Modify Footer