Mobile theme custom CSS file

Mobile theme custom CSS file

by Basem Wahba -
Number of replies: 8

I am trying to succeed with Mobile theme CSS file.

I started very simple with the following:

.bar-header {
  background-color: #5069A1;
}

CSS file location:
(screenshot attached)

It seems that Mobile app can't retrieve my custom styles from my Moodle site.

All advices are really appreciated.
 
Thanks.

Moodle 3.1+ (Build: 20160526)
Moodle Mobile 3.1.0

Reference:

Attachment 2016-05-28_14-15-13.jpg
Average of ratings: -
In reply to Basem Wahba

Re: Mobile theme custom CSS file

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 Basem,

I just tried to add your CSS to my Moodle and it worked fine. Are you testing this in a real device or in a browser?

Can you please send us a test account to your Moodle site so we can check if it's working for us? Please send it to mobile@moodle.com.

Kind regards,

Dani

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

Re: Mobile theme custom CSS file

by Basem Wahba -

Hi Dani,

Thank you so much for your time trying my CSS on your side.

I am testing on a real device (iPad)

Screenshots: https://goo.gl/LOmr4Z

With all pleasure, I have emailed two accounts' privileges; admin and student.

Thanks again for your care.

Best Regards

Attachment IMG_1337.PNG
Attachment IMG_1338.PNG
In reply to Basem Wahba

Re: Mobile theme custom CSS file

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 Basem,

thank you for the accounts. You need to add the protocol to the CSS URL. You have it like this:

superhealthy.coffee/moodle/theme/mytheme/mobileapp.css

You should set it like this:

http://superhealthy.coffee/moodle/theme/mytheme/mobileapp.css

Please check if this works for you.

Kind regards,

Dani

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

Re: Mobile theme custom CSS file

by Basem Wahba -

Hi Dani,

No thanks at all. I am the one that must thank you for your time and care.

Thanks so much for your instructions. It worked.

I wish the best for you, for all Moodle Mobile contributors, and for moodle.

Best Regards

Attachment IMG_1344.PNG
In reply to Basem Wahba

Re: Mobile theme custom CSS file

by Elton LaClare -

Hello,

I realise this is an older thread and I may not get a response, but the issue I am facing at the moment is somewhat related...

I am also trying to style the Moodle Mobile app and, looking at the style sheet referenced in an earlier post, I can see that .mm-site_mm_courses has been used to style the My Courses page. I would also like to style specific pages in the app, but I am unsure how to reference the pages I wish to style. I guess what I want to know is... Where did the originator of this thread look in order to find out that .mm-site_mm_courses would allow him to apply his CSS rules only to the My Courses page? 

In reply to Elton LaClare

Re: Mobile theme custom CSS file

by Berta Maroto -

Hi,

Have you checked this documentation?

https://docs.moodle.org/dev/Moodle_Mobile_Themes#Styling_specific_pages
http://www.slideshare.net/juanleyva/creating-moodle-mobile-remote-themes

First link is the general documentation for developers
Second link is a Moodle Moot slide regarding Themes.

Regards,


Berta

In reply to Berta Maroto

Re: Mobile theme custom CSS file

by Elton LaClare -

Hello,

Thank you for the links to the documentation. I have read the resources several times, but I still cannot figure out how to find the unique base class for individual pages in the app. The slideshare presentation on mobile themes recommends searching for the <ion-content> element. I have done this and have located the tag in ionic.bundle.js, but I still cannot find the base class for individual pages. Am I looking in the wrong place?  

In reply to Elton LaClare

Re: Mobile theme custom CSS file

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 Elton,

you need to search for the ion-content element while executing the app, not in the source code, since the class is added dynamically using an Angular directive. Please look at the first slides of the presentation, how to run Moodle Mobile in a browser.

Kind regards,

Dani