Manage Display: Add New Group

  1. 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.

    Unstyled content type

  2. So many issues...  Ideally, this is what we are shooting for.

    Styled content type - what we want it to look like

  3. 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.

    Drag to re-order fields and hide label - manage display

  4. 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.

    Gear icon to get to field collection settings

  5. You can now remove the Edit, Delete, and Add link titles by removing the text from those fields and then click Update.

  6. 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.

    Add Left Column, move above Image and make Image a child of Left column

    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.

  7. Do the same for Right Column.

    Add a Right Column group

  8. 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.

    Left column settings

    Then do the same for the Right Column and click Update.

  9. Next up, managing the display for the fields we created in our field collection that is storing the Dates & Locations.

Next: Manage Display: Field Collection Items »


Training Calendar
CMS Help

If you are experiencing a critical issue with your live website, please contact the IT Customer Service Center at 864-8080 or itcsc@ku.edu.

For questions on CMS policy, look & feel, and all other issues, please visit our help page.

Please contact web services at 864-6415 or webservices@ku.edu for help with your site

Online help can be found under the How-To's section of this website.