Cuteen主题美化教程

44次阅读
2024年07月30日 09:24:33

共计 8330 个字符，预计需要花费 21 分钟才能阅读完成。

LOGO扫光

下方代码放后台-自定义CSS

/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 5s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}

网站实现网格背景

下方代码放后台-自定义CSS

/*网格背景css*/
body {
z-index:1;
    background-position: center top;
    background-size: 28px 28px;
    background-color: #f9f9f9;
    background-image: linear-gradient(to right,rgba(37,82,110, 0.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,82,110, 0.1) 1px,transparent 1px);
}

网站背景图设置

下方代码放后台-自定义CSS

/* 背景图片 */
    body::before {
        content: '';
position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      background: url(图片地址);
        background-position: center 0;
        background-size: cover;
        z-index: -1;
        opacity: 0.75;
    }

PC端侧栏仿ios小点点

cuteen主题在sidebar.php里面这个位置加入下方代码就行，例如：

<span>最新回复</span>下面
<span class="ios"></span>

下方代码放后台-自定义CSS

/*PC端侧栏仿ios小点点*/
.ios {
    content: " ";
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d !important;
    width: 10px;
    height: 10px;
z-index:999;
    -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    box-shadow: 19px 0 #fdbc40, 40px 0 #35cd4b;
    float: right;
    right: 58px;
    top: 22px;
z-index:100;

}

评论框图片

下方代码放后台-自定义CSS

/*评论框图片*/
textarea.form-control {
 resize: vertical;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  margin-bottom: 2px;
  background-image: url(图片链接);
  transition: all 0.25s ease-in-out 0s;
}

解决导航栏无法使用emoji表情

由于数据库不支持emoji表情我们可以在根目录直接加，无视数据库
根目录找到navbar.php，路径/Cuteen/include/navbar.php
合适的位置把原有的注释/删除

<ul class="navbar-nav justify-content-start flex-grow-1 pe-3">
                    <?php if ($this->options->CustomMenu) {
                        $source = array();
                        $source = '[' . $this->options->CustomMenu . ']';
                        $source = json_decode($source, true);
                        foreach ($source as $key) {
                            if (empty($key['children'])) {
                                echo Context::MenuTag($key['url'], $key['name']);
                            } else {
                                echo Context::CustomerDropdownMenuTag($this, $key);
                            }
                        }
                    } else {
                        if ($this->options->LabelOrder == 'P-C') {
                            Context::PageEcho($this, $pages, false);
                            Context::CategoryEcho($this, $category, false);
                        } else {
                            Context::CategoryEcho($this, $category, false);
                            Context::PageEcho($this, $pages, false);
                        }
                    }
                    ?>
                </ul>

在复制这串代码设置好链接即可

 <ul class="navbar-nav justify-content-start flex-grow-1 pe-3">
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">⚙️文章分类</a>
<ul class="dropdown-menu"> 
<li><a class="dropdown-item" href="路径">⚙️资源分享</a></li> <li><a class="dropdown-item" href="路径">⚙️编程相关</a></li> <li><a class="dropdown-item" href="路径">⚙️折腾日记</a></li> <li><a class="dropdown-item" href="路径">⚙️杂七杂八</a></li> <li><a class="dropdown-item" href="路径">⚙️每日新闻</a></li></ul></li>
<li class="nav-item"><a class="nav-link text-nowrap" href="路径">⚙️归档处</a></li>
<li class="nav-item"><a class="nav-link text-nowrap" href="路径">⚙️时光机</a></li>
<li class="nav-item"><a class="nav-link text-nowrap" href="路径">⚙️朋友圈</a></li>
<li class="nav-item"><a class="nav-link text-nowrap" href="路径">✍️留言板</a></li>

<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">⚙️更多</a>
<ul class="dropdown-menu"> 
<li><a class="dropdown-item" href="路径">⚙️影视解析</a></li>
<li><a class="dropdown-item" href="路径">⚙️在线音乐</a></li> 
<li><a class="dropdown-item" href="路径">⚙️颜色代码</a></li>
 <li><a class="dropdown-item" href="路径">⚙️实用标签</a></li>
 <li><a class="dropdown-item" href="路径">⚙️情侣小站</a></li>
 <li><a class="dropdown-item" href="路径">⚙️免责声明</a></li>
</ul></li>
</ul>

记得把⚙️图标换成自己需要的。

顶部阅读进度条

放/body前即可

<!-- 顶部阅读进度条 --><progress id="content_progress" value="0"></progress>
<script>
document.addEventListener('DOMContentLoaded', function () {
      var winHeight = window.innerHeight,
            docHeight = document.documentElement.scrollHeight,
            progressBar = document.querySelector('#content_progress');
      progressBar.max = docHeight - winHeight;
      progressBar.value = window.scrollY;

      document.addEventListener('scroll', function () {
            progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
            progressBar.value = window.scrollY;
      });
});
</script><!-- 顶部阅读进度条 -->

下面代码放后台自定义CSS

/* 阅读进度条 */
#content_progress {
      /* Positioning */
      position: fixed;
      left: 0px;
      top: 50px;
      z-index: 188;
      width: 100%;
      height: 2px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      background-color: transparent;
      color: #BABABA;
}

#content_progress::-webkit-progress-bar {
      background-color: transparent;
}

#content_progress::-webkit-progress-value {
      background-color: #B8B8B8;/* 修改颜色 */
}

#content_progress::-moz-progress-bar {
      background-color: #BF3EFF;
}
/* 阅读进度条 */

前台增加编辑页面/文章功能

编辑页面，下方代码放在需要拥有该功能的根目录即可，路径每个单页根目录下方

<!-- 前台编辑页面 --> <?php if($this->user->hasLogin()):?><span style="position: absolute;right: 11px; transform:translateY(-14px); font-size: 14px;" class="item">
<a href="<?php $this->options->adminUrl(); ?>write-page.php?cid=<?php echo $this->cid;?>" class="item" target="_blank">编辑页面</a></span><?php endif;?><!-- 前台编辑页面 -->

编辑文章，下方代码放post.php里面即可路径正文下方

<!-- 前台编辑文章 --><?php if($this->user->hasLogin()):?><span style="position: absolute;right: 25px;" class="item"><font size=2>
<a href="<?php $this->options->adminUrl(); ?>write-post.php?cid=<?php echo $this->cid;?>" target="_blank" class="item">编辑文章</a>
</font></span><?php endif;?><!-- 前台编辑文章 -->

认证评论等级

<?php
$me = md5(strtolower('邮箱')); //这里填入自己的邮箱
$boy = md5(strtolower('邮箱')); //这里填入好友的邮箱
$rz = md5(strtolower($comments->mail)); //用于判断邮箱
//博主样式
$str = '<span class="commentapprove" style="color: #FFF;padding: .035rem .25rem;font-size:
.65rem;border-radius: .15rem;background-color:#7e7e7e;" >博主';
//好友样式
$str2 = '<span class="commentapprove" style="color: #FFF;padding: .035rem .25rem;font-size:
.65rem;border-radius: .15rem;background-color:#7e7e7e;" >朋友';
//开始判断
if($me==$rz){
echo $str; //如果条件成立则输出'博主'样式
}if($boy==$rz){
echo $str2; //如果条件成立则输出'好友'样式
}
?>

浏览器标签栏动态文字

下方代码复制到/body前即可

<!--变换标题-->
<script type="text/javascript">
var tx=new Array("欢迎光临","祝你生活愉快","本站随机更新","敬请期待..","闪！！");
var txcount=7;
var i=1;
var wo=0;
var ud=1;
function animatetitle()
{
window.document.title=tx[wo].substr(0,i)+"";
if(ud==0)i--;
if(ud==1)i++;
if(i==-1){ud=1;i=0;wo++;wo=wo%txcount;}
if(i==tx[wo].length+10){ud=0;i=tx[wo].length;}
parent.window.document.title=tx[wo].substr(0,i)+"";
setTimeout("animatetitle()",100);
}
animatetitle();
</script>
<!--变换标题-->

图片呼吸灯效果

下方代码放后台-自定义CSS

img{-webkit-animation:ani 2s linear infinite;}@keyframes ani{0%{box-shadow:0 0 0px #00BCD4;}25%{box-shadow:0 0 10px #00BCD4;}50%{box-shadow:0 0 20px #00BCD4;}75%{box-shadow:0 0 10px #00BCD4;}100%{box-shadow:0 0 0px #00BCD4;}}

禁止图片拖动

下方代码放后台-自定义CSS

body img { -webkit-user-drag: none; }

网站全站变灰代码

放网页顶部

<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

指定日期自动黑白网页

应引用至需要黑白的页面即可，附带弹窗（已注释）

<!-- 主页自动黑白哀悼 -->
<?php 
/** 
 * PHP判断一个日期
 */
// 拟设一个日期 
$aday = '2023-02-18 00:00:00'; 
// 截取日期部分，摒弃时分秒，注意类似1月1日应为01-01
$bday = substr($aday,0,10);
// 获取今天的日期，格式为 YYYY-MM-DD 
$cday = date('Y-m-d');
//使用IF当作字符串判断是否相等
if($bday==$cday){
echo <<<EOF
<!--灰白特效-->
<style type="text/css">
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
</style>
<!--灰白特效-->
    <!--弹窗代码开始 -->
    <div class="web_notice" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999999;">
    <div style="position: fixed;top: 50%;left: 50%;width: 20%;background: #FFF;transform: translate(-50%, -50%);border-radius: 8px;padding: 30px 24px 28px 24px;">
    <h3 style="font-weight: bold;text-align: center;font-size: 26px;">本 站 公 告</h3><hr>
    <div style="font-size: 18px;margin-top: 24px;line-height: 30px;color: #707070;">清明时节雨纷纷，路上行人欲断魂！<br>
<font size=2 style="position: absolute;right: 30px;">——自动黑白哀悼</font>
</div>
    <a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 18px;line-height: 45px;margin: 0 auto;margin-top: 60px;border-radius: 80px;width: 29%;" onclick="javascript:document.querySelector('.web_notice').remove()">我知道了</a></div></div>
    <!-- 弹窗代码结束 -->
EOF;
}else{

}
?>
<!-- 主页自动黑白哀悼 -->

表格文字居中

下方代码放后台-自定义CSS

.typography table thead>tr>th{text-align: center !important;}

把侧栏“随便看看”改成多条

网站根目录下 usr/themes/Cuteen/include/sidebar.php 找到以下代码，然后把 pageSize=3 原来的数字3改成你想要的数字，保存即可。

$this->widget('Widget_Post_rand@rand', 'pageSize=3')->to($rand); ?>
正文完
Typecho
发表至： 产品项目
2024年7月30日 09:24:33
 0
鹿泽
版权声明：本站原创文章，本文由 鹿泽 于 2024年7月30日 09:24:33 发表，共计 8330 字。
转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
最新文章
网站优化seo推广服务如何做好内链？

网站优化seo推广服务如何做好内链？

在一个网站刚刚建设的初期，网站内链的建设工作尤为重要，可以说网站内链做得好SEO就成功了一半。今天就来讲讲网站...
WordPress博客主题二次元风-lolimeow主题更新10.1版，重构样式

WordPress博客主题二次元风-lolimeow主题更新10.1版，重构样式

一个WordPress博客主题二次元风主题，本站之前启用过，后面更换了，不过很好看，适合大家选择使用： 202...
专业优化公司seo是怎么做好404页面的？

专业优化公司seo是怎么做好404页面的？

404页面的目的是：告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其它页面而不是关闭窗口离开。...
网站搜索优化seo如何做好内部链接优化？

网站搜索优化seo如何做好内部链接优化？

网站内部链接的布局很多做SEO的朋友都知道，非常重要。网站想做的越大，就要更加重视内部链接的布局。因为良好的内...
影响关键词优化根本的排序因素

影响关键词优化根本的排序因素

对于像百度搜索来说，并没有排序这一说法，搜索引擎认为排序是在特定的关键词下网站内容的位置，而关键词是由用户搜索...
爱采购商品标题规范与说明（标准版）
从网站设计上来提高用户体验
WordPress调用全文阅读和截取文章摘要的教程
WordPress 分类和标签 SEO 策略和实施方法