RiPro美化教程

9、首页推荐分类美化

第一步 diy.css 添加样式，直接扒的，我也不同，也不敢问

修改后效果：

/*
* dark-mode
*/
.ripro-dark .pb-0 {
    background: #1e1e1f;
}
.ripro-dark .alert-dark {
    background-color: #0e0e0e;
}
.ripro-dark .card-box .author-info {
    background: #181819;
}
.ripro-dark .card-box .author-info h3 {
    color: #eeeeee;
}
.ripro-dark .widget-userinfo .author-fields div {
    background-color: #131315;
}
.ripro-dark .navbar .navbar-button{
    background-color: #1e1e1f;
    border: 1px solid #1e1e1f;
    color: #d4e2ff;
    background-image: none;
    -webkit-animation: none;
}
.ripro-dark .off-canvas .canvas-close{
    background-color: #1e1e1f;
    border: 1px solid #1e1e1f;
    color: #d4e2ff;
    background-image: none;
    -webkit-animation: none;
}
.ripro-dark .burger{
    background-color: #1e1e1f;
    border: 1px solid #1e1e1f;
    color: #d4e2ff;
    background-image: none;
    -webkit-animation: none;
}
.ripro-dark .burger:before {
    background-color: #d4e2ff;
    background-image: none;
    -webkit-animation: none;
}
.ripro-dark .burger:after {
    background-color: #d4e2ff;
    background-image: none;
    -webkit-animation: none;
} 
.ripro-dark .navbar .user-pbtn {
    background-color: #1e1e1f;
    border: 1px solid #1e1e1f;
    color: #d4e2ff;
    background-image: none;
    -webkit-animation: none;
}
.ripro-dark .tap-dark.navbar-button{
    box-shadow:0 1px 2px rgba(0,0,0,.3);
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-name:breathe;
    -webkit-animation-duration:2700ms;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
}
.ripro-dark .post-grid{
    border: 1px solid #2d2d2d;
}
.ripro-dark .banner-17codesign{
	background: #1e1e1f;
}
.ripro-dark .entry-thumbnails-17codesign{
	background: #0e0e0e;
	border: 1px solid #0e0e0e;
    box-shadow: 0 4px 12px 0 #171616;
}
.ripro-dark .codesign-tgroup{
	border-bottom: 1px solid #232426;
}
.ripro-dark .article-content .entry-header .entry-title {
    border-bottom:none;
}
.ripro-dark .entry-navigation{
	background-color: #171515;
}
.ripro-dark .article-nav span.article-nav-next::before{
	background-color: #232426;
}
.ripro-dark .module.parallax img {
    display: block;
}
@-webkit-keyframes breathe {
    0% {
    opacity:.2;
    box-shadow:0 1px 2px rgba(255,255,255,0.1);
}
100% {
    opacity:1;
    box-shadow: 0 1px 40px rgb(0, 86, 255);
}
}

第二步 修改主题文件/主题目录/parts/home-mode/catbox.php，替换代码：

<div class="entry-thumbnails">
						<div class="big thumbnail">
								<h3 class="entry-title"><?php echo esc_html( $category->cat_name ); ?></h3>
							<img class="lazyload" data-src="<?php echo esc_url( $thumbnails[0] ); ?>">
						</div>
						<div class="small">
							<div class="thumbnail">
								<?php if ( isset($thumbnails[1]) ) : ?>
									<img class="lazyload" data-src="<?php echo esc_url( $thumbnails[1] ); ?>">
								<?php else : ?>
									<img class="lazyload" data-src="<?php echo esc_url( $thumbnails[0] ); ?>">
								<?php endif; ?>
							</div>
							<div class="thumbnail">
								<?php if ( isset($thumbnails[2]) ) : ?>
									<img class="lazyload" data-src="<?php echo esc_url( $thumbnails[2] ); ?>">
								<?php else : ?>
									<img class="lazyload" data-src="<?php echo esc_url( $thumbnails[0] ); ?>">
								<?php endif; ?>
								<span>+<?php echo esc_html($category->category_count); ?></span>
							</div>
						</div>
					</div>

替换为

<div class="entry-thumbnails-17codesign">
<h3 class="entry-title-17codesign"><?php echo esc_html( $category->cat_name ); ?></h3>
<span class="description-17codesign"><p><?php echo category_description( $cat_id ); ?></p></span>
<div class="group-17codesign">
	<div class="thumbnail-17codesign"><img class="lazyload" data-src="<?php echo esc_url( $thumbnails[0] ); ?>" alt=""></div>
	<div class="thumbnail-17codesign"><img class="lazyload" data-src="<?php echo esc_url( $thumbnails[1] ); ?>" alt=""></div>
	<div class="thumbnail-17codesign"><img class="lazyload" data-src="<?php echo esc_url( $thumbnails[2] ); ?>" alt=""></div>
	<span>+<span class="counter"><?php echo esc_html($category->category_count); ?></span></span>
</div>
</div>