Emlog6.0.1 美化 FLY 主题 留言&读者强 页面

avatar
avatar
小王先森
389
文章
383
评论
2019年4月2日 2 651

FLY 主题自带有留言读者强单页模板,但样式不是我喜欢的。就仿造 青衫慧博客 做了一个,瞬间感觉高大上了。

美化教程如下:

1、模板下 page 文件夹中的 page_contact.php 文件

将如下内容的 ul 改为 div:

<ul class="readers-list">
	<?php echo guest(100); ?>
</ul>

2、模板下的 module.php 文件

找到函数 function guest($num),将 $img 和 $tmp 的内容替换为如下内容:

$img = "<div class="list-comments"><div class="top-author"><div class="top-comment"><a rel="external nofollow" target="_blank" href="" . $row[ ’url’ ] . "" title="" . $row[ ’poster’ ] ."(赐教" . $row[ ’comment_nums’ ] . "次)"><img  alt="avatar"  src="" . getqqpic($row[’mail’]) . "" class="avatar"><div class="author-url">" . $row[ ’poster’ ] ."</div><strong>+" . $row[ ’comment_nums’ ] . "</strong></a></div></div></div>";
$tmp = "<div class="list-comments"><div class="top-author"><div class="top-comment"><a rel="external nofollow" target="_blank" href="" . $row[ ’url’ ] . "" title="" . $row[ ’poster’ ] ."(吐槽" . $row[ ’comment_nums’ ] . "次)<br>" . $row[ ’url’ ] . "" ><img  alt="avatar"  src="" . getqqpic($row[’mail’]) . ""><div class="author-url">" . $row[ ’poster’ ] ."</div><strong>+" . $row[ ’comment_nums’ ] . "</strong></a></div></div></div>";

3、模板下的 css 文件夹中,打开 style.css ,在任意位置添加如下样式:

div.readers-list{overflow:hidden;margin: -5px 0 0 0;}
div.list-comments{float:left;min-height: 1px;padding: 2px;width:20%}
div.top-author{background: #fff;margin:5px;padding: 0 0 10px 0;border: 1px solid #ddd;}
div.top-comment{color: #999;text-align: center;}
div.readers-list img{float: left;width: 100%;height: auto;max-width: 100%;}
div.author-url{width: 100%;padding: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
div.readers-list a,div.readers-list a:hover strong{background-color:#f2f2f2;background-image:-webkit-linear-gradient(#fdfdfd,#f2f2f2);background-image:-moz-linear-gradient(#fdfdfd,#f2f2f2);background-image:linear-gradient(#fdfdfd,#f2f2f2);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fdfdfd’, endColorstr=’#f2f2f2’, GradientType=’0’)}
div.readers-list img,div.readers-list strong{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;-ms-transition:all .2s ease-out}
div.readers-list a:hover img{box-shadow:0 1px 3px rgba(34,25,25,.5)}
div.readers-list a:hover div{color:#5DB8F8}

然后,在 @media screen and (max-width:480px) 下添加:

div.list-comments{width:33%!important}

最后,在 @media screen and (max-width:360px) 下添加:

div.list-comments{width:50%!important}

效果如下:

Emlog6.0.1 美化 FLY 主题 留言&读者强 页面

继续阅读
历史上的今天
四月
2
avatar
  • 本文由 发表于 2019年4月2日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  2   博主  0
    • avatar 青衫慧博客 5

      还不错,建议把底部+1 +6 这种修改一下 更好看一些。

      • avatar 蓝领笑笑生 0

        虽然不知道说的是什么,但看起来好厉害的样子!