Create a wrapper div within field groups on node displays

Question

For ease of formatting I would like to add an inner wrapper div inside of field groups displaying on content nodes and node forms. I'm using the Field Group module to display groups in div format.

Currently it's this:

<div class="field-group-format group_user field-group-div group-user required-fields  speed-fast effect-none">
…
</div>

Would like to output this:

<div class="field-group-format group_user field-group-div group-user required-fields  speed-fast effect-none">
<div class="inner">
 … 
</div>
</div>

Answer 1

You can use the theme_preprocess_node hook in your custom theme and add your inner div using the #prefix and #suffix of the fieldgroup. It should be in $variables['content']['name_of_the_fieldgorup']['#prefix'] .

Answer 2

Try hook_field_group_build_pre_render_alter() since node content solution seems not longer working.

/**
 * Implements hook_field_group_build_pre_render_alter().
 * Adds additional wrappers
 */
function [your_theme_or_module_name]_field_group_build_pre_render_alter(&$element) {
  if (!empty($element['group_tabs'])) {
    $element['group_tabs']['#prefix'] = '<div class="field-group-container">';
    $element['group_tabs']['#prefix'] .= '<div class="field-group-row">';
    $element['group_tabs']['#suffix'] .= '</div></div>';
  }
}

Check Field group for developers for more info.

Answer 3

I found that the best way to handle this is to use Views Display Modes from Display Suite.