Cách chuyển khung nhận xét mặc định comment form sang nền tối

Dạo quanh một số Blog, mình để ý thấy các bạn có đặt nút chuyển sang nền tối, mọi thứ rất hoàn hảo duy chỉ có khung nhận xét mặc định vẫn có nền sáng nhìn không được thẩm mĩ cho lắm mà các bạn cũng biết không thể chỉnh sửa css mặc định cho comment form vì nó nằm trong thẻ iframe nhưng các bạn có thể cài đặt skin var trong b:skin.

Nếu các bạn có đọc bài viết về cách tùy biến khung nhận xét iframe mặc định của Blogger mà mình đã đăng vài hôm trước, áp dụng theo hướng dẫn các bạn có thể chuyển khung nhận xét mặc định comment form sang nền tối.

Blogger mặc định cho phép người dùng chỉnh sửa được màu nền backgroud, thể loại font chữ, kích cỡ font, màu văn bản hiển thị, màu của liên kết, đối với màu nền các bạn có thể thay đổi thành như sau:

1. Chỉnh sửa màu nền

Giả sử màu nền backgroud của nó lấy giá trị là #f2f6fb

<Variable name="posts.background.color" description="Post background color" type="color" default="#f2f6fb" value="#f2f6fb"/>

+ Áp dụng nếu theme các bạn sử dụng nút chuyển đổi, các bạn sửa giá trị lại thành

<Variable name="posts.background.color" description="Post background color" type="color" default="transparent" value="transparent"/>

=> Khi trích xuất html, iframe sẽ có nền css html background:transparent và nó sẽ lấy cùng màu nền của thành phần element cha

+ Áp dụng nếu theme các bạn chỉ sử dụng nền tối, các bạn sửa giá trị lại thành mãu màu theo ý thích, ví dụ

<Variable name="posts.background.color" description="Post background color" type="color" default="#282828" value="#282828"/>

=> Khi trích xuất html, iframe sẽ có nền css html background:#282828

2. Chỉnh sửa màu văn bản

Riêng giá trị màu văn bản, nếu theme các bạn chỉ sử dụng nền tối các bạn chỉ định màu cụ thể ví dụ

<Variable name="posts.text.color" description="Post text color" type="color" default="#fff" value="#ffffff"/>

Nhưng nếu theme sử dụng nút chuyển đổi màu thì các bạn chỉ có thể lựa màu nào nhìn được cả nền tối lẫn nền sáng, chẳng hạn như màu xám

<Variable name="posts.text.color" description="Post text color" type="color" default="#d3d3d3" value="#d3d3d3"/>

Như đã đề cập ở bài cũ, mỗi template đều khai báo biến khác nhau chứ không giống nhau cho nên các bạn cần xác định đúng biến tức là các dòng Variable như ở trên để cài đặt mã màu chính xác.