找到
9
篇与
主题美化
相关的结果
-
Joe主题美化教程_typecho博客Joe主题的头像呼吸灯 mf3oi9hy.png图片 效果可以看博主的头像，评论区的头像也会自动加上呼吸灯，点击头像或电脑端停留在头像上面还会旋转 教程 <style> /*头像呼吸光环和鼠标悬停旋转放大_[淡泊云资源网_danb.cc]*/ .avatar { border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s; } .avatar:hover { transform: scale(1.15) rotate(720deg); } @keyframes light { 0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;} } </style>将上面的代码放到网站的 <head> 或<body>里面保存即可查看效果了，建议放在<body>里面!
-
Joe主题美化教程_Typecho实现评论时自动随机输入一条评论功能 mf3oi9hy.png图片 修改 core/function.php 打开function.php文件，找到下方代码 function _getVersion() { return "7.7.1"; };将以下代码复制粘贴到后边 function random_comment() { $comments = array('对小白真的很友好，写的很全面', '终于找到这篇文章了，感谢作者的分享', '喜欢这篇文章，作者666，文章真棒', '支持博主，一定多分享', '这篇文章写的真不错，真详细，点个赞', '这篇文章肯定会火，作者666大顺', '受益匪浅，感谢博主', '学习到了，感谢博主'); return $comments[rand(0,count($comments)-1)]; }修改 public/comment.php 打开comment.php文件找到下方代码（在第33行左右），将下方代码 <textarea class="text joe_owo__target" name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图试试？"></textarea>替换为以下代码 <textarea class="text joe_owo__target" name="text" value="" autocomplete="new-password" placeholder="说点什么吧，点击右上方切换成画图试试？"><?php echo random_comment(); ?></textarea>
-
Joe主题美化教程_如何让Joe主题实现半透明 mf3oi9hy.png图片 在Joe主题，全局设置 → 自定义css粘贴下面这个代码 body { --background: rgba(255,255,255,0.8) }其中 0.8 表透明度，这个值越低，其越透明 这个 0.8 只是我加上的数值，同理： 如果想半透明，只需把 0.8 改为 0.5 body { --background: rgba(255,255,255,0.5) }body { --background: rgba(255,255,255,0.5) }如果想完全透明，只需把 0.8 改为 0.0 就好了 body { --background: rgba(255,255,255,0.0) }
-
Joe主题美化教程_Typecho博客自定义右键 简单来说就是花里胡哨，没别的意思，看着喜欢就拿去 mf3oi9hy.png图片 效果演示 mf3s177x.png图片 教程步骤 第一步：复制下列代码,引入 layer.js <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>第二步：依次进入控制台 – 外观 – 设置外观 – 自定义 <body></body> 末尾位置内容（非必填），将以下代码加入到自定义 <body></body> 末尾位置内容（非必填），部分内容自行修改即可。 <!-- 自定义右键菜单美化 --> <style type="text/css"> a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;} div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block} div.usercm ul li{margin:0px;padding:0px;line-height:35px;} div.usercm ul li a{color:#666;padding:0 15px;display:block} div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)} div.usercm ul li a i{margin-right:10px} a.disabled{color:#c8c8c8!important;cursor:not-allowed} a.disabled:hover{background-color:rgba(255,11,11,0)!important} div.usercm{background:#fff !important;} </style> <div class="usercm" style="left: 199px; top: 5px; display: none;"> <ul> <li><a href="http://blog.danb.cc/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li> <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li> <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li> <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li> <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li> <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li> <li><a href="https://www.oszz.cn/"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li> </ul> </div> <script type="text/javascript"> (function(a) { a.extend({ mouseMoveShow: function(b) { var d = 0, c = 0, h = 0, k = 0, e = 0, f = 0; a(window).mousemove(function(g) { d = a(window).width(); c = a(window).height(); h = g.clientX; k = g.clientY; e = g.pageX; f = g.pageY; h + a(b).width() >= d && (e = e - a(b).width() - 5); k + a(b).height() >= c && (f = f - a(b).height() - 5); a("html").on({ contextmenu: function(c) { 3 == c.which && a(b).css({ left: e, top: f }).show() }, click: function() { a(b).hide() } }) }) }, disabledContextMenu: function() { window.oncontextmenu = function() { return !1 } } }) })(jQuery); function getSelect() { "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy") } function baiduSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a) } $(function() { for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) { d = !1; break } d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu()) }); </script>
-
Joe主题美化教程_如何给joe博客主题添加底部导航栏 mf3oi9hy.png图片 效果演示 mf3rw2j9.png图片 教程步骤 首先在网站主题assets/css目录下，新建一个名为lyxdh.css的文件，并将如下代码放置于该文件中 * { margin: 0; padding: 0; box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent } ::-webkit-scrollbar { width: 8px; height: 8px } ::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--seat) } ::-webkit-scrollbar-track { background: transparent } ::-moz-selection { color: #fff; background: var(--theme) } ::selection { color: #fff; background: var(--theme) } body { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom) } body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -520; pointer-events: none } input[type='text'] { -webkit-appearance: none; border-radius: 0; font-size: 13px; font-weight: 500 } iframe { display: block; border: none; margin: 0 auto; vertical-align: middle } textarea { font-size: 14px; resize: none; -webkit-appearance: none } li { list-style: none } a { text-decoration: none } h1,h2,h3,h4,h5,h6 { font-weight: 500 } img { border: 0; vertical-align: middle } img[src=''],img:not([src]) { border: 0; opacity: 0 } svg,canvas { vertical-align: middle } button { cursor: pointer; -webkit-appearance: none; font-size: 13px } table { border-collapse: collapse; border-spacing: 0 } .joe_main { min-width: 0; flex: 1; padding: 15px 0 } .joe_container { display: flex; width: 100%; margin: 0 auto; padding: 0 15px } @media (min-width: 576px) { .joe_container { max-width:540px } } @media (min-width: 768px) { .joe_container { max-width:720px } } @media (min-width: 992px) { .joe_container { max-width:960px } } @media (min-width: 1200px) { .joe_container { max-width:1140px } } @media (min-width: 1400px) { .joe_container { max-width:1320px } } @font-face { font-family: "cyicon"; /* Project id 2611504 */ src: url('https://at.alicdn.com/t/font_2611504_8nq4wp1bmb3.woff2?t=1623735805644') format('woff2'), url('https://at.alicdn.com/t/font_2611504_8nq4wp1bmb3.woff?t=1623735805644') format('woff'), url('https://at.alicdn.com/t/font_2611504_8nq4wp1bmb3.ttf?t=1623735805644') format('truetype'); } .cyicon { font-family: "cyicon" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .zrnq-xintiao:before { content: "\e6e7"; } .zrnq-saoma:before { content: "\e6e2"; } .zrnq-haibaofenxiang:before { content: "\e6e3"; } .zrnq-pinglun:before { content: "\e605"; } .zrnq-tongji3:before { content: "\e6ce"; } .zrnq-time:before { content: "\e6be"; } .zrnq-huanyingye:before { content: "\e728"; } .zrnq-106collect:before { content: "\e7a7"; } .zrnq-womendefuwu:before { content: "\e8d8"; } .zrnq-yu:before { content: "\e602"; } .zrnq-zhichi:before { content: "\e639"; } .zrnq-ganxie:before { content: "\e638"; } .zrnq-huoban:before { content: "\e63a"; } .zrnq-xinaixin:before { content: "\e608"; } .zrnq-beian:before { content: "\e61a"; } .zrnq-zhuye-copy:before { content: "\e601"; } .zrnq-hi:before { content: "\e606"; } .zrnq-guandianjianpingcopy:before { content: "\e87b"; } .zrnq-weiyuqiang-:before { content: "\e631"; } .zrnq-guanyu:before { content: "\e6a8"; } .zrnq-search-copy:before { content: "\e600"; } .zrnq-daohang:before { content: "\e60a"; } .zrnq-dashang:before { content: "\e7fb"; } .zrnq-3132:before { content: "\e603"; } .zrnq-dashang1:before { content: "\e65d"; } .zrnq-yinyue-copy-copy:before { content: "\e60b"; } .zrnq-gongju:before { content: "\e609"; } .zrnq-youlianguanli:before { content: "\e66f"; } .zrnq-shezhi:before { content: "\e629"; } .zrnq-dashang2:before { content: "\e61f"; } .zrnq-yanjing:before { content: "\e60c"; } .zrnq-gongjuxiang:before { content: "\e607"; } .zrnq-shuaxin:before { content: "\e647"; } .zrnq-fuzhi:before { content: "\e697"; } .zrnq-google1:before { content: "\e87a"; } .zrnq-backward:before { content: "\ea87"; } .zrnq-go:before { content: "\ea8b"; } .zrnq-rhome-fill:before { content: "\ec0b"; } .zrnq-service-Fill:before { content: "\e8e6"; } .zrnq-144message02:before { content: "\e7b0"; } .zrnq-352:before { content: "\e7ca"; } .zrnq-baidu:before { content: "\e6b6"; } .zrnq-banquan:before { content: "\e6c9"; } .zrnq-aixin2:before { content: "\e6ff"; } .zrnq-sitemap:before { content: "\e80a"; } .zrnq-RSS:before { content: "\e604"; } .zrnq-shengming:before { content: "\e627"; } .zrnq-anquanguanli:before { content: "\e7c6"; } .zrnq-anonymous-full:before { content: "\e8f0"; } .zrnq-taiji:before { content: "\e653"; } .zrnq-shuaxin3:before { content: "\e6db"; } .zrnq-dengdai:before { content: "\e6df"; } @media screen and (min-width:767px){#mobile-footer{display:none}} #mobile-footer{height:50px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:100%;z-index:9999999} #mobile-menu{display:block} #mobile-menu:after{content:'';display:block;height:0;clear:both} #mobile-menu>li{width:20%;float:left;border-top:1px solid #e6e6eb;height:100%} #mobile-menu>li>a:hover{color:#000;} #mobile-menu>li>.active{color:#000;} #mobile-menu>li>a{text-align:center;color:#777;display:block;line-height:12px;height:100%} #mobile-menu>li>a>span{font-size:20px;display:block;line-height:30px}然后复制如下代码粘贴于footer.php文件 <?php $this->footer(); ?> 后边即可 code here... 首页 友链 壁纸 工具 关于
-
Joe主题美化教程_底部自定义美化按钮 最近浏览博客，看到不少朋友这个底部的美化，我也觉得底部的这些按钮平平无奇，就想着用css设置一个样式，从而美化按钮方法，至此分享给大家。 mf3oi9hy.png图片 效果演示 mf2bcyp7.png图片 教程 步骤1 主题设置—>全局设置—>自定义CSS样式代码，添加以下 CSS 代码： /*代码网站底部按钮美化_[淡泊云资源网_danb.cc]*/ :root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge { display: inline-block; border-radius: 4px; text-shadow: none; font-size: 12px; color: #fff; line-height: 15px; margin-bottom: 5px; } .badge-subject { display: inline-block; background-color: #4d4d4d; padding: 4px 4px 4px 6px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .github-badge .bg-blue { background-color: #007ec6; } .github-badge .bg-brightgreen { background-color: #4dc820; } .github-badge .bg-blueviolet { background-color: #8833d7; } .github-badge .badge-value { display: inline-block; padding: 4px 6px 4px 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .github-badge .bg-orange { background-color: orange; } .github-badge .bg-red { background-color: red; } /*代码网站底部按钮美化结束_[淡泊云资源网_danb.cc]*/步骤2 主题设置—>底部设置—>网站底部右侧自定义链接,添加以下 HTML 代码： <!--网站底部按钮美化_[淡泊云资源网_danb.cc]--> <div class="github-badge"> <span class="badge-subject bg-blue"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </span>- <span class="badge-subject bg-brightgreen"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </span>- <span class="badge-subject bg-green"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </span>- <span class="badge-subject bg-orange"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </span>- <span class="badge-value bg-blueviolet"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </span>- <span class="badge-value bg-red"> <a style="color:#fff" href="链接" target="_blank">自定义文字</a> </div> <!--网站底部按钮美化_[淡泊云资源网_danb.cc]-->
-
Joe主题美化教程_网站使用网格背景 美化网站进行访客吸睛,网站使用代码完成背景格子,使用图片的话又多一个http请求,占用服务器资源,我们直接使用css代码实现 mf3oi9hy.png图片 效果演示 mf2b7o2x.png图片 教程 代码放在joe主题全局设置的自定义css里面，随后保存即可。 代码内容 body::before { background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 10%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 3%, transparent 0); background-size: 20px 20px; background-position: 50%; background-repeat: repeat; } }
