Explore the community Forums Lectora Online Lectora Online Questions & Answers CSS Classes – How do I use them on objects?

Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #301080 Score: 0
    Profile photo of
    Anonymous
    2 pts
    @

    Hello

    I am trying to change the appearance of an entry box in my course (i.e. no borders etc).

    I am attempting to use the advanced appearance options box to do this, but I am not sure what format I need to enter it in (I don’t know a lot about CSS).

    What is it supposed to look like? (I’ve attached a screen shot to show you what I have attempted).

    Kind regards

    Simon

    #301084 Score: 2
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    339 pts
    @ssneg

    You should specify CSS class names, not CSS properties. So instead of “border:none” you should write “myclass1” or “borderless” and then use an External HTML Object set to meta tags and write the following in it:

    <style>
    .myclass1 { 
       border:none;
       color: red;
    }
    /* or this */
    .borderless { 
       border:none;
       font-weight: bold;
    }
    </style>
    
    This post has received 2 votes up.
    #301087 Score: 1
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    339 pts
    @ssneg

    Tim K. shared a demo (click here) and published a webinar (click here) on CSS in Lectora.

    Also, I think that your logic (of inputting CSS properties directly) is entirely valid and that would be a great feature suggestion for Lectora. It is often quicker to add a simple CSS property on an object directly and it’d be great if Lectora allowed us to do that.

    This post has received 1 vote up.
    #301092 Score: 0
    Profile photo of
    Anonymous
    2 pts
    @

    Thank you Sergey – great advice.

    The video http://trivantis.com/tips-tricks-use-css-boost-elearning-courses does not work for me.

    Does it work for anyone else?

    Kind regards

    Simon

    #301119 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    339 pts
    @ssneg

    Glad I could help! The video is hosted on Wistia which sometimes has issues with browsers. Try a different browser maybe? It just worked for me (I only had to enable Flash plugin for it).

    Also there’s a direct link, you can try that http://embed.wistia.com/deliveries/837b80713b9a2842f2847ab1809bc25ba871d4d8/file.mp4

    #302130 Score: 0
    Profile photo of
    Anonymous
    2 pts
    @

    Just in case anybody else has the same problem as me on this one. I found that using the “Classes” in the properties section only styled the div outside of the element (so for this example, it did not change the borders at all).

    To modify the actual entry field I had to use the id for each entry field (i.e. id=”frmobj631″ – then it worked.

    I have attached some screen shots.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.