Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
  • Page:
  • 1

TOPIC: Creating Custom Theme

Creating Custom Theme 7 months 1 week ago #6313

  • JaydnEdwards
  • JaydnEdwards's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 2
  • Thank you received: 0
I'm looking to create a custom xerte theme from scratch, but I have no idea where to start. I currently have a duplicated RGBO theme which I've edited but I'd rather create one from the ground up.

I haven't been able to find any guides or such on how to develop a theme. Can anyone point me in the right direction?

Please Inloggen or Create an account to join the conversation.

Creating Custom Theme 7 months 1 week ago #6314

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 622
  • Thank you received: 162
Hi
are you looking to share any themes you create back with the community? e.g. I created the RGBO theme (and many of the others) and if you've already created a derivative of that we'd encourage you to share it back with the community.

It sounds like you already know what you need to create a theme from scratch just create a folder with a short and unique theme name and create or edit an info file and css files. You're still better using one of the existing themes as a starting point but you can clear all the styles and start from scratch if you wish. The older themes that don't contain an scss sub folder may be easier if you aren't set up to use sass/scss. However personally I wouldn't recommend that - it's worth the investment in time to use SCSS.

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

Please Inloggen or Create an account to join the conversation.

Creating Custom Theme 7 months 1 week ago #6315

  • ymoore
  • ymoore's Avatar
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 35
  • Thank you received: 1
Hi

I've created a theme using the SCSS route that Ron mentioned. I initially had really helpful conversations with Cardiff University as they'd already done this.

I approached it like this:
  • Made a copy of a theme folder from the existing list
  • Edited it with our colour scheme/logo etc. using SCSS (with the help of our team developer to enable my PC to do this)
  • Tested the new theme on my desktop Xerte version (using XAMPP)
  • When ready I handed the folder of files over to our developer, who saved them to our Xerte testing server (where we try out new updates before going 'live')
  • A few more tests and tweaks and the developer then added it to our 'live' version

  • sass-lang.com/ - used this as a starting point but also watched a few training videos.

    Cheers
    Yvonne

Please Inloggen or Create an account to join the conversation.

Creating Custom Theme 7 months 1 week ago #6317

  • JaydnEdwards
  • JaydnEdwards's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 2
  • Thank you received: 0
Hi both,

Thanks for your responses. I'm working on a University theme and until now, the work around was to upload an external stylesheet to change what we need to every time we made a new course. I've slapped the contents of that file to the end of the duplicated RGBO CSS and passed that theme on to the server admin to make things a bit easier. It's definitely not something I'd want to share as-is since there's a lot of code targeting the same stuff and it's pretty ugly code.

I'm kind of familiar with sass, but haven't really gone through the RGBO scss. With CSS variables being a (very useful) thing now, should I still use sass?

Is there a guide/list of html elements that xerte uses or would I be better off inspecting/viewing source code and studying it that way?

Thanks,
Jaydn

Please Inloggen or Create an account to join the conversation.

Creating Custom Theme 7 months 6 days ago #6320

  • ymoore
  • ymoore's Avatar
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 35
  • Thank you received: 1
Hi Jaydn

I used the .scss files in the theme folder - made a copy and then edited the variables to our colour scheme. I edited a few other classes here and there. Then I just kept testing how it looked and tweaking until I was happy. I found the classes fairly straighforward - some didn't relate to the things I thought they would, but were fairly easy to work out from 'inspecting' from the browser.

Cheers
Yvonne

Please Inloggen or Create an account to join the conversation.

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

Search