外贸独立站

标签云修改样式

本文主要介绍标签云的CSS调用方式,不一定额外需要更多的插件支持。

默认的标签云,不太符合我们的需求,所以额外的去定制了本网站的标签云CSS样式,有需要的可以参考。

具体定制后的标签云样式,右侧边栏就有展示,当然,还可以有更丰富的样式。

				
					/* 仅隐藏 .elementor-widget-container 下的 h5 标签 */
.elementor-widget-container h5 {
    display: none;
}

/* 标签云a标签基础样式 */
.tagcloud .tag-cloud-link {
    background-color: var(--e-global-color-390a676, #00000017); 
    color: var(--e-global-color-fe0751a, #000000) !important; 
    border-radius: 5px;
    text-decoration: none;
    padding: 5px 10px 5px 10px;
    display: inline-block;
    margin: 5px 2px 5px 2px;
    
    font-family: var(--e-global-typography-primary-font-family, "Roboto", sans-serif);
    font-size: var(--e-global-typography-primary-font-size, 8pt) !important; 
    /*font-weight: var(--e-global-typography-primary-font-weight, 400); 
    /*line-height: var(--e-global-typography-primary-line-height, 1.4); 
}

/* 鼠标悬浮样式 */
.tagcloud .tag-cloud-link:hover {
    background-color: var(--e-global-color-e2046b6, #FF5722); 
    color: var(--e-global-color-390a676, #FFFFFF) !important;
}