Prosilver和Prosilver_SE中的簡單邊欄

風格問題討論版面排列、樣式、配置,自製風格分享~
享受多樣化的 phpBB 。
回覆文章
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

Prosilver和Prosilver_SE中的簡單邊欄

文章 櫻井綾乃 »

說明:這是在Prosilver和Prosilver_SE中製作側邊欄的簡單,可自定義的方法

在類別中: 款式

鏈接到本文: 全選

代碼: 選擇全部

[url=http://www.phpbb.com/support/docs/en/3.3/kb/article/simple-side-bars-in-prosilver+prosilver-se/]Knowledge Base - Simple side bars in Prosilver & Prosilver_SE[/url]
注意:在進行任何更改之前,請備份要編輯的所有文件!

首先在/ styles / your_style / template文件夾中創建sidebar.html文件,然後在指示的位置添加所需的任何代碼。sidebar.html的示例保留了樣式功能,並具有三個框,您可以根據需要刪除或添加框:

sidebar.html

代碼: 選擇全部

<!-- This is the start of the first sidebar box -->

<div class="forabg">
        <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>First box</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums" style="padding: 0.05cm">

        <!-- Code here for the first box -->
        
        </ul>
        <span class="corners-bottom"><span></span></span></div>
        </div>
<!-- This is the end of the first sidebar box -->

<!-- This is the start of the second sidebar box -->

<div class="forabg">
        <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Second box</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums" style="padding: 0.05cm">
                    
        <!-- Code here for the second box -->    
            
        </ul>
        <span class="corners-bottom"><span></span></span></div>
        
        </div>        

<!-- This is the end of the second sidebar box -->
        
<!-- This is the start of the third sidebar box -->

<div class="forabg">
        <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Third box</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums" style="padding: 0.05cm">

        <!-- Code here for the third box -->    
            
        </ul>
        <span class="corners-bottom"><span></span></span></div>
        
        </div>

<!-- This is the end of the third sidebar box --> 
             


打開styles / your_style / template / overall_footer.html並找到:
碼: 全選

代碼: 選擇全部

<div id="page-footer">
    <div class="navbar">  
之前添加:

代碼: 選擇全部

<div class="page-sidebar">
<!-- INCLUDE sidebar.html -->
</div>  
保存total_footer.html

注意:代碼位於total_footer.html中的原因是,我想在呈現論壇之後加載邊欄,您可以將其放置在任意位置。
打開styles / your_style / theme / common.css並找到:

代碼: 選擇全部

#page-body {
    margin: 4px 0;
    clear: both;
}  
要在左側顯示側邊欄,請替換為:

代碼: 選擇全部

#page-body {
    margin: 4px 0;
    clear: both;
    width:85%;
    float:right;
}  
或為了顯示右側的側邊欄,請替換為:

代碼: 選擇全部

#page-body {
    margin: 4px 0;
    clear: both;
    width:85%;
    float:left;
}  
還要刪除#page-body下面的以下行(如果存在)

代碼: 選擇全部

float:auto
對於左側的側邊欄,將其添加到common.css的末尾:
碼: 全選

代碼: 選擇全部

.page-sidebar {
float:left;
margin-top:4px;
width:14%;
}  
對於右側的側邊欄,將其添加到common.css的末尾:

代碼: 選擇全部

.page-sidebar {
float:right;
margin-top:4px;
width:14%;
}  
保存common.css。刷新模板和主題。

您可以使用寬度來調整大小,只需更改百分比即可。而不是85%,您可以使其達到80%,等等。
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

如何添加1個側邊欄:

文章 櫻井綾乃 »

基本側邊欄代碼如下:在total_header.html中查找

代碼: 選擇全部

<div id="page-body" role="main">
在它之後添加

代碼: 選擇全部

<div class="page-body-inner">
然後在overall_footer.html中找到

代碼: 選擇全部

<!-- EVENT overall_footer_content_after -->
	</div>
在它之後添加

代碼: 選擇全部

</div>
<div class="sidebar"> sidebar code </div>
這將為內容塊添加額外的包裝,為側邊欄添加div。接下來,您需要像這樣添加css:

代碼: 選擇全部

#page-body { float: left; width: 100%; margin-right: -260px; }
.page-body-inner { margin-right: 260px; }
.sidebar { float: right; width: 250px; }
#page-footer { clear: both; }
下一步是使其對移動設備響應:

代碼: 選擇全部

@media (max-width: 1000px) {
  #page-body, .page-body-inner { width: auto; float: none; margin-right: 0; }
  .sidebar { margin: 0 auto; clear: both; float: none; }
}
內容的邊距是260像素,因為它是右側邊欄的寬度+內容和邊欄之間的間距的10像素。

如何添加2個側邊欄:

更改與上面的代碼類似,但必須在內容之前放置左側的側邊欄。
在total_header.html中找到

代碼: 選擇全部

<div id="page-body" role="main">
添加替換為

代碼: 選擇全部

<div class="sidebar-left"> Left sidebar code </div>
<div id="page-body" role="main">
<div class="page-body-inner">
然後在overall_footer.html中找到

代碼: 選擇全部

	<!-- EVENT overall_footer_content_after -->
	</div>
在它之後添加

代碼: 選擇全部

</div>
<div class="sidebar-right"> Right sidebar code </div>
這將為內容塊添加附加包裝,為側邊欄添加2 div。接下來,您需要像這樣添加css:

代碼: 選擇全部

#page-body { float: left; width: 100%; margin-right: -520px; }
.page-body-inner { margin-right: 520px; }
.sidebar-left + #page-body { clear: none; }
.sidebar-left { float: left; width: 250px; margin-right: 10px; }
.sidebar-right { float: right; width: 250px; }
#page-footer { clear: both; }
下一步是使其對移動設備響應:

代碼: 選擇全部

@media (max-width: 1200px) {
  #page-body, .page-body-inner { width: auto; float: none; margin-right: 0; }
  .sidebar-left { display: none; }
  .sidebar-right { float: none; margin: 0 auto; }
  .sidebar-left, .sidebar-right, .sidebar-left + #page-body { clear: both; }
}
內容的邊距為520px,因為它是右側邊欄的寬度+內容和右側邊欄之間的間距的10px +左側邊欄的寬度和右側邊距。

左側邊欄必須在移動設備上隱藏。

根據需要調整該代碼中的單位。
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
頭像
櫻井綾乃
.※.稜鏡之森の守護使者.※.
.※.稜鏡之森の守護使者.※.
文章: 1331
註冊時間: 週二 2006-03-07 09:08
個人狀態: 論壇爆走中...
性別: 醜醜的大美女
來自: 雲上天國
表達感謝: 68 次
擁有感謝: 837 次
星座:
聯繫:

Re: Prosilver和Prosilver_SE中的簡單邊欄

文章 櫻井綾乃 »

代碼: 選擇全部

<!-- This is the start of the first sidebar box -->

<div class="forabg">
        <div class="inner">
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>First box</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums" style="padding: 0.05cm">

        <!-- Code here for the first box -->
        
        </ul>
       </div>
        </div>
<!-- This is the end of the first sidebar box -->

<!-- This is the start of the second sidebar box -->

<div class="forabg">
        <div class="inner">
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Second box</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums" style="padding: 0.05cm">
                    
        <!-- Code here for the second box -->    
            
        </ul>
       </div>
        
        </div>        

<!-- This is the end of the second sidebar box -->
        
<!-- This is the start of the third sidebar box -->

<div class="forabg">
        <div class="inner">
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Third box</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist forums" style="padding: 0.05cm">

        <!-- Code here for the third box -->    
            
        </ul>
       </div>
        
        </div>

<!-- This is the end of the third sidebar box -->
如果.....
也許.....
這些都是事後的想法
如果會想著當初怎麼做也許會有什麼結果
不如在當初就做出正確的決定.....
有些事不去嚐試是不會真的體會他的奧妙的~
回覆文章

回到「投機取巧の風格改造篇」