News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

[SMF 2.1]Remixed Breadcrumb

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

Previous topic - Next topic

TwitchisMental

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.
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

Shambles

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



Thanks

Arantor

Add padding-left: 0; to the .breadcrumb definition. A ul by default has some left padding.

Shambles

The padding-left has worked a treat, many thanks.

TwitchisMental

#24
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



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 -
You cannot view this attachment.
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

Antechinus

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:

You cannot view this attachment.

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.

Kindred

Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

TwitchisMental

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;
}
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

KittyGalore

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:

You cannot view this attachment.

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.
SMF Curve 2.0x

Antechinus

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

KittyGalore

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.
SMF Curve 2.0x

Shades.

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! ;)
ShadesWeb.com - Custom Logos - My Themes on SMF | My Themes on ShadesWeb
https://shadesweb.com

BikerHound.com - Sniffing out the road ahead
https://bikerhound.com

Dream as if you'll live forever; Live as if you'll die today. - James Dean

Steve

Sorry to bring up an older topic but can this be made into a mod easily?
Autocorrect is my worst enema.

TwitchisMental

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)

My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

Steve

Autocorrect is my worst enema.

@rjen

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

Steve

Autocorrect is my worst enema.

@rjen

Quote from: @rjen on September 08, 2022, 12:41:53 PM
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...

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

Steve

No worries. I'm just happy you decided to do this.  ;D
Autocorrect is my worst enema.

TwitchisMental

Quote from: @rjen on September 10, 2022, 04:45:14 AM
Quote from: @rjen on September 08, 2022, 12:41:53 PM
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...

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
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

Advertisement: