Change the breadcrumb arrow color (default style)

[Neil E.]

Searches only come up with Shelley's dazzling breadcrumb resource. I'm just trying to change the default arrow color. I have no problem changing the breadcrumb colors. Here's what I currently have in EXTRA.

.breadcrumb
{
background-color: #ffefd6 !important;
border-top: 1px solid #ffcb6b !important;
border-right: 1px solid #ffcb6b !important;
border-bottom: 1px solid #ffcb6b !important;
border-left: 1px solid #ffcb6b !important;
border-radius: 5px 5px 5px 5px !important;
}
/* ~style breadcrumb border and non-link background area~ */



.breadcrumb .crust a.crumb
{
color: #602800 !important;
background-color: #ffefd6 !important;
border-bottom: 1px solid #ffc675 !important;
}
/* ~adjust link background and border bottom to match rest of breadcrumb~ */



.breadcrumb .crust a:hover
{
background-color: #ffe7c0 !important;
}
/* ~darken link background on hover~ */



.breadcrumb .crust .arrow
{
border-color: transparent #ffefd6 !important;
}
/* ~left side of breadcrumb arrow~ */



.breadcrumb .crust .arrow span
{
border-color: transparent black transparent #ffefd6;
}
/* ~breadcrumb arrow area~ */



.breadcrumb .crust:hover .arrow span
{
border-color: transparent black transparent #ffe7c0;
}
/* ~breadcrumb arrow hover~ */

 

[Shelley]

The following changes that. red being the colour you want to change

.breadcrumb .crust .arrow span {
border-color: transparent black transparent red;
}

.breadcrumb .crust:hover .arrow span {
border-left-color: red;
}

 

[Neil E.]

It was a good idea, but I wound up with a filled arrow. I'm really only trying to get the ">" to change color.

 

[Shelley]

It was a good idea, but I wound up with a filled arrow. I'm really only trying to get the ">" to change color.
View attachment 37126

There's a good chance you can do this via SP if you wanted to change it from in there.

.breadcrumb .crust .arrow {
    border-color: transparent black transparent red; }

 

[HenrikHansen]

Use this:
http://xenforo.com/community/resources/magic-breadcrumb-arrow.138/

 

[Neil E.]

There's a good chance you can do this via SP if you wanted to change it from in there.

I had it OK with SP, but I'm trying to change everything over to EXTRA. I have already achieved what the magic arrow resource offers; I just couldn't find a combination that would change the arrow itself.

 

[Shelley]

I just couldn't find a combination that would change the arrow itself.

extra css would have done that perfectly.

 

[Neil E.]

extra css would have done that perfectly.

Sorry you lost me. I still don't have anything in extra that changes only the arrow itself. As you can see the arrow is still grey.

 

[Shelley]

View attachment 37128
Sorry you lost me. I still don't have anything in extra that changes only the arrow itself. As you can see the arrow is still grey.

the part I add as "red" will change that in the code below, or atleast it does for me but you just change it to the colour your wanting to apply to it.

.breadcrumb .crust .arrow {
    border-color: transparent black transparent red; }

 

[Neil E.]

OK that looks fine, it just didn't function for me. The other css I have for the breadcrumb must interferring somehow. I'll have to exeriment with it.

 

[Neil E.]

After looking at Shelley's example, I went back and redid the breadcrumb from scratch. Everything works perfectly, identical to the default setup. To style the breadcrumb, just change the colors in this code used in EXTRA.

.breadcrumb .crust .arrow
{
    border-color: transparent black transparent #8b0000 !important;
}
/* ~breadcrumb arrow~ */
 
 
 
.breadcrumb
{
    background-color: #ffefd6 !important;
    border-top: 1px solid #ffcb6b !important;
    border-right: 1px solid #ffcb6b !important;
    border-bottom: 1px solid #ffcb6b !important;
    border-left: 1px solid #ffcb6b !important;
    border-radius: 5px 5px 5px 5px !important;
}
/* ~style breadcrumb border and non-link background area~ */   
 
 
 
.breadcrumb .crust a.crumb
{
    color: #500000 !important;
    font-size: 12px !important;
    background-color: #ffefd6 !important;
    border-bottom: 1px solid #ffcb6b !important;
}
/* ~link background and border bottom~ */
 
 
 
.breadcrumb .crust:hover a.crumb
{
    background-color: #ffe7c0 !important;
}
/* ~link background and border bottom hover~ */
 
 
 
.breadcrumb .crust .arrow span
{
    border-color: transparent black transparent #ffefd6 !important;
}
/* ~left side of arrow~ */
 
 
 
.breadcrumb .crust:hover .arrow span
{
    border-color: transparent black transparent #ffe7c0 !important;
}
/* ~left side of arrow hover~ */

 

[Akela]

I just wanted to thank both Shelley and Neil E for the breadcrumb redesign. Neil's final version is exactly what I was trying to do.

 

[Neil E.]

You are most welcome, but I'd never have got it right without help from other users (specifically the queen of styling).

 

[creativeforge]

NEIL! How grateful I am for your solution here (thanks Shelley too!). I spent about 2 hours trying all sorts of configurations. I was going to post this screenshot with questions as to how many elements are included in the breadcrumbs bar and arrows. It's insane trying to figure this out. Wonder why it's so complex, but in any case you guys came through! THANK YOU THANK YOU THANK YOU !!

I'm still wondering how to call these elements, if anyone could help:

Thanks a bunch!

Andre

 

[Neil E.]

I use Chrome's "Inspect Element" (right click) and the FireFox add-on FireBug's "Inspect Element" (right click) to determine the names of the elements. It takes some highlighting of various classes to see how they go together. My code posted above covered everything I needed to know about the breadcrumb. You may want to add some additional properties to those elements (change text color etc.).

I only use Styling Properties if I can't make EXTRA work (rare).

 

[creativeforge]

Hi Neil, thanks for the tip. I use Chrome too, but that element inspector is still confusing, too much stuff going on. I need to take some time to learn to use it... I thought I should only use Extra if Style Properties don't work. Are you not using ANY of the SP?

 

[Neil E.]

I found SP confusing to work with. It was very difficult to match the description with the element that was to be changed. If there was some sort of screen shot that pointed to the item, then the whole process would be easier. To find elements, the "inspect element" helps to identitfy what you want to change, but by the time you go through the process it becomes easier to start using EXTRA. The real issue is that SP changes more than one single element so it can be tedious to match the same ones in EXTRA. That is why it is more efficient to find a pre-done style and use it.

I found Firebug to be easier than Chrome, however Chrome goes a bit deeper with info so it can be useful.

 

[creativeforge]

I see, so what happens if you were to change style, would all the mods done in Extra.css be automatically applied to it?

 

[Neil E.]

Consider every style as a separate entity. Any style you create from scratch will have a full set of templates and a complete set of the default styling properties. EXTRA will be blank.

It's easy to copy and paste EXTRA into Notepad++ and save it for reference. If you export your style, it will have all the modified items included. I'm not sure what happens if you change to a pre-done style. If it was a child of your original style, it should inherit all the modifications. That can be tricky since your modifications can conflict with those from the new style. I would say the best policy would be to make any new style a separate style and then add the changes you want.

 

[creativeforge]

I found SP confusing to work with. It was very difficult to match the description with the element that was to be changed. If there was some sort of screen shot that pointed to the item, then the whole process would be easier.

I wondered that very thing earlier on. There was the addon "Show Hooks" which seems to help a bit, but it is lacking something - where is the file containing the values we need to change? How hard would it be to create this kind of screenshot? I'd be ready to help in any way I can.

To find elements, the "inspect element" helps to identitfy what you want to change, but by the time you go through the process it becomes easier to start using EXTRA. The real issue is that SP changes more than one single element so it can be tedious to match the same ones in EXTRA. That is why it is more efficient to find a pre-done style and use it.

I considered using EXTRA.CSS like you do, but this is what stopped me. You have to really know what you're doing, where to go, etc. Maybe if there was a way to compile all the "templates modifications" into one CSS file, and copy that to EXTRA.CSS?

I'll look at Firebug to see if this could help for now, but if you ever think of creating this screenshot reference, and if you need a hand in that, feel free to contact me. If I'm available, I'd be happy to help.

Regards,

Andre