Tạo theme Bootstrap P2: Viết CSS cho trang chủ Website

Ở bài trước của Serie Thiết kế giao diện WordPress bằng Bootstrap mình đã hướng dẫn các bạn viết sườn HTML cho trang chủ của website bằng Bootstrap, trong bài này mình sẽ nói về CSS để trang trí cho trang chủ vừa tạo HTML xong.

Trước tiên mình sẽ thay những hình ảnh demo vào website để cho bắt mắt 1 chút, các bạn có thể không cần thay cũng được.

Viết CSS cho Header

Trước tiên hết bạn cần phải thêm đoạn code sau vào trước thẻ </head> của file index.html để chỉ đường dẫn đến file style.css.

<link href="style.css" rel="stylesheet">

Tiếp theo ta viết code CSS cho phần header như sau:

header{
  .logo{
    h1{
      font-size: 25px;
    }
  }
  .search{
    padding: 15px;
  }
}

Giải thích: Như mình đã nói ở phần trước thì ta đang sử dụng ngôn ngữ LESS để viết CSS nhanh chóng hơn nên đòi hỏi bạn phải mở phần mềm Prepros lên và chắc chắn rằng đã add thư mục chứa code website vào project của Prepros như hướng dẫn ở các phần trước.

  1. font-size: 25px; phần này sẽ định kích cỡ chữ mà trong trường hợp này là cho thẻ h1.
  2. padding: 15px; code này dùng để thêm khoảng không giữa các thành phần bên trong div mà ở đây là ô tìm kiếm trong thẻ div “search”.
  3. Phần menu chính của trang web thì mình đã dùng code do Bootstrap cung cấp nên không cần phải css, nếu các bạn muốn đẹp hơn thì có thể tùy chỉnh nó lại dựa trên các class trong file index.html.

Viết CSS cho Wrapper

Ở phần này mình copy nội dung trong div “box-index” ra làm 2 để căng chỉnh khoảng cách giữa các box-index với nhau, sau này thêm nhiều box nữa cho tiện.

Code của phần Wrapper như sau:

#wrapper{
  .content{
    .slider{
      img{
        width: 100%;
        height: auto;
      }
    }
    .box-index{
      h2{
        text-transform: uppercase;
        font-size: 23px;
        color: #444;
        border-bottom: 3px solid #EEE;
        position: relative;
        margin-bottom: 20px;
        padding: 5px 0;
        &::before{
          content: "";
          display: block;
          width: 70px;
          background: #2673BB none repeat scroll 0% 0%;
          height: 3px;
          position: absolute;
          bottom: -2px;
          left: 0px;
        }
      }
      .item{
        margin-bottom: 20px;
        h3{
          font-size: 16px;
        }
      }
    }
  }
  .sidebar{
    .sidebar-item{
      margin-bottom: 30px;
      h4.widget-title{
        text-transform: uppercase;
        font-size: 20px;
        color: #444;
        border-bottom: 3px solid #EEE;
        position: relative;
        margin: 0;
        margin-bottom: 20px;
        padding: 5px 0;
        &::before{
          content: "";
          display: block;
          width: 70px;
          background: #2673BB none repeat scroll 0% 0%;
          height: 3px;
          position: absolute;
          bottom: -2px;
          left: 0px;
        }
      }
      .textwidget{
        img{
          width: 100%;
          height: auto;
        }
      }
    }
  }
}

Giải thích: Code được chia ra làm 2 phần chính là content và sidebar mình sẽ giải thích lần lượt các dòng code có trong phần này để các bạn dễ hình dung.

  1. img{width: 100%; height: auto;} đoạn này nghĩa là định dạng thẻ hình ảnh cho div chứa nó với chiều rộng là 100% và chiều cao tự động co giãn theo tỷ lệ ảnh làm cho ảnh không bị bóp méo.
  2. text-transform: uppercase; là đoạn code dùng để viết hoa toàn bộ đoạn text mà cụ thể ở đây là thẻ h2.
  3. color: #444; đoạn code này dùng để đổi màu cho chữ, nếu các bạn có cài plugin Color Picker cho Sublime Text thì có thể bấm tổ hợp phím Ctrl + Shift + C để mở bảng chọn mã màu.
  4. border-bottom: 3px solid #EEE; đoạn code này giúp bạn kẻ viền dưới cho thẻ chứa nó, các bạn có thể đổi bottom thành top, left, right tùy theo nhu cầu của mình.
  5. position: relative; thẻ này là thẻ xác định vị trí bao ngoài cho thành phần, position: absolute; sẽ xác định vị trí tuyệt đối dựa trên thẻ relative gần nhất nhờ các thẻ bottom, top, left, right.
  6. margin-bottom: 20px; Thẻ này nhằm tạo ra khoảng không bao ngoài bên dưới đối tượng đang được chọn.
  7. content: “”; thẻ này định nội dung cho phần before của thẻ h2.
  8. background: #2673BB none repeat scroll 0% 0%; đoạn này nhằm tạo màu nền cho thành phần.
  9. height: 3px; thẻ định chiều cao cho thành phần.

Ở đoạn CSS trên có 2 thành phần giống nhau giữa thẻ h2 của box-index và thẻ h4 của tiêu đề sidebar tương đối giống nhau, các bạn có thể gộp nó lại thành 1 ở đây mình chia ra để các bạn mới học dễ hình dung.

Viết CSS cho Footer

Phần này thì code rất đơn giản nên chắc mình cũng không cần phải giải thích gì

footer{
  background: #2E2E2E;
  color: #fff;
  padding: 20px;
}

Và đây là thành quả của chúng ta:

Giao diện trang chủ website được thiết kết bằng Bootstrap

Giao diện trang chủ website được thiết kết bằng Bootstrap

Các bạn có thể download source của bài hôm nay tại đây

Như thế là chúng ta đã viết CSS trang trí cho trang chủ trang web xong, ở phần tiếp theo mình sẽ hướng dẫn các bạn viết các thành phần khác của trang web như: Trang danh mục, trang bài viết và page.

Bài Viết Cùng Series:

GỬI BÌNH LUẬN