Skocz do zawartości
Pecetowicz Forum komputerowe

How to create Custom Fancy Breadcrumb | Invision Community


Rekomendowane odpowiedzi

Hi, my lords. How can I change default Breadcrumb in IPS Community Suite (Invision) to one like this below with arrows?

Untitled.png

Thanks in advance

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • SeNioR zmienił tytuł na How to create Custom Fancy Breadcrumb | Invision Community
  • Założyciel

Match some ready code with the [data-role="breadcrumbList"] attribute.

Example: CSS Triangle Breadcrumbs

Sample customized code:

ul[data-role="breadcrumbList"]  { list-style: none; }
.ipsBreadcrumb ul[data-role="breadcrumbList"] li{overflow:unset;}
ul[data-role="breadcrumbList"] li { float: left; }

ul[data-role="breadcrumbList"] li a {
    color: white;
    text-decoration: none;
    padding: 6px 5px 6px 20px;
    background: #1265a1;
    position: relative;
    display: block;
    float: left;
}

ul[data-role="breadcrumbList"] li a span i{display:none;}

ul[data-role="breadcrumbList"] li a:after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 12px solid transparent; 
  border-bottom: 13px solid transparent;
  border-left: 8px solid #1265a1;
  position: absolute;
  top: 50%;
  margin-top: -13px; 
  left: 100%;
  z-index: 2; 
}
ul[data-role="breadcrumbList"] li a:before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 12px solid transparent; 
  border-bottom: 13px solid transparent;
  border-left: 8px solid black;
  position: absolute;
  top: 50%;
  margin-top: -13px; 
  left: 100%;
  z-index: 2; 
}

ul[data-role="breadcrumbList"] li a:hover { background: #2986cc; color:white;}
ul[data-role="breadcrumbList"] li a:hover:after { border-left-color:#2986cc!important; }
.ipsBreadcrumb [data-role="breadcrumbList"] > li:not(:first-child):last-child{padding:6px 5px 6px 20px;}
.ipsBreadcrumb [data-role="breadcrumbList"] > li:first-child a{padding:6px 5px 6px 10px;}

Preview:

breadcrumb-css-fancy-invision-community.png

  • Super 1
Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...