News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

[SMF 2.1]Remixed Breadcrumb

Started by TwitchisMental, January 03, 2022, 02:04:09 PM

Previous topic - Next topic

@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..
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

Doug Heffernan

Quote from: @rjen on September 10, 2022, 01:07:28 PMJust 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

Quote from: @rjen on September 10, 2022, 01:07:28 PMThanks, 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...
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

Steve

DO NOT pm me for support!

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
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

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

Quote from: TwitchisMental on September 14, 2022, 03:01:00 AMAlright, I have updated the tutorial again.

CSS only now. No template changes needed :).

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

Nice...
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

@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
 
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

TwitchisMental

Quote from: @rjen on September 14, 2022, 07:29:57 AMJust 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...
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

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

SMF Tricks - Free & Premium Responsive Themes for SMF.

TwitchisMental

Quote from: @rjen on September 14, 2022, 12:23:58 PMYeah, 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 -

    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

Quote from: Diego Andrés on September 14, 2022, 12:24:50 PMFor 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.
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

TwitchisMental

Quote from: @rjen on September 14, 2022, 12:35:32 PM
Quote from: Diego Andrés on September 14, 2022, 12:24:50 PMFor 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 -

 
    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
Running SMF 2.1 with latest TinyPortal at www.fjr-club.nl

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

QuoteTesting 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. :D

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.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Advertisement: