{"id":5771,"date":"2020-08-20T07:50:40","date_gmt":"2020-08-20T11:50:40","guid":{"rendered":"https:\/\/www.dr-chuck.com\/csev-blog\/?p=5771"},"modified":"2020-08-20T07:50:40","modified_gmt":"2020-08-20T11:50:40","slug":"styling-tsugi-koseu-lessons","status":"publish","type":"post","link":"https:\/\/www.dr-chuck.com\/csev-blog\/2020\/08\/styling-tsugi-koseu-lessons\/","title":{"rendered":"Styling Tsugi \/ Koseu Lessons"},"content":{"rendered":"
I am developing a version of Lessons that can be heavily tweaked through CSS. \u00a0To do this I am revising the HTML output of Lessons to be more basic and semantic and therefore more easily tweaked by CSS. \u00a0The new default look and feel of Lessons looks like this (go into a lesson):<\/div>\n
<\/div>\n
<\/div>\n
https:\/\/www.wa4e.com\/lessons<\/a>\/<\/div>\n
<\/div>\n
<\/div>\n
You can see some examples of how you can tweak the look and feel here (go into a lesson):<\/div>\n
<\/div>\n
<\/div>\n
https:\/\/www.py4e.com\/lessons<\/a>\/<\/div>\n
<\/div>\n
<\/div>\n
First you will notice that the carousel is gone. \u00a0It is actually not exactly gone – but if you put \u201cvideos\u201d in a module it renders like the above two sites. \u00a0You can go back to the carousel by changing all of the \u201cvideos\u201d keys in your lessons.json to \u201ccarousel\u201d and poof the carousel will reappear.<\/div>\n
<\/div>\n
<\/div>\n
There are two new features in lessons.json – take a look:<\/div>\n
<\/div>\n
<\/div>\n
https:\/\/www.py4e.com\/lessons.json<\/a><\/div>\n
\n
\"headers\": [\r\n    \"<link href=\\\"{apphome}\/css\/lessons.css\\\" rel=\\\"stylesheet\\\">\"\r\n],\r\n\"settings\": {\r\n    \"prev-next\": \"right\"\r\n},<\/pre>\n<\/div>\n
The headers is an array of text lines to add the the <head> part of lessons pages. \u00a0The {apphome} expands to the top URL for the site. \u00a0You can do a bunch of fun stuff here. \u00a0I load up some CSS.<\/div>\n
<\/div>\n
<\/div>\n
https:\/\/www.py4e.com\/css\/lessons.css<\/a><\/div>\n
<\/div>\n
<\/div>\n
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.<\/div>\n
<\/div>\n
<\/div>\n
In my lessons.css I add a image based icon and a fontawesome based icon as well as tweak the list styles.<\/div>\n
<\/div>\n
<\/div>\n
There is also a new settings area that allows us to tweak the UI here and there. \u00a0The first setting is whether you want the prev\/next aligned right or full width. \u00a0The useful values for this are \u201cright\u201d and \u201cfull\u201d – the default is \u201cfull\u201d as you can see on WA4E.<\/div>\n
<\/div>\n
<\/div>\n
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.<\/div>\n
<\/div>\n","protected":false},"excerpt":{"rendered":"
I am developing a version of Lessons that can be heavily tweaked through CSS. \u00a0To do this I am revising the HTML output of Lessons to be more basic and semantic and therefore more easily tweaked by CSS. \u00a0The new default look and feel of Lessons looks like this (go into a lesson): https:\/\/www.wa4e.com\/lessons\/ You […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5771","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.dr-chuck.com\/csev-blog\/wp-json\/wp\/v2\/posts\/5771","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dr-chuck.com\/csev-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dr-chuck.com\/csev-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dr-chuck.com\/csev-blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dr-chuck.com\/csev-blog\/wp-json\/wp\/v2\/comments?post=5771"}],"version-history":[{"count":4,"href":"https:\/\/www.dr-chuck.com\/csev-blog\/wp-json\/wp\/v2\/posts\/5771\/revisions"}],"predecessor-version":[{"id":5775,"href":"https:\/\/www.dr-chuck.com\/csev-blog\/wp-json\/wp\/v2\/posts\/5771\/revisions\/5775"}],"wp:attachment":[{"href":"https:\/\/www.dr-chuck.com\/csev-blog\/wp-json\/wp\/v2\/media?parent=5771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dr-chuck.com\/csev-blog\/wp-json\/wp\/v2\/categories?post=5771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dr-chuck.com\/csev-blog\/wp-json\/wp\/v2\/tags?post=5771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}