CSS for Mobile App

CSS for Mobile App

by Nitesh Duhan -
Number of replies: 1

We are uploading content on moodle using "book" resource (with atto editor). To ensure that there is consistency in look and feel of content, we added following CSS at Site administration >> Appearance >> Additional HTML.


<style>

body .book_content p {

font-size: 17px ;

font-family: sans-serif, Arial ;

color: rgb(32, 33, 36);

text-align: justify !important;

line-height: 1.6;

margin: 20px 0px 0px 0px;

font-weight: 400;

}


body .book_content table

{

  border-collapse: collapse;

  width: 100%;

  font-size: 15px ;

font-family: sans-serif, Arial ;

color: rgb(32, 33, 36);

line-height: 1.5;

font-weight: 400;

border: 1px solid #dddddd;

  border-collapse: collapse;

}

</style>


I have 2 questions.

1. These settings reflect on desktop but not in mobile app. How can I enable it for mobile app?

2. Is there any better method to achieve the goal of having consistent formatting, other than posting in "Additional HTML" ?

Average of ratings: -
In reply to Nitesh Duhan

Re: CSS for Mobile App

by Dave Foord -
Picture of Particularly helpful Moodlers
Hi Nitesh, you have posted your CSS in the correct place. Some themes have a box within that theme's settings where you can add CSS - but I personally use the Additional HTML option in the main, as it saves me having to move the CSS when changing themes.

In terms of updating the mobile app, this is much trickier - I have created a blog post on this https://davefoord.wordpress.com/2023/05/31/moodle-tricks-of-the-trade-adding-your-own-css-to-the-moodle-mobile-app/

But - this only works if you have a premium account, if you don't then you cannot change the CSS at all within the mobile app.

And finally - I know it isn't the purpose of your question, but I would get someone to check the CSS you are adding: From an accessibility perspective - fully justifying text is not a good idea, and where you have set a specific size for the fonts, this would be better using relative sizes e.g. rem rather than px 
Average of ratings: Useful (1)