[Building Sakai] [Using Sakai] Rutgers Lesson Builder default.css

Mon Mar 9 11:30:27 PDT 2015

Hi:

We've done some experiments with that:

Here you can view some screenshots of the same page with different css in
lessons.
[image: Imágenes integradas 1]

[image: Imágenes integradas 2]

Basically, to use this, you can change three things:

1:  You can write the HTML including classes for the elements and then
create a css files that sets the style for these classes (as we have done
in these samples).

Here is a fragment of the HTML used in the screenshot with the classes in
bold:

*<h2 class="subhead">Course Goals</h2>*

*<p class="p_red">After completing the four units of this course, you
should be able to:</p>*

*<ul class="arrow">*
* <li class="li_arrow">Identify the general structure and function of
carbohydrates, phospholipds, proteins, enzymes and nucleic acids.</li>*
* <li class="li_arrow">Outline the general processes used by the cell to
generate cellular energy from sugar and to generate the energy and reducing
agent needed for the Calvin cycle.</li>*
* <li class="li_arrow">Describe how DNA was shown to be the genetic
material and how DNA is copied.</li>*
* <li class="li_arrow">Describe the structure and regulation of genes, and
the structure and synthesis of proteins.</li>*
* <li class="li_arrow">Understand the inheritance of two or more traits
based upon Mendelian genetics. Apply this knowledge to drawing and decoding
human pedigrees.</li>*
* <li class="li_arrow">Understand the inheritance of traits when the genes
involved are linked.</li>*
* <li class="li_arrow">Predict the results of genetic crosses involving two
or more traits when the genes involved are linked or unlinked.</li>*
* <li class="li_arrow">Understand the general tools and reagents used in
recombinant DNA technologies.</li>*
* <li class="li_arrow">Outline a general strategy for making a recombinant
DNA library, screening a recombinant DNA library, and analyzing the DNA
fragment identified.</li>*
* <li class="li_arrow">Design a general strategy for identifying a gene of
interest using recombinant DNA techniques.</li>*
*</ul>*

And a sample of the css defining the style of these classes:

*.subhead{*
*   margin: 0.5em 0.0px 5.0px !important;*
*    padding: 10.0px 0.0px 2.0px !important;*
*    border-width: 4px  !important;*
*    border-bottom-style: solid  !important;*
*    border-bottom-color: #ECD47F  !important;*
*    font-family: "Lucida Grande", "Lucida Sans", "Verdana", sans-serif
!important;*
*    font-size: 1.8em  !important;*
*    background:#002855 !important;*
*    color: #fff  !important;*
*}*

*.p_red{*
*font-family: "Lucida Grande", "Lucida Sans", "Verdana", sans-serif
!important;*
*font-size: 1em !important;*
*color: #000 !important;*
*}*

*.arrow{*
*margin: 10.0px 0.0px 1.0em 25.0px;*
*padding-right: 0.0px;*
*padding-left: 0.0px;*
*border: 0.0px;*
*color: #000;*
*font-family: "Lucida Grande", "Lucida Sans", "Verdana", sans-serif
!important;*

*}*

*.li_arrow{*
*margin: 0.0px 0.0px 4.0px;*
*padding: 0.0px 0.0px 0.0px 24.0px;*
*border: 0.0px;*
*font-size: 1.0em;*
*color: rgb(51,51,51);*
*list-style-type: none;*
*background-image:
url(https://cmsresources.ucdavis.edu/cms_v2/images/common/arrow_small_right_002666.gif
<https://cmsresources.ucdavis.edu/cms_v2/images/common/arrow_small_right_002666.gif>);*
*background-color: transparent;*
*background-position: 0.0px 0.0px;*
*background-repeat: no-repeat no-repeat;*
*font-family: "Lucida Grande", "Lucida Sans", "Verdana", sans-serif
!important;*
*}*

2. You can modify Sakai css elements: (for instance this to make the edit
button font size bigger), it works too:

*.edit-col .ui-button-text, #show-pages .ui-button-text, #submit-grading
.ui-button-text {*
*  font-size: 200%;*
*  /* vertical-align: middle; */*
*}*

[image: Imágenes integradas 3]

3. You can change html standard tags....and this works too.

*body {*
*     background-color:#000*
*}*

[image: Imágenes integradas 4]

As far as I know, you can upload this css to a site... or you can upload
this to ALL SAKAI.  This text was in mail from Charles Hedrick:
"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
."

Diego

2015-03-09 9:24 GMT-07:00 Laura Gekeler <LGekeler at nd.edu>:

> Does anyone have any personalized Lessons css they'd be willing to share?
>
> I found Rutgers resource that tells me what elements are controllable. https://sakai.rutgers.edu/helpdocs/lessonbuilder.htmlbut
> I can't find a sample default.css to use as my starting point.
> <https://sakai.rutgers.edu/helpdocs/lessonbuilder.html>
>
> <If I were the sys admin of my own instance, I'd just go get it, but I'm
> not and I'm not familiar with the repo either>.
>
> I think it would be a big service to faculty and instructional designers
> to have an easily downloadable default.css and some well-done modifications
> those of us with mad skills (I am not one of them).  A screen cap of a live
> Lesson to see the variations in result would also be cool.
>
> Thanks in advance for sharing your expertise!
>
> Laura
>
> Laura Gekeler
> LMS Administrator //Concurrent Instructor
> Teaching and Learning Technologies
> University of Notre Dame
> P:(1) 574-631-2402
>
>
> _______________________________________________
> sakai-user mailing list
> sakai-user at collab.sakaiproject.org
> http://collab.sakaiproject.org/mailman/listinfo/sakai-user
>
> TO UNSUBSCRIBE: send email to
> sakai-user-unsubscribe at collab.sakaiproject.org with a subject of
> "unsubscribe"
>

-- 
*Diego del Blanco Orobitg*
Spain & LATAM Regional Manager (*ANI Sakai <http://www.anisakai.es/>*)
Apereo LATAM Representative (*Apereo Foundation <http://www.apereo.org/>*)

Ph: +1-480-521-8527
Em: ddelblanco at anisakai.com
Sk: ddelblanco.ani
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://collab.sakaiproject.org/pipermail/sakai-dev/attachments/20150309/eff89e65/attachment.html 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 230992 bytes
Desc: not available
Url : http://collab.sakaiproject.org/pipermail/sakai-dev/attachments/20150309/eff89e65/attachment.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 268564 bytes
Desc: not available
Url : http://collab.sakaiproject.org/pipermail/sakai-dev/attachments/20150309/eff89e65/attachment-0001.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 81354 bytes
Desc: not available
Url : http://collab.sakaiproject.org/pipermail/sakai-dev/attachments/20150309/eff89e65/attachment-0002.png 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 110788 bytes
Desc: not available
Url : http://collab.sakaiproject.org/pipermail/sakai-dev/attachments/20150309/eff89e65/attachment-0003.png 