Changing Bootstraps’ styles in a Boost child theme

Changing Bootstraps’ styles in a Boost child theme

by Ross Lovell -
Number of replies: 3

I’m working on a child theme of Boost which I created using the Creating a theme based on boost tutorial.

I’m attempting to change the default table styles using some of Bootstrap's optional styles with the following code:

table {
	@include table;
	@include table-striped;
}

When I clear the cache and refresh Moodle appears as though it’s unstyled. From my understanding I assumed I would be able to add this to post.scss and my theme would inherit the styles from Bootstrap via Boost.

I’m using Moodle 3.2.2+ (Build: 20170316) and Bootstrap v4.0.0-alpha.4

no stylesheet

Average of ratings: -
In reply to Ross Lovell

Re: Changing Bootstraps’ styles in a Boost child theme

by David Scotson -
Do the styles appear if you wait a little and refresh the page? Sometimes generating the CSS takes a while, and depending on your web server setup, it might time out before the CSS is ready.

If it still doesn't appear after a while, there's probably an error in your SCSS code somewhere, even a small error can cause your entire CSS to not appear. You should see an error in your error logs somewhere.

I tried pasting the code into the post.scss textbox in Boost and it seemed to work, so the problem may not be that particular snippet of code itself.

You might find that targetting all table's is a little too broad, you may want to try targetting table.generaltable and table.flexibletable, as there are some tables used which are not for displaying tabular data.
Average of ratings: -
In reply to Ross Lovell

Re: Changing Bootstraps’ styles in a Boost child theme

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Like David says you have probably written some of your SCSS wrong as this breaks the theme. It did not use to do this so it may be your version of Moodle is ineed of updating.

As for the pre.scss and post.scss. the Pre SCSS needs to contain the variables that you are going to employ in your post.scss which is more then likely where you are going wrong.

If you have added these variables then do make sure they are in the correct format. Test them out on a site that verifies your SCSS online.

Hope this helps?

Mary

Average of ratings: -
In reply to Ross Lovell

Re: Changing Bootstraps’ styles in a Boost child theme

by Ross Lovell -

Hi David and Mary. Thank you for the reply and sorry for the delay in getting back to you. It took a little investigation to figure out what was happening.

Being somewhat new to SASS/SCSS I made a somewhat obvious mistake. I was trying to @include some optional table styles from one of Bootstrap's stylesheets. It turned out the styles weren't part of a @mixin, which stopped my styles from displaying after clearing the theme cache.

Average of ratings: -