Explore the community Forums Lectora Lectora Questions & Answers CSS Classes for Entry Fields

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #282077 Score: 0
    Profile photo of Jawad
    Jawad
    Member
    beginner
    intermediate
    contributor
    friend finder
    wise owl
    1 pt
    @Jawad

    Can anyone give me a code in order to change the border colour of an entry field using CSS?

    The exact colour:
    Hue:138
    Red:49
    Sat:218
    Green:190
    Lum:144
    Blue:239

    Thanks
    Jawad

    #285833 Score: 0
    Profile photo of Rhys W
    Rhys W
    Member
    beginner
    intermediate
    curious george
    @Rhys

    If its just the CSS for the border then the following will do it (replace text after # with the name of your entry field.) If you need the code for the entry field as well then a little more work will be required.

    replace text after # with the name of your entry field.

    #285836 Score: 0
    Profile photo of Jawad
    Jawad
    Member
    beginner
    intermediate
    contributor
    friend finder
    wise owl
    1 pt
    @Jawad

    @rhys 50928 wrote:

    If its just the CSS for the border then the following will do it (replace text after # with the name of your entry field.) If you need the code for the entry field as well then a little more work will be required.

    replace text after # with the name of your entry field.

    This doesn’t seem to be working for me. This goes within the Appearance Group CSS window right?

    #285834 Score: 0
    Profile photo of Rhys W
    Rhys W
    Member
    beginner
    intermediate
    curious george
    @Rhys

    insert it as external HTML object.

    #285837 Score: 0
    Profile photo of Jawad
    Jawad
    Member
    beginner
    intermediate
    contributor
    friend finder
    wise owl
    1 pt
    @Jawad

    What’s the internal CSS classes option for then, if cannot be done there?

    #285835 Score: 0
    Profile photo of Rhys W
    Rhys W
    Member
    beginner
    intermediate
    curious george
    @Rhys

    If doing it using the internal just enter it as

    border-color:rgb(49,190,239);

    (sorry I had never used the internal before, I just tried it and it works)

    #285838 Score: 0
    Profile photo of Jawad
    Jawad
    Member
    beginner
    intermediate
    contributor
    friend finder
    wise owl
    1 pt
    @Jawad

    Funny, doesn’t seem to work for me.

    #285831 Score: 0
    Profile photo of lauram
    lauram
    Member
    2 pts
    @lauram

    If you only plan to add one border to one entry field, then your best bet is to capture the object’s HTML name and use that in the CSS file as Rhys described above.

    If you want to apply the border to multiple entry fields and/or other objects, you’ll want to use a CSS Class. This lets you apply a style or set of styles to any object where you’ve specified the class name (using the Appearance panel’s CSS class dialog).

    To use this second approach:
    1. Open Notepad or a text editor and enter a slightly modified version of Rhys’ code:

    .blueborder
    {
    border-style:solid;
    border-color:rgb(49,190,239);
    }

    (Note that “.blueborder” is a made up name that I’ve selected for this example. )

    2. Save this document as a CSS file – make sure the file extension is .css.

    3. At the title level, add an HTML Extension object from the Insert Ribbon.

    4. Within the HTML Extension’s properties, select a Type of Cascading Style Sheet, and then browse for the CSS file and select it.

    5. Finally, for all of the entry fields that you want to take on a blue border, from the Entry Field properties, select the arrow in the Appearance panel and enter “blueborder” in the CSS Classes dialog. This is the Class name that we identified in the CSS file.

    This is just one approach that should hopefully work for you.

    #285839 Score: 0
    Profile photo of Jawad
    Jawad
    Member
    beginner
    intermediate
    contributor
    friend finder
    wise owl
    1 pt
    @Jawad

    Hi Laura,

    I’ve followed your steps precisely, yet the border colour does not change for me. I’m not sure where I’m going wrong, does it definitely work for you?

    Jawad

    #285830 Score: 0
    Profile photo of Ben Pitman
    Ben Pitman
    Member
    4 pts
    @benpitman

    Glad to help. Extract the page and put in a new title. Zip the new title folder and send to email below.

    #285832 Score: 0
    Profile photo of lauram
    lauram
    Member
    2 pts
    @lauram

    Be sure to publish and preview in a browser in order to see the changes take effect.

    Ben and Jawad – please post any solutions back to this thread so we can all learn from your troubleshooting efforts. Thanks!

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

You must be logged in to reply to this topic.