知更鸟主题样式修改CSS
知更鸟主题各方面功能已经很完备了,界面也漂亮,但是对样式总会有自己的一些小需求,下面是搜集摸索出的一些CSS样式修改。
更多分类文章:
网站建设 | Python | Linux | 大数据 | 数据库 | Git | Nodejs | Golang | 电脑技巧 | 计算机技术
关于本站图标内容修改
隐藏侧边栏关于本站中微信图标
/* 选择器:id为feed_widget的class为.weixin的所有后代*/
#feed_widget .weixin{display:none;
}
隐藏侧边栏关于本站中微博图标
#feed_widget .tsina{display:none;
}
让剩余两个图标居中
#feed_widget .feed-t {float:left;width:50%;height:40px;line-height:38px;
}
注意
“自定义样式”里的修改会覆盖掉主题目录下style.css中样式
导航栏多色彩美化
#site-nav .down-menu>#menu-item-30>a:hover .font-text,#site-nav .down-menu>#menu-item-30>li.sfHover>a .font-text{background:#992e1e !important}#site-nav .down-menu a{color:#444;margin:0}#site-nav .down-menu a{height:88px;line-height:88px;border-bottom:0 solid #3690cf;transition-duration:.6s}#site-nav .down-menu>.current-menu-item>a{height:88px;line-height:88px;border-bottom:2px solid #3690cf}#site-nav .down-menu>li>a:hover{height:88px;border-bottom:88px solid #333d46}#site-nav .down-menu>
幻灯片缩略图园角美化
#slideshow #slider img{border-radius:5px;border:0}
.thumbnail{border-radius:5px;border:0}
widget选中微光特效
.widget{background:#fff;margin:0 0 10px 0;border:1px solid #eaeaea;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,0.04);-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}.widget:hover{box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2}
文章标题点击平移
.list-title a,.widget.like_most_img ul li a,.widget.hot_post_img ul li a,.widget.new_cat ul li a,.widget.recent_comments ul li a,.widget.hot_comment ul li a,.widget.related_post ul li a,.widget.same_post ul li a,.widget.recently_viewed ul li a{position:relative;}
文章标题前添加箭头美化
.widget.new_cat ul li a:before,.widget.related_post ul li a:before,.widget.same_post ul li a:before,.widget.recently_viewed ul li a:before{content: "\e77a";font-family: be;font-size: 16px;padding: 0 5px 0 0;
}
注
这个代码已压缩移到style.css
强制文章中图片居中显示
.single-content p img{margin: 0 auto;
}
修改正文字号大小
.single-content {font-size: 20px;font-size: 2.0rem;line-height: 2;
}
去掉幻灯上的标题文字
.slider-caption {display: none; }
标题后加文字
#post-75 h2 a:after {content: "推荐";font-size: 14px;background: #c40000;color: #fff;margin: 0 0 0 5px;padding: 1px 3px;border-radius: 2px;
}
原文链接:知更鸟主题样式修改CSS
知更鸟主题样式修改CSS相关推荐
- html5滚动条样式修改,css修改滚动条样式
在css中怎样改变滚动条的样式 /*IE滚动条颜色设置*/body {scrollbar-arrow-color:#f2f2f3;/*上下箭头*/scrollbar-track-color:#1589 ...
- 火狐浏览器滚动条样式修改 css
纯css设置Firefox火狐浏览器的滚动条样式 设置Firefox滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 这两个.看名字就知道第一个是设置滚动 ...
- html5 input file样式修改,css为input type=file设置自定义样式
input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 主要有两点需要做: 将input type=file控件透明 将inp ...
- html5 按钮css样式修改,css样式制作的漂亮按钮
复制代码代码如下: Demo: CSS3 Buttons body { background: #ededed; width: 900px; margin: 30px auto; color: #99 ...
- Hexo博客 Next更换修改主题样式 不生效的解决
在对下面的Next主题样式修改时候,博客站点可能无法正常生效. # Schemes scheme: Muse #scheme: Mist #scheme: Pisces #scheme: Gemini ...
- Jupyter notebook 不安装主题,通过修改css更改 默认字体,字体大小等
目标: Jupyter notebook 又不想改更主题的的情况下,可以通过修改css的目的来达到修改默认的字体,字号心达到可以好的阅读效果. 方法 要修改的css文件目录如下, D:\Anacond ...
- global.min.css,配置全局及自定义主题样式
先说问题吧. 最近在看 primeng 的源码,框架是支持主题切换的,主题样式使用 sass,主题的切换是通过动态替换全局主题 css 文件来实现的. 1 2 3 4 5changeTheme(eve ...
- 畅言评论的版权及样式如何修改CSS一步简单搞定
16年9月份差不多,多说就已经开始各种抽风了,让鸡哥这种小老百姓是属实受不了,然而去多说官网反馈并没什么卵用,神奇的是我的反馈帖子只有在我登陆的时候可以看到,一旦退出登陆就消失了,..这种单机模式多说 ...
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 < ...
最新文章
- 机器学习(18)-- SVM支持向量机(根据身高体重分类性别)
- 加了好友怎么还掉血_微信聊天窗口出现风险提醒,无法添加好友解决办法
- 负债十五万左右,信用卡十万,网贷四五万,怎么上岸?
- Linux和Windows下部署BeetleX服务网关
- mysql解压包安装linuex_CentOS下安装Apache,php,Mysql
- 网站安全配置---挂载路由导航
- 2020-01-14 IP/TCP/UDP 对应的RFC编号
- BeanFactory的实现原理
- 判断web app是否从主屏启动
- java.awt Robot 自动化测试 与 KeyEvent 常用按键
- main(int argc, char** argv) 参数的含义
- 利用EditPlus制作Anki记忆卡批量导入文件
- 真实业务订单 拆单 架构与实战
- NI Teststand 2014 64bit 调用python脚本指南
- android 快速开发,GitHub - limedroid/XDroid: 轻量级Android快速开发框架
- 技术实践干货 | 初探大规模 GBDT 训练
- TypeScript学习-函数
- PostgreSQL逻辑备份pg_dump使用及其原理解析
- 华为RH2288H V3服务器 从拆箱开始安装系统
- 黑客或可完全控制设备,苹果紧急发布补丁!