[SMF 2.1]Remixed Breadcrumb

[@rjen]

Thanks, but building the mod is already done...

Just need to know the exact procedure to submit the mod. I have not searched yet, but I assume it is documented somewhere..

[Doug Heffernan]

Just need to know the exact procedure to submit the mod. I have not searched yet, but I assume it is documented somewhere..

Simply upload it to our Customize Section.

https://custom.simplemachines.org/index.php?action=post;type=mod

Make sure that the mod has the license file. Further it would be best if it contained a read me file, a meaningful title, a detailed description and screenshots, if possible.

[TwitchisMental]

Thanks, but building the mod is already done...
Just need to know the exact procedure to submit the mod. I have not searched yet, but I assume it is documented somewhere..

Well for the approval guidelines - https://wiki.simplemachines.org/smf/Customization_approval_guidelines

As far as the actual process of submitting a mod

Go to the customize site > mods > click the new mod button.

Then you just fill out the information and submit. After that it will go through the Cloister Of Trials by the Customization Team .

Edit: Doug beat me to it lol.

[@rjen]

Ok, Mod package has been submitted...

[Steve]

Cool beans.

[TwitchisMental]

Updated this tutorial to include some of the other tips and to make it easier to customize.

[@rjen]

I'll just wait for the mod approval and include the changes in the next version

[TwitchisMental]

Alright, I have updated the tutorial again.

CSS only now. No template changes needed .

I should've done this sooner to be honest lol.

[@rjen]

Alright, I have updated the tutorial again.

CSS only now. No template changes needed .

I should've done this sooner to be honest lol.

Nice...

[@rjen]

Just updated the Mod accordingly. Just one small item nagging me, and that is this little part in the block arrows shining through upon hover...

You cannot view this attachment.

You can see the Mod v2.0 (all css) in action here: https://test.fjr-club.nl/index.php?board=2.0
 

[TwitchisMental]

Just updated the Mod accordingly. Just one small item nagging me, and that is this little part in the block arrows shining through upon hover...

You cannot view this attachment.

You can see the Mod v2.0 (all css) in action here: https://test.fjr-club.nl/index.php?board=2.0
 

In your case you still have the old navigate section css classes coming through.

Looks like it is loading the css from both your mods css file and the index.css file. Specifically the float left in navigate_section ul li is causing your issue.(Index.css line 1266)

[@rjen]

Yeah, both css are there: in order to make the mod not change any source files I need to load an extra css.

The mod needs to overrule the existing standard css, which is a bit more complex then taking the old css out of the original file...

[Diego Andrés]

For the mod if you load a new css file (to avoid file edits), you can set the order in the arguments of LoadCSSFile, that way you make sure it's after the index.css

[TwitchisMental]

Yeah, both css are there: in order to make the mod not change any source files I need to load an extra css.

The mod needs to overrule the existing standard css, which is a bit more complex then taking the old css out of the original file...

A quick work around could be just adding -

Code Select Expand

    line-height: 1.1em;
    float: none;
to the bottom of the navigate_section ul li class in your mod.

-----------------------------

Diego is giving you the better advice though.

[@rjen]

For the mod if you load a new css file (to avoid file edits), you can set the order in the arguments of LoadCSSFile, that way you make sure it's after the index.css

That is not the problem: the css is loaded second, but the new css does not overwrite all previously set arguments.

[TwitchisMental]

For the mod if you load a new css file (to avoid file edits), you can set the order in the arguments of LoadCSSFile, that way you make sure it's after the index.css

That is not the problem: the css is loaded second, but the new css does not overwrite all previously set arguments.

A quick work around could be just adding -

 

Code Select Expand

    line-height: 1.1em;
    float: none;
to the bottom of the navigate_section ul li class in your mod.

[@rjen]

Done, and version 2.0 is posted

[TwitchisMental]

This has been updated to resolve an issue where the arrows were not always even.

Noticed this thanks to @rjen and his mod version of this tutorial.

[Antechinus]

Further to this, and regarding responsiveness...
The other night I happened to read an article by the Baymard Institute, who do a lot of research on UX.
The article is this one: 6 Important Aspects of Well-Performing Mobile Product Page Breadcrumbs

Note that this is research on what normal, average users find easy and intuitive to use. IOW, it's not all about what code junkies think is cool. It's about the poor sods who will have to use the stuff we think is cool. The conclusion regarding how to display breadcrumbs comes down to this...

1/ Do not remove any links, and do not truncate links via ellipsis.
2/ Do not try to wrap the breadcrumbs to multiple lines on mobile.
2/ Use overflow-x (scroll or auto) so the breadcrumbs are swipeable on mobile.

How to Implement Long Breadcrumb Paths

Testing revealed one design pattern to explore if breadcrumb length on the product details page is still an issue after the hierarchy and category labels have been reviewed and tweaked where necessary, and the homepage and product page layers have been excluded — namely, making breadcrumbs swipeable.

Implementing breadcrumb links as a horizontally swipeable element saves space while still allowing users access to the complete, or near-complete, hierarchy via a standard mobile gesture, to which testing revealed most users are naturally predisposed...

...Sites with swipeable breadcrumbs were among those that performed particularly well during testing.

The advantages of doing it this way are:
1/ Normal people will find it easy and useful.
2/ It requires a lot less CSS than trying to get tricky.
3/ It still looks as good as any other presentation.

So, from now on, this is how I am going to do them.

And the article is only over 3 years old, so really we should all have known this stuff by now.

[Diego Andrés]

Cool.
I used a dropdown 10-12 years ago to list the intermediate paths and seemed intuitive. I do like the idea of the overflow.

Also it looks like the article didn't bring up if the user would prefer to start at the end (where you are), or the default behavior starting where you come from. Would require JS to keep the scroll at the end by default I imagine.