渐变文章标题+美化(卡片样式)文章列表+评论快捷回复+关于头像的小问题-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

渐变文章标题+美化(卡片样式)文章列表+评论快捷回复+关于头像的小问题

该帖子部分内容已隐藏
付费阅读
已售 25
66积分
此内容为付费阅读,请付费后查看

先上演示地址(号外:积分购买属于自愿,内容并无隐藏部分

     演示地址演示地址演示地址演示地址演示地址演示地址演示地址演示地址演示地址演示地址

一、①渐变文章标题

<b style="background-image: linear-gradient(to left, #12c2e9, #c471ed,#f64f59);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">你的标题-您的标题</b>

image-31

送上一个渐变颜色网站→菜鸟工具-渐变色工具

一、②纯色文章标题

<font color="#ff0000">你的标题</font>

想用粗体就在代码外面套一层<b></b>

小技巧:普通标题写好后先发布,然后去文章里面用快捷修改改颜色。

image-36

 

二、卡片样式文章列表

主要是一些CSS

/*隐藏卡片列表内容并取消占位*/
.theme-bg{background: var(--main-bg-color);border-radius:10px;}   /*大盒子背景,可以是图片,需要更改文件class,不更改应该也可以*/
.posts-item.card .item-tags{visibility: hidden;DISPLAY: none;}   /*隐藏标签*/
.posts-item.card .item-meta{visibility: hidden;DISPLAY: none;}   /*隐藏浏览量数据*/
/*卡片列表标题*/
.tab-content>.active {padding: 0px 10px;}  /*边距*/
.index-tab ul>li.active { height: 40px;width: 100%;background: var(--muted-bg-color);border-radius:10px 10px 0px 0px;margin: 0;padding:8px 20px; }   /*盒子标题样式背景*/
.index-tab ul>li.active a {color: var(--key-color)!important;font-weight:bold;vertical-align:text-top;}  /*标题字体样式*/
.posts-item .item-heading {-webkit-line-clamp: 1;}   /*文章标题行数从2行修改位1行*/
.posts-item.card .item-heading {min-height: 0;}   /*文章标题盒子高度修改*/
@media (min-width: 992px) { .fluid-widget .card,.site-layout-1 .card {width: calc(20% - 16px)}}  /*每行显示卡片文章数量(5个=20%以此类推)*/

三、评论快捷回复-简单版

image-32

/*快捷回复*/
$(function() {
    $("#kjhf").click(function() {
        _hmt.push(['_trackEvent', '评论', '打开签到', '点击切换']);
        var arr = new Array();
        arr[0] = ",文章写得不错,给你点个赞,继续加油哈!";
        arr[1] = ",感谢大佬无偿分享!";
        arr[2] = ",下载看看,先赞一个!";
        arr[3] = ",UP主你很酷!";
        arr[4] = ",效果不错,一键三连!";
        arr[5] = ",博主大好人,一胎生八个!!";
        arr[6] = ",必须加油打气!";
        var arrs = arr[Math.floor((Math.random() * arr.length))];
        var myDate = new Date();
        var timenow = myDate.toLocaleString();
        $("#comment").val(timenow + '' + arrs);
    });
});

以上代码为js

修改php文件代码(文章评论)

echo '<span id="kjhf" class="but input-signin mr6" style="cursor:pointer;"><i class="fa fa-pencil" aria-hidden="true" /></i>快捷回复</span>';

image-33

修改php文件代码(社区论坛评论)

<span id="kjhf" class="but input-signin mr6" style="cursor:pointer;"><i class="fa fa-pencil" aria-hidden="true" /></i>快捷回复</span>

image-34

完事。

四、①最后是头像的问题,头像加载慢或卡顿一下多半是因为这个原因

image-35

四、②头像还有个问题一直没找到,就是默认头像换不了,换了也不起作用。不知道是哪的原因,有知道的小伙伴说一下。

 

请登录后发表评论