You are viewing limited content. For full access, please sign in.

Discussion

Discussion

Help with Basic CSS on Modern Designer

posted on May 17, 2024

Hi all,

 

I'm sorry to be asking this again, I thought I had it figured out however I've updated to the latest version of forms and I can't seem to get some basic CSS working.

I have my CSS here, 

Which  I then apply to my field here, however I am getting no results?

Genuinely been searching for info but the help files seem out of date? Or am I looking in the wrong place? 

Any help or advice where to start appreciated.

 

0 0
replied on May 20, 2024

Thanks all, 

 

I'm new to CSS, so I think I might have misunderstood some concepts.

 

From what I'm gathering so far, ID is to target an individual field and Class would be to target a pre-defined item, e.g the Label which would change all labels. Thanks to Angelas code I realised I was targeting an ID field.

 

Would it be safe to say in Laserfiche there is another added layer as you have to assign the CSS to the item. So while I can target a Class, unless I add it to that field, it will still be unaffected, is this concept of another layer within Laserfiche right?

 

0 0
replied on May 20, 2024

Yeah - that's right that IDs are unique but classes are multi-use.  Also, for purposes of Forms, you can't control the ID of items, but can add classes as much as needed.

In Forms, each component has multiple parts, a label, helptext, the actual input field, validation data, etc. - when you add a field to the form is is actually adding all of these components.

Let's break this down a little bit.  In Angela's example, she used this code to target the desired element:
.test label.field-label
This is saying, find the element(s) that have a class name of "test".  Then find the decedent of that item is of type "label", and has class "field-label".
The periods before "test" and "field-label" indicate those are classes.  The lack of a period before "label" indicates that is the type of element.
The spacing here also matters, the space between "test" and label is defining a ancestor-decedent relationship, but the lack of a space between "label" and ".field-label" is specifically referring to the same object.

Here's some different examples that show targeting different aspects of the field.  Note that these are for the Modern/New Designer and may not be exactly the same in the Classic designer.
Let's say you have a single-line field with class of myField.  You can impact the different components of it like this: 

/*Background color of the entire field*/
.myField {background-color: yellow;}

/*Background color of all label elements in the entire field*/
.myField label {background-color: yellow;} 

/*Background color of the main label on the field*/
.myField label.field-label {background-color: yellow;} 

/*Background color of the above text label on the field*/
.myField label.ab-help {background-color: yellow;} 

/*Background color of the below text label on the field*/
.myField label.un-help {background-color: yellow;} 

/*Background color of the input elements in the field.
The !important tag tells it this is more important that
styling applied elsewhere, and thus overrides what is
applied by the defaults/theme of the form.*/
.myField input {background-color: yellow!important;}

 

2 0
replied on May 21, 2024 Show version history

Thanks very much for this explanation and the examples, it is getting clearer!

 

So if I wanted to find other parts, I'm using the chrome inspector, would this be a way to find parts, for example say as an exercise I'm trying to manipulate the input field, 

Why wouldn't this work? I can see it has a Background part

.myField input {background-color: yellow;} 
 

Did manage to change the width so its a start!

.myField {width: 150px;    background-color: yellow;} 
 

0 0
replied on May 21, 2024

Yes, the Inspector is a great resource to identify components and identify why something isn’t working as expected, such as: 

.myField input {background-color: yellow;} 


Which isn’t working because it conflicts with other styling applied by Forms as either the default base styling and/or the theme styling.  You need the !important tag to tell it to override the styling applied elsewhere.  Like this: 

.myField input {background-color: yellow!important;} 

 

0 0
replied on May 21, 2024

Ahh, 

Fantastic, thank you Matthew and Angela! Making progress.

0 0
replied on May 20, 2024

Angela's example will likely work well.

Just to provide a little more info.  I'm guessing you are using "test" as a CSS Class name, but your code is using the # character which targets an ID of test, instead of the . character which targets the "test" class name.

4 0
replied on May 18, 2024

Here you go:

.test label.field-label {
 display:inline-block; text-align: center;
  color: red;
}

3 0
You are not allowed to follow up in this post.

Sign in to reply to this post.