In part 4 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.
Yes, we will add CSS style directly into our views.
Lets go back to our view tours (if you are new to this series, please read how to create a Drupal views)
In part 4 we have already changed Format for Featured blocks to fields, lets apply the same for page display:
Now lets add some fields to our view:
By default we already have Title field
- Add Photo field
- Add Body Field
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.
These are the settings, I added to Photos field.
Ok, now, save the view, and lets see, how it looks in real.
Nothing impressive, right? How to make this look better? By using CSS.
Head back to your view, and add a new field - Custom text:
Hey, did you just pass a CSS via Views? Yes, I did, indeed.
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.
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:
To avoid this, we must exclude all fields, except rewritten Custom Text field from display. Like this:
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?
In part 2 of these tutorial series, I showed how to apply a subtheme based on Bootstrap. Today is time to add some CSS to our sub-theme.
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.
Enter your CSS:
I will use something like this:
#grid4 {
float: left;
width: 20%;
-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.2);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
height: 266px;
margin-bottom: 30px;
margin-right: 10px;
padding:10px;
}- Next head for mycustomtheme.info file in your theme folder, open it and a line:
- stylesheets[all][] = css/custom.css in Style-sheets section
- Flush all caches, to make sure your style applies
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
