修改博客园模板样式

minong minong     2022-12-29     507

关键词:

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

在这里我采用的模板是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);

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

 











自定义博客园布局样式(代码片段)

...还是喜欢这种朴素的风格。选择SimpleMemory模板上图成品的修改源码如下:bodybackground-color:#176d4694;#homewidth:90%;background-color:#f‘f‘f;.catListTitlefont-size:2.35em;marg 查看详情

修改博客园css样式

...题,感觉很好看,只是有些css样式不怎么满意,所以自己修改了下,修改的方法在这里记录了下。皮肤连接:https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/tree/v1.1.9F12查看元素,就可以看到css样式的标签,在这里调试好后,拷贝出来就... 查看详情

博客园背景样式修改

先看整体效果  要实现这个背景效果的代码<scriptsrc="https://files.cnblogs.com/files/siwuxie095/canvas-nest.min.js"></script><canvasid="c_n9"width="1920"height="990"style="position:fixed;top:0px;l 查看详情

博客园的自定义皮肤

博客园的自定义皮肤在折腾的好一阵之后,慢慢的对于园子的样式定制有了一些心得。最终借助李宝亨大大的牛气自定义皮肤终于翻身做主人了。感觉好帅的说,下面简单写一下,具体定义皮肤的方式吧。一、选择博客园模板要... 查看详情

博客园主题样式修改教程(代码片段)

实现代码高亮那怎么使用呢?我是先向博客园申请了js代码的权限,申请入口还是在刚刚那个【设置】里:我这里是批准了所以显示支持js代码,你们要想实现这个代码高亮,那就得先申请(希望博客园的管理员别打我—..&mdas... 查看详情

如何设置博客园好看的标题样式

1.向博客园申请js权限  我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】,点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷... 查看详情

如何设置博客园好看的标题样式(代码片段)

1.向博客园申请js权限  我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】,点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷... 查看详情

如何设置博客园好看的标题样式(代码片段)

1.向博客园申请JS权限我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】,点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷新一... 查看详情

自定义博客园主题样式

...园如何设置目录生成&设置目录&设置标题背景色&修改标题背景色在此基础上再加点捣鼓内容,实现主题样式透明化、增加侧边“分享”模块、标题级别显示设置具体代码中会进行注释,可进行相应参考内容比较粗... 查看详情

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

 注:这个修改方法需要有些html,css的知识,不然你就要自己去查格式 1,打开你的博客首页比如我的是这个:http://www.cnblogs.com/progor/ 2,右键查看网页源代码,在网页源代码中查找到 3.点开href的连接,即可获得你... 查看详情

我的博客园定制样式

使用模板:darkgreentrip 1#home{2margin:0auto;3width:80%;/*原始65*/4min-width:980px;/*页面顶部的宽度*/5background-color:rgba(245,245,245,0.7);6padding:30px;7margin-top:50px;8margin-bottom:50px;9box-shadow:02px6 查看详情

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

有没有发现大多数的博客园标签右上角都是一个小矿工,千篇一律没有什么特色,想不想设置一个像我一样的个性化icon图标呢?按照以下四步你也可以实现自定义标签图标。From  To 第一步:挑挑拣拣 选一张icon图... 查看详情

博客园自定义样式(代码片段)

...SimpleMemory,这个皮肤相对来说要轻快、干净,更方便你来修改你的样式。第三步:事实上你可以禁用默认CSS,这也是允许的,不过就会弄成这样学过前端的同学应该知道不掺杂任何任何的CSS就会出现这样的情况,这是浏览器默认... 查看详情

博客园样式自定义(待更新)(代码片段)

...就知道=>其实就是编辑里面打个勾?步骤二,如果你要修改JS=>在编辑的地方申请一下=>一般都会马上批准的。步骤三,开工了。 查看详情

博客园设置自定义页面样式

首先是背景图片,这个修改对模版而言都是通用的bodybackground:url(‘URL‘)no-repeattopcenterfixed;这里图片路径可以上传到博客本地图片,图片就有了网上路径 然后是正文模块在整体背景中的浮动#homemargin:0pxauto;width:1000px;一个控制模... 查看详情

自定义博客园主题和自动生成目录(代码片段)

...出来的效果还是不满意,于是又回到了博客园,只能自己修改下博客主题了。于是百度了下,找到了两篇参考博客:主题修改参考了:一套简约漂亮的响应式博客园主题皮肤添加目录参考了:让博客园博客自动生成章节目录索引... 查看详情

博客园随笔导出chm

...近在博客园看到使用CHM文档采集随笔(续),扒拉下来稍微修改后还真可以使用~.~先看导出的CHM效果图 主要修改的部分:1、博客园随笔从20 查看详情

博客园自定义样式修改标签页的icon图标(代码片段)

有没有发现大多数的博客园标签右上角都是一个小矿工,千篇一律没有什么特色,想不想设置一个像我一样的个性化icon图标呢?按照以下四步你也可以实现自定义标签图标。FromTo第一步:挑挑拣拣选一张icon图标(尺寸不要太大... 查看详情