Creating subheaders between fields

Mosets Tree allows you to create unlimited number of fields to be used with your listings. It is sometimes useful to add subheaders in between fields to visually group a set of related fields together. This article shows how you can do this by adding a few CSS rules.

The following 2 instructions show how to add a subheader called 'Useful Link(s)' on top of the 'Website' field. To target 'Website', we use its custom field ID, 12, in our CSS rules. If you're targetting another field (ie: adding subheader above a different field), you can find out its field ID through your browser's Inspector or Mosets Tree's back-end.

Adding subheader to listing details view

Add the following CSS rules to your site's CSS file:

#field_12 {
    display: block;
    width: 98%;
}
#field_12:before {
    content: "Useful Link(s)";
    display: block;
    font-weight: bold;
    margin-top: 2em;
}

Adding subheader to front-end Add Listing form

#cf12 {
display: block;
}

#input_12:before {
content: "Useful Link(s)";
}