Boost CSS for Breadcrumbs

Boost CSS for Breadcrumbs

by T K -
Number of replies: 10

HI All, I am using Moodle 3.5 with the Boost theme.

I noticed my breadcrumb is kind of moved down, causing the buttons to be truncated:


This happens on every page.


This is how it should appear:


I have tried to right-click & inspect on those elements, played around with the settings in the inspect mode but it does not solve the issue that I am facing.


Any help here is greatly appreciated.

Thanks.

Average of ratings: -
In reply to T K

Re: Boost CSS for Breadcrumbs

by Raymond C -
Hello, I'm probably not the best person to help here but I figure any reply is better than none if it can at least point you in the right direction.

I recently turned my breadcrumbs off through: Site Administration -> Appearance -> Boost (under Themes) -> Advanced Settings -> Raw SCSS

I added the CSS:

.breadcrumb {
display: none;
}

Perhaps somebody added some of their own custom CSS there for some reason, or made a modification to the dashboard header there that threw off the positioning. Have you done any customization? Maybe try to walk backwards undoing things until the breadcrumbs are fixed.

Or someone more knowledgable can tell you why and we'll learn something new smile.

Good luck.
Average of ratings: -
In reply to Raymond C

Re: Boost CSS for Breadcrumbs

by T K -

Thanks for your reply.


For some history, previously I was using Boost Campus with moodle 3.4. When in Moodle 3.5, I had to use Boost because there is no Boost campus for moodle 3.5. Most of my CSS are imported from the Boost Campus.  It would have been so much easier to have Boost campus for 3.5 so my settings wont go haywire. I had to tweak a lot of my CSS to make it work.


Currently this is my Raw CSS for breadcrumbs:

// Breadcrumbs

$breadcrumb-padding-y:              .25rem !default;

$breadcrumb-padding-x:              1rem !default;

$breadcrumb-item-padding:           .5rem !default;

$breadcrumb-margin-bottom:          0 !default;

$breadcrumb-bg:                     #fff !default;

$breadcrumb-divider: "/" !default;

$breadcrumb-divider-rtl: "/" !default;


I tried changing these Values but it doesnt solve my problem.

Average of ratings: -
In reply to T K

Re: Boost CSS for Breadcrumbs

by Raymond C -
Two things come to mind - again with my limited experience

1) Every now and then Moodle seems to take time to apply a change. I'm not sure why though.
2) Have you tried completely deleting the Raw CSS and seeing what happens to the bread crumbs without it? Do they end up back in the right place even though the formatting is not exactly what you want?

You might also try inspecting the breadcrumb element and tackling it at the .php level. I had to do this to properly format the navbar as I wanted since CSS wasn't working for me. The problem being upgrades will overwrite your changes.

Another theme may work for you as well, like Adaptable or Fordson, etc. I know that brings a lot of work with it too though.

Sorry I don't have a specific fix for you, hoping someone chimes in or something here helps lead you to the answer.
Average of ratings: -
In reply to Raymond C

Re: Boost CSS for Breadcrumbs

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
1 - Moodle caches the theme (and various other things) to make the page load faster. It will refresh the cache after a period of time or you can force a refresh as a site admin. Your browser also caches content independently of Moodle. You can refresh that manually too.

2 - Don’t mess with PHP just to make changes that can be achieved in other, more sustainable ways.
Average of ratings: -
In reply to Jon Bolton

Re: Boost CSS for Breadcrumbs

by Raymond C -
Nice, that's good to know about how caching works.

As for not messing with .php if there are better ways to do it, any advice on how to learn the better ways to do it?
Average of ratings: -
In reply to Raymond C

Re: Boost CSS for Breadcrumbs

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
Well obviously it depends on what you’re trying to do, but for layout, fonts, colours, sizes, etc, and for your example of the navbar, most things can definitely be achieved through css.

Have a look at https://www.w3schools.com/css/ as a starter
Average of ratings: -
In reply to T K

Re: Boost CSS for Breadcrumbs

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
I have a feeling that this is going to go horribly wrong if you don’t have a basic understanding of css.

The $ is a variable and can’t go in the raw css. It’s for the SCSS box.

For the raw css box, try .breadcrumb instead.

If however, your buttons have moved down, I suspect that’s css elsewhere that’s having an affect because it’s not core Boost behaviour.

Have you checked what’s in Site admin > Appearance > Additional HTML as well as what’s in your Advanced settings in Boost?
Average of ratings: -
In reply to Jon Bolton

Re: Boost CSS for Breadcrumbs

by T K -
using .breadcrumbs in raw scss changed all my current formating for breadcrumbs

I dont have anything in :
Site admin > Appearance > Additional HTML
Average of ratings: -
In reply to Jon Bolton

Re: Boost CSS for Breadcrumbs

by T K -
Ok i just changed the breadcrumbs to .breadcrumb, and now my breadcrumbs have background color like this:



my settings in raw scss:





Inspect page shows:


How do I force the background color to be #FFF?

when i have the settings gearbox, my breadcrumbs is moved further below:



How to fix this?
Average of ratings: -
In reply to T K

Re: Boost CSS for Breadcrumbs

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
Take out the !default after the #fff

!default is SASS and won’t have any affect if you haven’t defined it as a variable elsewhere.

For the breadcrumb expanding, it’s very difficult to troubleshoot with just snippets of information. Can you give a url for the site? PM if you don’t want to add it to the forum post.

As a quick check though, copy all of your css into another document and then temporarily delete it from your site. Just have an empty css box. Does that make the breadcrumb behave as you expect? You can paste the css back when you’ve finished, but it will try and work out what’s going on.


Average of ratings: -