wd博客园自定义主题样式

1

打开后台设置界面,进入你的博客首页,打开调试器(chrome自带调试器或firebug),看到哪里不爽的,定位到页面dom结构的相关元素,开始调试,例如我想改变下body的背景:

其中http://files.cnblogs.com/cyStyle路径是在后台文件上传时的根路径,你可以上传样式,脚本,压缩文件等,不过是有大小限制的,并且更新文件时需要注意CDN的缓存。调试完毕后进入设置页面,在页面定制CSS代码框里输入你想要的代码即可,保存即可。返回博客首页发现body背景已经改变。对于权重不够的属性,可以在属性值后面加上 !important ,一招制敌~~~

2

根据以上步骤一步步调试,直至达到你的审美观。当你调试完毕后,你可以把这些css打包成一个文件然后上传,在设置页面的页首html代码处引入,如:<link type="text/css" rel="stylesheet" href="(http://files.cnblogs.com/cyStyle/custom.cs" /> 如果你觉得你的样式足够可以替换原来主题提供的样式了,则可以在设置页面里禁用模板默认CSS。接下来你可以在设置页面的博客侧边栏公告处定义一些个人公共信息,例如:

<div class="pageview">欢迎第 <img border="0" src="http://cc.amazingcounters.com/counter.php?i=3182973&c=9549232" width="60" alt="访客统计" > 个访客</div>

<p class="para">关于我:<strong>热衷和关注前端开发的屌丝青年一枚~</strong></p>

<p class="para">博客:<a href="http://hcy2367.github.io/" title="chmyun‘s blog" target="_blank">http://hcy2367.github.io/</a></p>

<p class="para">联系我:<a href="mailto:[email protected]" title="email">[email protected]</a></p>

<a href="https://github.com/hcy2367"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

3

如果你想引入js,则需要发邮件到[email protected]申请权限,为什么要引入js?比如我要改变页面加载后的dom结构,我要加载一些类库和插件(如代码高亮插件prettify.jsbootstrap),我要引入社会化分享(百度分享jiathis),我要做一些特效(最近特么流行的雪花漫天飞)等等,值得注意的是,最好不要直接在设置页面的页脚html代码加入内嵌脚本,否则会出现一些奇怪的现象,比如alert会被过滤掉,而外部文件不会,因为博客园后台会对html代码进行一些过滤的处理。完成这些后就可以定制属于我们自己想要的博客主题了。

值得注意的是:如果你想隐藏某些不想看到的模块,如日历模块,当你在dom就绪时尝试隐藏时你会发现该元素并没有隐藏,需要在window onload触发时再执行相关操作,原因估计是这些模块本来就被设计好在页面加载完毕后再加载的,或者是ajax异步加载引起的,具体原因需要探讨下。

时间: 2024-11-08 22:37:10

wd博客园自定义主题样式的相关文章

博客园自定义主题样式

记录我在定制个人blog页面效果时遇到的技巧及方法等. 基本流程 设定博客皮肤为BluSky 定制首页代码:引入外部CSS 页顶博主名字及副标题 在首页html内输入以下代码可添加博主名到页面顶端,也可添加副标题: <header class="main-header" id="site-head"> <div id="top" class="vertical"> <div id="si

博客园自定义CSS样式设置

关于博客园自定义CSS样式设置 关于博客园自定义CSS样式设置 首先,选择一个博客皮肤模板,如下 然后,F12审查元素,可对右侧的元素规则进行自定义更改,然后覆盖原CSS 譬如看看取消掉自定义背景图片是什么样子,同理也可以添加CSS样式代码 如此修改完后,就可在页面定制CSS代码框中填上你所需要修改的代码 下面是我的页面定制CSS代码: 1.html,body{2. color: #807C7C;3. font-family: "Helvetica Neue",Helvetica,Ar

博客园自定义主题分享-简洁、漂亮

主题说明 主题介绍 本博客基于GShang博客园主题进行修改,在此表示衷心的感谢! GShang 主题安装 GShang博客园主题高级版本适配教程详解 博客地址 wybing的博客园 主题预览 顶部导航栏 轮播图 侧边栏 首页随笔 作者信息 发表评论 评论列表 持续开发 学习软件开发两年多以来,大部分课程是后端相关知识,接下来的日子,我会努力学习前端知识,更好的开发主题. 原文地址:https://www.cnblogs.com/wybing/p/11996931.html

博客园自定义目录

博客园自定义目录js样式在css中设置 TOC 博客园自定义目录 参考:https://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655 参考了这篇博客,但是这个只显示h2,h3的标题,就自己处理了一下,显示了h1--h5的标题 之前使用的是这样的目录https://www.cnblogs.com/ziyue7575/p/11407354.html 但是目录隐藏之后,这块区域仍然不能点击,所以,就自己写了一下....就是丑了点 js样式 在页首htm

博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)

前言 在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动画特效,在本文中我们将教大家制作当前简约的页面制作方法. 只要你们有需求,我会尽量帮助到大家,在此感谢各位广大粉丝的支持和理解,我会尽量做到最好,希望小主们不要吝啬你们的支持和推荐,动动小手顶一顶,非常感谢大家长久的陪伴~~ 全部过程都是在“管理->设置”中完成的,博客皮肤推荐使用Simple Me

博客园自定义样式

我现在的博客园首页暂时应该是一个女生背景,一些星星的悬浮飘扬 那么我们怎么来设置博客园的自定义的样式,而不是不个性的默认界面呢? 第一步:进入你的首页,打开管理 => 设置 第二步:我在博客皮肤中选择了SimpleMemory,这个皮肤相对来说要轻快.干净,更方便你来修改你的样式. 第三步:事实上你可以禁用默认CSS,这也是允许的,不过就会弄成这样 学过前端的同学应该知道不掺杂任何任何的CSS就会出现这样的情况,这是浏览器默认给定的样式,而不是博客园给的CSS默认样式(所以你已经禁用了博客园的默

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

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

两分钟搞定博客园自定义样式

整体皮肤样式 选用的是在 SimpleMemory 基础上进行改造.所以注意:引用模板css样式取药取消勾选 将以下样式复制到 页面定制CSS代码 中: #home h1{ font-size:45px; } body{ // background-image: url("https://www.cnblogs.com/images/cnblogs_com/lvonve/1497718/o_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190706122237.j

博客园自定义CSS美化 屏蔽广告等

通过自定义CSS,实现在博客园屏蔽广告.美化排版等. 需要禁用模板CSS 1 body{ 2 background: url(http://images.cnblogs.com/cnblogs_com/storyicon/1107385/o_Z.jpg); 3 font-family: "Hiragino Sans GB","Microsoft YaHei",\5FAE\8F6F\96C5\9ED1,tahoma,arial,simsun,\5B8B\4F53; 4