使用CSS代码修改博客模板
在修改设置使公告栏里的头像更新为新的头像时发现里边还有“页面定制CSS代码”这一选项,查了一下发现这东西可以对页面做一些个性化的调整。正好目前我使用的这个模板标题和导航栏的字体实在难看,顺手修改了一下。
因为我之前是对CSS这方面完全不了解,所以只能连蒙带猜。首先,这CSS代码估计就是设置一下某些参数的值,应该跟.ini之类的文件形式比较类似。看了一下别人写的一些简单的代码,大概了解了一下格式,跟预想的差不多。接下来是要找到模板本身自己的CSS代码,不然我怎么知道要修改谁呢?一开始我是直接从浏览器里查看网页源代码,结果打开的东西完全摸不着头脑,就放弃了这种尝试,转而使用另一种形式,名字叫不上来,就是360浏览器按下F12之后出来的那个东西。大致翻了翻,找到这样一个东西,看它行文的风格估计就是模板的设置了:

因为我要修改的是字体,肯定是在这里面搜索font family,找到了几处,挨个试了试就知道谁对应的谁了。然后按自己的喜好写好,复制到定制框里就好了。
我是这么写的:
.cnblogs_code pre {
    font-family: Courier New!important;
    font-size: 16px!important;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.cnblogs_code span {
    font-family: Courier New!important;
    font-size: 16px!important;
    line-height: 1.5!important;
}
body {
    color: #000;
    background: #eee;
    font-family: Microsoft YaHei!important;
    font-size: 10pt;
    min-height: 101%;
}
#header h1 {
    font-weight: normal;
    font-size: 30px;
    line-height:;
}
#header h1 a {
    font-family: "Microsoft YaHei";
}
#header h1 a:hover {
    color: #F60;
    text-decoration: none;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 18px;
    color: #000000;
    line-height: 1.5em;
    margin-top: 10px;
    margin-left: 30px;
    width: 50%;
    margin-left: 10em;
    float: left;
}
修改的内容如下:
默认的代码字体大小;
大标题的字体种类和大小,并取消加粗;
副标题的字体种类和大小,并设置颜色为黑色;
页面字体的种类和大小;
使用CSS代码修改博客模板的更多相关文章
- 使用CSS/JS代码修改博客模板plus
		
之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性.最近正好也在做一个网站的前端,学习了不少东西,再来改一改~ 上次最后之所以铩羽而归,是因为从CSS里找不到那些#和. ...
 - 我的博客模板(线框图wireframe)
		
不久前看到一篇介绍定制网页浏览的方法,当时就想着,我把我的博客页也修改下,在手机浏览的时候,也能漂亮的显示出来.以后写的文章的话,也可以分享的微信朋友圈里面和朋友分享. 具体步骤参考:http://w ...
 - 第41篇 推荐一个jekyll博客模板
		
本人用的模板是基于Codeboy的博客模板改造模板,(由于本人可能会有很多样式修改,所以不再将修改pullrequst到原项目,在此对codeboy模板表示感谢).功能改造如下: 添加微信支付宝打赏 ...
 - 基于Jekyll的博客模板
		
代码地址如下:http://www.demodashi.com/demo/13147.html 效果 环境配置 环境 Windows 10 Git Bash 安装ruby 下载rubyinstalle ...
 - css扁平化博客学习总结(三)header代码实现
		
页头.banner.正文.页脚的宏观布局 1.布局顺序的重要性: 由大到小,着眼最大的部分,慢慢细分. <body> <header><!-- 页头开始 --> & ...
 - flask实战-个人博客-模板 --
		
模板 personalBlog采用典型的博客布局,左侧三分之二为主体,显示文章列表.正文:右侧三分之一为边栏,显示分为类列表.社交链接等.现在的工作是将HTML文件加工为模板,并创建对应的表单类,在模 ...
 - 简洁侧边wordpress博客模板
		
模板描述:商务领航,尽现成熟稳重的个人小站风格 响应式Web设计,自适应电脑.平板电脑.移动设备 图标字体库,自适应各种终端设备,保证图形图标清晰无锯齿,支持Retina(视网膜屏幕) ...
 - 代码备份 | 博客侧边栏公告(支持HTML代码)(支持JS代码)
		
博客侧边栏公告(支持HTML代码)(支持JS代码) <div id='btnList'> <a class="ivu-btn ivu-btn-primary" h ...
 - css大牛的博客
		
一个不能再牛的个人简历,请用pc观看:http://strml.net/ 用css来画圆http://jingyan.baidu.com/article/c910274be4dd69cd371d2d4 ...
 
随机推荐
- NYOJ题目845无主之地1
			
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAskAAAKbCAIAAACIEYBGAAAgAElEQVR4nO3dvXKkPLe38X0Szn0gjv
 - DOM - EventListener 句柄操作
			
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
 - babyClock 1.0发布(Android2.2以上)
			
[总体说明] babyClock是以天为单位,进行提醒的小工具:可以设置多个闹钟,每个闹钟又按照频率分为多个提醒:过期后自动设置到明天该时刻进行提醒. 一个闹钟包含时间区段.提醒频率:进入时间区段时, ...
 - PHP不同域名cookie共享(单点登录实现原理)
			
PHP使用P3P完成COOKIE跨域操作实际实用中,类似的需求有,比如说我们有两个域名,我们想实现在一个域名登录后,能自动完成另一个域名的登录,也就是单点登录(SSO)功能.为了测试的方便,先编辑ho ...
 - select * from salgrade for update和select * from salgrade for update nowait区别
			
1,select * from salgrade for update session1 session2 SQL> delete salgrade where grade=1; 1 row d ...
 - ZLL本地局域网通信过程
			
Interface_srpcserver -----以灯的状态操作位例 网关与客户端通过Socket API通信,Socket API在socket_server.c中实现,socket_server ...
 - C语言中如何将二维数组作为函数的参数传递
			
今天写程序的时候要用到二维数组作参数传给一个函数,我发现将二维数组作参数进行传递还不是想象得那么简单里,但是最后我也解决了遇到的问题,所以这篇文章主要介绍如何处理二维数组当作参数传递的情况,希望大家不 ...
 - 官方Tomcat 8.0.24 Web漏洞整改记录
			
测试环境 web服务器:apache-tomcat-8.0.24-windows-x64 测试工具:Acunetix Web Vulnerability Scanner 9.5 官方Tomcat测试结 ...
 - windows OBJECT查找
			
PspCidTable表里.索引值总之4的倍数.也就是说 PID/4 才是PspCidTable索引.*8 才是PsPCidTable+偏移.获取进程对应的 _HANDLE_TABLE_ENTRY 结 ...
 - 移动端-解决ios连续点击页面上移问题
			
引入js即可 //解决ios双击页面上移问题//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了(function(){ var ag ...