Remixed Breadcrumbs

[@rjen]

Link to the mod

Remixed Breadcrumbs

A modification for Simple Machines Forum 2.1 that changes the layout of the Breadcrumbs (linktree) in Curve2 to a fancier display.

This modification is created from the "Remixed Breadcrumbs" Tips&Tricks topic: https://www.simplemachines.org/community/index.php?topic=580159.0 by TwitchisMental

Settings

There are no settings for this mod.

The layout and colors are based on the Curve2 theme and is using the new css file: RemixedBreadcrumbs.css: the mod can also update other themes if these are curve2 variations. If needed a copy of the RemixedBreadcrumbs.css can be placed in the other theme css folder and adapted to suit the specific theme color requirements.

License

Remixed Breadcrumbs is released under the MIT License. A full copy of this license is included in the package file.


Changelog

Version 2.0:

• Updated to full hooks: only css changes

Version 1.0:

• Initial release

[TwitchisMental]

Nice mod, thank you for your contribution .

[Shades.]

Nice mod!

I'm still getting that line in the middle talked about here.

You cannot view this attachment.

And I've tried @TwitchisMental suggestion here but no joy!

Any ideas?

Thanks,
Shades

[Diego Andrés]

Is there a live site where we can see the issue?

[Shades.]

Is there a live site where we can see the issue?

ganderzone.com

[Diego Andrés]

I can't spot the issue on Firefox nor Chrome 
Try using left: 100%; in .navigate_section ul li::after, along with right: auto;

[Shades.]

Well, that didn't work! I tried it in Chrome & Edge and it looks the same with or without the edits even after clearing smf & browser cache and I have the Minimize CSS and JavaScript files turned off too at the moment.

[TwitchisMental]

Nice mod!

I'm still getting that line in the middle talked about here.

You cannot view this attachment.

And I've tried @TwitchisMental suggestion here but no joy!

Any ideas?

Thanks,
Shades

Yeah it looks like you are getting a problem that seems to happen in Chrome based browsers. Some times you just need to adjust the :before and :after sections right property.

The overall cause seems to be caused by the body class font: 83.33%/100%...Sometimes just adjusting the right: works.. other times not so much.

Try this -
Find

Code Select Expand

.navigate_section ul li:before {
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent;
    border-left: 1em solid var(--breadcrumb_bg);
    content: "";
    position: absolute;
    top: 0;
    right: -1.25em;
    z-index: 1;
}
Replace with

Code Select Expand

.navigate_section ul li:before {
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent;
    border-left: 1em solid var(--breadcrumb_bg);
    content: "";
    position: absolute;
    top: 0;
    right: -1.15em;
    z-index: 1;
}

[Shades.]

Yep, that fixed it...thanks a million!

[Shades.]

I have been trying to figure out how to have this work only in certain Themes I choose and my best solution is to just remove the "RemixedBreadcrumbs.css" from the default Theme and put it in each "whatever themes" CSS folder. Is this the correct way to do it or will it cause problems I'm not seeing yet?

I think that is the correct way but wanted to be sure, and also leave this tip for someone else that might be wondering how to do it.

Thanks,
Shades

[@rjen]

Pretty sure that way is harmless. Would need to check the mod to be sure though

[Shades.]

How can I disable this mod on mobile? Looks good on my site on desktop but not on mobile.

Thanks,
Shades

[TwitchisMental]

How can I disable this mod on mobile? Looks good on my site on desktop but not on mobile.

Thanks,
Shades

What is it that you do not like, it maybe an easy fix .

[Shades.]

I adjusted the colors to match my site and looks good on desktop just not on mobile. (See below)

Looks good:
You cannot view this attachment.

Not so good:
You cannot view this attachment.

[Kindred]

take a look at the CSS I used on test2.turtleshellprod.com -- I think the mod version of this assumes the BG for the entire bar, which is why you have that look....   my variation only highlights the BG for the arrow itself

Code Select Expand

.navigate_section li::before {
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1em solid #fff;
  content: "";
  position: absolute;
  top: 0;
  right: -1.25em;
  z-index: 1;
}

with *NO* background defined for the .navigate_section itself.

[Shades.]

I removed the background and it looks better...

You cannot view this attachment.

But still think I like it without the breadcrumbs on mobile (what do yall think)...

You cannot view this attachment.

[@rjen]

Attached css will deactivate the changes at a width less then 640px.

[Shades.]

Attached css will deactivate the changes at a width less then 640px.

Much appreciated, thank you!