CSS Classes for Entry Fields

@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?

Funny, doesn't seem to work for me.

insert it as external HTML object.

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)

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.

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.

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

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

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

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!