博客园定制CSS代码

最新推荐文章于 2024-04-09 22:43:12 发布
最新推荐文章于 2024-04-09 22:43:12 发布
阅读量981 收藏 1
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_43125576/article/details/121090018
版权

博客园定制CSS代码步骤

  1. 禁用模板默认 CSS 。

  2. CSS 代码框中，填写定制 CSS 代码。

  3. 定制的 CSS 代码中，如果缺少 home 项，需要进行添加，home 项范例如下：

    其中 width 项的值控制页面宽度

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

举例：博客园定制 newsprint.css

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




/* meyer reset -- http://meyerweb.com/eric/tools/css/reset/ , v2.0 | 20110126 | License: none (public domain) */

@include-when-export url(https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic-ext,cyrillic,latin-ext);

/* =========== */

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: normal;
    src: local('PT Serif'), local('PTSerif-Regular'), url(./newsprint/PT_Serif-Web-Regular.ttf);
}
@font-face {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: normal;
    src: local('PT Serif'), local('PTSerif-Italic'), url('./newsprint/PT_Serif-Web-Italic.ttf')
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: bold;
    src: local('PT Serif'), local('PTSerif-Bold'), url('./newsprint/PT_Serif-Web-Bold.ttf')
}

@font-face {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: bold;
    src: local('PT Serif'), local('PTSerif-BoldItalic'), url('./newsprint/PT_Serif-Web-BoldItalic.ttf')
}

:root {
	--active-file-bg-color: #dadada;
	--active-file-bg-color: rgba(32, 43, 51, 0.63);
	--active-file-text-color: white;
	--bg-color: #f3f2ee;
	--text-color: #1f0909;
}

html {
	font-size: 16px;
}

html, body {
	background-color: #f3f2ee;
	font-family: "PT Serif", 'Times New Roman', Times;
	color: #1f0909;
	line-height: 1.5em;
}

/*#write {
	overflow-x: auto;
    max-width: initial;
	padding-left: calc(50% - 17em);
    padding-right: calc(50% - 17em);
}

@media (max-width: 36em) {
 	#write {
 		padding-left: 1em;
    	padding-right: 1em;
 	}
}*/

#write {
	max-width: 40em;
}

ol,
ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* styles */

/* ====== */

/* headings */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: bold;
}
h1 {
	font-size: 1.875em;
	/*30 / 16*/
	line-height: 1.6em;
	/* 48 / 30*/
	margin-top: 2em;
}
h2,
h3 {
	font-size: 1.3125em;
	/*21 / 16*/
	line-height: 1.15;
	/*24 / 21*/
	margin-top: 2.285714em;
	/*48 / 21*/
	margin-bottom: 1.15em;
	/*24 / 21*/
}
h3 {
	font-weight: normal;
}
h4 {
	font-size: 1.125em;
	/*18 / 16*/
	margin-top: 2.67em;
	/*48 / 18*/
}
h5,
h6 {
	font-size: 1em;
	/*16*/
}
h1 {
	border-bottom: 1px solid;
	margin-bottom: 1.875em;
	padding-bottom: 0.8125em;
}
/* links */

a {
	text-decoration: none;
	color: #065588;
}
a:hover,
a:active {
	text-decoration: underline;
}
/* block spacing */

p,
blockquote,
.md-fences {
	margin-bottom: 1.5em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-bottom: 1.5em;
}
/* blockquote */

blockquote {
	font-style: italic;
	border-left: 5px solid;
	margin-left: 2em;
	padding-left: 1em;
}
/* lists */

ul,
ol {
	margin: 0 0 1.5em 1.5em;
}
ol li {
	list-style-type: decimal;
	list-style-position: outside;
}
ul li {
	list-style-type: disc;
	list-style-position: outside;
}
/* tables */
.md-meta,.md-before, .md-after {
	color:#999;
}

table {
	margin-bottom: 1.5em;
	/*24 / 16*/
	font-size: 1em;
	/* width: 100%; */
}
thead th,
tfoot th {
	padding: .25em .25em .25em .4em;
	text-transform: uppercase;
}
th {
	text-align: left;
}
td {
	vertical-align: top;
	padding: .25em .25em .25em .4em;
}

code,
.md-fences {
	background-color: #dadada;
	padding-left: 1ch;
	padding-right: 1ch;
}
.md-fences {
	margin-left: 2em;
	margin-bottom: 3em;
}

.md-fences .CodeMirror.CodeMirror-wrap {
	top: -0.8em;
}

pre,
code,
tt {
	font-size: .875em;
	line-height: 1.714285em;
}
/* some fixes */

h1 {
	line-height: 1.3em;
	font-weight: normal;
	margin-bottom: 0.5em;
}

p + ul,
p + ol{
	margin-top: -1em;
}

h3 + ul,
h4 + ul,
h5 + ul,
h6 + ul,
h3 + ol,
h4 + ol,
h5 + ol,
h6 + ol {
	margin-top: .5em;
}

li > ul,
li > ol {
	margin-top: inherit;
}

h2,
h3 {
	margin-bottom: .75em;
}
hr {
	border-top: none;
	border-right: none;
	border-bottom: 1px solid;
	border-left: none;
}
h1 {
	border-color: #c5c5c5;
}
blockquote {
	border-color: #bababa;
	color: #656565;
}
thead.md-table-edit {
	background-color: transparent;
}
thead {
	background-color: #dadada;
}
tr:nth-child(even) {
	background: #e8e7e7;
}
hr {
	border-color: #c5c5c5;
}
.task-list{
	padding-left: 1rem;
}

.task-list-item {
	padding-left: 1.5rem;
	list-style-type: none;
}

.task-list-item input:before {
	content: '\221A';
	display: inline-block;
	width: 1.25rem;
  	height: 1.6rem;
	vertical-align: middle;
	text-align: center;
	color: #ddd;
	background-color: #F3F2EE;
}

.task-list-item input:checked:before,
.task-list-item input[checked]:before{
	color: inherit;
}

#write pre.md-meta-block {
	min-height: 1.875rem;
	color: #555;
	border: 0px;
	background: transparent;
	margin-top: -4px;
	margin-left: 1em;
	margin-top: 1em;
}

.md-image>.md-meta {
	color: #9B5146;
}

.md-image>.md-meta{
	font-family: Menlo, 'Ubuntu Mono', Consolas, 'Courier New', 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
}


#write>h3.md-focus:before{
	left: -1.5rem;
	color:#999;
	border-color:#999;
}
#write>h4.md-focus:before{
	left: -1.5rem;
	top: .25rem;
	color:#999;
	border-color:#999;
}
#write>h5.md-focus:before{
	left: -1.5rem;
	top: .0.3125rem;
	color:#999;
	border-color:#999;
}
#write>h6.md-focus:before{
	left: -1.5rem;
	top: 0.3125rem;
	color:#999;
	border-color:#999;
}

.md-toc:focus .md-toc-content{
	margin-top: 19px;
}

.md-toc-content:empty:before{
	color: #065588;
}
.md-toc-item {
	color: #065588;
}
#write div.md-toc-tooltip {
	background-color: #f3f2ee;
}

#typora-sidebar {
	background-color: #f3f2ee;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
  	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
}

.pin-outline #typora-sidebar {
	background: inherit;
	box-shadow: none;
	border-right: 1px dashed;
}

.pin-outline #typora-sidebar:hover .outline-title-wrapper {
	border-left:1px dashed;
}

.outline-item:hover {
  background-color: #dadada;
  border-left: 28px solid #dadada;
  border-right: 18px solid #dadada;
}

.typora-node .outline-item:hover {
  	border-right: 28px solid #dadada;
}

.outline-expander:before {
  content: "\f0da";
  font-family: FontAwesome;
  font-size:14px;
  top: 1px;
}

.outline-expander:hover:before,
.outline-item-open>.outline-item>.outline-expander:before {
  content: "\f0d7";
}

.modal-content {
	background-color: #f3f2ee;
}

.auto-suggest-container ul li {
	list-style-type: none;
}

/** UI for electron */

.megamenu-menu,
#top-titlebar, #top-titlebar *,
.megamenu-content {
	background: #f3f2ee;
	color: #1f0909;
}

.megamenu-menu-header {
	border-bottom: 1px dashed #202B33;
}

.megamenu-menu {
	box-shadow: none;
	border-right: 1px dashed;
}

header, .context-menu, .megamenu-content, footer {
	font-family: "PT Serif", 'Times New Roman', Times;
    color: #1f0909;
}

#megamenu-back-btn {
	color: #1f0909;
	border-color: #1f0909;
}

.megamenu-menu-header #megamenu-menu-header-title:before {
	color: #1f0909;
}

.megamenu-menu-list li a:hover, .megamenu-menu-list li a.active {
	color: inherit;
	background-color: #e8e7df;
}

.long-btn:hover {
	background-color: #e8e7df;
}

#recent-file-panel tbody tr:nth-child(2n-1) {
    background-color: transparent !important;
}

.megamenu-menu-panel tbody tr:hover td:nth-child(2) {
    color: inherit;
}

.megamenu-menu-panel .btn {
	background-color: #D2D1D1;
}

.btn-default {
	background-color: transparent;
}

.typora-sourceview-on #toggle-sourceview-btn,
.show-word-count #footer-word-count {
	background: #c7c5c5;
}

#typora-quick-open {
    background-color: inherit;
}

.md-diagram-panel {
	margin-left: -1ch;
	margin-top: 24px;
}

.file-list-item-file-name {
	font-weight: initial;
}

.file-list-item-summary {
	opacity: 1;
}

.file-list-item {
	color: #777;
}

.file-list-item.active {
	background-color: inherit;
	color: black;
}

.ty-side-sort-btn.active {
	background-color: inherit;
}

.file-list-item.active .file-list-item-file-name  {
	font-weight: bold;
}

.file-list-item{
    opacity:1 !important;
}

.file-library-node.active>.file-node-background{
	background-color: rgba(32, 43, 51, 0.63);
	background-color: var(--active-file-bg-color);
}

.file-tree-node.active>.file-node-content{
	color: white;
	color: var(--active-file-text-color);
}
ltimaginea
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客园美化.zip,含HTML+js+css代码
12-19
博客园美化.zip是一个包含HTML、JavaScript和CSS代码的压缩包，专门用于提升博客园网站的视觉效果和用户体验。这个项目可能包含了对博客园原有界面的定制化修改，使其更具个性化和吸引力。接下来，我们将深入探讨这...
cnblog-theme-simpcode:一款简单干净的博客园主题
05-23
page.css，将里面的内容 Copy 到 页面定制css代码 框中，同时将选项禁用模板默认CSS勾上。 如果需要修改博客上面的那个头像，可定位到如下css 代码进行修改： #header::before { background-image: url(//images....
博客园 css页面定制代码
weixin_30496751的博客
01-25 211
1、勾选“禁用模板默认CSS” 2、将下面代码粘贴到“页面定制CSS代码”部分 1 /*公用*/ 2 body { 3 font-size:15px; 4 padding:0; 5 margin:0; 6 font-family:"微软雅黑","宋体",Arial; 7 background:#205...
博客园 页面定制CSS代码
alnxtmp169007749的博客
02-18 894
更新时间：2019-02-18 花了一点时间修改自己的博客背景设置，现在分享一下代码。希望对大家有帮助。我的比较简单，主要代码模板来源于另外一个博主，然后我在基础上进行了部分修改。原博主的连接：https://www.cnblogs.com/Penn000/p/6947472.html。 　　如果希望修改成类似我这样的话->首先博客皮肤选择darkg...
【CSS】MDN
最新发布
daban2008的专栏
04-09 1226
标签不区分大小写示例： 1.1.2 通用选择器 选择文档中所有内容，重置样式表中使用较多鉴于（代表所有的div元素，并且是第一个子）和（代表div的后代元素，并且是第一个子）容易混淆则使用代替后者类名区分大小写示例： 定位特定元素的类： 多个类定位一个元素： 1.1.4 ID选择器 ID区分大小写示例： 1.1.5 属性选择器 存在和值选择器示例： 子字符串匹配选择器示例： 如果要匹配不区分大小写的属性值，可以在右括号前使用值i示例： 1.1.6 伪类和伪元素选择器 伪类伪类是一个选择器，它选择处于特定状态
博客园页面定制CSS代码
weixin_30659829的博客
06-05 457
博客园页面定制CSS代码 要是觉得有用，就点个推荐呗～ 1 #home { 2 margin: 0 auto; 3 width: 80%;/*原始65*/ 4 min-width: 980px;/*页面顶部的宽度*/ 5 background-color: rgba(245, 245, 245, 0.7); 6 p...
css样式
切躁切勇,伏枥藏锋
11-04 3908
字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: b...
SimpleMemory 博客园主题定制美化 配置详解
极客小俊
09-02 2388
你看我的博客多好看! 你也可以!
Beautifycnblogs博客园样式美化
08-10
这个项目通常由前端开发者或者对网页设计有兴趣的用户进行，他们通过自定义CSS样式和JavaScript脚本来实现博客的个性化定制。 在CSS相关方面，这个项目会涉及到以下几个关键知识点： 1. **选择器与属性**：CSS选择...
博客园主题eXtremelySimple极简
08-11
同时，通过学习和修改这些文件，可以进一步定制自己的博客园主题，满足个性化需求。记住，简洁的设计并不意味着功能的缺失，反而它强调的是内容的清晰和易读，这也是eXtremely Simple主题的核心设计理念。
Cnblogs-Theme:博客园皮肤
05-06
│ ├─ base.min.css - 页面定制CSS代码压缩版本（使用此版本，禁用默认） │ ├─ marvin.nav2.css - 文章目录样式文件 │ ├─ menu_bubble.css - 侧边栏样式文件 │ └─ ... ├─ html │ ├─ pageFooter....
make_cnblogs_better:博客园样式美化、自定义博客园样式
04-28
食用方法 首先你得有个 打开 申请js权限 在博客皮肤选项卡中将博客皮肤设置为： 将 复制到 页面定制CSS代码 代码框内 将 复制到 页首Html代码 代码框内 将 复制到 页脚Html代码 代码框内 根据自身情况修改页尾.html中的js [removed] //博主名称 可不改，默认取博客园提供的 var nickName =null; //slogan var slogan = '立德立言，无闻西东'; //icon var icon = "https://ae01.alicdn.com/kf/H445e0280b88f4f34a848238a848a687fw.png"; //默认博客背景图片 var defaultPic="https://img2018.cnblo
打造博客园(cnblogs)超级自定义界面
10-29
有部分网友提出想了解一下像我这样的高度订制化博客界面是如何做出来的。所以在这里给大家分享一下经验。
博客园博客修改模板的CSS
weixin_34403693的博客
03-11 325
页面定制CSS代码： #ad_t2,#ad_c1,#under_post_news,#under_post_kb,#ad_c2{ display:none; } body{ padding-top:20px; /*font-family:"Comic Sans MS";*/ } #main{ margin-top:44px; width:1256px; }...
[技术] 如何正确食用cnblogs的CSS定制
weixin_30376163的博客
07-31 126
用过cnblogs的估计都知道cnblogs提供了相对比较开放的个性化选项,其中最为突出的估计就是页面CSS定制了.但是没学过Web前端的人可能并不会用这个东西... 所以我打算在此分享一些定制CSS过程中使用的奇技淫巧一些方法来帮助大家定制blog qwq 以后如果想到新的主意或者更好的表述的话估计还会回来更新一波...本博文不定期更新吧w 博主并非专业Web开发,所以可能有些语...
css打造自己的博客园
weixin_30894389的博客
02-15 157
现在互联网上提供的社区、博客、免费空间的网站有很多。像交友类的社区网站有myspace、facebook，国内的则有校内、亿聚、占座等，而博客则有像博客中国、新浪博客、博客园等。我学习web前端技术也有一定的时间了，最近在博客园这个国内著名的开发网站上注册了一个帐户。昨天刚考完试，今天周末，有一把时间供自己挥霍。就开始自己整整博客。 当然，自我臭屁一下，作为一个学css的csser。拿模板...
一步一步教你自定义博客园（cnblog）界面
abcyyjjkk的博客
04-19 4349
http://www.cnblogs.com/voidsky/p/5490220.html?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io
博客园页面定制html代码,博客园代码定制
weixin_34696129的博客
06-09 370
博客园代码定制版本：2019-08-11本文基于Simple Memory模板，且已获取CSS和JS权限，此版本并非最终版本。如有错误请指出，代码开源可以修改完善，仅用于学习交流，转载时请注明出处！本文记录了对博客园主页优化的尝试过程以及相关的CSS源码。在此之前默认已在“管理-选项”部分设定好了每页显示的内容，在“管理-设置”部分进行下列设置。Part 1定制CSS代码(body部分)首先应该解...
html+css博客静态页面
belong_me的博客
01-02 3846
首页html代码 博客 技术博客空间 家
博客园修改页面显示样式css
05-14
要修改博客园页面的显示样式，你需要编辑博客园的模板文件，也就是修改 CSS 文件。具体步骤如下： 1. 登录博客园，进入「管理后台」，选择「...并且在修改 CSS 文件时，要注意保留原有代码，避免出现不必要的错误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值