Skip navigation.

不再更新的 Maple

曼妙光阴,一缕繁华

非常实用、完整和傻瓜的My Opera自定义方法

, , ,

如果自定义my opera的CSS,人们都会认为我应该推荐你仔细阅读WhyOpera小组的post,那里面确实融会贯通了许多匪夷所思的技巧蛋是,对于我自己都没有阅读的东西推荐给你不是什么厚道的行为,因此我决定用实例来教导。本来自己这个CSS写得就很烂没什么好说的,不过我们生活在一个不是很美丽的环境中还是可以有一双发现美的眼睛这句话谁说的了。本教程官方推荐阅读顺序如下:

1、CSS是什么?为什么我们要自定义CSS?(略)
2、从哪里动手开始自定义CSS?(又略)
3、在这里自定义CSS要注意什么东西?
4、有什么捷径可以在短时间内完成一个CSS?(也就是怎样不留下痕迹的抄袭别人的CSS?)
5、有哪些值得我们抄袭的CSS?
6、完了。

如果自定义my opera的CSS,人们都会认为我应该推荐你仔细阅读WhyOpera小组的post,那里面确实融会贯通了许多匪夷所思的技巧蛋是,对于我自己都没有阅读的东西推荐给你不是什么厚道的行为,因此我决定用实例来教导。本来自己这个CSS写得就很烂没什么好说的,不过我们生活在一个不是很美丽的环境中还是可以有一双发现美的眼睛这句话谁说的了。本教程官方推荐阅读顺序如下:

1、CSS是什么?为什么我们要自定义CSS?(略)
2、从哪里动手开始自定义CSS?(又略)
3、在这里自定义CSS要注意什么东西?
4、有什么捷径可以在短时间内完成一个CSS?(也就是怎样不留下痕迹的抄袭别人的CSS?)
5、有哪些值得我们抄袭的CSS?
6、完了。

1、对第一个问题我可以告诉你的是,这个世界上有一种叫做Google的发明,在它那个可以输入一些什么的地方,如果你输入了一些什么,它就会告诉你关于你输入的什么的许多有关或者无关的东西,当然另外一个技巧是从我这里下载一个写得很好的CSS教材,当然不是我写的。要是言及“为什么我们要自定义CSS?”,这是一个难以把握的哲学问题。

2、对第二个问题我可以告诉你的是,我觉得修改CSS对于大多数人来说都是需要花费一定时间和耐心的过程,因此你还是自己找找从哪个地方动手开始定义你的CSS,如果你在找到之前就放弃了,那么即便是我告诉你在哪个地方进入你也不会坚持下来,对不对?可以提示的是从首页进入只需要一如既往的3次点击,如果你沿着一个单向的路径点了十多下都没有找到,那你来问我也没有用了。

3、对第三个问题我以自己的亲身体会告诉你,如果你还没有安装M$的IE浏览器,那么你至少应该用虚拟机或者偷一台同学的机器使用它,因为尽管我们都知道IE是垃圾,但是现在全世界80%以上的人们都在使用垃圾,相比让他们都改变自己的习惯,还不如将就一下算了,真的。Opera完全兼容CSS2.0,号称完全兼容的Firefox在一些细节的解释上(比如图片和菜单)有自己的想法,而IE6.0简直就是半文盲。这三个浏览器都应该准备好,如果你用的是MAC,我也想借你的来用一下。

如果你对官方版本的菜单样式没有我这样偏执的厌恶,并且你对CSS也不是很熟悉,那么在选择三种自定义方式的时候我推荐采用“together with”,因为这样bug比较少——唯一的不足就是如果你想保留菜单的话,原有的菜单位置/样式修改起来需要一些额外的技巧,这个我试过很长时间,并且在不同的浏览器上效果还不同,那么为了不要走火入魔,选择“Only use my custom style sheet”或者将就一下算了。

这个问题还发生在footer的解释上,我至今也没有找到完美兼容三种浏览器的同时修改了位置和样式的方法——如果你想自定义的话——那么我建议你对待它就像我告诉你怎样对待菜单一样。

4、我个人认为既然元素都是opera官方定义好的,修改一些样式没有什么盗版的问题,因此我对自己修订过的CSS向来采取“版权没有,盗版不究”的态度,我不知道别人怎样,因此对可能导致的感情纠葛我概不负责。

如果你想完全自定义CSS,参考/抄袭官方的版本很有必要,看中一个样式之后,比如说是第10个,那么你可以在:

http://my.opera.com/community/css/users/10/main.css

看到你需要的东西,复制进CSS编辑框中,绝大多数情况下就得到了“自定义”的官方Theme,我说绝大多数是因为这样做也曾失败过,如果实在出现这种情况的话我们可以单独交流。

最重要的,看上了一个人的CSS,可以在:

http://my.opera.com/用户ID/homes/user.css

盗取,如果你觉得这样很不道德,那就骂我吧,我确实参看过很多人的CSS,得到了不少灵感。其实上还有很多方法解析一个站点的CSS……

可能大多数人都知道了这些,如果这样的话,你会发现以上你们都白看了。

5、最后,采集些我觉得还不错的自定义主题,因为关注得比较早,对其中的一些历史版本甚至都有所了解,当然长江后浪推前浪,现在可能出现了很漂亮的叶子我没看到,这样的话请告诉我。
fred,opera“官方”的theme很多就是fred的手笔,因此他自己这套CSS无疑是最成功的自定义之一,我觉得每个想这样做的人都应该去看一下,会有一些领悟的。分两栏的设计,一边是图一边是文字,下面是其他post的缩略图,全部是圆角设计(据说这是w2的流行?),唯一不足是写东西的时候要注意一下长度,做图片也辛苦……
Jere,这个16岁的伢子做的一个半透明的效果,非常简约可爱,可惜IE不支持半透明,这个时候你就会发现背景上发怒的猪头不是没有道理的;还有他没有opera blog,效果限于About等页面。
Ilya_B,因为上过一次member of this week,要统计Ilya_B的Theme被多少人抄,基本上很难,800px的固定宽度适合我们很久再没见到的800*600分辨率——如果你要问那么640*480怎么办?——我想说的是支持所有分辨率是没有意义的,否则你将陷入我曾经陷入的为了分辨率走火入魔的状态(那时我有病的在许多站点测试它们的分辨率问题,包括v2ex.com)。Ilya_B的圆角效果都是用图片完成的,footer一栏在IE下也不是很完善,我不知道怎么改。
scipio已经向CSS宣布give up,但他的CSS将永远活在我们心中,最为经典的效果可以从他的主页看到,那一套原版CSS我意外收藏了一份。另外一套就是左边你看到的,Ilya_B帮他保存了。我现在这个theme就在明显的程度上无耻的盗用了他若干想法。
orinoco,在“官方”推出没有sidebar的theme10\11之前(就黑白双刹那两个),orinoco就已经做了这个非常简约的主题,去掉sidebar是很好的,我很早就想学他,但是链接到别人的站点这个问题怎么办?最后我觉得还是牺牲一些载入速度,节约读者点击率吧。
ricewood(together with),ricewood的创意类似原始的打字机,不过细节还很不完善,我有时间的话最想在这个基础上捣鼓一下。趴趴用的也是这个主题,可惜中文的效果很不明显,因为中文没有打字机,看起来就有些散了。
快乐的蚂蚁(together with),蚂蚁好像是出差回来之后彻底的坚决的搬到了opera,虽然是together with的自定义,修改的幅度还是很大的,sidebar和menu都用图片做了圆角的效果,post title前面也插入了小图标(这个效果原来我从trollop那里学来),挺好玩的。
jonimueller(together with),这个together with的自定义也修改得比较严重,最为突出的是大量线框、用图片代替的标题、大胆的背景图样,有些另类的感觉。
My2cents(together with),这是社区大名鼎鼎的SerbianFighter建立的一个group版本,技术上虽然没什么新意,搭配很不错
豆豆,我昨天才看到这个现在很受欢迎的小朋友,前几天做了一个叫做“蓝色夏天”的主题挺不错的(就是左边看到的),不过使用这个的话最好按照她的要求注明一下。
smile_bug,刚才QinGsHuiDanMu提醒我这个叫做smile_bug的家伙,他把侧栏放在左边,也改成800px的宽度,小元素用得特别干净漂亮。其实前几天我看到了的,怎么一下子忘了~~

这之外,还有1ee(此前他修改过一个非常漂亮的版本)、krikotrollopUnBlogeuricomatosdiemachtsrc等具有参考价值。

6、好,就这么多,我就要崩溃不想写了,你能坚持看完这篇文字我非常感谢你。

如果有一天前天买到了《书城》

Comments

qingshuidanmu 2. June 2006, 08:22

晕,一口气写那么多。也不怕累着。不过还是很有参考价值。也省的懒人去修改,这篇POST估计会有N篇评论。呵呵。

qingshuidanmu 2. June 2006, 08:30

还少一个用户。http://my.opera.com/smile_bug/blog/
他的CSS也不错。

qingshuidanmu 2. June 2006, 08:37

具有参考价值的后面几个,都没有把opera自定义的灰色侧边栏给去屏蔽掉。

Maple2005 2. June 2006, 09:02

修订了一下,那个侧边栏没准是人家故意留的呢?

Today and Tomorrow 2. June 2006, 10:12

本小姐决定集成三个CSS,合成一个,现在就开始做,涉及到盗版问题,来找maple你了。从smile_bug开刀。呵呵。

Maple2005 2. June 2006, 10:51

你的ID和集成方式都很彪悍,真的

FallenMax 2. June 2006, 13:23

Maple太强啦~ 全文收下。

iangzs 2. June 2006, 14:08

開心的看完這篇文章:smile:

Maple2005 2. June 2006, 14:18

台湾是中国的一部分

yolisy 2. June 2006, 15:06

果然比较强悍!

qingshuidanmu 2. June 2006, 15:56

PS: smile_bug的链接错误。呵呵。

symbol 3. June 2006, 04:29

谢谢maple,我想要一个能完整显示800x450的图片的css,我现在的会自动缩成600x(在firefox和konqueror中),不知道maple有没有推荐?如果你比较忙,就不用回答啦,呵呵

Maple2005 3. June 2006, 05:10

图片达到了800px那其它的元素怎么办?

syyoung 3. June 2006, 10:30

哈哈~转悠过来,看完了,呵呵~~为水族们做的夏天荣幸的登榜hoho~~~

Maple2005 3. June 2006, 11:09

我也觉得要看完这篇文字需要一些毅力

symbol 3. June 2006, 14:39

谢谢maple,整个宽度不可以改变的吗?那俺不改了

Maple2005 3. June 2006, 15:26

别客气,改当然可以改,我是说如果你的图片占据了800px其他的元素你打算搁哪呢?

green_head 4. June 2006, 04:46

wa ~ 一次性知道了那么多厉害的..呵呵 ,maple果真费心喽.:smile:谢谢喽,有时间再仔细看看.
gh

sq1022 4. June 2006, 05:11

水族那个跟豆豆本来那个都不错地

symbol 4. June 2006, 14:06

maple,如果元素想继续显示在右边呢?

afterdot 5. June 2006, 01:17

要是我就直接抄袭,都不带自定义的……因为还不会CSS,正在看相关教程……

Maple2005 5. June 2006, 04:13

@symbol smile_bug那个元素都在右边的,如下:
#sidewrap {
float: left;
margin: 0 5px;
width: 190px;
}
#mainwrap {
float: right;
margin: 0 5px;
width: 550px;
}

symbol 8. June 2006, 14:11

谢谢,maple,目前还没有时间来写css......,先收下,谢谢啦 ^_^