子姜辣吧 关注:85贴子:8,856
  • 7回复贴,共1

【百度空间】自定义模板的制作

只看楼主收藏回复



1楼2009-04-30 05:47回复
    2楼2009-04-30 05:47
    回复
      百度空间自定义模板怎么制作
      最浅显易懂的百度CSS教程
      虽然百度空间吧里已经有很多高手总结出的这方面的教程,但是我觉得很多介绍都挺含糊的,至少我就碰到很多看不懂的地方,还需要自己一点一点去试验摸索,所以我想把我总结出的一些心得也整理一下贡献出来给大家看看,绝对浅显易懂,傻瓜都能学会~~~
      由于这里的内容都是我在设置自己空间时的经验,所以不是很完整,比如如何设置背景颜色或图片我就没有介绍到(因为我自己不喜欢背景有颜色或有图片,所以没有研究这个),以后慢慢研究出更多之后还会陆续更新的,希望大家不要嫌弃。
      如何修改CSS文件:
      登录后进入设置-模板设置-自定义模板,这时就会跳出一个窗口,出现可编辑的CSS代码文件。但是,这并不是你自己当前使用的模板的代码,而是一个百度默认模板的代码,这个是无法选择的,百度目前只能提供这一种模板供编辑。
      如果你想在某个比较喜欢的模板的基础上进行编辑,就需要先把这个模板的CSS代码复制出来,然后把“自定义模板”里出现的那个代码完全替换掉,接下来就可以对想修改的部分进行编辑啦。
      在编辑CSS文件的窗口下方有四个选项:“保存”“保存并应用”“取消”“预览”,一定要搞清楚这几个选项的区别,在每次修改之后最好先点一下“预览”看看有没有错误,之后再“保存”,最好不要在编辑状态下直接点“保存并应用”,而是先保存,然后再次预览确定每个页面都没问题之后再选择“应用此模板 ”。
      查看自己或别人CSS代码的方法:
      打开你要看的那个空间,点右手键,菜单上会有一个选项“查看源文件”,点这个后会弹出一个记事本文件,在这个文件中查找“CSS”,直到出现这种格式的文字 “href="/msnib/css/item/ed14a84473384f82b2b7dcb2.css">”(以MSNIB的空间为例),然后COPY其中“/css/item/ed14a84473384f82b2b7dcb2.css”这一段放到地址栏里空间网址的后边,即“http: //hi.baidu.com/msnib/css/item/ed14a84473384f82b2b7dcb2.css”,然后敲回车,这时就会弹出来一个记事本文件,这里就是你要看的CSS代码文件。通常用这种方法看到的文字都是不分行的,比较混乱,这时可以把它COPY到WORD文档里,看起来就会比较有条理啦。
      注:可以通过这种方法学习一些代码的设置方式,或者挖到一些喜欢的资源,但最好不要全盘复制别人的劳动成果,自己动手设置出独一无二的模板才更有乐趣啊~~~
      CSS内容及几个主要部分的设置方式
      空间背景颜色/鼠标设置区域
      如果要设置特殊风格的鼠标,需要在代码文件的第一行加上:
      a:hover {cursor:url('http://imgcache.qq.com/qzone/space_item/orig/11/187.ani')}
      body {cursor:url('http://imgcache.qq.com/qzone/space_item/orig/11/1547.ani')}{background-color:#FFFFFF}
      第一行括号内的链接是点到链接时的鼠标状态,第二行括号内的链接是正常的鼠标状态,第二行后边的background-color后边的颜色代码是指整个空间的背景颜色。六位颜色代码可以在这里找到。
      如果不需要设置特殊鼠标,那么这一部分只保留“body {background-color:#颜色代码}”就可以了。
      空间名称/标题图片设置区域
      #header{height:300px;background:url(……)}
      这是空间标题栏的主体部分,{}内的文字解释如下:
      “height”指标题栏的高度,这个要与你放在标题栏的图片高度相同;后边的括号内是你要做标题的图片的链接,宽度为1024px的图片比较合适,图片高度可以根据自己的喜好决定。
      


      3楼2009-04-30 05:47
      回复
        #header div.lc{}
        #header div.rc{}
        如果想在标题的左右两边放置不同的图片,就在第一行的{}内加上左边的图片链接,格式为{background:url(……) no-repeat left}。第二行的{}内加上右边图片的链接,格式为{background:url(……) no-repeat right}。否则{}内留空就可以。
        #header div.tit{top:30px;left:20px;line-height:22px;font-size:30px;font-family:隶书}
        这里要设置的是空间名称的位置(top后边的数字是文字离空间标题栏上边界的距离,left后边的数字是离左边界的距离);大小(font-size后边的数字);字体(font-family后边的文字)。
        #header div.tit a.titlink{color:#......;text-decoration:none}
        #header div.tit a.titlink:visited{color:#......;text-decoration:none}
        这两行应该是设置空间名称文字的颜色,但是我搞不清楚2行有什么区别,所以索性都设成一样的好了。如果想要把文字设成设成黑体或下划线,就把text-decoration:后边的none相应地改成bold或underline。
        #header div.desc{top:60px;left:20px;color:#......;font-size:13px}
        这行是设置空间简介(空间名称下边那行小标题)的位置、大小和字体的,设置方法同空间名称的设置。
        #tabline{top:415px;background-color:#......}
        这个是指TAB菜单栏(主页/博客/相册/好友/设置那一行)下边的分隔线的位置和颜色,top后边的数字是指分割线离空间标题栏上边界的距离,这个数字要根据标题栏的高度和菜单的位置(是与图片重叠或位于图片下方)来决定。
        #tab{top:390px}
        这个是指TAB菜单栏的位置,top后边的数字是指距空间标题栏上边界的距离。
        #tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:2px;line-height:20px;background-color:#......;color: #……;font-size:14px;font-weight:bold;}
        这一行是指TAB菜单被选中后的状态,文字的位置,文字后边背景的颜色,文字颜色,字号等等。
        #tab span{color:#F93A60;font-size:14px}
        这个是指TAB菜单中间的分隔符(就是那条竖线)的颜色和大小。
        #tab a:link{color:#......;text-decoration:none;font-size:14px}
        这一行是指TAB菜单未被选中时的状态,文字颜色,其它定义,字号。
        #tab2部分是TAB菜单下方的第二TAB菜单栏(比如“设置”下方的“基本选项”“模板设置”这一栏)的设置,设置方法同上。
        .stage{background-color:#......}
        这个是空间内容区域(TAB菜单栏以下直到空间底部)的背景颜色/图片设置,不想设置也可以把{ }留空。
        博客文章标题/文字设置区域
        #m_blog div.tit{font-size:14px;font-weight:bold;line-height:50px;text-indent:60px}
        博客文章标题栏的设置,line-height后边的数字是用来定义标题栏高度的,text-indent后边的数字是指标题文字向右缩进的距离,如不需要缩进可设为0。如果想在每篇文章的标题前加上图片,可以在{}内的结尾处加上“background:url(图片链接) no-repeat”,然后按照加入的图片尺寸相应调整标题栏高度和文字缩进处的数值。QQ里的那些可爱的动画表情图标都可以拿来用,另存后上传到百度空间的相册就可以啦。
        #m_blog div.tit a{color:#......;font-size:14px;font-weight:bold}
        博客文章标题链接的状态设置。
        #m_blog div.tit a:visited{color:#047304}
        博客文章标题被选中后的状态设置。
        #m_blog div.date{margin:5px 0 8px 0;color:#666666;text-align:right}
        博客文章日期的设置,margin指距标题栏的距离,text-align指日期的位置(居左居右或居中)。
        #m_blog div.cnt{color:#666666;line-height:20px;font-size:14px}
        博客文章内容设置:文字颜色,行距,字号。
        #m_blog div.more a{color:#047304;font-size:14px}


        4楼2009-04-30 05:47
        回复
          百度空间留言板及文章评论统一屏蔽"闪光字"的代码:
          空间留言和评论升级了,升级了自然是好事,但是,此次升级没有充分考虑到用户体验。留言和评论对于来访者可以自由选择是否采用普通字显示和闪光字显示,但是五颜六色的彩色字未必是人人喜欢的,如果空间主人不喜欢怎么办?升级系统未曾考虑到这点,难道没有办法屏蔽掉彩色字显示吗? 别急,下面的代码就可以让你做到:
          留言板及文章评论统一屏蔽"闪光字"的代码:
          #m_comment .item,#m_comment .item span,#in_msg div.desc,#in_msg div.desc span,#in_comment div.desc,#in_comment div.desc span {
          color:#ff0000!important;
          }
          #m_comment .item span,#in_msg div.desc span,#in_comment div.desc span {
          filter:none!important;
          }
          字体颜色参数请根据需要自行调整.
          (具体效果可参考本空间实际显示)
          ………………………………………………………………………………………………………
          下面此文更加详细介绍了如何进行自定义操作:
          空间升级加入了评论留言的闪光字体,带来了一些变化。
          在评论留言的编辑框上方出现了闪光字按钮和选择框,以前文章评论的编辑框,现在也像留言编辑框一样,调用了新百度编辑器,就是用滤镜才能见到背景的那个。但是相片评论却保留了原来的编辑框,所以原编辑框代码还不能废弃。
          闪光字按钮与添加表情按钮一致,多了一个选择框,代码是:
          code:
          .ToolbarItem input{ /*display: none;是不允许评论留言添加闪光字*/}
          加入闪光字后,主页留言板模块显示,主页最新评论模块不显示。在FF下,由于不支持IE滤镜,闪光字显示为黑色正常字体,而在主页留言板模块显示白色字。这点是说不过去的,估计百度工程师还会做些修改。要FF下仍显示原来设置的字体颜色可加入代码:
          code:
          #in_comment td.cnt div.desc span/*查看文章页网友评论*/,#in_msg td.cnt div.desc span/*留言板页网友留言*/,#m_comment div.item a.cnt span/*主页留言板模块窄栏*/,#m_comment td div.item span/*主页留言板模块宽栏及个档页留言板*/{ color: 原来设置的字体颜色!important;/*FF*/ color: #fff;/*IE*/}
          如果嫌随意添加闪光字颜色纷乱不协调,屏蔽掉闪光字按钮上的选择框就可以,默认不闪光。也可个别设置,比如不要在主页留言板模块窄栏显示闪光字,就加入代码:
          code:
          #m_comment div.item a.cnt span/*主页留言板模块窄栏*/{ color: 原来设置的字体颜色!important;/*FF和IE*/ filter: 0!important;/*去除闪光滤镜*/ cursor: pointer!important;/*鼠标手型光标*/
          }
          #m_comment a:hover.cnt span{ color: 原来设置的鼠过字体颜色!important;}
          这样除主页其它地方仍保留闪光字。还可以设置在个别地方或所有地方只显示一种闪光颜色,以及在不同地方只显示一种不同的闪光颜色。比如加入如下代码:
          code:
          #m_comment div.item a.cnt span/*主页留言板模块窄栏*/{ color: 原来设置的字体颜色!important;/*FF*/ color: #fff;/*IE*/ filter: glow(color=#ff0000,strength=2)!important;/*红色闪光字滤镜*/ cursor: pointer!important;/*鼠标手型光标*/
          }#m_comment a:hover.cnt span{ color: 原来设置的鼠过字体颜色!important;}
          小结:建议系统升级程序可以增加自定义显示,hier可以自由选择彩色字显示还是普通颜色显示,如果能增加这样一个选项,那就更加贴近用户体验,希望空间组工程师们能认真考虑并采纳。
          注:以上资料由好友提供,本文只作百度好友共享和收藏之用,不作其它任何途径的使用,若由此引起的任何纠纷,均与本空间无关,特此申明


          6楼2009-04-30 05:48
          回复
            百度空间留言板及文章评论统一屏蔽"闪光字"的代码
            教你屏蔽百度留言板评论框的闪光字
            首先请百度空间的管理们看到这个标题不要激动……请听我慢慢道来。第一,这个升级我还是很赞成的,特别是能添加表情的功能。但是每个空间的模板不一样,背景颜色不同。同样的闪光字就会导致不同的结果。所以这个闪光字有些根本看不清,这也不能怪使用闪光字的好友啦。所以,要想一个万全之策。我这里提供三个方案解决问题。方法是我在百度知道提问,daobalang 告诉我的,在此特别感谢!合一强烈推荐使用第一种方案!
            方案一:(推荐使用,只是把管理中心的留言评论通知闪光字屏蔽了)
            #m_comment .item,#m_comment .item span,#in_msg div.desc,#in_msg div.desc span,#in_comment div.desc,#in_comment div.desc span,#myspace div.cmtcontent,#myspace div.content span {
            color:#99EE33!important;
            }
            #m_comment .item span,#in_msg div.desc span,#in_comment div.desc span,#myspace div.content span {
            filter:none!important;
            }
            .ToolbarItem input {
            display:none!important;
            }
            (将以上代码复制到CSS结尾处,红色字的代码是调节颜色的)
            方案二:(不推荐。只是屏蔽了外部闪光字,在管理中心里依然会出现闪光字)
            #m_comment .item,#m_comment .item span,#in_msg div.desc,#in_msg div.desc span,#in_comment div.desc,#in_comment div.desc span { color:#000000!important; }
            #m_comment .item span,#in_msg div.desc span,#in_comment div.desc span { filter:none!important; }
            方案三:
            (将两个方案合并,内外都看不到闪光字。同样不大推荐,感觉这样是藐视空间管理的同学的辛苦的劳动成果……别抽我……)
            ____________________________________________________________________转自吧友 人焊合一
            


            7楼2009-04-30 05:48
            回复
              怎么把别人百度空间的模板设置成自己的
              可以直接盗人家的模板具体方法如下:
              1.在人家的空间首页点右键>查看源文件
              2.在打开的记事本里面用查找命令输css,然后搜到的第三个(有可能是第四个)css所在的地址大概如下 :
              /(空间的用户名,是数字呀)/css/item/cb86c2b4869116738ad4b21e.css
              3.然后复制这句 。
              4.粘贴在浏览器地址栏, 之后呢,
              在/空间的用户名/css/item/cb86c2b4869116738ad4b21e.css的前面加上http://hi.baidu.com然后回车 。
              就会又出一个记事本,把里面的代码全部复制 。
              再在自己的空间新建一个空白模板,贴上刚刚复制的代码就ok了!简单吧!试一试吧!!!
              


              8楼2009-04-30 05:56
              回复
                • 118.185.68.*
                太牛啦,,,我现在也在研究这个呀,,,百度空间代码,,,呵,,,,
                很不错的,,,CSS 我不会,,,,


                9楼2009-05-01 22:33
                回复