Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: adjustment theme RGBO Smartphone

adjustment theme RGBO Smartphone 9 months 3 weeks ago #5596

  • JaapJan
  • JaapJan's Avatar Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 114
  • Thank you received: 1
Hi Ron (I think :) )

Is it possible to make the navigation buttons in your RGBO theme bigger when using a smartpone. Your theme is very nice, is also working great at a smartphone, but those buttons are very small.
See the attached picture

Thanks

JaapJan
Holy cow!
Attachments:

Please Log in or Create an account to join the conversation.

adjustment theme RGBO Smartphone 9 months 3 weeks ago #5597

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 536
  • Thank you received: 132
Hi JaapJan
yes in portrait view those buttons are quite small but they still work ok. The problem is if you add some of the optional properties like help, glossary, media so that there are more buttons in the footer along with the progress bar then there isn't much room in portrait view on older/lower res devices e.g. iPhone 5 compared with iPhone 6/7/8. Also with the order of loading of css it's not easy to change this just within an LO. However I have tested and committed a change to the RGBO theme that increases the size of the buttons for two different portrait widths. I think Tom looks after your installation so get him to replace the theme attached. Let me know if that works for you? If so I'll add the same changes to some of the other themes too for a future release.
HTH
Ron
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Need direct commercial support? mitchellmedia.co.uk/contact/
Attachments:
The following user(s) said Thank You: JaapJan, xlearn

Please Log in or Create an account to join the conversation.

adjustment theme RGBO Smartphone 9 months 3 weeks ago #5603

  • JaapJan
  • JaapJan's Avatar Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 114
  • Thank you received: 1
Hi Ron

thanks a lot! Tom installed this theme and it works great. Still we have a problem: we are busy developing a Style script to adjust your RGBO theme to our College look-and-feel. It is attached to this message. Somewhere in the script it overrules your new button settings: when I load the script the buttons are still as small as before installing your work. Can you please tell me where in this script I have to delete text?

Thanks!

JaapJan
Holy cow!
Attachments:

Please Log in or Create an account to join the conversation.

adjustment theme RGBO Smartphone 9 months 3 weeks ago #5604

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 536
  • Thank you received: 132
Hi JaapJan
I changed two files:
rgbo\responsivetext.scss
rgbo\scss\_footer.scss
which in turn automatically changed the relevant .css files.
Basically instead of a single media query for max-width:500px I changed it so there are two media queries for portrait mobile and changed the buttons sizes in each of those so that they are a bit bigger but still fit when there is a full set of icons/buttons. You'll have to look at those media queries to compare the changes (or see my commit on github). The changes are in these two media queries:
//******** Smartphones 600px (portrait) change progress bar display-----------/
@media only screen
and (max-width:600px) {
/*changes here*/
}

//******** Smartphones 320px (portrait) change progress bar display-----------/
@media only screen
and (max-width:320px) {
/*changes here*/
}

HTH
Ron
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Need direct commercial support? mitchellmedia.co.uk/contact/

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Moderators: alimcn
Time to create page: 0.092 seconds
Copyright © 2019 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search