I am developing a version of Lessons that can be heavily tweaked through CSS. To do this I am revising the HTML output of Lessons to be more basic and semantic and therefore more easily tweaked by CSS. The new default look and feel of Lessons looks like this (go into a lesson):
You can see some examples of how you can tweak the look and feel here (go into a lesson):
First you will notice that the carousel is gone. It is actually not exactly gone – but if you put “videos” in a module it renders like the above two sites. You can go back to the carousel by changing all of the “videos” keys in your lessons.json to “carousel” and poof the carousel will reappear.
There are two new features in lessons.json – take a look:
"headers": [
"<link href=\"{apphome}/css/lessons.css\" rel=\"stylesheet\">"
],
"settings": {
"prev-next": "right"
},
The headers is an array of text lines to add the the <head> part of lessons pages. The {apphome} expands to the top URL for the site. You can do a bunch of fun stuff here. I load up some CSS.
You can see that I have added some classes to the tags in the Lessons module output that should let you get a handle on the markup and tweak it.
In my lessons.css I add a image based icon and a fontawesome based icon as well as tweak the list styles.
There is also a new settings area that allows us to tweak the UI here and there. The first setting is whether you want the prev/next aligned right or full width. The useful values for this are “right” and “full” – the default is “full” as you can see on WA4E.
This is a start to provide more options and a lot of flexibility without requiring a bunch of code changes every time folks want things to look different.