乐趣参与 » 校内

校内静态模板

leplay — Sat, 21 Mar 2009 07:18:07 +0000

不知道这么说准不准确。我的意思是，和 wordpress 类似，当别人访问你的校内页面时，不显示个人新鲜事等其他常规内容，而是显示自己设置的固定不变的页面。

但我现在能做的并不是真正意义上的自定义页面，而只是在 CSS 中添加了一张 body 的背景图，然后将其他栏目的 CSS 属性设置为 display: none ;

我原本打算将这张图作为背景图：

可是后来突然想到叽歪有一项图片窗的服务（就是将最新的叽歪动态制作成图片），如果将叽歪生成的图片作为背景图的话，这样不就可以让别人直接在我的校内页面浏览我的叽歪了麽。说干就干，先去叽歪生成图片：

然后将下面这段CSS复制到校内的编辑个人页面上：

body {
background: #999999 url(‘http://api.jiwai.de/g/i/183696/c10/w400/m2/g.png‘) fixed no-repeat center;}

/* Made By leplay ^^ */
.profile .profile-panel{display:none;}
.betabar { display:none; }
.menu-bar { display:none; }

.left-column{ display:none; }
.profile-tabs{ display:none; }
.tab-content{ display:none; }
#footer{ display:none; }
#wpiroot{display:none;}

就这样，我的校内页面就完成了。这里围观。

按照上面的方法将个人页面换成静态的图片要有这样的代价：

你的个人页面上只有一张背景图，其余什么内容都没有。
没有任何连接。

如果你每时每刻都想着校内，那我不建议你这么做，你还是安心去抢你的车位，偷别人的南瓜去吧。

校内模板——不要在校内浪费太多时间

leplay — Wed, 04 Mar 2009 03:52:29 +0000

预览

名称：Waste-time

主题：不要在校内浪费太多时间！

代码：
body {
    margin:10px auto;
    color: #3C3940;
    font:13px , "Comic Sans MS", "Trebuchet MS", verdana, sans-serif;
    background: #1A1B1F url(‘http://xiaopback.cn/images/wastebg.gif’) fixed no-repeat top left;
}
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #1f3a87;text-decoration:none;}
a:hover {color: #bc2931; text-decoration: underline;}
a:active {color: #bc2931;}

/* Made By ZhouGe ^^ */
.profile .profile-panel{ background:url() no-repeat 50% 0;border-bottom:none;}
.betabar { opacity:0.0; }
.menu-bar { opacity:0.0; }

.left-column{ margin:0 auto; background-color: #FFF; padding-top:20px; padding-bottom:10px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px; border-left:7px solid #FFF;}
.profile-tabs{ margin:0 auto; background-color:#FFF; padding-top:20px; -moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;}
.tab-content{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}
#footer{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius: 5px;-webkit-border-radius: 5px; padding-top:3px; margin-top:15px; margin-bottom:40px;}

使用方法：你比我清楚。

使用代价：原则上免费，但你要是非要请我吃饭或者棒棒糖的话，我是不会拒绝的。

校内网之歌

ZhouGe — Thu, 26 Feb 2009 04:02:52 +0000

来源在这里。

仅供娱乐。

另三款 Twitter 风格校内模板

ZhouGe — Tue, 20 Jan 2009 17:24:48 +0000

昨天凌晨，ZhouGe 发布了自己的第一款校内模板 “Twitter Theme 4”，今天同样按照 Twitter 所提供的样式，做成了另外三个校内模板—— Twitter Theme 1 、Twitter Theme 9 、Twitter Theme 10 。

一、 Twitter Theme 1.

Twitter Theme 1代码：

body { background: #9ae4e8 url(http://assets2.twitter.com/images/bg.gif) fixed no-repeat top left; padding-top:0px;}
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #1f3a87;text-decoration:none;}
a:hover {color: #bc2931; text-decoration: underline;}
a:active {color: #bc2931;}

/* Made By ZhouGe ^^ */

.profile .profile-panel{background:url() no-repeat 50% 0;border-bottom:none;padding-top:100px;}
.left-column{ margin:0 auto; background-color:#FFF; padding-top:20px; padding-bottom:10px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px; border-left:7px solid #FFF;}
.profile-tabs{ margin:0 auto; background-color:#FFF; padding-top:20px; -moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;}
.tab-content{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}
#footer{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius: 5px;-webkit-border-radius: 5px; padding-top:3px; margin-top:15px; margin-bottom:40px;}

二、Twitter Theme 9.

Twitter Theme 9 代码：

body {

color: #666666;

background-color: #1A1B1F;

background: #1A1B1F url(‘http://static.twitter.com//images/themes/theme9/bg.gif’) fixed no-repeat top left; }

a:link {color: #2FC2EF; text-decoration:none;}

a:visited {color: #2FC2EF;text-decoration:none;}

a:hover {color: #bc2931; text-decoration: underline;}

a:active {color: #bc2931;}

/* Made By ZhouGe ^^ */

.profile .profile-panel{background:url() no-repeat 50% 0;border-bottom:none;padding-top:150px;}

.left-column{ margin:0 auto; background-color:#FFF; padding-top:20px; padding-bottom:10px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px; border-left:7px solid #FFF;}

.profile-tabs{ margin:0 auto; background-color:#FFF; padding-top:20px; -moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;}

.tab-content{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}

#footer{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius: 5px;-webkit-border-radius: 5px; padding-top:3px; margin-top:15px; margin-bottom:40px;}

三、 Twitter Theme 10 .

Twitter Theme 10 代码：

body {
color: #3D1957;
background-color: #642D8B;
background: #642D8B url(‘http://static.twitter.com//images/themes/theme10/bg.gif’) fixed repeat top left;
}
a:link {color:#1f3a87; text-decoration:none;}
a:visited {color: #1f3a87;text-decoration:none;}
a:hover {color: #bc2931; text-decoration: underline;}
a:active {color: #bc2931;}

/* Made By ZhouGe ^^ */

四、要说的.

关于这三款模板要说的都和第一款（Twitter Theme 1）一样，使用方法也相同。

一款 Twitter 风格的校内模板

ZhouGe — Tue, 20 Jan 2009 11:46:27 +0000

话说，ZhouGe 在公元2009年1月20日，凌晨2:58分完成了自己的第一款校内模板—— Twitter Theme 4。

你可以到我的个人主页上查看该模板的效果(如果看不到，说明你将其他人的涂鸦板屏蔽了，可在编辑涂鸦板里设置)。下图为被校内压缩的效果图：

关于这款模板，要说明的几个问题：

该模板的创作灵感来源于 Twitter 的 Theme 4 主题，所以我将这款模板命名为“Twitter theme 4”。
该模板背景设置为固定。
该模板采用了圆角样式，看起来更和谐（但在IE下可能显示不出来）。
该模板只采用了一张23K的背景图片，原则上不会耗费太多打开个人主页的时间。
盖模板的背景图片盗链于 Twiiter ，在这里道歉一下，嘿嘿。
这是本人的第一款校内模板，没有深入到细微之处。
这个模板真的是我原创的，虽然我不知道该怎么证明， ^^ 。

如果你觉得这款模板还凑合，或者仅仅是给我面子，你可以按照下面的方法使用：

校内模板其实就是一堆 CSS 代码，你在 CSS 中设置好的样式会根据正文的 DIV 位置相应的显示。我的这款模板的CSS代码是：

body {
    margin:0px auto;
    color: #3C3940;
    background-color: #0099B9;
    background: #0099B9 url(‘http://static.twitter.com//images/themes/theme4/bg.gif’) fixed no-repeat top left;
}
a:link {color: ; text-decoration:none;}
a:visited {color: #1f3a87;text-decoration:none;}
a:hover {color: #bc2931; text-decoration: underline;}
a:active {color: #bc2931;}

/* Made By ZhouGe ^^ */

.profile .profile-panel{background:url() no-repeat 50% 0;border-bottom:none;padding-top:150px;}
.left-column{ margin:0 auto; background-color:#FFF; padding-top:20px; padding-bottom:10px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px; border-left:7px solid #FFF;}
.profile-tabs{ margin:0 auto; background-color:#FFF; padding-top:20px; -moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;}
.tab-content{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}
#footer{ margin:0 auto; width:950px; background-color:#FFF; -moz-border-radius: 5px;-webkit-border-radius: 5px; padding-top:3px; margin-top:15px; margin-bottom:40px;}

你选择个人主页右上角的在这里修改新版涂鸦板的CSS栏中，将这堆代码复制粘贴过去就可以使用了。

如果你认为这款模板有不足之处，我会进行相应的修改。

任何人均可免费使用此模板，只要在下面留言告诉我一声就可以，ZhouGe 不会收取任何费用，但如果你非要请我吃饭，或者请我吃棒棒糖以表谢意的话，我还是十分愿意接受的，哈哈~。