Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
General questions and topics about Xerte Toolkits that don’t fit anywhere else.
  • Page:
  • 1

TOPIC:

Code to overwrite specific elements of built-in theme [SOLVED] 2 years 2 months ago #8286

  • victoriavika
  • victoriavika's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 19
  • Thank you received: 1
Hello,
this question has to do with themes.

I'm currently using the 'Future Teacher' theme that came with Xerte. However, I'm overwriting some styles using 'style'. For instance, I changed the font, and header and footer area colours. and the hover-over colour of the icons at the footer. However, there are 2 things I couldn't figure out how to change the colour of. The text of the progress bar, and the chevron that opens and close the tools. (see attached image).

I'm not great with css/html. could someone tell me what's the code to change these 2 things on my footer? many thanks!
Attachments:

Please Connexion or Create an account to join the conversation.

Last edit: by victoriavika. Reason: forgot attachment; solved

Code to overwrite specific elements of built-in theme 2 years 2 months ago #8287

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 847
  • Thank you received: 260
Hi
I haven't tested this but try the following:
#x_footerShowHide .fa, .fas {
color: yellow;
}
#x_footerProgress .pbTxt {
color: yellow;
}
Obviously change the color values to whatever you want them to be.
Keep in mind that custom styles like you have added via the styles optional property will break the accessibility options to change theme to high contrast or black on yellow. The proper way to do this is to make a copy of the Future Teacher theme, change that and then add that to your installation.
HTH
Ron
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/
The following user(s) said Thank You: victoriavika

Please Connexion or Create an account to join the conversation.

Code to overwrite specific elements of built-in theme 2 years 2 months ago #8288

  • victoriavika
  • victoriavika's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 19
  • Thank you received: 1
Thank you!, I will try this. but first, how do I 'make a copy' of the Future Teacher theme?

Please Connexion or Create an account to join the conversation.

Code to overwrite specific elements of built-in theme 2 years 2 months ago #8289

  • victoriavika
  • victoriavika's Avatar Topic Author
  • Offline
  • New Member
  • New Member
  • Posts: 19
  • Thank you received: 1
Just reporting back. Yes the code works! Thank you so much! Also, I tested all of the accessibility options and they all still worked properly!
thank you so much!

Please Connexion or Create an account to join the conversation.

  • Page:
  • 1
Moderators: ingdon
Time to create page: 0.047 seconds
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search