Styling of input field

I have a 'description' attribute and an image in an entity. I want to display them, together, on every form using the entity in a standard format. So I use a snippet with these two entities and put it in the first row of the layout grid. Now it is more clear to the user if the description is a little larger (larger font) than all other input fields on the form. I can't figure out in what object I need to specify the different style (bigger font size). In the snippet? In the layout grid? In the input field for description? None of them has any effect because they Always seem to be overruled by the standard ('label') style of the input field. Anyone has a suggestion?
3 answers

label has the highest CSS specificity right now in your CSS files.

You can overwrite this for different areas in your application by for example adding a class to the snippet to create a new definition for the label with higher specificity.


and then

creating this in your css

.larger-labels label{
   font-size: 1.4em; //whichever size you wish.

A good way to check which element you need to style is to check in the Chrome Element Inspector (F12 while in your browser). Using this you can look at the HTML layout, and format / style your application accordingly. After you know which object to style, put in a class in your css and add that to the required element.

If, for some reason your element gets overruled, you might want to add !important to the css.


.boldclass {
font-weight:bold !important;

Add a class name to the description field in the snippet and reference that in your CSS.

Erik Heddema wrote a nice how-to on how to update your styling: