MyBB Community Forums

Full Version: Small issue with breadcrumbs
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi there,

Having a small issue with a breadcrumbs mod for my forum.

Using this tutorial for the mod: http://yaldaram.com/thread-317.html

Everything works fine, all code is in, graphics are on the server BUT I'm 1) missing the separator from the breadcrumbs (just not showing up on the forum) and the 2) the Home icon is not centered with the breadcrumb either. (See image below)

Any ideas?

Help greatly appreciated!
link to your site? Check with firebug and see if you have more rules being applied to that class or parent containers like padding-bottom. You may have a parent container img rule that's causing that. The separator should be in your templates. it's given it's own template in navigation. Check it out. Smile
(2013-05-11, 09:20 AM)WebDevandPhoto Wrote: [ -> ]link to your site? Check with firebug and see if you have more rules being applied to that class or parent containers like padding-bottom. You may have a parent container img rule that's causing that. The separator should be in your templates. it's given it's own template in navigation. Check it out. Smile

Can't seem to find anything with Firebug...

Link to site:

I'm using the default theme with the new code for the breadcrumbs as-is in the tutorial(s)...

Home icon is there, just no separator and the home icon is padded at the top, not centered... Not sure what change in the css file?
1) Are you sure you have bc_separator.png in images folder? It seems you haven't: http://internal.kay.io/images/bc_separator.png
Oh, as I see in package there is a .gif file but in CSS .png, so you need either to convert the image or change bc_separator.png to bc_separator.gif in CSS.

2) Try adding something like this:
#breadcrumb img {
     vertical-align: middle;
}
Thanks Destroy666 - converting to PNG solved the separator issue...

Home button still not aligned even after adding the suggested code in my CSS...
Add something like this then (not the best solution but should work for 1 image or images with same size):
#breadcrumb img {
     padding: 4px;
}
Change the pixels to suit your needs.
That did it, thank you for your help