Getting 'Quick Links' for your site

Sticked
Locked
668 views
Struggling to find out how to enable quick links? Well don't worry, here's a full tutorial on how to fully customize and make your own quick links tab.
You'll need basic knowledge of HTML and CSS to edit this, and yes, keep in mind, basic. I'm sure you learn it at school :)

Don't know what quick links are? Here's an example: 



To begin with, paste this in your forum CSS tab: 

.quicklinks-holder {
    background-color: none;
    margin-bottom: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    text-align: center;
}

.quicklinks-header {
    display: none;
    text-align: left;
}

.quicklinks-content a {
    padding: 15px 40px 15px 40px;
    background: #222;
    transition: background .5s ease-in-out;
    display: block;
    border: 1px solid #428bca;
    margin: 15px 15px 10px 15px;
    font-size: 15px;
}

.quicklinks-content a:hover {
    background: #000;
}

.forum-wrapper .quicklinks-holder {
    background-color: rgba(30,30,30,.7); /* BACKGROUND COLOR OF MAIN WIDGET */
    margin-bottom: 20px;
    border-radius: 3px; /* ROUNDED CORNERS */
    box-shadow: #080808 1px 1px 15px; /* SHADOW AROUND HOLDER */
    padding: 5px;
}

.forum-wrapper .quicklinks-holder .quicklinks-header {
    display: block;
    padding: 12px;
    font-size: 18px;
    background-color: #428bca;
    color: #e2e2e2;
}

.forum-wrapper .quicklinks-holder .quicklinks-content a {
    display: inline-block;
}

Now, create a forum widget in your settings page. Then go to this link: http://pastebin.com/9gN0FAPg , copy the HTML code paste it in the forum widget.

Edit that to your liking and name the widget to quick links.

Now, if you want your quick links tab to go to the top, you paste this in forum javascript:

$(".forum-wrapper").prepend( $(".quicklinks-holder") );


Uh oh! Now you have an empty forum widget on the left, you'll need to change it's name and put your own custom content inside of it. Make sure you do not interfere with any of the quicklinks code.
Winner x 2
Take my money x 3
Thanks Alot! Really helped out
Thanks, been wanting this!
Love x 1
Nice. Useful
Reply