10     /common.js" type="text/javascript">    修改了page.tpl.php添加隐藏的箭头图片: 85        86          87            88                  89                  90            91            92            93          94       修改style.css将左侧导航栏定位到最右边: 993/**  994  * The toggler css..."/>
May 10, 2008

HowTo: 修改Drupal默认主题以支持右侧两列Block

看到了R总的新博,恩,貌似DH的速度还不错。考虑等这个博到期了转。可惜未能拉拢R总使用Drupal。他义无反顾地投奔了WP。毕竟是最适合用来架博的CMS,短短时间,已经像模像样。这个闷骚的男人居然也用上了WLW,叹Drupal。一时手贱又跳到TK的博,JS+WP的页面已经相当不错。遂决定浪费宝贵周末的一个下午来做个theme。
修改了page.tpl.php添加jquery和自己写的JS文件:

9    
 10    

修改了page.tpl.php添加隐藏的箭头图片:

85      
 86        


 94      

修改style.css将左侧导航栏定位到最右边:

993/**
 994  * The toggler css
 995  */
 996 .sidebar-left-toggler-right {
 997 background:transparent url(images/arrow-right.gif) no-repeat scroll center;
 998 border-color:-moz-use-text-color #FFFFFF -moz-use-text-color -moz-use-text-color;
 999 border-style:none dotted none none;
1000 border-width:0pt 0px 0pt 0pt;
1001 cursor:pointer;
1002 float:left;
1003 margin:3em 0px 0pt 0px;
1004 padding:144px 0px 0px 0px;
1005 width:6px;
1006 position:relative;
1007 }
1008 .sidebar-left-toggler-left {
1009 background:transparent url(images/arrow-left.gif) no-repeat scroll center;
1010 border-color:-moz-use-text-color #FFFFFF -moz-use-text-color -moz-use-text-color;
1011 border-style:none dotted none none;
1012 border-width:0pt 0px 0pt 0pt;
1013 cursor:pointer;
1014 float:left;
1015 margin:3em 0px 0pt 0px;
1016 padding:144px 0px 0px 0px;
1017 width:6px;
1018 position:relative;
1019 }

添加了common.js以支持隐藏:

1$(document).ready(
  2     function()
  3     {
  4         $("#sidebar-left-toggler").toggle(
  5             function(){
  6                 $("#sidebar-left").hide("slow");
  7                 $("#squeeze").css("margin-right","0px");
  8                 $("#sidebar-left-toggler").removeClass("sidebar-left-toggler-right").addClass("s    idebar-left-toggler-left");
  9             },
 10             function(){
 11                 $("#sidebar-left").show("slow");
 12                 $("#squeeze").css("margin-right","210px");
 13                 $("#sidebar-left-toggler").removeClass("sidebar-left-toggler-left").addClass("si    debar-left-toggler-right");
 14             }
 15         );
 16     }
 17 )

看起来貌似还不错。

*- - - - - -

Comments powered by Disqus