Hướng dẫn chèn CSS Style vào trong Drupal 7 Views

Hướng dẫn chèn CSS Style vào trong Drupal 7 Views

This week one of our OSTraining members was working with the Views module.

They were able to create views, but weren't sure how to improve their design.

In this tutorial, we're going to show you how to apply CSS to your views so you can add both color and width.

#1: Adding CSS color to a column

Here is a very standard Drupal table that I've created. I'm going to add color to one of the columns, the Title:


  • In editing the view, click on the field you want to edit:


  • Click Style Settings and you'll see options for adding HTML and CSS to the field:


We're now going to customize the field's CSS.

  • Click "Create a CSS class".

  • Enter a new CSS class name. In this example, I used "views-title":


Now, we're going to go to our theme's files to add the CSS.

Many themes use style.css for their main CSS, but your theme maybe different:


Inside the CSS file, add the CSS. Here we're going to change the background color to pink:


  • Save the CSS file.

  • Clear the cache on your Drupal site via Configuration > Performance.

  • Your CSS changes should now apply to the Title column:


#2: Adding width to Views columns

Let's customize our table in a different way. Notice that one column, "Type" is very narrow. Let's even out the width of our columns.


Inside each field, choose these settings:

  • Click "Customize label HTML".

  • Click "CSS class".

  • Enter "views-table-width" into the CSS class box:


I repeated that process for all four fields in the view.

As before, we can now add the CSS we need to our theme. In this case, we'll give each column a width of 25%:


Now all of the tables in our column should have an equal width:


Note: CSS does not apply to previews

One important thing to note is that your CSS will not apply inside the Views editing screen. This can sometimes make it a little harder to test changes accurately.

If you are working on changes to a live view, it may be worth making a clone of that view or working on a test site.


Bạn thấy bài viết này như thế nào?: 
No votes yet




Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

Instagram Tips – Use Instagram Like a Pro
Instagram Tips – Use Instagram Like a Pro

Instagram is one of the most popular app available for Apple iOS and very soon it was available for Android users.

Hướng dẫn sử dụng Drush thực hiện automate các task
Hướng dẫn sử dụng Drush thực hiện automate các task

Drush Make is well-known as an advanced tool for Drupal distribution building. But it also can be very useful for those who have never dealt with distributions. 

[Download] Visual Foxpro 9.0
[Download] phần mềm Visual Foxpro 9.0

Visual FoxPro, ký hiệu vắn tắt là VFP, là một hệ quản trị cơ sở dữ liệu (Database Management System -DBMS) trực quan.