Handsome虽然有好多配色方案,排版这些方面的设置,但原版直接用还是很没个性啊 这个时候就很想。。。。。。

本站效果图
请输入图片描述

然后翻到好多handsome的魔改教程,自己整理了一下,发到这里和大家分享

文章列表及文章页面 div圆角化
将这段代码放到 handsome主题设置-开发者设置-自定义css 中。

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 10px;
}

.panel-small{
    border: none;
    border-radius: 10px;
}

.item-thumb{
    border-radius: 10px;  
}

其中10px这个值可以修改,是圆角的大小。我并没有加上这个,因为我觉得圆角太大会很奇怪

侧边栏头像转动并放大
将这段代码放到 handsome主题设置-开发者设置-自定义css 中。

转动快慢和头像大小自行修改数值

/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

你可以修改最后一个类选择器——#aside-user span.avatar:hover 中 scale(1.2); 这个 1.2的值,它是头像放大的程度。

文章列表及内页盒子阴影
将这段代码放到 handsome主题设置-开发者设置-自定义css 中。

#阴影颜色修改rgba后面的值
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

如果也想使盒子四周也有阴影,加上以下代码

.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

我没有开这个,因为handsome盒子周围本来就有比较淡的阴影,自己设置得太大反而不好看

自定义滚动滑条块
将这段代码放到 handsome主题设置-开发者设置-自定义css 中。
用于修改浏览器最右边的滚动条滑块。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
文章列表及文章内页h2标题居中

将这段代码放到 handsome主题设置-开发者设置-自定义css 中。

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

这段代码会使文章列表以及文章页面的 h2标题(编辑器工具条默认的标题) 和 文章列表的作者时间评论等信息 居中
开始我是不太喜欢这个居中,我一般都是在给h2标题加上一个border-left ,不过试了一下还是蛮有个性的

仅文章内标题居中 + 定义h3标题
这一部分代码为原创
将这段代码放到 handsome主题设置-开发者设置-自定义css 中。

#post-content h3:before{
    content:"# ";
    color:#4D90FE;
}
#post-content h2{
    font-weight:bold;
    text-align:center;
}

这样会使文章页面的h2标题居中,而文章列表中标题不居中。
并且我定义了h3的标题,会在前面自动加上一个 “#”,我一般都会这样做。

首页缩略图悬停时放大
将这段代码放到 handsome主题设置-开发者设置-自定义css 中。

放大的时间和大小自行修改以下数值

/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

放大时不溢出父元素
/首页文章版式圆角化,及头图鼠标悬停放大/

.index-post-img,.entry-thumbnail,.panel,.panel-small{
  overflow: hidden;
}
.index-post-img img,.entry-thumbnail img{
  cursor: pointer;
  transition: all 0.6s;
}
.index-post-img img:hover,.entry-thumbnail img:hover{
  transform: scale(1.1);
}

点击飘出二十四字核心价值观
将这段代码放到 handsome主题设置-开发者设置-自定义JavaScript 中。

/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 

这段代码还是比较常见的,其他的主题也能用,可以直接用<script>标签框起来然后放到footer.php中,我没有加上这个,因为稍微有些影响美观。

Mac风格代码块
就一个类似mac系统窗口的代码块,比如本站的这个。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>我只是一个示例啦</title>
  <style>
  *{
      display:none;
  }
  </style>
</head>
<body>
  <span>啥都没有哦~</span>
</body>
</html>

这个是Xcnte大佬弄得一个代码高亮样式,我就尊重一下大佬直接放原地址(其实就是懒 )
https://www.xcnte.com/archives/377/

彩色标签云
这段代码来自曦语
先用这一段代码替换主题原有的标签云,handsome的标签云在sidebar.php中。

<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
       <h3 id="tag-cloud-title" class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3>            
       <div class="tags l-h-2x">
       <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?>
       <?php if($tags->have()): ?>
           <?php while ($tags->next()): ?>
           <span id="tag-clould-color"  style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>)">
               <a  href="<?php $tags->permalink();?>"  title="<?php echo sprintf(_mt("该标签下有 %d 篇文章"),$tags->count); ?>" data-toggle="tooltip" >
               <?php $tags->name(); ?></a>
           </span>
           <?php endwhile; ?>
       <?php endif; ?>
       </div>
   </section>

然后将这段代码添加到handsome主题设置-开发者设置-自定义css 中。

/* tag-clould-color 彩色标签云 */
#tag-clould-color {
    padding: 3px 10px 3px 10px;
    border-radius: 10px;
    color: #FFFFFF;
    margin: 3px 3px 3px 0;
    display: inline-block;
}

在右侧边栏加上自定义博客信息
这一部分的代码为原创
Handsome自带的右侧边栏只会显示文章数目,评论数目,运行天数,最后更新,我们可以自自己加入一些内容。

打开component/sidebar.php,找到这一段代码

  <!--博客信息-->
     <?php if (@!in_array('info',$this->options->sidebarSetting)): ?>
  <section id="categories-2" class="widget widget_categories wrapper-md clear">
   <h3 class="widget-title m-t-none text-md"><?php _me("博客信息") ?></h3>

      <!-- 从这里开始就从数据库调用博客信息,在这之前插入代码 这段注释源代码没有 -->
       <?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>
       <li class="list-group-item"> <i class="glyphicon glyphicon-file text-muted"></i> <span class="badge
       pull-right"><?php $stat->publishedPostsNum() ?></span><?php _me("文章数目") ?></li>
       <li class="list-group-item"> <i class="glyphicon glyphicon-comment text-muted"></i> <span class="badge
       pull-right"><?php $stat->publishedCommentsNum() ?></span><?php _me("评论数目") ?></li>
       <li class="list-group-item"> <i class="glyphicon glyphicon-equalizer text-muted"></i> <span class="badge
       pull-right"><?php echo Utils::getOpenDays(); ?></span><?php _me("运行天数") ?></li>
       <li class="list-group-item"> <i class="glyphicon glyphicon-refresh text-muted"></i> <span class="badge
       pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后更新") ?></li>
   </ul>
  </section>
  <?php endif; ?>
     <?php if ($this->options->adContentSidebar != ""): ?>

在我写上注释的代码之前,加上如下代码,你可以根据自己情况修改。

   <li class="list-group-item"> <i class="这里根据handsome文档-图标列表填写图标名"></i> <span class="badge
   pull-right">BigCoke</span><?php _me("站长名字") ?></li>
   <li class="list-group-item"> <i class="这里根据handsome文档-图标列表填写图标名"></i> <span class="badge
   pull-right">1415757672</span><?php _me("站长QQ") ?></li>

你可以继续往后扩充。

以上代码有参考自 bootstrap 官方文档
将右侧热门文章改为滑稽
就比如本站,我这里打包了一下这些图片,下载后用这些图片覆盖usr/themes/handsome/usr/img/sj2/中的图片。

点击下载 | 约25KB

当然你也可以替换成其他的图片,只要把图片名字改为1-10.jpg就好了。

优化评论区头像
这段代码为原创
将这段代码添加到handsome主题设置-开发者设置-自定义css 中。

.avatar-40{
border:2px solid white;
transition:all 0.8s;
box-shadow:0 0 1px #808080;
-webkit-box-shadow:0 0 1px #808080;
}
.avatar-40:hover{
transform:rotate(360deg);
}

最后修改:2019 年 02 月 23 日 09 : 46 PM
南来北往的大爷们,可怜可怜我吧,赏几两碎银子吧!