修改博客园模板样式

当我们注册博客园以后,首先是选择自己喜欢的首页模板,当我们对博客园给出的模板不满意时,我们就要对已有的模板进行修改。

在这里我采用的模板是SimpleMemory,因为SimpleMemory模板相对简单,便于对样式已有的修改。

这是本人修改两句代码后的修改

详细步骤:

1.寻找自己喜欢的图片,要求图片足够清晰,以免设置背景时不清楚。博客园首页->管理->相册->设置标题(相册名)->ADD->选择文件(上传图片)->ADD,单击图片进入首页,点击Original Image得到图片链接。

2.选择好模板以后进入自己博客首页,右击屏幕单击检查(本人用的是谷歌浏览器)进入,进入后点击左上角箭头单击<body>,这时在右边就会出现body样式,在这里我们可以修改样式,并在页面中看的效果,一旦刷新页面就会恢复原来效果,我只是添加了一句用于设置页面背景代码“ background: url(//images.cnblogs.com/cnblogs_com/minong/1296159/o_2212212564-11.jpg) fixed;”图片链接由上面获得。

3.复制代码到设置(博客园首页->管理->设置)里面,实现背景设置,在里面写的样式会覆盖已有的样式。

4.修改其他样式同理,例如:

#home {
margin: 0 auto;
opacity: 0.8;
width: 65%;
min-width: 1080px;
background-color: #fff;
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

修改透明度只是在原有的基础上改了一句代码

原文地址:https://www.cnblogs.com/minong/p/9610080.html

时间: 2024-08-24 17:40:06

修改博客园模板样式的相关文章

修改博客园css样式

看到一款博客园主题,感觉很好看,只是有些css样式不怎么满意,所以自己修改了下,修改的方法在这里记录了下.皮肤连接:https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/tree/v1.1.9 F12查看元素,就可以看到css样式的标签,在这里调试好后,拷贝出来就可以了. 关于css和js的压缩工具网址:http://tool.chinaz.com/Tools/CssFormat.aspx 原文地址:https://www.cnblogs.co

自定义博客园主题样式

自定义博客园主题样式 基础实现 之前有记录自己自定义目录以及相关样式功能,感兴趣的可以看下 博客园如何设置目录生成&设置目录&设置标题背景色&修改标题背景色 在此基础上再加点捣鼓内容,实现主题样式透明化.增加侧边“分享”模块.标题级别显示设置 具体代码中会进行注释,可进行相应参考 内容比较粗略,将就看喽~ 透明化 效果 具体实现 ****************************************** 页面定制CSS代码 ************************

博客园主题样式修改教程

实现代码高亮 那怎么使用呢?我是先向博客园申请了js代码的权限,申请入口还是在刚刚那个[设置]里: 我这里是批准了所以显示支持js代码,你们要想实现这个代码高亮,那就得先申请(希望博客园的管理员别打我 —..— ) 然后复制下面代码到[博客侧边栏公告]里: <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script> <script type="text/jav

如何修改博客园的标题,文本,表格等的显示样式

注:这个修改方法需要有些html,css的知识,不然你就要自己去查格式 1,打开你的博客首页 比如我的是这个:http://www.cnblogs.com/progor/ 2,右键查看网页源代码,在网页源代码中查找到 3.点开href的连接,即可获得你当前所用皮肤的css 4.ctrl+a,复制下所有文本 5.把刚才复制的文本,粘贴到文本编辑器中[我用notepad++],然后ctrl+f查找我们要修改的部分,比如标题1的标签为h1,搜索 6.找到目标后,修改成我们想要的效果[比如我给我的h1加

修改博客园日历的默认样式

我们知道,博客园默认的日历样式是灰底的,有点丑. 我想把它改成类似于WIN10的样式. 上代码. #blogCalendar td{ color:#fff; } #blogCalendar td.CalOtherMonthDay{ color:gray; } #blogCalendar td a:link{ color:#fff; background-color:blue; border-radius:2px; } #blogCalendar th.CalDayHeader{ color:#f

【转】 博客园自定义样式修改标签页的icon图标

有没有发现大多数的博客园标签右上角都是一个小矿工,千篇一律没有什么特色,想不想设置一个像我一样的个性化icon图标呢? 按照以下四步你也可以实现自定义标签图标. From To 第一步:挑挑拣拣 选一张icon图标(尺寸不要太大)不然加载会很慢 如果想通过自己的图片生成favicon,可以使用这个网站: Favicon Generator. For real. 第二步:传文档 在博客园的设置界面选择文档,将你喜欢的图片上传上来 第三步:写代码 在设置中的页脚Html代码中插入以下script脚本

自定义博客园模板/css/html/js

唔....实在是找不到什么别的事情好干了,省选凉凉回去学文化课真的说实话很无聊...而且导致现在OI做题并没有什么目的性和系统性...还不如去做物理... 可能有对我博客样式感兴趣的朋友...我这里省去你们F12的时间来介绍一下我的博客模板吧... 首先总的stylecss和大模板都是当初angel_Kitty学姐的,嗯,连接在这,可以自己去看:博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级). 这里着重感谢学姐帮我指导和完善了博客的样式. 看完了上面的应该就已经有了

修改博客园markdown编辑器代码高亮风格的方法

???????作为一个工程师,追求极致与艺术也应当成为我们生活中的一部分,作为自己的心爱之物--博客,当然也得装扮一下,我对代码高亮有自己所喜欢的风格~还好程序员的世界总是共通的,已经有前辈开发了一些代码高亮的样式可供我们开箱即用.Highlightjs就是这样一款产品. ???????下面介绍一下我是如何将这款产品应用于博客园markdown编辑器中的. 第一步,找到你所喜欢的高亮主题 ???????打开Hightlightjs的demo页面 选择你所喜欢的高亮主题.我选择的是Atom One

我的博客园CSS样式分享

过完年又开始上班了,已经从2月25连续加班到现在,晚上11点多才回去,也没时间写文章了. 先分享一下我的博客园的CSS吧. 我的博客皮肤最开始的时候是参考共享一下我的自定义CSS博客皮肤(2012.3) 修改的. 使用的是LessIsMore皮肤 下面是自定义的CSS样式 @charset "utf-8"; body { font-size: 15px; padding: 0; margin: 0; font-family: "微软雅黑", "宋体&quo