Change the breadcrumb arrow color (default style)

Neil E.

Neil E.

Active member
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~ */
Click to expand...
 
Sort by date Sort by votes
The following changes that. red being the colour you want to change

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

.breadcrumb .crust:hover .arrow span {
border-left-color: red;
}
 
Upvote 0 Downvote
Shelley said:
There's a good chance you can do this via SP if you wanted to change it from in there.
Click to expand...

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.
 
Upvote 0 Downvote
Neil E. said:
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.
Click to expand...

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.

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

bc_arrow1.webp
 
Upvote 0 Downvote
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.

Code: 
.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~ */
 
Upvote 0 Downvote
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:

breadcrumb_mystery.jpg


Thanks a bunch!

Andre
 
Upvote 0 Downvote
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).
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Neil E. said:
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.
Click to expand...

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.

Neil E. said:
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.
Click to expand...

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
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom