Manage Display: Add New Group
- Congratulations, you have created a custom content type. It is collecting all the information you want, but odds are it is not looking the way you want. At this point you can test it out by going to Add content and selecting the new content type. Let's try it out. At this point, this is what you will get.
- So many issues... Ideally, this is what we are shooting for.
- Go back into your content type (Structure -> Content Types) and click on Manage Display for your content type so we can begin to clean it up. On the Manage Display tab you will notice the order is a little out of whack. It is important to note that the order of the fields in the Manage Fields tab only affect the order of the fields when you add new content. The order of the fields in the Manage Display tab relate to the order the fields are displayed after that content has been published using your new content type. Therefore, click and drag the fields into the order you want them to be in.
You will notice that in the image from step 1 that all of the fields, but the Body field, are labeled. Let's get rid of that. Change all the labels to <Hidden> in the label drop down menus for all fields, reorder the fields if necessary, and then click on Save.
- Next we want to get rid of the Edit, Delete, and Add links that are appearing. Those are created with our field collection for Dates & Locations. To remove those, click on the gear icon on the Dates & Locations row.
- You can now remove the Edit, Delete, and Add link titles by removing the text from those fields and then click Update.
- Now that we have removed the flotsam and jetsam, let's group the areas so that we have a left column that will contain the image and a right column for everything else. Under Add new group enter in a label, group name and set the format to Div. You can then click and drag it to where you want it to be. Since this is the left column that will contain the Image field, put it above the Image field and then make the Image field a child of the Left Column div and click Save.
Now everything nested under the Left Column div will be wrapped in a special div with a class of "group_left_col" that can then be used as a hook for your CSS for styling.
- Do the same for Right Column.
- By default Drupal will add some interesting treatments to your div -- for the purposes of this excerise, we do not want them. Therefore, like in step 4, we will be clicking on the gear icon for the Left Column and the Right Column and change those settings. We do not want the div to act like an accordion, so we will set the Fieldgroup settings to open. We do not want a label to announce to the world that this is a "Left Column," so we will change Show label to No. While we can use "group_left_col" as a class in our CSS for styling, you have the option to add an additional one here as well. This is helpful if you already have a class created in your CSS already. Click Update.
Then do the same for the Right Column and click Update.
- Next up, managing the display for the fields we created in our field collection that is storing the Dates & Locations.