How to add custom css/scss file in BOOST Theme by using moodle 3.3

How to add custom css/scss file in BOOST Theme by using moodle 3.3

by MAHADEV CHAURASIYA -
Number of replies: 13

Hi everyone,

Please help me i am new with moodle, please  give me any ideas how to customize boost theme in moodle 3.3, how i can add custom css file,

- I tried so but scss file is not reflecting in moodle Admin page > site admin>Appearance> select boost theme>in general setting >Theme preset>drop down list i can't able to see my custom css /scss file.

-  I uploaded custom scss file through  moodle Admin page > site admin>Appearance> select boost theme>in general setting >Additional theme preset : i attached  file i added some custom css code like background-color:green now its working fine

                    But i don't want to this way i want add external scss file present in /moodle33/theme/boost/scss/preset  directories i want to update here, please give me some idea.. thanks in advance . 


Average of ratings: -
In reply to MAHADEV CHAURASIYA

Re: How to add custom css/scss file in BOOST Theme by using moodle 3.3

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Hello. I will move your question to the Themes forum for better support smile

Average of ratings: -
In reply to MAHADEV CHAURASIYA

Re: How to add custom css/scss file in BOOST Theme by using moodle 3.3

by Shashank Bhardwaj -
You could view the page source in your browser to see what stylesheets it's trying to load and try to figure out why they're not accsesible. Should look like this:
Average of ratings: -
In reply to MAHADEV CHAURASIYA

Re: How to add custom css/scss file in BOOST Theme by using moodle 3.3

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

I gave a presentation at MoodleMoot this year about how I customized my Boost theme.

Here is my own resources webpage with some information, including a video.

Average of ratings: -
In reply to Rick Jerz

Re: How to add custom css/scss file in BOOST Theme by using moodle 3.3

by MAHADEV CHAURASIYA -

Thanks you so much @Rick Jerz for sharing video,

Still i am facing difficulty to customize Boost theme moodle 3.3, here i am facing difficulty :    

1way=> I copied default scss file and i renamed it, then pasted in preset directories, problem is that scss file is not showing : Dashboard>Site administration>Appearance>Themes>Boost>General Setting>Theme preset>in drop down list uploaded scss file is not appearing.  

2way=> in this case  advance setting> Raw SCSS >in this block section i added manual code its working fine,  but i don't want like this, i want like 1way  .
 

PLEASE GIVE ME ANY OTHER SUGGESTION WHY SCSS/CSS FILE IS NOT APPEARING? 


THANKS YOU.

Attachment boost-moodle3.3.png
Average of ratings: -
In reply to MAHADEV CHAURASIYA

Re: How to add custom css/scss file in BOOST Theme by using moodle 3.3

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

I believe that in my video I show that the .scss file is dragged into the "Additional theme preset files" area.  I never manually move it anywhere.  I forget, but after dragging it into this dialog box, you might need to leave and then return to this theme's appearance to see it in the dropdown (I can't remember if it is immediate, but it should be.)

Your technique might work, but I don't do it this way.

Average of ratings: -
In reply to MAHADEV CHAURASIYA

Re: How to add custom css/scss file in BOOST Theme by using moodle 3.3

by Arshad Syed -

How to add/override “custom.scss/css” from Moodle >= 3.3 in Boost theme

 

1.       Add custom.scss file in folder

Moodle/theme/boost/scss/preset/custom.scss

2.      Add code in lib.php at line no.66

else if ($filename == 'custom.scss') {
        $scss .= file_get_contents($CFG->dirroot . '/theme/boost/scss/preset/custom.scss');
    }

 

3.      Add line of code in settings.php at line no.46

$choices['custom.scss'] = 'custom.scss';



Using FTP, In theme/boost/scss/preset/custom.scss
add your scss/css code
example:

@import "moodle";
.navbar-light .container {
  background-color: green;
}

In Moodle Application, Appearances -> Boost theme setting -> select "custom.scss"  as shown in below Image.

Regards,
Arshad Syed
Attachment custom_scss.png
Average of ratings: Useful (2)
In reply to Arshad Syed

Re: How to add custom css/scss file in BOOST Theme by using moodle 3.3

by T K -

I have upgraded to moodle 3.4 and looking to customise the boost theme for our use, but I am so bad with css stuff. Can someone advice, given the below files in my existing theme, which are the css and layout files, how/which ones do I put into the custom scss for boost?


[root@Moodle2001 style]# ls -lrt

total 40

-rwxr-xr-x. 1 apache apache 5559 Jul  4 09:39 pagelayout.css

-rwxr-xr-x. 1 apache apache  146 Jul  4 09:39 editor.css

-rwxr-xr-x. 1 apache apache   62 Jul  4 09:39 settings.css

-rwxr-xr-x. 1 apache apache 2759 Jul  4 09:39 admin.css

-rwxr-xr-x. 1 apache apache 7805 Jul  4 09:39 core.css

-rwxr-xr-x. 1 apache apache  684 Jul  4 09:39 menu.css

-rwxr-xr-x. 1 apache apache 4502 Jul  4 09:39 report.css

[root@Moodle2001 style]# cd ../layout

[root@Moodle2001 layout]# ls -lrt

total 36

-rwxr-xr-x. 1 apache apache 4379 Jul  4 09:39 frontpage.php

-rwxr-xr-x. 1 apache apache 4994 Jul  4 09:39 report.php

-rwxr-xr-x. 1 apache apache 1802 Jul  4 09:39 scorm.php

-rwxr-xr-x. 1 root   root   6509 Jul  5 15:50 general.php_5Jul2018

-rwxr-xr-x. 1 apache apache 6510 Jul  5 15:51 general.php


Average of ratings: -
In reply to T K

Re: How to add custom css/scss file in BOOST Theme by using moodle 3.3

by T K -

my biggest question, is there any way to seamlessly import theme settings from moodle 2.5 to moodle 3.4?

Average of ratings: -
In reply to T K

Re: How to add custom css/scss file in BOOST Theme by using moodle 3.3

by Arshad Syed -
You can write your own css in boost theme with scss extension. 

and that file under

Appereance -> Themes ->boost->add custom scss



and save it.

now you will find your custom.scss in the dropdown list 


now select custom scss



Average of ratings: -