Remixed Breadcrumb Tutorial
In this tutorial we are going to take the default breadcrumb and knock it up a notch. BAM! elzar.gif
End Result -
Sub-Board-Topic.png
I am just using a copy of the default theme for this tutorial.
Step 1. We will need to change some CSS. Go to the CSS folder and open the index.css in your favorite text editor. (I use Notepad++)
Step 2a. Add the following to the very top of the index.css.
:root {
--breadcrumb_color_1: rgb(85, 126, 160); /* Main Color 1 */
--breadcrumb_color_2: rgb(226, 233, 243); /* Main Color 2 */
--breadcrumb_bg: rgb(255, 255, 255); /* The middle of the arrow, this needs to be the same color as the background*/
--breadcrumb_border_color: rgb(221,211,211); /* BreadCrumb Border Color */
}
Step 2b. Find the navigate section -
/* The navigation list (i.e. linktree) */
.navigate_section {
padding: 3px 0 0 0;
width: 100%;
}
#main_content_section .navigate_section {
margin: 4px 0 0 0;
padding: 0;
}
.navigate_section ul {
margin: 4px 0 0 0;
padding: 0 10px;
font-size: 0.9em;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 2px;
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.08);
}
.navigate_section ul li {
float: left;
padding-bottom: 3px;
line-height: 1.1em;
color: #444;
text-shadow: 1px 1px 0 #fff;
}
.navigate_section ul li a, .navigate_section ul li em {
padding: 4px 0 4px;
margin-top: -4px;
display: inline-block;
}
.navigate_section ul li span {
display: inline-block;
margin-top: 8px;
}
.navigate_section ul li .dividers {
color: #3f6b8c;
font: 83.33%/150% Arial, sans-serif;
padding: 0 2px 0 6px;
}
.navigate_section ul li .board_moderators a {
padding: 4px 0;
}
.navigate_section a:hover span {
text-decoration: underline;
}
Replace With
/*The Breadcrumb*/
/*Main class gives border, flexes it up, and sets width */
.navigate_section {
padding: 0;
float: left;
width: 100%;
list-style: none;
border: 1px solid var(--breadcrumb_border_color);
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-family: sans-serif;
}
#main_content_section .navigate_section {
margin: 0;
padding: 0;
}
/*Sets Font-Size*/
.navigate_section ul {
margin: 0;
padding: 0;
font-size: 0.9em;
border: none;
border-radius: 0;
box-shadow: none;
background: var(--breadcrumb_bg);
background-image: none;
}
/*We don't want the p or span tag to have a margin*/
.navigate_section p {
margin: 0;
}
.navigate_section ul li span {
margin-top: 0;
}
/* Fall in line li */
.navigate_section ul li {
display: inline-flex;
}
/* Don't need these */
.navigate_section ul li .dividers {
display: none;
}
/*Forming the arrows*/
.navigate_section ul li {
background-color: var(--breadcrumb_color_1);
box-sizing: border-box;
color: var(--breadcrumb_color_2);
display: inline-flex;
max-height: 2em;
padding: .5em 1em .5em 1.5em;
position: relative;
text-decoration: none;
text-shadow: none;
transition-timing-function: ease-in;
transition: 0.5s;
font-weight: 700;
line-height: 1.1em;
float: none;
}
.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;
}
.navigate_section ul li:after {
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
border-left: 1em solid var(--breadcrumb_color_1);
content: "";
position: absolute;
top: 0;
right: -0.9em;
transition-timing-function: ease-in;
transition: 0.5s;
z-index: 1;
}
/* Colors */
.navigate_section strong {
color: var(--breadcrumb_color_1);
}
.navigate_section ul li a {
color: var(--breadcrumb_color_2);
}
.navigate_section ul li a:hover {
color: var(--breadcrumb_color_1);
}
.navigate_section ul li:hover a {
color: var(--breadcrumb_color_1);
}
.navigate_section ul li:hover {
background-color: var(--breadcrumb_color_2);
color: var(--breadcrumb_color_1);
}
.navigate_section ul li:hover:after {
border-left-color: var(--breadcrumb_color_2);
color: var(--breadcrumb_color_1);
}
.navigate_section ul li:last-child {
background-color: var(--breadcrumb_color_2);
color: var(--breadcrumb_color_1);
}
.navigate_section ul li:last-child a {
color: var(--breadcrumb_color_1);
}
.navigate_section ul li:last-child::after {
border-left-color: var(--breadcrumb_color_2);
}
/* Lets Make This Look Better For Mobile */
@media screen and (max-width: 480px) {
.navigate_section {
font: 1em sans-serif;
list-style: none;
border: none;
display: block;
}
.navigate_section ul {
display: block;
}
.navigate_section ul li {
display: block;
width: max-content;
margin: 5px 0px 5px 0px;
}
}
Step 2c. If you would like the end to be flat, just change -
.navigate_section ul li:last-child a {
color: var(--white);
}
.navigate_section ul li:last-child::after {
border-left-color: var(--breadcrumb_color_2);
}
to
.navigate_section ul li:last-child a {
color: var(--breadcrumb_color_1);
}
.navigate_section ul li:last-child::after {
border: 1px solid transparent;
border-left: none;
}
Step 3. We need to remove the background being set by a class a bit further down the index.css
Find -
/* If it fits I sits... */
.navigate_section .popup_content, .up_contain {
background: #fff;
background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%);
}
Replace With -
/* If it fits I sits... */
.popup_content, .up_contain {
background: #fff;
background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%);
}
Step 4. Refresh the page and you should now be seeing -
breadcrumb.png
Step 5. Enjoy your new breadcrumb.
Shoutout to Diego Andrés and Sesquipedalian for their help with sorting out a bug.
Original Idea Came From - https://codepen.io/thallysbezerra/embed/NAyEPB?height=316&theme-id=0&default-tab=result
Very nice, might use it in the future :P
Have to say, this looks like a cool little trick. Might have to try it out :)
Quote from: Diego Andrés on January 03, 2022, 02:08:19 PMVery nice, might use it in the future :P
Thank you, I hope you do :).
Quote from: Aleksi on January 03, 2022, 02:09:48 PMHave to say, this looks like a cool little trick. Might have to try it out :)
Thank you, I hope you do too :).
Lovely. Thanks a lot!
I love this thanks! 8)
Very cool indeed 8)
I can see this having really good practical applications on certain themes. Nice work.
nicely done.... implemented in a new theme for 2.1 that I am working on for a site.
note for custom work beyond the Curve/Curve2 theme...
Change all instances of these for the colors to match your theme:
rgb(85, 126, 160) (this is the base background color, the border color and the hover font color)
rgb(226, 233, 243) (this is the base font color and the hover background color)
If you don't change ALL of them consistently, you may get some odd effects.
BTW: To see it test2.turtleshellprod.com
Nice - I'd done something similar myself recently.
If I can suggest a couple of possible improvements:
First... CSS variables, something akin to this (have not tested)
/*The Breadcrumb*/
/*Main class gives border, font size, and turns off list style*/
.breadcrumb {
font: 1em sans-serif;
list-style: none;
border: 1px solid rgba(221,211,211,1);
--main-light-color: rgb(226, 233, 243);
--main-dark-color: rgb(85, 126, 160);
}
/*Flex it up */
.breadcrumb ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/*We don't want the p tag to have a margin*/
.breadcrumb p {
margin: 0;
}
/* Fall in line li */
.breadcrumb li {
display: inline-flex;
}
/*Forming the arrows*/
.breadcrumb li {
background-color: var(--main-dark-color);
box-sizing: border-box;
color: var(--main-light-color);
display: inline-flex;
max-height: 2em;
padding: .5em 1em .5em 1.5em;
position: relative;
text-decoration: none;
transition-timing-function: ease-in;
transition: 0.5s;
font-weight: 700;
}
.breadcrumb 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;
}
.breadcrumb li:after {
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
border-left: 1em solid var(--main-dark-color);
content: "";
position: absolute;
top: 0;
right: -0.9em;
transition-timing-function: ease-in;
transition: 0.5s;
z-index: 1;
}
/* Colors */
.breadcrumb strong {
color: var(--main-dark-color);
}
.breadcrumb li a {
color: var(--main-light-color);
}
.breadcrumb li a:hover {
color: var(--main-dark-color);
}
.breadcrumb li:hover a {
color: var(--main-dark-color);
}
.breadcrumb li:hover {
background-color: var(--main-light-color);
color: var(--main-dark-color);
}
.breadcrumb li:hover:after {
border-left-color: var(--main-light-color);
color: var(--main-dark-color);
}
.breadcrumb li:last-child {
background-color: var(--main-light-color);
color: var(--main-dark-color);
}
.breadcrumb li:last-child a {
color: var(--main-dark-color);
}
.breadcrumb li:last-child::after {
border-left-color: var(--main-light-color);
}
This way you only have to change two colour definitions to restyle the bulk of it to fit a given theme. I'm not sure about the border around the breadcrumb in general or the white fill on the left, couldn't decide if that should be a variable or not.
The other thing is a bit (lot) more fiddly around laying it out on mobile. It will normally wrap to multiple lines which is a bit annoying.
What I did (not the same markup or styling at this but food for thought) was to have the normal breadcrumb trail on desktop... I'd share a link but the site's not open yet.
Breadcrumb trail 1.PNG
With it collapsing by default on mobile...
Breadcrumb trail 2.png
And using a widget to expand it vertically when called for...
Breadcrumb trail 3.png
Stylewise, well you can see I have Font Awesome loaded but this doesn't make that much odds in the grand scheme of things.
How the toggle is done is by way of an <input type="checkbox"> where the main styling is dropped entirely (appearance: none), then :after is populated with a glyph from Font Awesome and a different glyph is used with :checked on the input box.
The rest of the styling is basically about using :checked as a selector on the input and filtering down the .arrow items thereafter based on 1) a media query and 2) whether or not the checkbox is checked.
It's not a dropin replacement code-wise since SMF doesn't yet have a built in SCSS compiler (I added one to mine), but the relevant styling in case it is of use to anyone:
@media screen and (max-width: 767px) {
.arrowbar {
input ~ .arrow {
display: none;
}
.arrow:first-of-type {
display: block;
}
input:checked ~ .arrow {
display: block;
}
input {
position: absolute;
}
input[type="checkbox"]::after {
content: "\f0c9";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.arrow {
padding-left: 50px;
}
}
}
@media screen and (min-width: 768px) {
.arrowbar input {
display: none;
}
}
In case it helps with the relevant placement of the input vs the other elements...
{{#if context.linktree}}
<div class="navigate_section">
<div class="arrowbar">
<input type="checkbox">
{{#each context.linktree}}
<div class="arrow{{#if @last}} active{{/if}}">
{{#if url}}
<a href="{{url}}"><span>{{#if @first}}<i class="fas fa-home fa-fw"></i> {{/if}}{{{name}}}</span></a>
{{else}}
<span>{{{name}}}</span>
{{/if}}
</div>
{{/each}}
</div>
</div>
{{/if}}
Hopefully this will make sense and can be adapted to SMF.
Neat.
I used to hide the rest in a dropdown so it's always accessible, the toggle idea is great.
Quote from: Arantor on January 04, 2022, 03:20:19 PMNice - I'd done something similar myself recently.
If I can suggest a couple of possible improvements:
First... CSS variables, something akin to this (have not tested)
Yes this is one of those new things I still need to learn/force myself to use. I have noticed them being used in a few themes. Seems like everything is about saving time nowadays. Noted.
Quote from: Arantor on January 04, 2022, 03:20:19 PMThe other thing is a bit (lot) more fiddly around laying it out on mobile. It will normally wrap to multiple lines which is a bit annoying.
What I did (not the same markup or styling at this but food for thought) was to have the normal breadcrumb trail on desktop... I'd share a link but the site's not open yet.
Breadcrumb trail 1.PNG
With it collapsing by default on mobile...
Breadcrumb trail 2.png
And using a widget to expand it vertically when called for...
Breadcrumb trail 3.png
Oh that is a fantastic idea. I love what you did for mobile view.
Quote from: Arantor on January 04, 2022, 03:20:19 PMStylewise, well you can see I have Font Awesome loaded but this doesn't make that much odds in the grand scheme of things.
How the toggle is done is by way of an <input type="checkbox"> where the main styling is dropped entirely (appearance: none), then :after is populated with a glyph from Font Awesome and a different glyph is used with :checked on the input box.
The rest of the styling is basically about using :checked as a selector on the input and filtering down the .arrow items thereafter based on 1) a media query and 2) whether or not the checkbox is checked.
It's not a dropin replacement code-wise since SMF doesn't yet have a built in SCSS compiler (I added one to mine), but the relevant styling in case it is of use to anyone:
@media screen and (max-width: 767px) {
.arrowbar {
input ~ .arrow {
display: none;
}
.arrow:first-of-type {
display: block;
}
input:checked ~ .arrow {
display: block;
}
input {
position: absolute;
}
input[type="checkbox"]::after {
content: "\f0c9";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.arrow {
padding-left: 50px;
}
}
}
@media screen and (min-width: 768px) {
.arrowbar input {
display: none;
}
}
In case it helps with the relevant placement of the input vs the other elements...
{{#if context.linktree}}
<div class="navigate_section">
<div class="arrowbar">
<input type="checkbox">
{{#each context.linktree}}
<div class="arrow{{#if @last}} active{{/if}}">
{{#if url}}
<a href="{{url}}"><span>{{#if @first}}<i class="fas fa-home fa-fw"></i> {{/if}}{{{name}}}</span></a>
{{else}}
<span>{{{name}}}</span>
{{/if}}
</div>
{{/each}}
</div>
</div>
{{/if}}
Hopefully this will make sense and can be adapted to SMF.
I still have so much to learn. Thank you for all of your input :).
Quote from: TwitchisMental on January 04, 2022, 09:06:08 PMSeems like everything is about saving time nowadays. Noted.
Saving time isn't so much the goal here, more saving effort - instead of find/replacing the same colour in a bunch of places, you set it once and just reuse that elsewhere. For Kindred's case for example he'd only need to set the colour once.
I went further down the road and glued in an SCSS parser so I could use variables on a much more extensive basis and have my CSS minified after doing so, but this is not a small change nor for the faint of heart. (It's like an SMF 3.0 level change. But my last site had 6 themes and I wanted to make as much reuse as possible of CSS. When you have SCSS at your control you can do 'include this file' level stuff and variables are everywhere, it made maintaining those so much easier.)
Quote from: TwitchisMental on January 04, 2022, 09:06:08 PMI still have so much to learn. Thank you for all of your input :).
There's always more to learn :) I'm sure you'll be teaching me something soon enough!
I attempted mine today with Arantor's idea
I'd say it's okay for a clueless javascript guy like me
Screenshot_15.png
Quote from: Diego Andrés on January 06, 2022, 10:49:17 PMI attempted mine today with Arantor's idea
I'd say it's okay for a clueless javascript guy like me
Screenshot_15.png
Looks pretty good :).
Quote from: Diego Andrés on January 06, 2022, 10:49:17 PMI attempted mine today with Arantor's idea
Defo looks gorgous with the default colour scheme. I would use a location icon instead. Well done.
So I have added a small tweak for mobile view, albeit not nearly as cool as what Arantor and Diego have done with theirs XD.
Screenshot -
breadcrumbstack.png
Open up the css file again and just add this below the previously added css. -
@media screen and (max-width: 767px) {
.breadcrumb {
font: 1em sans-serif;
list-style: none;
border: none;
}
.breadcrumb ul {
display: block;
}
.breadcrumb li {
display: block;
width: max-content;
margin: 5px 0px 5px 0px;
}
}
Another small tweak for those who are curious. You can make the final section end flat instead. (Similar to Arantor's example above)
Screenshot -
breadcrumblast.png
Find
.breadcrumb li:last-child::after {
border-left-color: rgb(226, 233, 243);
}
Replace with
.breadcrumb li:last-child::after {
border: 1px solid transparent;
}
Uh yes, I suppose that makes a lot of sense since it's not going anywhere anymore :laugh:
Quote from: Diego Andrés on January 08, 2022, 07:22:10 PMUh yes, I suppose that makes a lot of sense since it's not going anywhere anymore :laugh:
Works either way, figured I would just give options :D.
This is a nice decorative addition to my 2.0.19 forum - thanks for sharing and to others for their input.
2.0.19 using the Sunrise theme.
Can anyone suggest a way to left-align the breadcrumb list? A page source and inspect doesn't give me any clues as to why the spacing is occurring.
https://www.i30ownersclub.com/forum/index.php?board=6.0
(https://i.imgur.com/jkTYHO5.jpg)
Thanks
Add padding-left: 0; to the .breadcrumb definition. A ul by default has some left padding.
The padding-left has worked a treat, many thanks.
Quote from: Shambles on February 06, 2022, 06:50:25 AMThis is a nice decorative addition to my 2.0.19 forum - thanks for sharing and to others for their input.
2.0.19 using the Sunrise theme.
Can anyone suggest a way to left-align the breadcrumb list? A page source and inspect doesn't give me any clues as to why the spacing is occurring.
https://www.i30ownersclub.com/forum/index.php?board=6.0
(https://i.imgur.com/jkTYHO5.jpg)
Thanks
Glad you like it :). Looks like one or two of the classes got the wrong color though.
/*The Breadcrumb*/
.breadcrumb {
font: 1em sans-serif;
list-style: none;
border: 1px solid rgba(221,211,211,1);
padding-left: 0px;
}
.breadcrumb ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.breadcrumb.bc2x {
font-size: 1em;
}
.breadcrumb p {
margin: 0;
}
.breadcrumb li {
display: inline-flex;
}
.breadcrumb li {
background-color: rgb(255, 97, 32);
box-sizing: border-box;
color: rgb(226, 233, 243);
max-height: 2em;
padding: .5em 1em .5em 1.5em;
position: relative;
text-decoration: none;
transition-timing-function: ease-in;
transition: 0.5s;
font-weight: 700;
}
.breadcrumb li:before {
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
border-left: 1em solid rgb(237, 237, 237);
content: "";
position: absolute;
top: 0;
right: -1.25em;
z-index: 1;
}
.breadcrumb li:after {
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
border-left: 1em solid rgb(255, 97, 32);
content: "";
position: absolute;
top: 0;
right: -0.9em;
transition-timing-function: ease-in;
transition: 0.5s;
z-index: 1;
}
/* Colors */
.breadcrumb strong {
color: rgb(255, 97, 32);
}
.breadcrumb li a {
color: rgb(252, 252, 252);
}
.breadcrumb li a:hover {
color: rgb(255, 97, 32);
}
.breadcrumb li:hover a {
color: rgb(255, 97, 32);
}
.breadcrumb li:hover {
background-color: rgb(252, 252, 252);
color: rgb(255, 97, 32);
}
.breadcrumb li:hover:after {
border-left-color: rgb(252, 252, 252);
color: rgb(255, 97, 32);
}
.breadcrumb li:last-child {
background-color: rgb(252, 252, 252);
color: rgb(255, 97, 32);
}
.breadcrumb li:last-child a {
color: rgb(255, 97, 32);
}
.breadcrumb li:last-child::after {
border-left-color: rgb(252, 252, 252);
}
@media screen and (max-width: 767px) {
.breadcrumb {
font: 1em sans-serif;
list-style: none;
border: none;
}
.breadcrumb ul {
display: block;
}
.breadcrumb li {
display: block;
width: max-content;
margin: 5px 0px 5px 0px;
}
}That should make the breadcrumb match the theme that you are using.
Screenshot -
br.png
Looks nice. I did something very similar to the Elk breadcrumbs, back when that project first started. You should be able to do it on standard 2.1 markup (can't really be done on standard 2.0 markup). I'm currently running this look, live on this site, as CSS overrides in Stylus:
dark_breadcrumbs_stylus.jpg
CSS looks like this:
/* ------------------------------------------------------- */
/* @LINKTREE
/* ------------------------------------------------------- */
/* ----------------- */
/* Linktree wrapper. */
.navigate_section {
float: none;
width: auto;
margin: 0;
padding: 2px 0 34px;
}
#main_content_section .navigate_section {
margin: 0;
padding: 34px 0 0;
}
@media screen and (max-width: 720px) {
#main_content_section .navigate_section {
display: block !important;
}
}
/* ---------------- */
/* Linktree parent. */
.navigate_section ul {
position: relative;
overflow: visible;
margin: 0;
padding: 0;
background: linear-gradient(to top, #1d242c,#13171b 80%);
border: 1px solid;
border-color: #1e2429 #1c2126 #29333d;
box-shadow: none;
}
/* ----------------- */
/* Linktree content. */
.navigate_section li {
flex: none;
}
.navigate_section li:not(.unread_links) {
float: none;
display: inline-block;
position: relative;
max-height: 28px;
margin: 0;
padding: 0 4px 0 8px;
color: #8d887c;
font-size: .75rem;
line-height: 1.75rem;
text-shadow: none;
}
.navigate_section .last a {
font-weight: 700;
opacity: .9;
}
.navigate_section ul li a,
.navigate_section ul li span,
.navigate_section ul li em {
margin: 0;
padding: 0;
}
.navigate_section a span {
text-decoration: none !important;
}
.navigate_section .dividers {
display: inline-block;
vertical-align: bottom;
position: relative;
left: -6px;
width: 16px;
height: 28px;
overflow: hidden;
text-indent: 16px;
}
.navigate_section .dividers::before,
.navigate_section .dividers::after {
position: absolute;
top: 0;
left: 7px;
display: block;
width: 1px;
height: 14px;
background: #fff3;
content: '';
transform: skew(45deg);
}
.navigate_section .dividers::after {
top: 14px;
transform: skew(-45deg)
}
.navigate_section a:hover span, .navigate_section a:focus span {
color: #e8bb7d;
}
.navigate_section li:hover .dividers::before, li:hover .dividers::after {
background: #e8bb7d;
}
You can see the hover effect on the "Tips and Tricks" link in the screenshot.
In 2.1 using only core css markup... https://test2.turtleshellprod.com/index.php?board=1.0
So it seems one thing that I didn't point out is that the small white middle part of the arrow in the breadcrumb. That specific area needs to be changed to the background that is behind the breadcrumb overall.
.breadcrumb li::before {
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
border-left: 1em solid #fff; /*Change this color for the middle part of the arrow to match the background of the overall breadcrumb. */
content: "";
position: absolute;
top: 0;
right: -1.25em;
z-index: 1;
}
Quote from: Kindred on February 06, 2022, 04:59:28 PMIn 2.1 using only core css markup... https://test2.turtleshellprod.com/index.php?board=1.0
Honestly I kind of like the double arrow effect that yours gives. However to get the same look as the tutorial, you would need to change the same section mentioned above. Something like below would work -
.breadcrumb li::before {
border-top: 1em solid transparent;
border-bottom: 1em solid transparent;
border-left: 1em solid RGB(27, 96, 31);
content: "";
position: absolute;
top: 0;
right: -1.25em;
z-index: 1;
}
Quote from: Antechinus on February 06, 2022, 03:15:28 PMLooks nice. I did something very similar to the Elk breadcrumbs, back when that project first started. You should be able to do it on standard 2.1 markup (can't really be done on standard 2.0 markup). I'm currently running this look, live on this site, as CSS overrides in Stylus:
dark_breadcrumbs_stylus.jpg
CSS looks like this:
/* ------------------------------------------------------- */
/* @LINKTREE
/* ------------------------------------------------------- */
/* ----------------- */
/* Linktree wrapper. */
.navigate_section {
float: none;
width: auto;
margin: 0;
padding: 2px 0 34px;
}
#main_content_section .navigate_section {
margin: 0;
padding: 34px 0 0;
}
@media screen and (max-width: 720px) {
#main_content_section .navigate_section {
display: block !important;
}
}
/* ---------------- */
/* Linktree parent. */
.navigate_section ul {
position: relative;
overflow: visible;
margin: 0;
padding: 0;
background: linear-gradient(to top, #1d242c,#13171b 80%);
border: 1px solid;
border-color: #1e2429 #1c2126 #29333d;
box-shadow: none;
}
/* ----------------- */
/* Linktree content. */
.navigate_section li {
flex: none;
}
.navigate_section li:not(.unread_links) {
float: none;
display: inline-block;
position: relative;
max-height: 28px;
margin: 0;
padding: 0 4px 0 8px;
color: #8d887c;
font-size: .75rem;
line-height: 1.75rem;
text-shadow: none;
}
.navigate_section .last a {
font-weight: 700;
opacity: .9;
}
.navigate_section ul li a,
.navigate_section ul li span,
.navigate_section ul li em {
margin: 0;
padding: 0;
}
.navigate_section a span {
text-decoration: none !important;
}
.navigate_section .dividers {
display: inline-block;
vertical-align: bottom;
position: relative;
left: -6px;
width: 16px;
height: 28px;
overflow: hidden;
text-indent: 16px;
}
.navigate_section .dividers::before,
.navigate_section .dividers::after {
position: absolute;
top: 0;
left: 7px;
display: block;
width: 1px;
height: 14px;
background: #fff3;
content: '';
transform: skew(45deg);
}
.navigate_section .dividers::after {
top: 14px;
transform: skew(-45deg)
}
.navigate_section a:hover span, .navigate_section a:focus span {
color: #e8bb7d;
}
.navigate_section li:hover .dividers::before, li:hover .dividers::after {
background: #e8bb7d;
}
You can see the hover effect on the "Tips and Tricks" link in the screenshot.
What file is the code here from with the linktree.
It's a custom CSS file that I run in Stylus (a browser extension that can apply your own CSS to any page). The files are in the post linked from my sig (where it says "Dark theme for this site").
Quote from: Antechinus on March 15, 2022, 03:32:07 PMIt's a custom CSS file that I run in Stylus (a browser extension that can apply your own CSS to any page). The files are in the post linked from my sig (where it says "Dark theme for this site").
Ok thanks.
Quote from: TwitchisMental on January 03, 2022, 02:04:09 PMStep 7. What about the unread links? Where did they go? I WANT MY UNREAD LINKS!!!
I understand and I got you covered. We can relocate those links to the top bar. Within the same index.template.php file Find -
Code Select Expand
// Thirdly, alerts
echo '
<li>
<a href="', $scripturl, '?action=profile;area=showalerts;u=', $context['user']['id'], '"', !empty($context['self_alerts']) ? ' class="active"' : '', ' id="alerts_menu_top">', $txt['alerts'], !empty($context['user']['alerts']) ? ' <span class="amt">' . $context['user']['alerts'] . '</span>' : '', '</a>
<div id="alerts_menu" class="top_menu scrollable"></div>
</li>';
Replace With -
Code Select Expand
// Thirdly, alerts
echo '
<li>
<a href="', $scripturl, '?action=profile;area=showalerts;u=', $context['user']['id'], '"', !empty($context['self_alerts']) ? ' class="active"' : '', ' id="alerts_menu_top">', $txt['alerts'], !empty($context['user']['alerts']) ? ' <span class="amt">' . $context['user']['alerts'] . '</span>' : '', '</a>
<div id="alerts_menu" class="top_menu scrollable"></div>
</li>';
// Fourth, the unread buttons
echo '
<li>
<a href="', $scripturl, '?action=unread" title="', $txt['unread_since_visit'], '">', $txt['view_unread_category'], '</a>
</li>
<li>
<a href="', $scripturl, '?action=unreadreplies" title="', $txt['show_unread_replies'], '">', $txt['unread_replies'], '</a>
</li>';This will bring those links to the top bar as you can see here -
No need in this step for SMF version 2.1.1 as pointed out by
@TwitchisMental here (https://www.simplemachines.org/community/index.php?topic=581451.msg4116655#msg4116655)! ;)
Sorry to bring up an older topic but can this be made into a mod easily?
Quote from: Steve on September 08, 2022, 07:40:27 AMSorry to bring up an older topic but can this be made into a mod easily?
I am sure it could be made into one. However that would require someone with the knowledge to do so. (It ain't me lol)
That makes two of us. :P
Quote from: Steve on September 08, 2022, 07:40:27 AMSorry to bring up an older topic but can this be made into a mod easily?
I can have a go at it. Should be easy enough...
That would be awesome. ;D
Quote from: @rjen on September 08, 2022, 12:41:53 PMQuote from: Steve on September 08, 2022, 07:40:27 AMSorry to bring up an older topic but can this be made into a mod easily?
I can have a go at it. Should be easy enough...
Made a mod package that works. Just want to iron out some stuff that may be improved (tips that were given later) and add something like a license and then figure out how to submit a Mod to the site... may take a few days to sort that out...
No worries. I'm just happy you decided to do this. ;D
Quote from: @rjen on September 10, 2022, 04:45:14 AMQuote from: @rjen on September 08, 2022, 12:41:53 PMQuote from: Steve on September 08, 2022, 07:40:27 AMSorry to bring up an older topic but can this be made into a mod easily?
I can have a go at it. Should be easy enough...
Made a mod package that works. Just want to iron out some stuff that may be improved (tips that were given later) and add something like a license and then figure out how to submit a Mod to the site... may take a few days to sort that out...
This should be of some use - https://wiki.simplemachines.org/smf/Category:Package_SDK
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..
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.
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.
Ok, Mod package has been submitted...
Cool beans.
Updated this tutorial to include some of the other tips and to make it easier to customize.
I'll just wait for the mod approval and include the changes in the next version
Alright, I have updated the tutorial again.
CSS only now. No template changes needed :).
I should've done this sooner to be honest lol.
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...
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...
2022-09-14_132527.jpg
You can see the Mod v2.0 (all css) in action here: https://test.fjr-club.nl/index.php?board=2.0
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...
2022-09-14_132527.jpg
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)
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...
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
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.
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.
Quote from: @rjen on September 14, 2022, 12:35:32 PMQuote 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.
Done, and version 2.0 is posted
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.
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 (https://baymard.com/blog/implementing-mobile-hierarchy-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 (https://baymard.com/blog/implementing-mobile-hierarchy-breadcrumbs#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.
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.
Thanks for sharing that information Ant.
Quote from: Diego Andrés on May 30, 2024, 08:00:25 PMAlso 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.
The examples shown in the article seem to default to default to starting at the home end, and they seem to think that is fine. It would probably make sense for the majority of users too, since I assume right-handed users would naturally be more inclined to swipe left. I hold the phone in my left hand, and flicking my right forefinger left to swipe left just comes naturally. Swiping right is less intuitive for me.
Just had a thought about this scrolling breadcrumbs thing. It may be possible to improve it further by using scroll-snap.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap/Basic_concepts
This could be used to ensure that you always end up with the currently displayed link left-aligned (or right-aligned for RTL languages) instead of possibly being sort of half in and half out of the viewable area. It'll still get chopped if it's longer than the available width, but at least the text you see will start in a logical place. I'll play around with it and see what turns up. :)
I just got around to trying this on a theme I have been playing with, and I have to say it works really well. Code is minimal, and these days we're all used to scrolling lists of stuff sideways on our phones. The images folder on Android is a perfect example. If you have sub-folders inside it, you get a scrollable horizontal list of your sub-folder names above the content.
Anyway, the guts of it is this:
.nav-breadcrumbs {
display: flex;
padding: 0 6px 0 0;
font-size: 1.2rem;
line-height: 3.2rem;
overflow-x: auto;
overflow-y: clip;
scroll-snap-type: x proximity;
scrollbar-color: var(--bsf-dabac) var(--bsf-dabac);
scrollbar-width: thin;
}
/* ------------------ */
/* Get cunning here.
/* ------------------ */
.nav-breadcrumbs:hover {
scrollbar-color: var(--bsf-libac) var(--bsf-dabac);
}
@media screen and (hover: none) {
.nav-breadcrumbs {
scrollbar-color: auto;
}
}
/* ------------------ */
.nav-breadcrumbs li {
flex: none;
overflow: hidden;
max-height: 3.2rem;
scroll-snap-align: start;
}
.nav-breadcrumbs a {
position: relative;
display: block;
padding: 0 1.8rem 0 .6rem;
color: var(--bsf-metex);
}
.nav-breadcrumbs a::after {
position: absolute;
top: -.7rem;
right: .3rem;
width: 0;
height: 0;
content: '';
border-style: solid;
border-width: 2.3rem 0 2.3rem 1.4rem;
border-color: #0000 #0000 #0000 var(--bsf-mebac);
filter: drop-shadow(.2rem 0 0 #000) drop-shadow(.1rem 0 0 var(--bsf-libor));
}Some of that is eye candy, of course. The important bits are:
- Flex makes sense for the parent ul, IMO.
- overflow-x: auto; obviously gives you your scrolling. Auto is better than scroll, because it won't force a scrollbar on desktop when the width is more than adequate, but works the same as scroll on touchscreen.
- overflow-y: clip; is necessary to stop your linktree moving vertically if you have anything (like groovy absolute-positioned arrow pseudos) extending above and below the anchors.
- scroll-snap-type: x proximity; is my personal preference at this stage, but you can play with other options.
- scrollbar-color can be used to make a desktop scrollbar invisible by default, changing to visible on hover, and resetting to user agent default on touchscreen.
- scrollbar-width: thin; makes sense on desktop for this use case, IMO.
- scroll-snap-align: start; seems to be the sanest option for that attribute. :)
Hey, this horizontal scrolling thingy works brilliantly with page numbers too. They tend to get messy when you have a lot of them on a phone. especially if someone has selected a font size larger than default. If you just let the thing scroll sideways it works well up to 200% of default font size (ie: maximum Firefox/Android font size).
On 2.1 all you have to do is cancel changing .pagelinks from flex to block, stop it wrapping, and give it some overflow and max-width settings. Bloody thing just works. If you expand a stack of pages by clicking the "..." span, no problem. They just appear in a neat line where you expect them to. You can even set your button styling to sane-for-touchscreen size, and it still just works.
#main_content_section .pagelinks {
display: flex;
flex-wrap: nowrap;
max-width: 100%;
overflow-x: auto;
overflow-y: clip;
}
.pagelinks a, .pagelinks > span {
min-width: 44px;
text-align: center;
}
I had a possible idea for a more sophisticated version of this concept. It goes like this...
1/ Restrict the width of the anchors to just under 100% of the visible ul width.
2/ Allow the anchors to break to 2 lines (allows 50+ characters @200% font size on a 360px phone).
3/ Make the pointers after each anchor into another, separate, anchor that links to the next anchor in the list. IOW, make it work like the usual "next/previous" links you seem on common slideshows.
The idea here is that usually, with standard font size and "normal" lengths of text in the anchors, it would all sit on one line. In the event that you have an unusually long string of text (a very long thread title, for example) it would be allowed to break to a second line so the text wasn't truncated. If the title is really long you can choose to let it keep wrapping, or you have a couple of other options.
One is to restrict the maximum height to 2 lines, then truncate the text with an ellipsis. Yes, you can do this with multi-line text. It requires some non-standard CSS syntax, but it works in Firefox and Blink/Webkit.
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
You could also get fancier, with the whole thing showing upon click/tap, and that then linking to wherever you want to go, but that's probably getting too messy to feel right in practice.
But, I think the idea of using scroll-snap-type: x mandatory; on the parent ul, and having a "next" and "previous" pointer, with the ability to display at least 50 characters within the viewport width, even with a large font size on a smallish phone, could be workable and a good thing all round. It would still work with a basic swipe left/right on a phone, and it would work if you clicked/tapped the pointers. I think this could make it more versatile on both desktop and touchscreen.
Styling the pointers and the text spans so they look good with one line of text or two is not hard. It requires a bit of trickery but it's quite doable.
I'm gonna play around with this. :)