MyBB Community Forums

Full Version: How to add toplinks like this?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
(2012-12-16, 12:05 AM)therussiangamer Wrote: [ -> ]
(2012-12-15, 04:15 PM)Dermoid Wrote: [ -> ]
(2012-12-15, 10:32 AM)therussiangamer Wrote: [ -> ]Hey, How did you get the same background? do you mind giving me the template?

What? I dont understand.


for the gif's how did you make them look like the real thing

Just look for the thread here, search the theme and google and do a bit of browsing.
http://community.mybb.com/thread-77763-page-3.html
Dermoid - do you have this fixed yet? Block and blue has an interesting approach to the header style - all the top links have an individual class and you have to define those in the global css. A word of warning - the header wraps REALLY fast because the images are so big, so you might want to rethink just how many you are going to put in the header.

Anyway, look in the global css, and add a new class per li and add that class to the template. Example using a link called mylink:

CSS
.menu .search a, 
 .menu .memberlist a, 
 .menu .calendar a,
 .menu .mylink a,
 .menu .help a {
     float: left;
         text-indent: -99999px;
         margin-right: 35px;
 }

 .menu .mylink a {
     background: url(images/blockblue/toplinks/mylink.gif);
         height: 47px;
         width: 58px;
         margin-top: -13px;
 }

 .menu .mylink a:hover {
     background: url(images/blockblue/toplinks/mylink.gif) 0 46px;
 }

Header:
        <li class="mylink"><a href="{$mybb->settings['bburl']}/myfile.php">Mylink</a></li>
(2012-12-16, 06:44 AM)Leefish Wrote: [ -> ]Dermoid - do you have this fixed yet? Block and blue has an interesting approach to the header style - all the top links have an individual class and you have to define those in the global css. A word of warning - the header wraps REALLY fast because the images are so big, so you might want to rethink just how many you are going to put in the header.

Anyway, look in the global css, and add a new class per li and add that class to the template. Example using a link called mylink:

CSS
.menu .search a, 
 .menu .memberlist a, 
 .menu .calendar a,
 .menu .mylink a,
 .menu .help a {
     float: left;
         text-indent: -99999px;
         margin-right: 35px;
 }

 .menu .mylink a {
     background: url(images/blockblue/toplinks/mylink.gif);
         height: 47px;
         width: 58px;
         margin-top: -13px;
 }

 .menu .mylink a:hover {
     background: url(images/blockblue/toplinks/mylink.gif) 0 46px;
 }

Header:
        <li class="mylink"><a href="{$mybb->settings['bburl']}/myfile.php">Mylink</a></li>
Alright thanks, the part where i'm stuck on is the margin-top,width and height. I dont know what to put in them.
The width would be the width of the image and the height will depend on the height of the image you are placing there. Use something like firebug to finetune the height.
Pages: 1 2