偏锋·小白菜

记一次公告样式修改
前后效果对比前后
扫描右侧二维码阅读全文
23
2019/08

记一次公告样式修改

前后效果对比


  • q

  • 后

笔记如下

公告相关文件位置:/handsome/index.php

把公告移至header下方

0x1
这里直接剪切整个公告到header下方即可,从43行粘贴-51行左右,如图。
0x2

编写代码

将以下代码替换原来的公告代码

<div class="notice notice-open">
<div class="notice-header">
<i class="notice-icon">&#xe85a;</i>
<div class="notice-title">公告栏</div>
<i class="notice-icon notice-collapse">keyboard_arrow_down</i>
</div>
<ul class="notice-body">
  <?php $this->options->blogNotice(); ?>
</ul>
</div>

替换掉原来的:
代码45-54行左右
0x3

上CSS

  @font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://cdn.irow.top/mdui/0.4.3/icons/material-icons/MaterialIcons-Regular.woff2) format('woff2'), url(https://cdn.irow.top/mdui/0.4.3/icons/material-icons/MaterialIcons-Regular.woff) format('woff');
}

.notice {
background-color: #fff;
color: rgba(0, 0, 0, 0.87);
display: block;
font-size: 14.5px;
line-height: 16.675px;
text-size-adjust: 100%;
width: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.notice-header {
align-items: center;
box-sizing: border-box;
cursor: pointer;
display: flex;
height: 48px;
min-height: 48px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 16px;
padding-right: 16px;
padding-top: 0px;
position: relative;
text-decoration-color: rgba(0, 0, 0, 0.87);
text-decoration-line: none;
text-decoration-style: solid;
transition-delay: 0s;
transition-duration: 0.3s;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
-webkit-box-align: center;
}

.notice-icon {
direction: ltr;
display: block;
font-family: "Material Icons";
font-feature-settings: "liga";
font-size: 24px;
font-style: normal;
font-weight: 400;
height: 24px;
letter-spacing: normal;
line-height: 24px;
overflow-wrap: normal;
text-align: center;
text-rendering: optimizelegibility;
text-transform: none;
vertical-align: middle;
white-space: nowrap;
width: 24px;
-webkit-font-smoothing: antialiased;
}

.notice-title {
box-sizing: content-box;
display: block;
flex-grow: 1;
font-size: 16px;
font-weight: 400;
height: 20px;
line-height: 20px;
padding-bottom: 14px;
padding-top: 14px;
-webkit-box-flex: 1;
}

.notice-collapse {
-webkit-transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
transition: -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
transition: transform .3s cubic-bezier(.4, 0, .2, 1);
transition: transform .3s cubic-bezier(.4, 0, .2, 1), -webkit-transform .3s cubic-bezier(.4, 0, .2, 1);
-webkit-transform: rotate(0);
transform: rotate(0);
will-change: transform;
}

.notice-body {
background-color: rgba(0, 0, 0, 0);
font-size: 13px;
line-height: 14.95px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-block-end: 0px;
margin-block-start: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-inline-start: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
transition-delay: 0s;
transition-duration: 0.3s;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
will-change: height;
}

.notice-body>li {
min-height: 40px;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-right: 16px;
padding-left: 72px;
overflow: hidden;
line-height: 40px;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}

.notice-body>li:before {
position: absolute;
right: 0;
left: 0;
display: block;
height: 1px;
content: ' ';
background-color: rgba(0, 0, 0, .12);
}

.notice-header:hover,
.notice-body>li:hover {
background-color: rgba(0, 0, 0, .08);
}

.notice-open>.notice-header .notice-collapse {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

CSS随便加到页面里就行,你可以加在外部样式表中,也可以加到外观设置中的自定义CSS里。我直接放在自定义css
0x4
完成后效果如下:
0x5

使用JS实现折叠功能:

  $(function() {
if (!$('.notice').hasClass('notice-open')) {
  $('.notice-body').hide();
 }
 $('.notice-header').click(function() {
  $(this).parent().toggleClass('notice-open');
  $('.notice-body').fadeToggle('fast');
 });
})

同样只要加到网页中即可,你可以直接加在外观设置的自定义JS中。
0x6
另外如果你开了pjax的话,这里给出简单解决方案。在pjax回调函数中加入:

if (null != $('.notice')) {
$('.notice').removeClass('notice-open');
$('.notice-body').hide();
$('.notice-header').click(function () {
    $(this).parent().toggleClass('notice-open');
    $('.notice-body').fadeToggle('fast');
 });
}

以上代码用于修复
0x7

公告编写格式

<li>偏锋博客</li>
<li>偏锋博客</li>
<li>偏锋博客</li>

以此类推

Last modification:September 2nd, 2019 at 07:08 pm
您的支持,使我不懈努力!

Leave a Comment

One comment

  1. qwq

    B站过来拿素材的。噗哈哈哈φ( ̄∇ ̄o)