Đôi khi khi sử dụng các chủ đề WordPress, nhưng đặc biệt là khi sử dụng chủ đề Genesis Sample, bạn sẽ gặp phải tình trạng các phần tử biểu mẫu trong một số plugin không được tạo kiểu theo cách bạn mong đợi. Tôi đã thấy điều này trước khi sử dụng plugin biểu mẫu và lịch sự kiện.
Gần đây tôi đã thấy nó một lần nữa với một plugin truy vấn phân loại và một plugin thương mại điện tử. Ví dụ, có vẻ như không có mặt hàng nào trong giỏ hàng khi chỉ có một mặt hàng ở đó.
Lý do cho việc tạo kiểu không hoàn toàn như bạn mong đợi là sự kết hợp giữa các kiểu đầu vào cho chủ đề con và các kiểu trong plugin. Nó không khó để sửa chữa mặc dù. Vì vậy, đây là một vài điều bạn có thể tìm kiếm.
Kiểu đầu vào
Trong khi làm việc với iThemes Exchange, khi một mặt hàng được thêm vào giỏ hàng, bạn không thể thấy rằng nó đã được thêm; xem hình trên. Dưới đây là các kiểu nhập giỏ hàng:
.it-exchange-super-widget .cart-items-wrapper .cart-item .item-info input {
max-width: 50px;
text-align: center;
}
Và đây là các kiểu đầu vào cho chủ đề Genesis Sample mặc định:
input,
select,
textarea {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 1px 1px 3px #eee inset;
color: #999;
font-size: 14px;
font-size: 1.4rem;
padding: 16px;
padding: 1.6rem;
width: 100%;
}
Lưu ý phần đệm: 16px; và đệm: 1.6rem; Phần đệm lớn thường có thể là vấn đề với các plugin sử dụng trường đầu vào nhỏ hơn, đặc biệt nếu plugin đặt chiều rộng hoặc chiều rộng tối đa cho đầu vào không đủ lớn để bù đắp cho phần đệm thừa, như trong giỏ hàng thương mại điện tử .
Có hai điều bạn có thể làm để sửa kiểu nhập để mục giỏ hàng hiển thị. Bạn có thể làm cho trường nhập giỏ hàng rộng hơn hoặc bạn có thể sử dụng ít đệm hơn trên đó.
Đối với trường đầu vào rộng hơn, bạn sẽ sử dụng:
.it-exchange-super-widget .cart-items-wrapper .cart-item .item-info input {
max-width: 70px !important;
}
Để ít đệm hơn, bạn sẽ sử dụng:
.it-exchange-super-widget .cart-items-wrapper .cart-item .item-info input {
padding: 8px;
}
Đây là cách hai phong cách này trông; bạn có thể thấy mặt hàng được thêm vào giỏ hàng với cả hai thứ đó. Tùy thuộc vào bạn để quyết định phương pháp nào bạn thích cho chủ đề của mình.
Lưu ý rằng nếu bạn không thấy các thay đổi đối với kiểu của mình khi thêm mã này, bạn có thể cần sử dụng khai báo! Important để ghi đè các kiểu plugin, như trong ví dụ nhập giỏ hàng đầu tiên ở trên.
Hộp kiểm tra và Hộp đài
Đây là hình ảnh cho các hộp kiểm cho một plugin truy vấn phân loại được sử dụng gần đây, nhưng việc sử dụng hộp kiểm với các plugin biểu mẫu thường làm điều gì đó tương tự.
Giải pháp là thêm chiều rộng và chiều cao vào hộp kiểm và đầu vào hộp radio.
Lưu ý rằng bạn cũng có thể muốn thay đổi căn chỉnh theo chiều dọc đối với một số plugin (vì vậy tôi đã bao gồm nó) và với một số plugin, bạn có thể cần sử dụng khai báo! Important. Bạn cũng có thể sử dụng chiều rộng và chiều cao lớn hơn một chút, tùy thuộc vào kích thước bạn muốn hộp kiểm của mình. Tôi thường sử dụng 16px hoặc 18px.
input[type="checkbox"],
input[type="radio"] {
height: 14px;
width: 14px;
vertical-align: middle;
}
Và sau đó bạn có các hộp kiểm được căn chỉnh độc đáo.
Mặc dù đây là những giải pháp chung, nhưng chúng cung cấp điểm khởi đầu, nếu bạn thấy hộp kiểm, hộp radio hoặc đầu vào của mình không được tạo kiểu như bạn mong đợi.