Breadcrumb

For support and discussion related to templates and themes in phpBB 3.3.
User avatar
Max_69
Registered User
Posts: 78
Joined: Thu Jun 05, 2014 9:19 am
Location: Udine-Italy

Breadcrumb

Post by Max_69 »

Hi guys, how do I make this change in my style?
You do not have the required permissions to view the files attached to this post.
User avatar
ssl
Registered User
Posts: 1983
Joined: Sat Feb 08, 2020 2:15 pm
Location: Le Lude, Pays de la Loire - France
Name: Fred Rimbert

Re: Breadcrumb

Post by 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.
Sorry for my English ... I do my best! :anger_right:

:point_right_tone3: phpBB: 3.3.13 | PHP: 8.3.9
:point_right_tone4: [Kill spam on phpBB] - [Some French translation of extensions]
"Mistress, Mistress someone is bothering me in pm"
User avatar
Max_69
Registered User
Posts: 78
Joined: Thu Jun 05, 2014 9:19 am
Location: Udine-Italy

Re: Breadcrumb

Post by Max_69 »

The link is this https://consoleworld.it/threads/statistiche-forum.4/ change style in CSW Light
User avatar
ssl
Registered User
Posts: 1983
Joined: Sat Feb 08, 2020 2:15 pm
Location: Le Lude, Pays de la Loire - France
Name: Fred Rimbert

Re: Breadcrumb

Post by ssl »

So you have to check with the support of XenForo my friend, here it's phpBB!
©2010-2018 Traduction italienne par XenForo Italia
Sorry for my English ... I do my best! :anger_right:

:point_right_tone3: phpBB: 3.3.13 | PHP: 8.3.9
:point_right_tone4: [Kill spam on phpBB] - [Some French translation of extensions]
"Mistress, Mistress someone is bothering me in pm"
User avatar
Max_69
Registered User
Posts: 78
Joined: Thu Jun 05, 2014 9:19 am
Location: Udine-Italy

Re: Breadcrumb

Post by Max_69 »

ssl 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
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
User avatar
ssl
Registered User
Posts: 1983
Joined: Sat Feb 08, 2020 2:15 pm
Location: Le Lude, Pays de la Loire - France
Name: Fred Rimbert

Re: Breadcrumb

Post by ssl »

Oops sorry I didn't understand that way
Sorry for my English ... I do my best! :anger_right:

:point_right_tone3: phpBB: 3.3.13 | PHP: 8.3.9
:point_right_tone4: [Kill spam on phpBB] - [Some French translation of extensions]
"Mistress, Mistress someone is bothering me in pm"
User avatar
Max_69
Registered User
Posts: 78
Joined: Thu Jun 05, 2014 9:19 am
Location: Udine-Italy

Re: Breadcrumb

Post by 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
User avatar
ssl
Registered User
Posts: 1983
Joined: Sat Feb 08, 2020 2:15 pm
Location: Le Lude, Pays de la Loire - France
Name: Fred Rimbert

Re: Breadcrumb

Post by ssl »

This style is closer to what you are looking for: https://www.phpbb.com/customise/db/styl ... ia_deluxe/
Sorry for my English ... I do my best! :anger_right:

:point_right_tone3: phpBB: 3.3.13 | PHP: 8.3.9
:point_right_tone4: [Kill spam on phpBB] - [Some French translation of extensions]
"Mistress, Mistress someone is bothering me in pm"
User avatar
danieltj
Infrastructure Team Member
Infrastructure Team Member
Posts: 531
Joined: Thu May 03, 2018 9:32 pm
Location: United Kingdom
Name: Daniel James

Re: Breadcrumb

Post by danieltj »

Max_69 wrote: Tue May 14, 2024 9:09 am 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?
Awesome Payments extension now available!
User avatar
Max_69
Registered User
Posts: 78
Joined: Thu Jun 05, 2014 9:19 am
Location: Udine-Italy

Re: Breadcrumb

Post by Max_69 »

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/
Exactly what I was looking for, how do I make the change to my style?
User avatar
cabot
Registered User
Posts: 783
Joined: Sat Jan 07, 2012 4:16 pm

Re: Breadcrumb

Post by 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.
User avatar
ssl
Registered User
Posts: 1983
Joined: Sat Feb 08, 2020 2:15 pm
Location: Le Lude, Pays de la Loire - France
Name: Fred Rimbert

Re: Breadcrumb

Post by 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
You do not have the required permissions to view the files attached to this post.
Sorry for my English ... I do my best! :anger_right:

:point_right_tone3: phpBB: 3.3.13 | PHP: 8.3.9
:point_right_tone4: [Kill spam on phpBB] - [Some French translation of extensions]
"Mistress, Mistress someone is bothering me in pm"
User avatar
cabot
Registered User
Posts: 783
Joined: Sat Jan 07, 2012 4:16 pm

Re: Breadcrumb

Post by 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 */;
			}
		}
	}
}
User avatar
Mannix_
Registered User
Posts: 2010
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: Breadcrumb

Post by 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 :D
You do not have the required permissions to view the files attached to this post.
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
danieltj
Infrastructure Team Member
Infrastructure Team Member
Posts: 531
Joined: Thu May 03, 2018 9:32 pm
Location: United Kingdom
Name: Daniel James

Re: Breadcrumb

Post by danieltj »

This was not easy to achieve but I think I managed to get pretty darn close! :lol:
custom-breadcrumb-nav-menu.png
You do not have the required permissions to view the files attached to this post.
Awesome Payments extension now available!

Return to “[3.3.x] Styles Support & Discussion”