Custom CSS for Moodle mobile not working

Custom CSS for Moodle mobile not working

by Atif Matin -
Number of replies: 13

Hello,

I have added the following link for custom css:

/public_html/school/theme/evolved/customcss.css in the webservice enabling page.

In the customcss.css I have copied the example css for testing but it does't seem to be working.

The example css:

.bar-side-menu {
   background-color: blue;
 }
 
 .bar-content {
   background-color: blue;
 }
 
 .button.button-positive {
   border-color: blue;
   background-color: blue;
    color: #fff;
 } 
 
 .item-divider {
   background-color: #fafafa;
 }
Any help would be highly appreciated.

Many thanks in advance

Atif

Average of ratings: -
In reply to Atif Matin

Re: Custom CSS for Moodle mobile not working

by Dani Palou -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Hi,


I guess you added the URL to your CSS file in Site administration > Plugins > Web Services > Mobile > CSS, right?

Please make sure to use a not relative URL. The following URL will NOT work:

/public_html/school/theme/evolved/customcss.css

The URL should be like this:

http://mymoodle.com/public_html/school/theme/evolved/customcss.css

Please let me know if this fixes the problem for you.

Kind regards,

Dani

Average of ratings: Useful (1)
In reply to Dani Palou

Re: Custom CSS for Moodle mobile not working

by G J -

I have the same question above:
 
I’m having trouble trying to upload our Moodle theme in the mobile app. I followed the steps on how to retrieve the custom styles from our Moodle site by
entering the mobilecssurl but nothing has change. And I think I’m using the
correct URL pointing to the CSS file containing the custom styles. 

 
MobileCSSURL I entered:
 
http://lmsappt01.subr.edu/var/moodle/theme/pioneer/style/custom.css 
I'm not sure if I'm doing it correct but is this how it supposed to look in the custom.css file below? When you add the test custom css?
 


/* Custom CSS

-------------------------

div.logo {

    background: url(setting:logo) no-repeat 0 0;

    display: block;

    float: left;

    height: 75px;

    margin: 0;

    padding: 0;

    width: 100%;

}


.dir-rtl div.logo {

    background: url(setting:logo) no-repeat 100% 0;

    display: block;

    float: right;

}

.bar-side-menu {

background-color: blue;

}

 

.bar-content {

background-color: blue;

}

 

.button.button-positive {

border-color: blue;

background-color: blue;

color: #fff;

} 

 

.item-divider {

background-color: #fafafa;

}

*/

/* Custom CSS Settings

-------------------------*/

setting:customcss




Average of ratings: -
In reply to G J

Re: Custom CSS for Moodle mobile not working

by Dani Palou -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Hi Goldie,

I tried to open the URL you posted and I'm getting a DNS error. Maybe that's why it isn't working in the app?

Cheers,

Dani

Average of ratings: -
In reply to Dani Palou

Re: Custom CSS for Moodle mobile not working

by G J -

Hi Daniel,

I made corrections. I had put the wrong URL, however, Its still not working. I use the sample css in mobile.css 

Here is the url:

http://lms-appt01.subr.edu/var/moodle/theme/pioneer/style/mobile.css



Average of ratings: -
In reply to G J

Re: Custom CSS for Moodle mobile not working

by Just H -

That looks like an incorrect URL, the correct URL is likely http://lms-appt01.subr.edu/theme/pioneer/style/mobile.css 


EDIT: in fact the URL I just posted shows:

/* Un-comment the following, for initial RTL UI support.
body {
   direction: rtl; 
   text-align: right;
}
*/
 
 .bar-side-menu {
   background-color: black;
 }
 
 .bar-content {
   background-color: red;
 }
 
 .button.button-positive {
   border-color: black;
   background-color: black;
    color: #000000;
 } 
 
 .item-divider {
   background-color: #000000;
 }

Average of ratings: -
In reply to Just H

Re: Custom CSS for Moodle mobile not working

by G J -

Thanks. I made changes.

Now I'm trying to test the mobile app in Chrome and I followed the steps and added the custom CSS via the browser inspection tools below:

 <style id="http://lms-appt01.subr.edu/theme/pioneer/style/mobile.css"></style>

But not seeing the mobile app. 

I clicked the index.html file and select Chrome to open up with.

I'm not sure what I'm doing wrong. I'm new to this

Average of ratings: -
In reply to G J

Re: Custom CSS for Moodle mobile not working

by Dani Palou -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Hi Atif,

the <style> tags are used to add inline styles, not linking stylesheets. If you want to add your own stylesheet you need to add it like this:

<link href="http://lms-appt01.subr.edu/theme/pioneer/style/mobile.css" rel="stylesheet">

To use the <style> tags you need to copy the contents of your CSS inside of these tags. That is:

<style>

.bar-header {

...

</style>

Average of ratings: -
In reply to G J

Re: Custom CSS for Moodle mobile not working

by André Romijn -

Hi there,


Same problem with custom cms. ( http://www.vetvisuals.com/lms/moodle/theme/adaptable/style/adaptable.css ) working witk Moodle 3.1 and theme adaptable.

Do I miss something?


Regards,

André


Average of ratings: -
In reply to André Romijn

Re: Custom CSS for Moodle mobile not working

by Juan Leyva -
Picture of Core developers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Hi André,

Moodle Themes are not compatible with the Moodle Mobile app (you can't use a Moodle theme as a Moodle Mobile remote theme).

For the app, you need to create a specific theme following this guide: https://docs.moodle.org/dev/Moodle_Mobile_Themes

Juan

Average of ratings: -
In reply to Juan Leyva

Re: Custom CSS for Moodle mobile not working

by André Romijn -

Hi Juan


That make sense! Have done that: http://www.vetvisuals.com/lms/moodle/theme/adaptable/style/mobile.css

But still not working I'm afraid.


Also when opening Moodle app on iPad 6 it chrash after 2-3 seconds.  Any suggestions?

Regards

André

Average of ratings: -
In reply to André Romijn

Re: Custom CSS for Moodle mobile not working

by Manjunath Moodle -

Hi Andre,

  sorry to jump in.  I noticed that the CSS code is commented in the link your shared...may that is the reason.  If you just put the below code in css. I may work fine.


.bar-header {
   background-color: #511c74;
 }

Average of ratings: -
In reply to Manjunath Moodle

Re: Custom CSS for Moodle mobile not working

by André Romijn -

Thanks Manjunath,

Done that, but after synchronising no result I'm afraid...

Average of ratings: -