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

Breadcrum Item Arrows

Discussion in 'XenForo Questions and Support' started by Gigashadow, Oct 23, 2010.

  1. Gigashadow

    Gigashadow Member

    I've been playing with Item Arrow, Outer/Inner in the Breadcrumb properties, but I really haven't been able to figure out how it works. What I want to do is control not only the solid color of the arrow, but also that of the border surrounding it. So far I have only been able to control the arrow's color (by setting Item Arrow, Inner, Left=Solid 12px, to whatever color I want).

    I've been experimenting with changing various colors and settings on Inner/Outer Item Arrow, but I still really have no clue how these work or interact.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    The css for the arrows is:
    breadcrumb .crust .arrow {

    You want to change this attribute:
    border-left-color:#A5CAE4;
     
  3. Gigashadow

    Gigashadow Member

    I haven't had much luck getting this to work. Right now what I have looks like the below. I was trying to start by seeing if I could make the left border of the blue arrow turn red, by putting in border-left-color:#ff0000;
    [​IMG]

    I have this:

    .breadcrumb .crust .arrow
    {
    @property "breadcrumbItemArrowOuter";
    border-width: 12px;
    border-style: solid;
    border-top-style: solid;
    border-right-width: 1px;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-color:#FF0000;
    display: block;
    position: absolute;
    right: -12px;
    top: 0px;
    z-index: 50;
    width: 0px;
    height: 0px;
    @property "/breadcrumbItemArrowOuter";
    }

    .breadcrumb .crust .arrow span
    {
    @property "breadcrumbItemArrowInner";
    border-width: 12px;
    border-style: solid;
    border-right-width: 1px;
    border-left-color:#0000FF;
    display: block;
    position: absolute;
    left: -13px;
    top: -12px;
    z-index: 51;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 9999px;
    width: 0px;
    height: 0px;
    @property "/breadcrumbItemArrowInner";
    }
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Can you clarify what you mean by the left border?
    Which part of the breadcrumb arrow is it you're trying to change?
     
  5. Gigashadow

    Gigashadow Member

    Well ideally I'm looking for fine-grained control over the borders of the blue triangle above. For example, in this Xenforo forum we are posting on here, there is a 1px wide " > " outline feeding from "Home" into "Forums". I'm not really sure how to do that kind of thing; I can only get a solid colored triangle (blue in my example above).
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    I just quickly changed border-left-color in FireBug to #FF0000 and got this:

    arrows.PNG
     

Share This Page