[日主题][ritheme][ripro-v5]引入bootstrap4-badges徽章 bootstrap4源码下载 首页模块美化 主题美化 二开教程 添加标签彩色云代码 主题更新不影响

一、Wordpress 日主题 ritheme ripro-v5 引入bootstrap4-badges徽章 bootstrap4源码下载

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化:

引入方法（bootstrap所有效果都可以用这种方法）：

1.打开bootstrap.css源文件，查找关键字badge

2.全部复制到：日主题后台→主题设置→基础设置→自定义CSS样式代码

使用方法

<div class="container">
<h2>各种颜色类型的徽章</h2>
<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">浅色</span>
<span class="badge badge-dark">深色</span>
</div>

<div class="container">
<h2>药丸形状徽章</h2>
<span class="badge badge-pill badge-default">默认</span>
<span class="badge badge-pill badge-primary">主要</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-pill badge-info">信息</span>
<span class="badge badge-pill badge-warning">警告</span>
<span class="badge badge-pill badge-danger">危险</span>
</div>

<div class="container">
<h2>徽章嵌入到按钮内</h2>
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>
<button type="button" class="btn btn-danger">
Notifications <span class="badge badge-light">7</span>
</button>
</div>

二、日主题 ritheme ripro-v5 首页最新文章模块美化 主题美化 二开教程

美化效果：

美化方法

1、引入bootstrap4-badges

2、wordpress后台外观→小工具，标题处插入代码

3、代码如下，按需修改

<div class="form-group none">
<h3 style="display:inline-block">
<img
src="http://bayuhr.com/wp-content/uploads/2024/03/导航-最新灰.png" width="60px"
style="margin-top: -6px;display:inline-block;"> 最新上传 </h3> <a
href="https://bayuhr.com/vip-prices/"><button style="width:12%;float:left;display:inline-block;"
type="button" class="btn badge-warning"> 加入会员 <span class="badge badge-light">VIP</span> </button></a> <a
href="https://bayuhr.com/tags/"><button
style="width:12%;float:right;margin-right:20px;display:inline-block;" type="button"
class="btn badge-success"> 加载更多 <span class="badge badge-light">+</span> </button></a>
</div>

三、wordpress 日主题 RIPro-V5 主题添加标签彩色云代码 主题更新不影响

效果

废话不多说直接开整。

1.首先呢，点击外观–>小工具 –>拖拉标签云至文章页侧栏目

2.点击ripro主题设置–>底部设置 –> 网站底部自定义JS代码

 <!-- start 标签美化-->  
  <style type="text/css">
.tagcloud a{ 
    position: relative; 
    padding: 1px 4px 2px 4px;
    margin: 0px 4px 0px 3px;
    border: 1px solid #e6e7e8; 
    border-radius: 18px; 
    text-decoration: none; 
    white-space: nowrap;
    -o-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
    -ms-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
    -moz-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
    -webkit-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
    box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=20,Direction=335, Color='#000000')";/*兼容ie7/8*/filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=1);
    /*strength是阴影大小，direction是阴影方位，单位为度，可以为负数，color是阴影颜色 （尽量使用数字）使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示（block或inline-block;）*/
}

.tagcloud a:nth-child(7n+1):hover{color:#ffffff;background-color:rgba(255,78,106,.8)}
.tagcloud a:nth-child(7n+2):hover{color:#ffffff;background-color:#ffaa73}
.tagcloud a:nth-child(7n+3):hover{color:#ffffff;background-color:#fed466}
.tagcloud a:nth-child(7n+4):hover{color:#ffffff;background-color:#3cdc82}
.tagcloud a:nth-child(7n+5):hover{color:#ffffff;background-color:#64dcf0}
.tagcloud a:nth-child(7n+6):hover{color:#ffffff;background-color:#64b9ff}
.tagcloud a:nth-child(7n+7):hover{color:#ffffff;background-color:#b4b4ff}

.tagcloud a:nth-child(7n+1){background-color:rgba(255,78,106,.15);color:rgba(255,78,106,.8)}
.tagcloud a:nth-child(7n+2){background-color:rgba(255,170,115,.15);color:#ffaa73}
.tagcloud a:nth-child(7n+3){background-color:rgba(254,212,102,.15);color:#fed466}
.tagcloud a:nth-child(7n+4){background-color:rgba(60,220,130,.15);color:#3cdc82}
.tagcloud a:nth-child(7n+5){background-color:rgba(100,220,240,.15);color:#64dcf0}
.tagcloud a:nth-child(7n+6){background-color:rgba(100,185,255,.15);color:#64b9ff}
.tagcloud a:nth-child(7n+7){background-color:rgba(180,180,255,.15);color:#b4b4ff}

.widget .tagcloud {
    font-size: 0
}

.widget .tagcloud a {
    display: inline-block;
    width: 32.39%;
    margin: 0 .7% 1.4%;
    padding: 5px 2px;
    font-size: 12px!important;
    line-height: 1.2;
    text-align: center; 
    border: 1px solid hsla(0,0%,39%,.2);
    border-radius: 2px;
    text-decoration: none;
    background: hsla(0,0%,100%,.2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.widget .tagcloud a:nth-child(1) {
    color: #3385fc;
}

.widget .tagcloud a:nth-child(2n) {
    color: #ffc12b;
}

.widget .tagcloud a:nth-child(3n) {
    color: #4CAF50;
}

.widget .tagcloud a:nth-child(4n) {
    color: #555;
}

.widget .tagcloud a:before {
    content: "#";
    padding-right: 2px;
}

.widget .tagcloud a:nth-child(3n+1) {
    margin-left: 0
}

.widget .tagcloud a:nth-child(3n+3) {
    margin-right: 0
}

.widget .tagcloud a:hover {
    color: #fff;
    background: #007bff;
    border-color: #007bff
}
</style>
<!-- end 标签美化-->