1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Change the breadcrumb arrow color (default style)

Discussion in 'Styling and Customization Questions' started by Neil E., Nov 20, 2012.

  1. 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.

     
  2. Shelley

    Shelley Well-Known Member

    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;
    }
    
     
    Akela and Jake Bunce like this.
  3. Neil E.

    Neil E. Active Member

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

    Shelley Well-Known Member

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

    Code:
    .breadcrumb .crust .arrow {
        border-color: transparent black transparent red; }
    
     
    Jake Bunce likes this.
  5. HenrikHansen

    HenrikHansen Well-Known Member

  6. Neil E.

    Neil E. Active Member

    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.
     
  7. Shelley

    Shelley Well-Known Member

    extra css would have done that perfectly.
     
    Jake Bunce likes this.
  8. Neil E.

    Neil E. Active Member

    xenforo82.jpg
    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.
     
  9. Shelley

    Shelley Well-Known Member

    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.png
     
    Jake Bunce likes this.
  10. Neil E.

    Neil E. Active Member

    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.
     
  11. Neil E.

    Neil E. Active Member

    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~ */
     
    
     
    creativeforge, Impulse, Akela and 3 others like this.
  12. Akela

    Akela Active Member

    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.
     
  13. Neil E.

    Neil E. Active Member

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

    creativeforge Active Member

    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:

    [​IMG]

    Thanks a bunch!

    Andre
     
  15. Neil E.

    Neil E. Active Member

    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 likes this.
  16. creativeforge

    creativeforge Active Member

    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?
     
  17. Neil E.

    Neil E. Active Member

    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.
     
  18. creativeforge

    creativeforge Active Member

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

    Neil E. Active Member

    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 likes this.
  20. creativeforge

    creativeforge Active Member

    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.

    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
     

Share This Page