Tùy chỉnh một số thành phần của website

364

Như đã nói ở phần trước. Hôm nay mình sẽ ứng dụng các selector đã nói ở phần trước để tùy chỉnh giao diện của 1 website bất kỳ.

Thực chất việc này là ghi đè lên CSS cũa của trang bằng CSS của mình. Tất nhiên là nó chỉ có tác dụng trên máy của bạn mà thôi. Vì ta không thể can thiệp vào mã nguồn của trang đó để thay đổi theo ý mình được :D.

Để làm được việc này mình sử dụng plugin có sẵn của chrome. Có rất nhiều plugin hỗ trợ, nhưng mình thích dùng thằng Stylebot nhất. Ưu điểm của plugin này là có thể cho ta chia sẻ đoạn css của mình lên trang của cộng đồng stylebot.me. Người muốn dùng code của bạn chỉ việc bấm install là xong. 😀

Ở bài này chúng ta cùng phóng to cái cửa sổ chat của facebook cho nó bự và màu mè chút nhé :D.

86617836c24688ea88a6e9debe515462c463766d

Đầu tiên, chúng ta cần inspect để lấy được selector cần custom cái đã. Bạn có thể bấmF12 hoặc click chuột phải vào vùng chọn và chọn inspect

db02d47d44ad3038b2a312106f4e699d116e65b9

Tiếp theo là chọn thằng selector tiềm năng :D. Thực ra bạn chọn thằng nào cũng được. Miễn là nó đáp ứng được 2 yêu cầu:

  • Nó có hiệu lực với tất cả các thành phần tuơng tự. Ở đây chọn selector làm sao để mọi cửa sổ chat đều dùng chung selector này.
  • Selector không bị trùng ở nơi khác(thường thì mình hay dùng nhiều class liền kề cho dễ phân biệt). Ví dụ như ta chỉ muốn nó co hiệu lực với phần cửa sổ chat. Để kiểm tra xem nó bị dùng chung ở những đâu. Tốt nhất bạn cứ inspect và bấm ctrl + f trong phần inspect. Search xem chúng được dùng như thế nào sau đó thử chỉnh vài thuộc tính rồi test lại cho chắc ăn :P.

Ok nôm na lý thuyết là thế. Bắt đầu vào phần chính nào:

Để thêm CSS cho trang ta chỉ cần click chuột phải vào trang đó và chọn Stylebot' ->Stylebot Element->Edit Css`. Khi thêm css thì nó sẽ có hiệu lực tức thì.

  1. Tăng độ rộng:

=> Kết quả

e22786ce70c496c853228f59322f22d78da9d58b

2.Tăng chiều cao

3.Đổi màu background tin nhắn nhận

4.Đổi màu background tin nhắn gửi

5.Đổi màu tin nhắn gửi và nhận

Trên đây chỉ là demo rất đơn giản. Ngoài ra chúng ta có thể dùng nó để ẩn đi các quảng cáo hay bất cứ nội dung nào trên website. Đây là 1 số trang mình custom(chủ yếu là ẩn quảng cáo). Nếu có thời gian mong các bạn góp ý cho code sạch đẹp hơn chút.

Techtalk via Viblo

CHIA SẺ