Breadcrumbs Text Separator Control

vicramz

In the Joomla 3 Breadcrumbs module, there's a control for the text separator.
I'm using the NewsBlog template in Joomla 4, and the text separator control does not appear in the module settings. How does one create a text separator in the Joomla 4 Breadcrumbs module?
Thanks . . .
Vic

saguaros

Hi Vic,

Joomla 4 changes its mockup for breadscrumbs module, our team will check and update this.

Thanks for your report!

vicramz

Thanks for checking on it. I appreciate it.

Vic

saguaros

Hi Vic,

You can try this CSS code:

#s5_breadcrumb_wrap .breadcrumb {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px;
}

#s5_breadcrumb_wrap .breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
}

#s5_breadcrumb_wrap .breadcrumb .breadcrumb-item::after {
  content: "/";
  display: inline-block;
  margin-left: 8px;
}

#s5_breadcrumb_wrap .breadcrumb .breadcrumb-item:last-of-type::after {
  display: none;
}

vicramz

Just getting back to this issue.

A little confused as to where to put the suggested code.

I created a custom.css in the css subfolder, and copied the code to that location, but nothing changed.

I see where it's possible to override the default file for the module, but still not sure where the code is supposed to go.

And, if I'm reading this correctly, there's supposed to be a ">" between the items anyway.
Here's a portion of the default HTML code. Note the ">' entries.

// Generate the trail
foreach ($list as $key => $item) :
if ($key !== $last_item_key) :
if (!empty($item->link)) :
$breadcrumbItem = HTMLHelper::('link', Route::($item->link), '' . $item->name . '', ['class' => 'pathway']);
else :
$breadcrumbItem = '' . $item->name . '';
endif;
echo '<li class="mod-breadcrumbsitem breadcrumb-item' . $class . '">' . $breadcrumbItem . '</li>';
elseif ($show_last) :
// Render last item if required.
$breadcrumbItem = '' . $item->name . '';
$class = ' active';
echo '<li class="mod-breadcrumbsitem breadcrumb-item' . $class . '">' . $breadcrumbItem . '</li>';
endif;
endforeach; ?>
</ol>
<?php

So, just a little more guidance on this, if you please.

Thanks ...

Vic

vicramz

Sorry ... here's the code a little cleaner.

// Generate the trail foreach ($list as $key => $item) : if ($key !== $last_item_key) : if (!empty($item->link)) : $breadcrumbItem = HTMLHelper::_('link', Route::_($item->link), '' . $item->name . '', ['class' => 'pathway']); else : $breadcrumbItem = '' . $item->name . ''; endif; echo '<li class="mod-breadcrumbs__item breadcrumb-item' . $class . '">' . $breadcrumbItem . '</li>'; elseif ($show_last) : // Render last item if required. $breadcrumbItem = '' . $item->name . ''; $class = ' active'; echo '<li class="mod-breadcrumbs__item breadcrumb-item' . $class . '">' . $breadcrumbItem . '</li>'; endif; endforeach; ?> </ol> <?php

saguaros

You can put the custom CSS code into the file: root/templates/your_default_template/css/custom.css create this file if it doesn't exist now.

If there is no change, you can share the login credentials of your site, I will check for you.

vicramz

I've placed the css code as you suggested, and there's no change.

I'll work on getting the site online so that you can look at it. Clearly, I need some assistance.

I will note that the NewsBlog demo displays the Breadcrumbs without a text separator, in exactly the same manner as my working site, so if you can fix it there, the same thing should work for me.

Thanks for helping out.

I'll be back to you as soon as I get hosting and domain registration arranged.

Vic

vicramz

Let me clarify my last post.

The quickstart package I downloaded to my local server has the same problem as my working site.

But, the demo online is working properly, with a " / " text separator between each item in the breadcrumb train.

I'm using Wamp64 version 3.3.0 with PHP 8.0.26.

I set up a hosing account this evening, and should have the site up and accessible by the weekend.

Thanks for your help.

Vic

vicramz

Well, I've moved the site to a web host, and the breadcrumbs still do not have a text separator.

Please advise how I can share site credentials with you ... without putting them up on a public forum.

Thanks for your help.

Vic Ramsey

ja-developer

vicramz Hi Vic,
You can share your site credentials in a reply here and mark it as Private, then only our official moderators can see that post.

vicramz

This message is visible to Moderators only

hidden content

saguaros

Any URL?

vicramz

This message is visible to Moderators only

hidden content

saguaros

I changed the code to:

.breadcrumb {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px;
}

.breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb .breadcrumb-item::after {
  content: "/";
  display: inline-block;
  margin-left: 8px;
}

.breadcrumb .breadcrumb-item:last-of-type::after {
  display: none;
}

Kindly check.

vicramz

Thank you. This seems to be working perfectly now. I appreciate your help.

Vic