Breadcrumb

[Max_69]

Hi guys, how do I make this change in my style?

[ssl]

Why not include the link to the board where this screenshot comes from? This will allow you to know a little more about this navbar.

[Max_69]

The link is this https://consoleworld.it/threads/statistiche-forum.4/ change style in CSW Light

[ssl]

So you have to check with the support of XenForo my friend, here it's phpBB!
©2010-2018 Traduction italienne par XenForo Italia

[Max_69]

So you have to check with the support of XenForo my friend, here it's phpBB!
©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 PhpBB

[ssl]

Oops sorry I didn't understand that way

[Max_69]

No problem

I searched through the various styles available in the demo style database and found this one: https://www.phpbb.com/customise/db/styl ... k/demo/3.3
as a modification it is very similar, only the arrowhead modification is missing and how to insert this modification on my style

[ssl]

This style is closer to what you are looking for: https://www.phpbb.com/customise/db/styl ... ia_deluxe/

[danieltj]

Hi guys, how do I make this change in my style?

What's the link to the forum where you saw that style of breadcrumb?

[Max_69]

This style is closer to what you are looking for: https://www.phpbb.com/customise/db/styl ... ia_deluxe/

Exactly what I was looking for, how do I make the change to my style?

[cabot]

Hello,

Have a look here and select Artodia: Deluxe, although never finished due to lack of time, I had started to adapt the style in 3.3.
But it's the breadcrumb you're interested in, and it's functional. It doesn't contain any images, I recreated it CSS only.

[ssl]

Ok, so, cabot correct me if I'm wrong, just put this code at the bottom of the stylesheet.css file of its child style

Code: 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;
	}
}

Capture d’écran 2024-05-14 à 16.22.28.png

[cabot]

No, specific elements of the original style can be removed.

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 */;
			}
		}
	}
}

[Mannix_]

I wanted to try myself and get as close to the screenshot as possible

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);
}

the result

e41404195482.png

not a 100% sure how responsive this is

[danieltj]

This was not easy to achieve but I think I managed to get pretty darn close!

custom-breadcrumb-nav-menu.png