©2010-2018 Traduction italienne par XenForo Italia
I know very well that it is Xenforo, which is why I asked here if it was possible to have this change also on PhpBBssl wrote: Tue May 14, 2024 10:23 am So you have to check with the support of XenForo my friend, here it's phpBB!
©2010-2018 Traduction italienne par XenForo Italia
What's the link to the forum where you saw that style of breadcrumb?
Exactly what I was looking for, how do I make the change to my style?ssl wrote: Tue May 14, 2024 11:46 am This style is closer to what you are looking for: https://www.phpbb.com/customise/db/styl ... ia_deluxe/
stylesheet.css
file of its child styleCode: Select all
/* ----------------------------------------------------------------------------
Breadcrumbs
---------------------------------------------------------------------------- */
.navbar {background-color: transparent;}
ul.nav-breadcrumbs {
border-color: transparent;
}
.breadcrumbs {
margin-left: -8px;
& .crumb {
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
font-weight: normal;
& a {
color: rgba(255, 255, 255, 0.7);
text-shadow: rgba(0, 0, 0, 0.1) 1px 2px 1px;
}
&:first-child {
& a {
padding-left: 3px;
}
&::after,
& a {
background-image: linear-gradient(rgb(214, 132, 81) 0%, rgb(213, 120, 63) 33%, rgb(195, 102, 44) 71%, rgb(180, 96, 45) 100%);
}
}
&::before,
&::after {
content: "\00a0";
display: inline-block;
padding: 0 3px;
}
&::before {
clip-path: polygon(100% 0, 100% 100%, 0% 100%, 50% 50%, 0% 0%);
}
&::after {
clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 100%);
}
&::before,
&::after,
& a {
background-image: linear-gradient(rgb(96, 107, 133) 0%, rgb(86, 98, 129) 13%, rgb(59, 72, 104) 78%, rgb(57, 69, 101) 91%, rgb(60, 72, 103) 100%);
}
&:hover {
&::before,
&::after,
& a {
background-image: linear-gradient(rgb(214, 132, 81) 0%, rgb(213, 120, 63) 33%, rgb(195, 102, 44) 71%, rgb(180, 96, 45) 100%);
}
}
}
@media (max-width: 700px) {
margin-left: -14px;
}
}
.nav-footer .breadcrumbs {
margin-left: -17px;
@media (max-width: 700px) {
margin-left: -13px;
}
}
Code: Select all
.breadcrumbs {
& .crumb {
& a {
color: /* link color */;
}
&:first-child {
& a {
padding-left: 3px;
}
}
&::before,
&::after {
content: "\00a0";
display: inline-block;
padding: 0 3px;
}
&::before {
clip-path: polygon(100% 0, 100% 100%, 0% 100%, 50% 50%, 0% 0%);
}
&::after {
clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 100%);
}
&::before,
&::after,
& a {
background: /* default background */;
}
&:hover {
&::before,
&::after,
& a {
background: /* hover background */;
}
}
}
}
Code: Select all
.navbar {
padding: 0;
}
.nav-main li a {
padding: 3px 0px;
}
ul#nav-main {
padding-inline: 10px;
}
ul#nav-breadcrumbs .rightside a {
padding-block: 3px;
}
#nav-footer li:not(.breadcrumbs){
padding-block: 3px;
}
.navbar ul.linklist {
padding: 0;
}
.breadcrumbs{
padding-top:0 !important;
overflow: hidden;
}
.breadcrumbs .crumb:first-child:before,
.breadcrumbs .crumb:first-child:after{
content: ''
}
.breadcrumbs .crumb:before,.breadcrumbs .crumb:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 50%;
padding:0;
border-right: 1px solid black;
box-shadow: inset currentColor -1px 0px 0px 0px;
}
.breadcrumbs .crumb {
position: relative;
padding: 0 10px;
}
.breadcrumbs .crumb:before{
top: 0;
transform: skewX(45deg)
}
.breadcrumbs .crumb:after{
bottom: 0;
transform: skewX(-45deg)
}
.breadcrumbs .crumb a {
position: relative;
z-index: 99;
padding: 3px 5px;
}
.breadcrumbs .crumb:hover:before,
.breadcrumbs .crumb:hover:after {
background: white;
}
.breadcrumbs .crumb:first-child {
margin-left: -10px;
}
.breadcrumbs .crumb:first-child a {
padding-left: 10px;
}
.breadcrumbs .crumb:last-child::before,.breadcrumbs .crumb:last-child::after {
width: calc(100% - 10px);
}