给子比主题添加渐变文章标题+美化(卡片样式)文章列表+评论快捷回复+修复解决关于头像的小问题


------正文内容展示,开始汲取新知识啦------

一、①渐变文章标题

<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

以上代码为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

完事。

文章原创来自于甲骨文JAGUWEN

四、导航文字添加彩色背景

2023072414340681

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

image-35

温馨提示:本文最后更新于2023-07-29 16:55:42,某些文章具有时效性,若有错误或已失效,请私信客服或联系知新社长
------本文内容已结束,喜欢请分享------

感谢您的访问,Ctrl+D收藏本站吧。

© 版权声明
七月 24

知岛上的今时往日

    "吼吼~,往年的今天,作者不知道跑哪里偷懒去了~"
THE END
点赞0投币 分享
评论 共11条
头像
善语结善缘,恶言伤人心。(禁止发送无意义的字符)
提交
头像

昵称

夸夸Ta
夸夸
还有吗!没看够!
取消
昵称表情代码图片
社区求救信号帮助是一种美德