Where to apply style to field?

Assuming you are on "Structure" >> "Display Suite" >> "CSS Classes" (tab) you add the field styles under "CSS classes for fields ". Then from the "Manage display" tab you first for the build mode you want to use, under " Layout for ...." (vertical tab) need to pick a layout. Once you pick and save a layout each field will have a "gear" button to the far right. Click the "gear" and there will be a setting for "Choose additional CSS classes for the field "

Hi - I see the field, but I do not know how to write in a style.

For example, if I wanted to create a style to give margins to the regions?

What is the proper syntax of typing in a style? Thank you! :)

Well, it's underneath the textarea, eg

class_name_1|Friendly name

The 'class_name_1' is a css class in your theme.

Great, that makes everything clear. Thanks and now I know! :0)

So if I want to give a section a margin, I cannot just put some margin code into that textarea, correct? I have to write it into my theme css and then call it here in the textarea for class_name_1|Friendly name.

When you say theme css file, do you mean my sites/all/themes/at-commerce/ds_layouts/layoutname/layoutname.css file or my at-commerce/css/styles.custom.css ?

Hi, please, can you give me an example of what to put in the textarea where it says class_name_1|Friendly name and also an example of the stylesheet entry and which stylesheet it should go on? Thanks, I am very new to css.

Hello,

I've added css classes for regions and fields and have activated the 1 column display (on all view modes), however the gear has not been supplied on the far right of the fields (apart from the default gear).

This is a test for now, but here are the classes I've added for region and field usage:

grid-1|1 grid column
grid-2|2 grid columns
grid-3|3 grid columns
grid-4|4 grid columns
grid-5|5 grid columns
grid-6|6 grid columns
grid-7|7 grid columns
grid-8|8 grid columns
grid-9|9 grid columns
grid-10|10 grid columns
grid-11|11 grid columns
grid-12|12 grid columns
alpha|First column in row
omega|Last column in row

I've also tried with underscores, but no such luck.

Any thoughts?

Works fine here, I see the classes for regions at the bottom fieldset (called 'custom classes') and I can add them on fields as well.
Note, you need field templates enabled though, configurable at admin/structure/ds/list/extras (which is in the 'Extras' module).

Also, try setting the fields and saving, and then the gears should appear fine (there are some problems with those which are addressed in another issue, but classes should work fine)

Indeed. Just needed to enable ds_extras and enable field templates as mentioned.
Thanks!

When adding a custom class to a 1-col display it is not working.

#1673866: Support for 1 column layouts