CSS in Lessons

[Aiya Williams]

Hello! DOes Sakai only support a single stylesheet for all Lessons? It gives the option to upload more than one, but looks like it only accesses one. Am a new user. Thanks!

[David Eveland]

As far as I know (in my experience)

 —

Dave E. | Johnson University
--- End of reply/forward ---

 

--
You received this message because you are subscribed to the Google Groups "Sakai Users Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sakai-user+...@apereo.org.
To post to this group, send email to sakai...@apereo.org.
Visit this group at http://groups.google.com/a/apereo.org/group/sakai-user/.

[Diego del Blanco Orobitg]

Hi:

It can be per site,per page or you can change it for all Sakai.

So, you can create a directory LB-CSS in either the site’s home collection or /public. 

If that page hasn’t specified a CSS file to use, default.css from the site LB-CSS will be used if it exists, otherwise from /public. 

You can change the name default.css using the sakai property lessonbuilder.default.css. It should be just a hostname, e.g. mydefault.css.

I've tested it and works fine.

Regards:

Diego

--

Diego del Blanco Orobitg

Development Manager (SCRIBA)

Apereo LATAM Representative (Apereo Foundation)

Ph: +1-480-521-8527

Em: diegodelbl...@gmail.com

Sk: ddelblanco.ani

[Aiya Williams]

Hi Diego,

You can do separate styles for seaprate pages in this way? If I understand correctly, for pages within a lesson to call different CSS, all of them need to be in a /public folder (and, obviously, named differently). Is this something a faculty member could do (someone not an administrator) in the resources section?

Thank you,
Aiya

[Diego del Blanco Orobitg]

Yes. 

You can select in each lesson builder page the css that you want to use on that page (and only on that page). There is a dropdown selector that is filled with the list of the css files you upload, and you can upload directly to the LB-CSS resources folder or you can do with the option in Lessons page configuration dialog.  Teachers can do this (upload and or select from the dropdown)

If you want to change all the pages at the same time in a site, you need to upload a css file called "default.css" and that will become the default css in that site.

I've tried to add a folder in /public in resources with the css files to view if this makes something global in the lessons pages, and I can view the list of 

css files (meanwhile I don't create a folder in the site, that means... if you don't have a LB-CSS folder in your site your site will search for a LB-CSS folder in /public in the admin resources... if not... then it uses the default one that comes with Lessons Builder code and your skin)

I must say that I have an error when I do this (the /public/LB-CSS thing) and I select a skin. It later says that the css file is not found, but maybe this is something that happens in my version and I need to check if there is a JIRA about that and a patch. You can try in your version to check.

So... resume:

Yes, you can do it very easily by page or by site, and teachers can do it without a lot of difficulty. You can create a 1 minute videotutorial to show how. It is really easy.

Regards.

[David Eveland]

Where can you grab the default.css that Lessons is using and modify it? (there are some classes/formatting we want to retain)

[Diego del Blanco Orobitg]

In your case, surely here:

http://sakai.johnsonu.edu/lessonbuilder-tool/css/Simplepagetool.css

If not in that route, you always can use the development tools in the browser to view the css files that a page is using.

Regards!

[Sam Ottenhoff]

The Cascading of style sheets means that you don't need to worry about retaining styles. Your stylesheet is used for overriding the elements you want changed. You override via specificity and by being the last stylesheet loaded. Firefox and Chrome both have amazing inspectors that allow you to test overrides in the browser.

[Williams, Aiya]

Interesting. Thank you for a thorough response; there is something I’m missing.

 I used the lesson building page to upload separate css files, but only the first one I uploaded worked. Specifically, “style.css,” my first CSS upload, overrode all lesson pages, even though I designated “style2.css” for a specific subpage of that lesson (and changed all references to “style.css” to “style2.css” in the html. It was almost as though the details for the page which call the CSS file was hidden from view and I couldn’t modify the name of the file it was calling.

I will try again.

Aiya

[Diego del Blanco Orobitg]

You don't need to reference to any css file in the html in the lesson pages. It is supposed to work automatically with the css file selected in the page configuration.   Lessons, automatically inserts that file in the HTML.

Here is a video sample of how it is supposed to work. I select different css and you can view how the paragraph changes. And it only happen in the page that I select it. the other pages maintain the styles.

https://www.youtube.com/watch?v=D6tziWt3g98

[David Eveland]

Still can’t get the Header tags to adhere to the specifications of an inline style: It’s gotta be something simple I’m missing:

http://screencast-o-matic.com/watch/co6YFohfXj 

[Diego del Blanco Orobitg]

This is becuase the tool.css in the Sakai skin has this for H3:

h3, h4, h5 {

    color: #555;

    padding: 0;

    font-weight: inherit;

    font-family: 'Open Sans', 'Helvetica Neue', Arial,sans-serif;

    margin: 1em 0 0 0;

    background-color: transparent !important;

}

where background color is transparent and this label is marked as !important, so it overwrite your style.

You can do 2 things (more, but 2 easy ones): 

1. add !important to your background-color too, so in your case:  background: black !important;

2. Don't use h3, use a normal paragraph or other style and change the font size and surely it will work.

Other options is modify the lesson bulider css with a new definition of H3 with !important too in the black color, or change the tool.css in the sakai skin in your institution (but maybe that can make other places in the skin to look bad). If this doesn't happen, then maybe this is the best solution, because really this h3 definition in toll css is not allowing anyone to set the background in the h3 labels with the CKEditor.

Regards!

Diego