danielebarchiesi@4
|
1 <p>This tutorial will guide you through specifying the elements for your views output using <em>Semantic Views : Fields</em> settings. This tutorial assumes you have Views installed.</p>
|
danielebarchiesi@4
|
2 <ul>
|
danielebarchiesi@4
|
3 <li><strong>Create a view</strong>
|
danielebarchiesi@4
|
4 <ol>
|
danielebarchiesi@4
|
5 <li>Visit the <a href="base_url:admin/build/views">Views administration page</a></li>
|
danielebarchiesi@4
|
6 <li>Click Add new view. Type in the name test_semantic view, select type 'Node', click <strong>Next</strong>.</li>
|
danielebarchiesi@4
|
7 </ol>
|
danielebarchiesi@4
|
8 </li>
|
danielebarchiesi@4
|
9 <li><strong>Modify the view to use Semantic Views options</strong>
|
danielebarchiesi@4
|
10 <ol>
|
danielebarchiesi@4
|
11 <li>Locate the Basic settings column, click the <strong>Style:</strong> settings. </li>
|
danielebarchiesi@4
|
12 <li> At the bottom section of this area, you will see a list of options under <em>How should this view be styled</em>. Select <em>Semantic Views</em>, and click <strong>Update</strong>. </li>
|
danielebarchiesi@4
|
13 <li>Click options next to <strong>Row style. </strong>Select <em>Semantic Views : Fields</em>.</li>
|
danielebarchiesi@4
|
14 </ol>
|
danielebarchiesi@4
|
15 </li>
|
danielebarchiesi@4
|
16 <li><strong>Select which fields to style</strong>
|
danielebarchiesi@4
|
17 <ul>
|
danielebarchiesi@4
|
18 <li>Click the <strong>+</strong> icon next to <strong>Fields</strong>.</li>
|
danielebarchiesi@4
|
19 <li>In the <strong>Groups</strong> drop-down menu select 'Node', then check <em>Node: Body</em>, <em>Node: Post Date</em> and <em>Node: Title</em>. Click <strong>Add</strong>.</li>
|
danielebarchiesi@4
|
20 <li>Under the next three options for Body, Post Date and Title, click <strong>Update</strong>, staying with the default settings for this tutorial.</li>
|
danielebarchiesi@4
|
21 <li>Scroll back up to <strong>Fields</strong> and click the <strong>↑↓</strong> icon to rearrange fields, so it is Title first.</li>
|
danielebarchiesi@4
|
22 </ul>
|
danielebarchiesi@4
|
23 </li>
|
danielebarchiesi@4
|
24 <li><strong>Preview the default </strong></li>
|
danielebarchiesi@4
|
25 <ol>
|
danielebarchiesi@4
|
26 <li>At this stage you can preview the default settings. Click <strong>Save</strong>.</li>
|
danielebarchiesi@4
|
27 <li>View the unstyled fields previewed at the bottom of the Views User Interface.</li>
|
danielebarchiesi@4
|
28 </ol>
|
danielebarchiesi@4
|
29 <li><strong>Modify the output for these fields</strong> </li>
|
danielebarchiesi@4
|
30 <ol>
|
danielebarchiesi@4
|
31 <li>Click the settings gear icon next to Row style: Semantic Views : Fields.</li>
|
danielebarchiesi@4
|
32 <li>Scroll down to the <em>Row style options</em>, you can see the menu built for the fields you have chosen Title, Body and Post date.</li>
|
danielebarchiesi@4
|
33 <li>Do not capitalize the elements and do not use <> symboles to specify the elements in the form.</li>
|
danielebarchiesi@4
|
34 <li>Under <em>Ttitle</em> specify the element: <strong>h3</strong>. Optional: You can also edit your settings and specify custom Class attributes. put spaces in between each class attibute, and do not wrap class attributes in "double quotes".</li>
|
danielebarchiesi@4
|
35 <li>Under <em>Body</em> specify the element <strong>div</strong>. You are likely to have other block level elements such as a paragraph or blockquote. </li>
|
danielebarchiesi@4
|
36 <li>Under <em>Post date</em> specify the element <strong>p.</strong></li>
|
danielebarchiesi@4
|
37 <li>Select Skip empty fields</li>
|
danielebarchiesi@4
|
38 <li>Click <strong>Update</strong>.</li>
|
danielebarchiesi@4
|
39 <li>Click <strong>Save</strong> to save your settings.</li>
|
danielebarchiesi@4
|
40 </ol>
|
danielebarchiesi@4
|
41 <li><strong>You're done!</strong> You should see the modifications to your view when you preview it. </li>
|
danielebarchiesi@4
|
42 </ul>
|