泪划痕
Best viewed in Google Chrome

2011年7月14日星期四

sidebar小工具分开 (purple)


如图,将sidebar小工具分开……

信息中心 - 设计 - 修改HTML

CTRL+F/* Content


/* Content
----------------------------------------------- */
下面添加以下代码。

.sidebar .widget  {
border-top:3px solid #000000;
border-left: 3px solid #000000;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


如下图:
提示:
*青色字体 = 数目越大,框框线条越粗
*粉色字体 = 框框线条颜色的颜色代码
*红色字体 = 框框线条类型

框框线条类型如下:

53 道泪痕:

cartoon muii ♥ 说...

我弄不到嗯 :(

独泪 说...

是不是你的博客背景是黑色地说?
因为我弄得这代码是属于黑色框框的,颜色代码要自行修改哦 =)
不然黑色背景看不到黑色的框框的 =)

Sandy 说...

找不到的?=(

独泪 说...

哦,你是说找不到
/* Content << 这个字吗@@?

找不到的话,可以找 body { 哦
然后把代码paste在body { 前面 =)

Sandy 说...

嗯~>< 喔会了~^^ 谢谢你哦~:D

xshengxpurple 说...

为什么我弄不到的??

独泪 说...

傻猪
不客气^^

xpurpletianx
注意看看是不是放错了什么步骤哦 =)
希望能保存你的那个效果哦,方便我到你博客看看出了什么问题=)

xshengxpurple 说...

thank you~
I did it!!

独泪 说...

welcome ^^

Vycki Teoh 说...

如何把框框怎样弄成圆角??

独泪 说...

在.sidebar .widget { 下面添加以下代码哦 ^^

-moz-border-radius: 80px;
border-radius: 80px;

Unknown 说...

请问下 那个状态那个是怎么弄的啊?我好想要啊><

独泪 说...

zhutou
好的哦~会写给你~ ^^

Akimi 说...

我弄不到的.
PASTE 了也是没有的.
请问哪里出问题吖?

独泪 说...

因为你已经有一个
.sidebar .widget {
@@

只要删除那个你现在paste的代码,
再CTRL+F找 .sidebar .widget {

把以上帖子给的代码paste去下面哦 =)
(.sidebar .widget { 后面的代码)

Akimi 说...

可是还是一样没有呃~
不过还是谢谢你了=)

独泪 说...

@@是找不到那个代码吗@@?
你的模板是旧模板吗@_@?

Akimi 说...
此评论已被作者删除。
Akimi 说...

我有找到.sidebar .widget {这个代码.
也delete了之前paste的代码.
一样也是没有.
因为没有出现我把.sidebar .widget {给delete了.
然后我把帖子中的代码paste去/* Content 下面.
一样也是没有.
我的是新模板.
抱歉,打扰了><

独泪 说...

删掉 你那个.sidebar .widget {(或许你的代码错了)
重新照着教程的步骤拷贝代码放到content下面

记得 .sidebar .widget {
不要去掉空格 =)

Akimi 说...

谢谢=)

elaine 说...

为什么我弄了但没有效果...没有线的..

独泪 说...

Akimi
不客气 =)

elaine
唔,是不是无意删了什么所以没有线,还是颜色方面
希望能够保存,方便我看 =)

elaine 说...

.sidebar .widget {
-moz-border-radius: 80px;
border-radius: 80px;
border-top:3px solid #FFD9EC;
border-left: 3px solid #FFD9EC;
border-right: 3px solid #FFD9EC;
border-bottom: 3px solid #FFD9EC;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

我放的是这样....

独泪 说...

唔,可以的话希望能保存在你博客,我会帮你看……

KarenHiime 说...

要怎么设计哦?

elaine 说...

你要怎么看呢??

独泪 说...

KarenHiime
更改数字,或者名字可以设计,教程有写

elaine
你保存我才看到,你没保存就没办法替你解决问题。

elaine 说...

保存了哦...

韩晓娴 ✿ 、 说...

泪~~要怎么弄宽它 ?

独泪 说...

elaine
嗯,解决了 =)

XiiaoXiian_Amelia
信息中心 - 设计 - 模板设计器 - 宽度 那里可以调整宽度 =)

韩晓娴 ✿ 、 说...

噢噢、好的、谢谢你噢 =DD

韩晓娴 ✿ 、 说...

可不可以把它弄成圆角的 ?? ><

独泪 说...

可以,在 .sidebar .widget { 下面 放

-moz-border-radius: 25px;
border-radius: 25px;

就可以了 =)

XinJie 说...

不能弄的说 :(

ヅ 金雨炫 说...

泪:要怎么样弄成像你这样的效果?

♥мeιмeι 说...

http://www.miss-meimei.blogspot.com/
你好丫..^^我只弄到一半呢~
怎么会这样啊?我用新模板..
谢谢你呢^^

独泪 说...

_мιѕѕ χιιασ кα__신 지에__™
唔,是保存不到代码么

Ms. Devil
唔,我这样的效果,是指下面有 dotted 的么,

修改 border-bottom 那里就可以了 :)


♥мeιмeι
CTRL+F找 .main-inner .widget {

你会看到下面有类似这排字
border-bottom: 1px solid transparent;

删掉它,然后预览+保存就可以了 ^^

ヅ 金雨炫 说...

我喜欢你这样的效果 ><
能教我怎么弄成像你这样的效果么?

匿名 说...

请问怎样弄那个HTML...?
我找不到 =(

独泪 说...

Ms. Devil
唔,你想要哪个部分的效果地说,是 下面那个 框框么

只需要把 这个教程
border-bottom: 3px solid #000000;
里的 solid 改成 dotted 就行了 =)

jing yee
是指 “修改HTML”么

登入博客 - 设计 - 修改HTML

就会到达修改HTML的地方了 ;)

ヅ 金雨炫 说...

完全跟你一样的效果地说><
要怎么弄?

Baka Muii♥ 说...

有些widgets我不想围上框框嗫~
怎么弄吖??/.\

独泪 说...

Ms. Devil
我的是这样的:)
border-top: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
border-right: 1px solid #E0E0E0;
border-bottom: 5px dotted #E0E0E0;

Baka Muii♥
唔,.sidebar .widget { 是每个小工具已经固定有框框了,不行分开地说 :)

WendyLee 说...

如果要好像那个例子一样的咧?
我不会那个圆角的形状... ><

能请你用e-mail或是fb回复我吗?
谢谢~~

e-mail: wendylee1997@hotmail.com
fb id name: wendy lee

~Jetyii Lee 杰亿~ 说...

请问下为什么我弄不到sidebar 全部变框框?
我弄了很多次,可是还是弄不到~T.T

独泪可以帮我吗?
谢谢~

錒薇、=D 说...

弄了之后、没有效果==

Ah Bbi 说...

我也是弄了全部框起来我也想像你的图片那样><

巧克俐♥ 说...

怎样像你这样是一个背景颜色的呢?我不要框框的的

Laichii 说...

谢谢^^

yumi 说...

请问要按哪个html修改? 我有点不明白
不好意思~

韩 于樱花' 说...
此评论已被作者删除。
Joey许敏如 说...

找不到/* Content

发表评论