Is it possible to develop moodle theme with browser-sync

Is it possible to develop moodle theme with browser-sync

by suman bogati -
Number of replies: 8

I am trying to using browser-sync(http://www.browsersync.io/) with moodle, but I am not getting success for using it's features for develop moodle theme.

What I am trying to do is change the color by watching the css file. So I have run below command from moodle root directory.

browser-sync start --proxy "http://localhost/moodle" --files "theme/clean/style/*.css"

Moodle's home page is opened in browser with showing 'browser-sync' is connected. Now I changed the body's color at custom.css of clean theme.

The command prompt shows the custom.css file is changed but new color does not apply on moodle page without page refresh. The below image shows the changes of css file.

cuostm-css-change

What I am doing wrong? Is it possible to use browse-sync during developing Moodle Themes.

The browser-sync is working fine in simple other php pages.

Average of ratings: -
In reply to suman bogati

Re: Is it possible to develop moodle theme with browser-sync

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

Clean uses moodle/theme/style/bootstrapbase/moodle.css perhaps you need to sync with that file rather than custom.css?

The reason you need to refresh your screen is that Moodle caches all the CSS unless you turn it off.

To do this enable Theme Designer Mode

Average of ratings: -
In reply to Mary Evans

Re: Is it possible to develop moodle theme with browser-sync

by suman bogati -

Yeah I already configured the theme designer mode is on. If Clean theme uses moodle/theme/style/moodle.css (which I could not found) ,  then I tweaked the css at core.css on canvas theme, but could not get the success.

However the command prompt shows the core.css file is changed but no reflect on browser without reload.

 

Average of ratings: -
In reply to suman bogati

Re: Is it possible to develop moodle theme with browser-sync

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

My apologies, I missed out 'Bootstrapbase' I have just edited my last comment.

The reload is necessary in normal circumstances when making changes to the CSS.

How about if you create a new stylesheet and save it as clean/css/sync-test.css and then add it as a link in the head part of your theme's layout files the same way you add css style sheets to a web page?

That might work?

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Is it possible to develop moodle theme with browser-sync

by suman bogati -

Mary,

This trick simply does work. You are really superb,  thank you.

Now trying to find out why getting so much time for reflecting the layout changes(eg:- frontpage.php changes) on browser even when observing layout files only, something like.

browser-sync start --proxy "http://localhost/moodle/theme/canvas/" --files "layout/frontpage.php, layout/general.php, style/*.css"
Average of ratings: -
In reply to suman bogati

Re: Is it possible to develop moodle theme with browser-sync

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

Hi,

I thought that would be better as I often work using a separate CSS file, it's much quicker as it is instant.

I have not used 'browser-sync' but I am familiar with node.js as we use this to compile the LESS files in Moodle.

Also, you are wasting your time playing about with the Canvas theme as this is not a theme in itself but a child theme of the main Moodle theme which is called Base theme which carries all the core styles for the older themes in Moodle.

You really need to be working with Clean theme which is the 'default' Moodle theme in if you are working in 2.5/2.6/2.7/2.8 .

The layout for a theme is in the layout directory of the theme you are customising, however, moodle/index.php is where you should be pointing to as this is in effect is called into the theme's layout files as the 'main_content'

That said, I am not sure if 'browser-sync' will work inside Moodle as Moodle is not really a web site as such,  it is more of an entity in itself.

However, there is nothing stopping you developing a theme based on Bootstrap. As the finished layout and styles can be used in Moodle after you have designed/customised it.

Cheers

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Is it possible to develop moodle theme with browser-sync

by suman bogati -
Thanx Marry, You answer is helpful indeed.  In context of using bootstrap, I am understanding about first we customize the layout in bootstrap and  use this layout into moodle theme.  Please make me right If I am wrong.
Average of ratings: -
In reply to suman bogati

Re: Is it possible to develop moodle theme with browser-sync

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Changes to the layout files probably don't show up immediately because of OPcache: http://php.net/manual/en/opcache.configuration.php#ini.opcache.revalidate-freq

Moodle is a dynamic website like any other CMS, just with an educational focus.

Average of ratings: -
In reply to Gareth J Barnard

Re: Is it possible to develop moodle theme with browser-sync

by suman bogati -

Thanks Gareth!!!! for OPcache.

Average of ratings: -