PDA

View Full Version : How do I format breadcrumb text?


BonsaiNut
11-26-2011, 03:09 PM
I have a background image for my forums that is dark. The breadcrumb navigation that appears over thread textbox is dark text that does not contrast (it is for all intents and purposes invisible).

How do I format the breadcrumb text? (including the little "home" icon?)

http://www.wifeofnerd.com/images/breadcrumb.jpg

setishock
11-26-2011, 03:50 PM
That's a lot of color and contrast changes in the area the breadcrumbs display. Adjusting the font wieght or size would still give you trouble seeing it. I would suggest throwing a light filter behind it.
Download the filter I attached then park it somewhere in your ftp and note the path. I personally just toss it in an album and referance it from there. Makes Lynne chringe when I do that. But for testing you may want to do that first. Then if it works like you want park it in the ftp and change the path.
Ok open your addisional css and add this >

.breadcrumb > ul {
background: url(path/to/your/filter/image);
}

Click save and reload when you have the code like you want it.
I went ahead a uploaded 2 filters in white. One at 50% and the other at 75%. RobbieZ made some colored filters for me and those can be found here > https://vborg.vbsupport.ru/showthread.php?t=268506

BonsaiNut
11-26-2011, 04:26 PM
Thanks seti - I'll give it a spin :) It's always a good thing to make Lynne cringe :)

Lynne
11-26-2011, 04:56 PM
It's always a good thing to make Lynne cringe :)
Hey, I heard that!!! :D

BonsaiNut
11-26-2011, 05:53 PM
Click save and reload when you have the code like you want it.
I went ahead a uploaded 2 filters in white. One at 50% and the other at 75%.

Hmmm... I've got the background showing up behind the text, so the CODE is working. My problem is that I can't seem to get the image to display as a transparency. I used your original PNG file (which didn't work), and then created a new 50% fill image that I saved as a gif (which didn't work). I am assuming I have to use an opacity command in there? Or not?

--------------- Added 1322335165 at 1322335165 ---------------

For what it's worth, here's what I ended up doing:

.breadcrumb > ul {background:
width:400px;
height:20px;
background-color:#ffffff;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */;}

But interestingly, now that I see it, I don't like the transparency, LOL :) But at least it worked :) EDIT once I dialed it up to 85% it looks ok :) Thanks for the help!