Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now





 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Tutorial to make 4 column footer for MyBB

envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #1
Smile Tutorial to make 4 column footer for MyBB

Hello friends,
As requested by one of our friend, here is a tutorial on how to make a 4 column footer for MyBB.

The tutorial is simple with few edits in templates and addition of css.
Lets get into the tut.

1. Adding the Css :

Add this css at the bottom of your theme's global.css and save the theme.

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

#foot {
width: 100%;
height: 250px;
background: #111;
}

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

h3 {
    background: none;
    color: #FFF;
    font: bold 18px Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    margin: 0 0 20px 0;
    padding: 9px 0 0 19px;
    height: 33px;
    color:#E04006;
}

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: #FFF;
    display: block;
    font: normal 12px Verdana, Geneva, sans-serif;
    padding: 10px 0 0 19px;
    text-decoration: none;
}

div.col li:hover {
    background: #212121;
}

2. Editing the templates :

Now go to templates and find footer templates> footer
Replace the following code in it with the code below

Find :

Code:
<div class="bottommenu">
<div class="float_right">{$lang_select}</div>
<div>
<span class="smalltext">links here
</div> </div>

Replace with :

Code:
<div id="foot">
<div class="col">
<h3>Navigation 1</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
    
<div class="col">
<h3>Navigation 2</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
    
<div class="col">
<h3>Navigation 3</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
<div class="col">
<h3>Navigation 4</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
</div>

Save the templates.
This gives you a 4 column footer for MyBB.

Here is a demo of what you wanted to achieve. : Link

Note : Please retain original credits to the author if you are posting this on any other site.

Hope this helps you guys,
regards

[Image: lt79ucY.png]
(This post was last modified: 10-25-2013 06:58 PM by envira.)
10-25-2013 06:47 PM
Find
4
Quote




LeakBoard Offline
Junior Member
**

Posts: 27
Joined: Oct 2013
Likes Received : 1

Nationality:

Mood: Addicted

Points: 498.59Points
Post: #2
RE: Tutorial to make 4 column footer for MyBB

Envira you rock buddy!I'm buying a theme from you too! Big Grin
THANK YOU SO MUCH!

[Image: y7rjTGP.png]
10-25-2013 07:21 PM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #3
RE: Tutorial to make 4 column footer for MyBB

Glad it helped you Smile
regards

[Image: lt79ucY.png]
10-25-2013 08:08 PM
Find
0
Quote




Zwiv Offline
Junior Member
**

Posts: 24
Joined: Nov 2013
Likes Received : 2

Nationality: Philippines

Mood: None

Points: 539.90Points
Post: #4
RE: Tutorial to make 4 column footer for MyBB

Great tutorial but I have a quick question.

How would I get this to span the entire bottom width of the forum outside the container like it is here on My Skins?
11-28-2013 09:16 PM
Find
0
Quote




Fring Offline
Junior Member
**

Posts: 7
Joined: May 2013
Likes Received : 1

Nationality: Italy

Mood: None

Points: 99.71Points
Post: #5
RE: Tutorial to make 4 column footer for MyBB

Great, thanks envira Smile

One thing

I think it is better to write h3 selector in this manner:

Code:
div.col h3 {
    background: none;
    font: bold 18px Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    margin-left: 20px;
    padding: 9px 0 0 19px;
    height: 33px;
    color:#E04006;
}

avoiding the double color, change the margin with margin-left (more fast to be read by the browser), and change h3 with div.col h3 (if someone uses this selector in another case)
12-30-2013 03:49 PM
Find
0
Quote




nokia6120 Offline
Junior Member
**

Posts: 9
Joined: Jan 2014
Likes Received : 0

Nationality: Undisclosed

Mood: None

Points: 50.01Points
Post: #6
RE: Tutorial to make 4 column footer for MyBB

exactly what I needed thanks!
01-08-2014 04:33 PM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
Post: #7
RE: Tutorial to make 4 column footer for MyBB

(12-30-2013 03:49 PM)Fring Wrote:  Great, thanks envira Smile

One thing

I think it is better to write h3 selector in this manner:

Code:
div.col h3 {
    background: none;
    font: bold 18px Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    margin-left: 20px;
    padding: 9px 0 0 19px;
    height: 33px;
    color:#E04006;
}

avoiding the double color, change the margin with margin-left (more fast to be read by the browser), and change h3 with div.col h3 (if someone uses this selector in another case)

Yeah agreed, thanks for the tip, would include in the next revision.
regards

[Image: lt79ucY.png]
04-22-2014 11:59 PM
Find
0
Quote




Sakura Zero Offline
Junior Member
**

Posts: 14
Joined: May 2014
Likes Received : 0

Nationality: Undisclosed

Mood: None

Points: 41.07Points
Post: #8
RE: Tutorial to make 4 column footer for MyBB

Thanks!
05-04-2014 01:25 PM
Find
0
Quote




farhanfarhan76 Offline
Junior Member
**

Posts: 17
Joined: May 2014
Likes Received : 0

Nationality: Undisclosed

Mood: None

Points: 52.25Points
Post: #9
RE: Tutorial to make 4 column footer for MyBB

nice share
05-06-2014 04:05 PM
Find
0
Quote




VetFalco Offline
Junior Member
**

Posts: 14
Joined: Jul 2014
Likes Received : 0

Nationality: Italy

Mood: None

Points: 6.64Points
Post: #10
RE: Tutorial to make 4 column footer for MyBB

love this
07-20-2014 06:43 PM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Information Add Social Links to Your MyBB Forum envira 3 3,756 09-25-2016 03:59 AM
Last Post: smash
Star Simple jQuery Drop Down Login Form tutorial for MyBB envira 12 6,371 09-05-2016 10:18 PM
Last Post: Petrmix
Heart Enhanced Social Share buttons Tutorial without plugins envira 13 8,132 09-05-2016 02:37 AM
Last Post: noah
  [1.8x] [How] MyBB Reputation Gabbar 0 415 10-29-2015 09:41 AM
Last Post: Gabbar
Smile Some MyBB Useful Codes that you can use in your templates envira 11 7,883 07-07-2015 09:18 AM
Last Post: Unr34lity
Thumbs Up Make A Nice Breadcrumb Navigation for your site myskins 24 10,821 12-16-2014 01:28 PM
Last Post: rida.rwp
Heart Global Tool Tips with Jquery for Mybb myskins 6 4,270 09-06-2014 07:42 PM
Last Post: Yorne
  How To Create Free MyBB-Based Forum. Jero 15 3,340 07-20-2014 06:44 PM
Last Post: VetFalco
Heart Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery envira 33 12,727 07-20-2014 06:18 PM
Last Post: VetFalco
Information Add Boxes to MyBB postbit User Details envira 4 5,283 04-10-2014 10:46 PM
Last Post: Dropkaz

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.