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 Online
Doctor Web
*******

Posts: 1,252
Joined: Aug 2012
Likes Received : 303

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 63,790.12Points
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: 28
Joined: Oct 2013
Likes Received : 1

Nationality:

Mood: Addicted

Points: 597.11Points
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 Online
Doctor Web
*******

Posts: 1,252
Joined: Aug 2012
Likes Received : 303

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 63,790.12Points
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 Online
Doctor Web
*******

Posts: 1,252
Joined: Aug 2012
Likes Received : 303

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 63,790.12Points
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
Star Simple jQuery Drop Down Login Form tutorial for MyBB envira 42 8,549 11-29-2016 08:50 PM
Last Post: DmitriyCauct
Heart Enhanced Social Share buttons Tutorial without plugins envira 15 9,103 11-03-2016 09:28 AM
Last Post: shamzblueworld
Information Add Social Links to Your MyBB Forum envira 5 4,264 10-25-2016 01:08 AM
Last Post: Chub
  [1.8x] [How] MyBB Reputation Gabbar 0 534 10-29-2015 09:41 AM
Last Post: Gabbar
Smile Some MyBB Useful Codes that you can use in your templates envira 11 8,640 07-07-2015 09:18 AM
Last Post: Unr34lity
Star [1.8x] MyBB jQuery User Dropdown Menu with Font Icons and jQuery envira 0 1,373 07-07-2015 12:29 AM
Last Post: envira
Thumbs Up Make A Nice Breadcrumb Navigation for your site myskins 24 11,602 12-16-2014 01:28 PM
Last Post: rida.rwp
Heart Global Tool Tips with Jquery for Mybb myskins 6 4,484 09-06-2014 07:42 PM
Last Post: Yorne
  Forum Hover Effect on MyBB Index Page envira 8 4,745 08-17-2014 11:59 PM
Last Post: !!!a
Smile Multiple Colored Category Headings/ Thead MyBB envira 9 4,683 07-20-2014 06:47 PM
Last Post: VetFalco

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.