Tùy chỉnh chủ đề con Luxeritas (style.css)
Luxeritas là một chủ đề Wordpress miễn phí và có tính ứng dụng cao được sản xuất tại Nhật Bản.Trong blog này, tôi sẽ giới thiệu các nội dung tùy chỉnh style.css của chủ đề con.
Cách chỉnh sửa chủ đề con Luxeritas
Có hai cách để chỉnh sửa style.css
1. Nhập trực tiếp vào "Style Sheet: style.css"
Màn hình quản lý: Luxeritas → Chỉnh sửa chủ đề con → Chọn thẻ “style.css”
Viết mã sau "/* Bên dưới, viết kiểu cho chủ đề con theo sở thích của bạn. */".
2.Nhập vào "CSS bổ sung" của tùy chỉnh giao diện
Màn hình quản lý: Luxeritas → Tùy chỉnh (giao diện) → CSS bổ sung
Bạn nên làm điều này vì bạn có thể xem kết quả phản ánh mã cùng lúc khi nhập mã.
Nội dung tùy chỉnh của style.css
Tiêu đề trang web in đậm
Đối với những người nói rằng văn bản tiêu chuẩn hơi mỏng và ít để lại ấn tượng.
/* tiêu đề trang web */ #sitename { font-weight: bold;}
Thêm bóng vào cuối menu dải để làm cho nó trông giống như một vật liệu
Nó có một cái bóng...
Nó sẽ là cái này.Đó là một sự khác biệt tinh tế, nhưng bầu không khí của trang web thay đổi bất ngờ.
/*shadow under global nav*/ #nav { box-shadow: 0 2px 10px rgba(0,0,0,.2) }
Không thể đặt màu di chuột từ tùy chỉnh giao diện
Màu di chuột tiêu chuẩn cho tiêu đề bài viết và bài viết trước và sau là màu đỏ.Tôi không nghĩ có một mục để thay đổi trực tiếp từ tùy chỉnh giao diện.
màu sắc: Bạn có thể thay đổi bằng cách nhập mã màu yêu thích của bạn bên dưới.Nhân tiện, "#00b22f" có màu xanh lục nhạt.Ngoài ra, tiêu đề của bài viết được in đậm để dễ đọc hơn.
/* Tiêu đề bài viết */ .entry-title a:hover{color:#00b22f;} .entry-title {font-weight: bold;} /* Trước và sau bài viết */ #pnavi a:hover{color:#00b22f }
Biến thẻ blog của bạn thành thiết kế material design
Một thẻ blog như thế này sẽ được hoàn thành.Khi bạn di chuột qua nó, nó sẽ trở nên mềm mại.
/* thiết kế thẻ blog */ a.blogcard-href { padding: 0px; min-height: 102px; box-shadow: 0 2px 5px rgba(0, 0, 0, .13); transition: .3s; .blogcard- href:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.25); biến đổi: translateY(-5px); } .blogcard-img { lề: 0px 10px 0 0; p.blog-card-title { lề: 5px 5px 5px 5px; } p.blog-card-desc { display: none; } p.blogcard-link { clear: none; lề: 5px 0 5px 5px; màn hình và (chiều rộng tối đa: 430px){ p .blogcard-link { display: none;
Tôi đã sử dụng trang sau làm tài liệu tham khảo.
Tùy chỉnh thẻ blog Luxeritas để nổi như SANGO
Thay đổi màu trang
Như với tiêu đề bài viết, nó vẫn có màu đỏ và không thể thay đổi từ tùy chỉnh giao diện. "#999999" làm cho nó có màu xám.
.pagination>.active>span, .pagination>li>a:hover{ background: none;background-color: #999999;
Đây là những gì nó trông giống như sau khi thay đổi
Thiết kế lại đám mây thẻ
/* Thiết kế lại đám mây thẻ */ .tagcloud a { border-radius: 3px; /* Các góc bo tròn */ padding-bottom: 1px; padding-left: 6px; padding-right: 3px; }
Tôi làm tròn các góc của thẻ và thu hẹp chiều rộng của dòng.
Xóa phần đệm bên dưới tiêu đề bài viết
Khi tôi đặt quảng cáo google adsense dưới tiêu đề bài viết, tôi đã lo lắng rằng khoảng cách dòng trước và sau quảng cáo có vẻ lớn. Sau khi loại bỏ lề, tôi đã có thể cài đặt nó một cách gọn gàng nhất có thể.
/* Thông tin Meta (Cập nhật) Xóa lề dưới */ .meta, .post .meta { padding: 5px 0; margin-bottom: 0px; } /* Xóa lề trên và dưới bài viết */ .post- title-upper, . post-title-under { lề-dưới: 1px;
Đó là nó.