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

首先是背景图片,这个修改对模版而言都是通用的

body {
background:url(‘URL‘) no-repeat top center fixed;
}

这里图片路径可以上传到博客本地图片,图片就有了网上路径

然后是正文模块在整体背景中的浮动

#home {

margin:0px auto;
width:1000px;

}

一个控制模块顶部和背景距离

一个控制模块和宽度{当页面缩放的宽度远远小于你设定的宽度,右边搜索框及其他组件都会移动到底层,不利于使用,最好设置一个合适的宽度}

正文模块颜色设置

#home {
    background:颜色代码;
    opacity: 0~1;
    filter: alpha(opacity=0~100);
}

第一个是背景颜色

下面是设置透明度,使用任意一个,第一个越接近1越不透明

搜索/工具栏样式

.catListTitle{
border-left:5px solid #4C98F5;
padding:8px 0 8px 10px;
}

原文地址:https://www.cnblogs.com/fengnan/p/9494939.html

时间: 2024-08-26 05:40:40

博客园设置自定义页面样式的相关文章

博客园CodingLife模板手机样式优化

博客园CodingLife模板手机样式优化:用博客园写笔记也有一段时间了,当我用手机浏览我的文章时感觉样式不太完美,主要是个人首页和文章详情的头部宽度太大,原本大屏右侧的模块放在文章下面后宽度和位置不太合适,刚好今天看到设置中可以上传自定义样式,于是写了一些样式来优化CodingLife模板,等下次有时间再继续优化,感兴趣的园友可以复制以下样式到你的页面定制CSS代码中, /*author stumpx*/ #navigator { min-width: 1200px; } @media (ma

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

我们知道,博客园默认的日历样式是灰底的,有点丑. 我想把它改成类似于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

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

1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限.[博客园]->[设置]->[博客设置],点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷新一下,页面就会显示支持js代码 ,博客园也会在用户邮箱给你发送是否开通js权限的邮件. 2.添加css样式 我们在[管理]-->[设置]-->[博客设置]-->[页面定制CSS代码]中粘贴如下面的代码 #cnblogs_post_body { color: black

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

1.向博客园申请js权限 我们需要进入博客园自定义博客模板的页面,向博客园管理团队申请页面运行js的权限.[博客园]->[设置]->[博客设置],点击页面上的js权限申请,然后填写申请的理由,耐心等几分钟,再刷新一下,页面就会显示支持js代码 ,博客园也会在用户邮箱给你发送是否开通js权限的邮件. 2.添加css样式 我们在[管理]-->[设置]-->[博客设置]-->[页面定制CSS代码]中粘贴如下面的代码 #cnblogs_post_body { color: black

博客园设置类似sublime高亮代码

需要用到highlight.js,需要FQ,官网为https://highlightjs.org,首先官网的只有默认主题包,我们需要自定义主题包需要去它的github上找,地址为https://github.com/isagalaev/highlight.js,我用的主题是monokai-sublime.css 所以呢在github上把这个css文件给copy下来,然后把它的js文件也copy下来.上传文件到博客园,不要用官网的cdn,因为样式不能自定义,还要担心哪天地址不能用了 <link r

粗制博客园皮肤 SimoCoding CSS 样式 —— 轻 Flat 风格

1 #nav_next_page { 2 line-height: 40px; 3 } 4 #nav_next_page a { 5 -webkit-border-radius: 3px; 6 -moz-border-radius: 3px; 7 border-radius: 3px; 8 background-color: #515151; 9 height: 40px; 10 line-height: 40px; 11 color: #fff; 12 display: inline-bloc

博客园屏蔽博文页面广告的方法

在“设置”页面中的“页面定制css”中加入以下css代码即可 #site_nav_under,.c_ad_block{ display:none; } 为了博客园这个还算有节操的网站能够运营下去,还是保留广告吧.博客园的广告不是很影响阅读体验.

博客园设置访问数量统计-小试牛刀

当访问到别人的博客时有个访问数量统计是不是觉得很奇妙. 其实设置起来也很简单,就是一个提供统计访问量的小网站,在上面注册使用就行了. 下面我就来记录下我是如何一步做到的: 1.网上搜索方法啦,找到大佬们提供的博客记录,也就是这个网站:http://www.amazingcounters.com 2.打开发现是英文的,没关系,用谷歌网站自带翻译神器,页面一下子就变成可读页面了 3.操作步骤网站上也提供了,总共分三步,第一步选择自己的风格,然后滑到网页底部,点击步骤2按钮 4.然后进行注册,注意这里

博客园设置背景音乐【不需要额外服务器或第三方音乐平台】

一.申请侧边公告栏 js 权限(页首和页脚都只支持html) 这里就不详说,这个很多人都有说,百度一下即可. 二.选取音乐 你喜欢的音乐,只要浏览器 Audio 标签支持即. 三.上传音乐文件 在博客园管理界面的上传文件出上传你的音乐,看到关键点了没[之前图片缩放后看不清,我给重新截图了]?文件后缀名不是 mp3 等音乐文件后缀名,而是 .js 有木有! 重点就是在这里,你需要将自己的音乐文件该成这里允许的格式上传即可,然后通过 js 创建 DOM 对象,创建一个 Audio 实例即可使用. 在