toila.net

Bằng một vài thủ thuật CSS, chúng ta có thể tuỳ chỉnh hộp đăng nhập của hệ thống Drupal phù hợp với nhu cầu:

1. Thêm một icon vào góc phải, trên
2. Đặt label và text field cùng hàng
3. Canh nút “Đăng nhập” đều biên phải so với textfield username và password
4. Đặt các liên kết “Đăng ký”, “Quên mật khẩu” ngang hàng với nút “Đăng nhập”

Xác định các phần tử DOM cần thao tác

Nội dung được Drupal sinh ra có kèm theo các class và ID khá chi tiết. Dựa vào các ID và class này, chúng ta có thể khai báo các câu lênh CSS để tuỳ biến nội dung được trình bày ra giao diện khá dễ dàng. Đối với trường hợp của chúng ta, chúng ta nhận thấy, block đăng nhập được Drupal sinh ra có

• Class: block và block-user
• ID: block-user-0

Để truy cập đơn giản, tôi sử dụng ID của block: block-user-0

Thêm một icon vào góc phải, trên

Đặt icon cần gắn vào thư mục cùng cấp với tập tin style.css của theme đang sử dụng. Thí du, tôi sử dụng icon icon_login.gif thì cấu trúc thư mục có dạng sau:

• icon_login.gif
• style.css
• ...

Khi icon cần thiết đã được định vị, chúng ta mở tập tin style.css để thêm vào đoạn mã sau để chèn icon vào góc phải, trên của block đăng nhập:

/* truy cập vào tiêu đề của block đăng nhập */
#block-user-0 h2.title {
 
  /* chèn background cho title*/
  background: url(img/icon_login.gif) no-repeat right;
 
  /* Xác định chiều cao của title khi icon bị khuất */
  height: 35px;
 
}

Đặt label và text field cùng hàng

Xem mã HTML của block đăng nhập được sinh ra, chúng thấy, một textfield và label của nó được đặt dưới một thẻ DIV có class là “form-item”. Tận dụng đặc điểm này, chúng ta có thể đặt ngang hàng textfield và label của nó bằng một số dòng lệnh CSS:

#block-user-0 div.form-item {
  /* xác định kiểu trình bày của wrapper là “table” */
  display: table;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
#block-user-0 label {
  /* xác định kiểu trình bày của label là “table-cell” */
  display: table-cell;
  /* canh giữa theo chiều dọc */
  vertical-align: middle;
  /* trôi qua phải */
  text-align: left;
  /* chiều rộng của label là 120px */
  width: 120px;
}
#block-user-0 .form-text {
  /* xác định kiểu trình bày của label là “table-cell” */
  display: table-cell;
  /* trôi qua phải */
  float: right;
  /* chiều rộng của textfield là 150px */
  width: 150px;
}

Canh nút “Đăng nhập” đều biên phải so với textfield username và password

Nút “Đăng nhập” có class là “form-submit”, việc canh đều khá dễ dàng:

#block-user-0 .form-submit {
  margin-top: 6px;
  float: right;
}

Đặt các liên kết “Đăng ký”, “Quên mật khẩu” ngang hàng với nút “Đăng nhập”

Một vài chiêu cổ điển với các thẻ UL và LI:

#block-user-0 div.item-list {
  margin-top: 10px;
  /* sắp theo biên trái */
  text-align: left;
  /* khoảng trống bên trong */
  padding: 0px;
}
#block-user-0 div.item-list li {
  /* Không xuống hàng */
  display: inline;
  /* khoảng trống bên ngoài */
  margin: 0px;
  margin-right: 7px;
  padding: 0px;
  /* canh cỡ chữ nhỏ hơn, nếu như bị xuống dòng */
  font-size: 11px;
  vertical-align: middle;
  border-bottom: 1px #CCC dotted;
}

Kết quả

=>