Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #327311 Score: 0
    Profile photo of Karen Jensen
    Karen Jensen
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    3 pts
    @Karen Jensen

    I need to change the color of the outline for my entry field does anyone know a quick and easy way?

    #327325 Score: 1
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    346 pts
    @timk

    It can be done with CSS. Add a .css file as a html extension with the following code:

    input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
    }

    The first line makes the border: border-width, border-style, color.

    The second line makes rounded corners. You can delete this line if you don’t want rounded corners.

    This style will be applied to all input fields.

    Tim

    This post has received 1 vote up.
    #327329 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

    There are at least two blogs by Trivantis regarding styling entry fields:

    http://trivantis.com/blog/using-css-style-lectora-course/
    http://trivantis.com/blog/style-entry-fields-lectora-using-css/

    This post has received 1 vote up.
    #327421 Score: 0
    Profile photo of Karen Jensen
    Karen Jensen
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    3 pts
    @Karen Jensen

    Thanks Tim that worked…Quesstion When I click on the entry field it looks like it is picking up the outline from the controller css that I am using on another page. It is putting a gold line around it..I don’t want any outlines to appear when I arrive at the page or when I click on the entry field..how do I do that…

    #327430 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    208 pts
    @Klaatu

    You’re using Chrome, right? If you are talking about the outline that Chrome puts around a selected input add the following declaration to Tim’s CSS:

    outline: none;

    If you’re not talking about that outline,  you should read those two blog posts Sergey provided. The selector Tim provided will effect ALL text type inputs (as he pointed out). You need to add additional specificity if you’re looking to target just one. That brings up another issue, the HTML Name that Lectora provides is not the selector you want to use or you will get undesired results. Read the blogs for more info.

    Darrel

    • This reply was modified 3 years, 8 months ago by Profile photo of Darrel Somoza Darrel Somoza.
    #327432 Score: 0
    Profile photo of Karen Jensen
    Karen Jensen
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    3 pts
    @Karen Jensen

    No I want all the entry boxes in the course to be invisible. I have accomplished this with Tim’s suggestion, however now when in run mode, the entry box is invisible until I click on it to enter something and then a gold outline appears…I want no outline at all on any entry box ever whether arriving at my page as well as clicking on it to enter text.

    #327434 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

    The unselected text field has “border” and selected field has “outline” so you have to set both to none, like this: https://jsfiddle.net/ygha6cor/

    This post has received 1 vote up.
    #327437 Score: 0
    Profile photo of Karen Jensen
    Karen Jensen
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    3 pts
    @Karen Jensen

    Excellent thanks so much guys – appreciate it

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

You must be logged in to reply to this topic.