Simple Machines Community Forum

Link to the mod (https://custom.simplemachines.org/index.php?mod=4344)

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

Nice mod, thank you for your contribution :).

Nice mod!

I'm still getting that line in the middle talked about here (https://www.simplemachines.org/community/index.php?msg=4134880).

breadcrumb.png

And I've tried @TwitchisMental suggestion here (https://www.simplemachines.org/community/index.php?msg=4134902) but no joy! :(

Any ideas?

Thanks,
Shades 8)

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

Quote from: Diego Andrés on February 20, 2023, 05:30:03 PMIs there a live site where we can see the issue?

ganderzone.com

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

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.

Quote from: Shades. on February 20, 2023, 05:22:00 PMNice mod!

I'm still getting that line in the middle talked about here (https://www.simplemachines.org/community/index.php?msg=4134880).

[url="https://www.simplemachines.org/community/index.php?action=dlattach;attach=285771;type=preview;file"]breadcrumb.png[/url]

And I've tried @TwitchisMental suggestion here (https://www.simplemachines.org/community/index.php?msg=4134902) but no joy! :(

Any ideas?

Thanks,
Shades 8)

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
.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

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

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

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 8)

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

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

Thanks,
Shades 8)

Quote from: Shades. on July 18, 2023, 10:54:02 PMHow can I disable this mod on mobile? Looks good on my site on desktop but not on mobile.

Thanks,
Shades 8)

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

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

Looks good:
desktop.png

Not so good:
mobile.png

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

.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.

I removed the background and it looks better...

mobile1.png

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

mobile2.png

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

Quote from: @rjen on July 19, 2023, 02:12:16 PMAttached css will deactivate the changes at a width less then 640px.

Much appreciated, thank you! 8)