Help with styling links as form buttons

Help with styling links as form buttons

by Jason Lane -
Number of replies: 5

Hello, sorry if this is a simple question... how can I make a links appear as buttons for the Moodle Mobile app (e.g. "OK" below).

Image result for moodle mobile screenshot

In our HTML <a href="#" class="btn btn-lg btn-default">...</> renders as a plain text link in the Moodle Mobile app. 

How can we manipulate it to look like "OK" above?

We are using the "Boost Campus" theme as a site default (default, legacy, mobile, tablet).

Many thanks, Jason

Average of ratings: -
In reply to Jason Lane

Re: Help with styling links as form buttons

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
First, I'll just point out that the theme you use on the website has no bearing on how your content looks in the app.

The app uses the ionic framework for its interface components.  Try adding the ion-button directive to your link to make it display as a button: https://ionicframework.com/docs/api/components/button/Button/ (the examples use a button element, but I think it should work on links too).
Average of ratings: -
In reply to Mark Johnson

Re: Help with styling links as form buttons

by Jason Lane -

Thanks Mark, I had a minor win with wrapping the a tag with the ion button tag. Thanks for the suggestion. However, the other solution had a better result - more padding and rounded corners (placing some CSS in a linked file). I have ended up using the additional CSS workaround.

So, I can style buttons on a page resource, but not in the description element of a SCORM activity. This may be a Moodle Mobile limitation?

Average of ratings: -
In reply to Jason Lane

Re: Help with styling links as form buttons

by David Scotson -
It should be possible to create a subset of the popular bootstrap classes used in Moodle content and add them to the app so that your example "just works" as it is. I think it could be done via the same mechanism that lets you change the colours of the app by providing a link to a CSS file so someone could work on this without needing to convince the mobile app developers it was a good idea.

It is.a reasonable amount of development though, and it seems no-one has done that up front work yet to make this possible.

Complications include the fact that the mobile framework has seperate styles for different platforms, and the mobile app is transitioning between two versions, though you can provide different styles for each version. So making it all work seamlessly for all platforms and all possible bootstrap classes is a big job.

But incremental progress is possible. So just copying and pasting the standard Bootstrap CSS for .btn and .btn-default into a CSS file somewhere and pointing the mobile app to it in settings would at least make these links "button-y" and people could build from there to make them more native looking or add other popular classes like badges or alerts.

Average of ratings: -
In reply to David Scotson

Re: Help with styling links as form buttons

by Jason Lane -

Thanks for your suggestion. I created and linked a css file - this worked in the body of a page resource. Excellent. 

However, I have a SCORM activity and I want the btn styling to appear in the small top block (the SCORM activity description). The Moodle Mobile app seems to prevent any btn styling in that top space.

Is there any way to force a.btn styling in that element?

Average of ratings: -
In reply to Jason Lane

Re: Help with styling links as form buttons

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

you should be able to style buttons in there too. There are some places of the app where this isn't possible, but the SCORM description isn't one of them.

Please make sure that your styles are ok for that place and that there isn't any app default style that overrides your rule because it's more specific. You can test this using our webapp, that way you can inspect the styles.

Kind regards,
Dani

Average of ratings: -