Session Notes

Copy and paste the following CSS into your styles.css

 /* Image style for Article content type */ .article-image {float: left; padding: 10px;} /* Styles for People Content type */ .people-node { width: 100%; float: left; } .people-image { float: left; padding: 0 10px 0px 0px; width: 25%; } .people-right { float: left; width: 70%; text-align: left; } .people-birth { display: inline; } .people-birth span.date-display-single { float: left; } .people-in { float:left; padding-left: 4px; padding-right: 4px; } .field-name-field-people-skills ul { margin-left: -40px; float: left; } .people-right .links { float: left; } .field-name-field-people-skills ul li { display: inline; } .field-name-field-people-skills li + li:before { content: " | "; }

Copy and paste the following into your node--people.tpl.php file:

 <div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>> <?php print $user_picture; ?> <?php print render($title_prefix); ?> <?php if (!$page): ?> <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2> <?php endif; ?> <?php print render($title_suffix); ?> <div class="content"<?php print $content_attributes; ?>> <?php // We hide the comments and links now so that we can render them later. // hide($content['comments']); // hide($content['links']); // print render($content); ?> <div class="people-node"> <div class="people-image"> <?php print render($content['field_people_picture']); ?> </div> <div class="people-right"> <?php print render($content['field_people_skills']); ?> <?php print render($content['body']); ?> <?php print render($content['field_people_real_name']); ?> <div class="people-birth"> <?php print render($content['field_people_date_of_birth']); ?> <?php if ($page): ?><div class="people-in"> in </div><?php endif; ?> <?php print render($content['field_people_place_of_birth']); ?> </div> <p><?php print render($content['field_movies']); ?></p> </div> </div> </div> </div>

Create a template.php file inside your theme directory and paste this code:

 <?php /** * Implements theme_field__field_type(). */ function myosttheme_field__taxonomy_term_reference($variables) { $output = ''; // Render the label, if it's not hidden. if (!$variables['label_hidden']) { $output .= '<h3 class="field-label">' . $variables['label'] . ': </h3>'; } // Render the items. $output .= ($variables['element']['#label_display'] == 'inline') ? '<ul class="links inline">' : '<ul class="links">'; foreach ($variables['items'] as $delta => $item) { $output .= '<li class="taxonomy-term-reference-' . $delta . '"' . $variables['item_attributes'][$delta] . '>' . drupal_render($item) . '</li>'; } $output .= '</ul>'; // Render the top-level DIV. $output = '<div class="' . $variables['classes'] . (!in_array('clearfix', $variables['classes_array']) ? ' clearfix' : '') . '"' . $variables['attributes'] .'>' . $output . '</div>'; return $output; }

Adding Grids One Through Four

Do you want to watch this video lesson? Join now and enjoy all our training videos ...