免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
Board logo

標題: [版型教學] 【美化技巧】把你的边栏移到左边 [打印本頁]

作者: bonimon    時間: 2012-12-5 15:30     標題: 【美化技巧】把你的边栏移到左边

方法:

第一步:

查找css_common.htm里的代码:
  1.     .with_side .main { float: left; overflow: hidden; margin-left: -180px; width: 100%; }
  2.                     .with_side .content { margin-left: 180px; width: auto; }
  3.             .with_side .side { float: right; padding-bottom: 20px; width: 180px; }
複製代碼
替换成:
本帖隱藏的內容需要回復才可以瀏覽

但是这样边栏靠的太紧,可以自行修改,建议将180改为190

第二步:
查找css_script.htm里的代码:
  1.     #sidebar_img { float: right; display: inline; margin: 0 6px; padding: 6px 25px 6px 6px; background: url({IMGDIR}/sidebar_toggle.gif) no-repeat 100% 5px; color: {HIGHLIGHTLINK}; position: relative; z-index:98; }
複製代碼
替换成:
  1.     #sidebar_img { float: left; display: inline; margin: 0 6px; padding: 6px 25px 6px 6px; background: url({IMGDIR}/sidebar_toggle.gif) no-repeat 100% 5px; color: {HIGHLIGHTLINK}; position: relative; z-index:98; }
複製代碼
第三步:

进入网站后台,界面-风格管理-选风格-编辑-高级模式-找到侧边背景图那一栏,将repeat-y 100% 0 改成repeat-y 0 100%

第四步:更新CSS和更新缓存,两个都要更新。

如果你开启了主题列表页的边栏,那么打开关闭边栏的按钮就会挤在上面很难看,可以作以下修改:
打开:forumdisplay.htm
找到:
  1. <!--{if $infosidestatus[allow] == 2}-->
  2.                         <a id="sidebar_img" href="javascript:;" onclick="sidebar_collapse(['{lang sidebar_collapsed_yes}', '{lang sidebar_collapsed_no}']);" class="$collapseimg[sidebar]"><!--{if $collapseimg[sidebar] == 'collapsed_yes'}-->{lang sidebar_collapsed_yes}<!--{else}-->{lang sidebar_collapsed_no}<!--{/if}--></a>
  3.                 <!--{elseif $infosidestatus[allow] == 1}-->
  4.                         <a id="sidebar_img" href="javascript:;" onclick="sidebar_collapse(['', '{lang sidebar_collapsed_no}']);" class="collapsed_yes">{lang sidebar_collapsed_yes}</a>
  5.                 <!--{/if}-->
複製代碼
将它剪切下来,移动到:
  1. <div class="main">
  2.         <div class="content">
  3.                 $pluginhooks[forumdisplay_top]
  4.                 <!--{if $forum['recommendlist'] || $forum['rules']}-->
  5.                         <div id="modarea" class="s_clear">
  6.                                 <div class="list">
  7.                                         <span class="headactions"><img onclick="toggle_collapse('modarea_c');" alt="{lang spread}" title="{lang spread}" src="{IMGDIR}/$collapseimg[modarea_c].gif" id="modarea_c_img" class="toggle" /></span>
  8.                                         <h3>
複製代碼
的上面。
作者: 4rphotoclub    時間: 2012-12-5 16:11

先來收下藍大的教材啊
作者: 酷炫o蒸蛋    時間: 2012-12-5 16:30

提示: 作者被禁止或刪除 內容自動屏蔽
作者: liangweisee    時間: 2012-12-5 16:37

换个位置不错
作者: pigeon    時間: 2012-12-5 18:40

有预览图片吗
作者: 达人小G    時間: 2012-12-6 05:37

感谢分享^_^,看看!
作者: 达人小G    時間: 2012-12-6 05:37

严重支持蓝大原创代码
作者: 章鱼    時間: 2012-12-6 10:35

话说似乎以前有一段css可以直接把边栏放左边?
作者: tryqtyl    時間: 2013-1-18 18:38

开始用边栏了,学习一下
作者: cncanarias    時間: 2013-2-24 07:08

支持下下 学习中
作者: lrm1998mods    時間: 2013-3-2 20:48

提示: 作者被禁止或刪除 內容自動屏蔽
作者: skycd520    時間: 2013-3-10 19:25

Thank your for sharing
作者: 3526639    時間: 2013-3-20 23:03

太感谢咯
作者: 流传动    時間: 2013-3-21 09:23

有点复杂啊看其阿里
作者: lxqhl    時間: 2013-4-4 11:36

支持下下 学习中
作者: 82817676    時間: 2013-4-4 11:51

看看,学习下,虽然不懂- -
作者: lovesclub225    時間: 2013-5-17 15:07

很給力 謝
作者: Magnificent    時間: 2013-5-22 16:14

回复看看,无图是不懂的
作者: kyh991    時間: 2013-5-22 18:57

村子哦草
作者: 赤泽泉美    時間: 2013-5-22 19:56

感谢分享
作者: 蒼野Aono    時間: 2013-5-23 04:13

謝謝分享噢!
作者: s522300855    時間: 2013-5-23 12:31

学习中  论坛创建中!!!
作者: JDE    時間: 2013-6-10 09:48

支持下下 学习中
作者: luluxiuMUGEN    時間: 2013-6-11 14:48

不错=  =感谢
作者: meifa    時間: 2013-8-2 11:23

回復 1# bonimon


    试试
作者: 奎鑫    時間: 2013-9-20 20:42

有没搞错这还要隐藏啊!!!!
作者: 情蕭    時間: 2014-1-3 04:14

感谢分享~~~~~~~~
作者: hack8s    時間: 2014-1-15 01:24

支持一下
作者: superman1024    時間: 2014-1-15 01:37

感謝分享
作者: wolong    時間: 2014-2-8 22:58

哈哈哈哈哈合乎
作者: 南柯一梦    時間: 2014-2-9 16:31

谢谢分享
作者: wlsekffo123    時間: 2014-3-26 16:27

哈哈 学习了~!!!!
作者: Yenifer    時間: 2016-1-30 22:07

话说似乎以前有一段css可以直接把边栏放左边?
作者: mcxhcn    時間: 2016-11-19 21:58

多谢,正需要
作者: 郑爽中文网    時間: 2019-2-7 15:50

非常好的教学,必须顶一个




歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://sclub.com.tw/discuz/) Powered by Discuz! 7.2