SCLUB免費論壇申請-使用者論壇 » Discuz--版型設置 » 【美化技巧】把你的边栏移到左边

bonimon 發表於 2012-12-5 15:30

【美化技巧】把你的边栏移到左边

方法：

第一步：

查找css_common.htm里的代码：[code]    .with_side .main { float: left; overflow: hidden; margin-left: -180px; width: 100%; }
                    .with_side .content { margin-left: 180px; width: auto; }
            .with_side .side { float: right; padding-bottom: 20px; width: 180px; }[/code]替换成：
**** Hidden Message *****
但是这样边栏靠的太紧，可以自行修改，建议将180改为190

第二步：
查找css_script.htm里的代码：[code]    #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; }[/code]替换成：[code]    #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; }[/code]第三步：

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

第四步：更新ＣＳＳ和更新缓存，两个都要更新。

如果你开启了主题列表页的边栏，那么打开关闭边栏的按钮就会挤在上面很难看，可以作以下修改：
打开：forumdisplay.htm
找到：[code]<!--{if $infosidestatus[allow] == 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>
                <!--{elseif $infosidestatus[allow] == 1}-->
                        <a id="sidebar_img" href="javascript:;" onclick="sidebar_collapse(['', '{lang sidebar_collapsed_no}']);" class="collapsed_yes">{lang sidebar_collapsed_yes}</a>
                <!--{/if}-->[/code]将它剪切下来，移动到：[code]<div class="main">
        <div class="content">
                $pluginhooks[forumdisplay_top]
                <!--{if $forum['recommendlist'] || $forum['rules']}-->
                        <div id="modarea" class="s_clear">
                                <div class="list">
                                        <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>
                                        <h3>[/code]的上面。

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

感谢分享

查看完整版本: 【美化技巧】把你的边栏移到左边