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

Tue Mar 10 06:12:19 PDT 2015

Firebug (a browser add-on) or your browser's built-in "Inspect Element" 
feature may be able to assist you by mocking up rules in the browser and 
then transferring those to your file every so often to save them 
permanently. These tools allow you to make (temporary) changes to the 
page in real time.

This process might save you time (and the tediousness) of constantly 
uploading the file to check each small change. To get started, simply 
search the web for the many tutorials on Firebug or the other 
element-inspecting options.

-Shawn

--
Shawn Foster
eLearning Technology Support and Application Development
Information Technology Services
Western University
London, Ontario, Canada

On 2015-03-09 10:00 PM, Laura Gekeler wrote:
> Diego,
>
> This is fabulous. I've been playing with it ever since. But it's tedious to
> discover - I take an existing page of links, view the source and uncover
> the classes, such as
>
> .itemlink
> .itemcopylink
>
> and then I use cssdesk.com to write a style - except that it doesn't help
> for system classes which it can't emulate, so I make up some style and then
> I upload a new version of default.css to my LB-CSS folder in Resources
> (because it can't be directly edited there), and so on and so forth...
>
> Tedious.
>
> But thank you!
>
> Laura
>
>
>
>
> Laura Gekeler
> LMS Administrator //Concurrent Instructor
> Teaching and Learning Technologies
> University of Notre Dame
> P:(1) 574-631-2402
>
>
> On 9 March 2015 at 14:30, Diego del Blanco Orobitg <
> diego.delblanco.sakai at gmail.com> wrote:
>
>> 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
>>
>>
>
>
>
> _______________________________________________
> 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"
>