Building a Drupal site from scratch - part 7 - Theming views

<p>In <a href="http://reinisfischer.com/building-drupal-site-scratch-part-5-custom-fro… 4</a> in tutorial series how to build a Drupal site from scratch, I am showing how to build views. Now let's upgrade them, by adding additional fields and even CSS style.</p><p>Yes, we will add CSS style directly into our views.</p><p>Lets go back to our view tours (if you are new to this series, please read <a href="http://reinisfischer.com/building-drupal-site-scratch-part-4-creating-v… to create a Drupal views</a>)</p><p>&nbsp;</p><p>In part 4 we have already changed Format for Featured blocks to fields, lets apply the same for page display:</p><p><img src="http://reinisfischer.com/sites/default/files/changestyle.JPG&quot; alt="" width="1076" height="434"></p><p>&nbsp;</p><p>Now lets add some fields to our view:</p><p>By default we already have Title field</p><ul><li>Add Photo field</li><li>Add Body Field</li></ul><div><img src="http://reinisfischer.com/sites/default/files/bodyfield.JPG&quot; alt="" width="743" height="568"></div><div>&nbsp;</div><div>As you can see from picture above, I have changed default formater to Trimmed, and added Trim length to 200. You can play with settings under Rewrite results as well.&nbsp;</div><div>&nbsp;</div><div><img src="http://reinisfischer.com/sites/default/files/photofields.JPG&quot; alt="" width="749" height="557"></div><div>&nbsp;</div><div>These are the settings, I added to Photos field.</div><div>&nbsp;</div><div>Ok, now, save the view, and lets see, how it looks in real.</div><div>&nbsp;</div><div><img src="http://reinisfischer.com/sites/default/files/tourspage.JPG&quot; alt="" width="1188" height="463"></div><div>&nbsp;</div><div>Nothing impressive, right? How to make this look better? By using CSS.</div><div>&nbsp;</div><div>Head back to your view, and add a new field - Custom text:</div><div><img src="http://reinisfischer.com/sites/default/files/customtext.JPG&quot; alt="" width="754" height="565"></div><div>&nbsp;</div><div>Hey, did you just pass a CSS via Views? Yes, I did, indeed.</div><div>As you can see from picture above I'm using Replacement Patterns to override our view. And I'm passing them together with custom CSS.</div><div>&nbsp;</div><div>But, before, you save (Of course you can save your view now) you must be aware, we didn't exclude fields from our view display, and the result will look like this:</div><div>&nbsp;</div><div><img src="http://reinisfischer.com/sites/default/files/multiplefields.JPG&quot; alt="" width="583" height="537"></div><div>To avoid this, we must exclude all fields, except rewritten Custom Text field from display. Like this:</div><div><img src="http://reinisfischer.com/sites/default/files/excludetitle.JPG&quot; alt="" width="749" height="557"></div><div>&nbsp;</div><div>&nbsp;</div><div>Ok, what we have done so fare? We have created a view, added few custom fields, and made a Custom text field to rewrite all values wrapped in CSS. Where to go with CSS?</div><div>&nbsp;</div><div>In part 2 of these tutorial series, I showed <a href="http://reinisfischer.com/building-drupal-site-scratch-part-2-applying-s… to apply a subtheme based on Bootstrap</a>. Today is time to add some CSS to our sub-theme.</div><div>&nbsp;</div><div>I prefer all custom CSS files to keep in separate style sheet, if you are just as me, then you should create a new .css file on your mycustotheme/css folder, I will name it custom.css.</div><div>Enter your CSS:</div><div>I will use something like this:</div><div><blockquote><pre>#grid4 {<br>float: left;<br>width: 20%;<br>-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.2);<br>-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.2);<br>box-shadow: 0 2px 8px rgba(0,0,0,0.2);<br>height: 266px;<br>margin-bottom: 30px;<br>margin-right: 10px;<br>padding:10px;<br>}</pre></blockquote></div><div><ul><li>Next head for mycustomtheme.info file in your theme folder, open it and a line:</li><li>stylesheets[all][] = css/custom.css in Style-sheets section</li><li>Flush all caches, to make sure your style applies</li></ul></div><div><img src="http://reinisfischer.com/sites/default/files/themedtourpage.JPG&quot; alt="" width="1094" height="617"></div><div>&nbsp;</div><div>Well. is up to you how you gonna style your view display, but I hope this give you a overall impression - how to add and theme fields via views</div><div>&nbsp;</div>