Descrizione: Con questa guida vedremo come inserire una barra side bar sulla sinistra allo stile prosilver
Autore: topdown ~ Webmasters United
Inizio Guida: Step: 1 File HTML
Creiamo un file html incollando il codice sottostante, è lo chiamiamo
side_bar.html
Codice: Seleziona tutto
<div id="side-bar">
<div class="forabg">
<div class="inner"><span class="corners-top"><span> </span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Navigation</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row">
<dl class="icon" style="background-repeat: no-repeat;">
<dd>
<ul class="navlinks">
<li>{CURRENT_TIME}</li>
<li><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}</li><!-- ELSE -->{CURRENT_TIME}</li><!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
<!-- ENDIF -->
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<li><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a></li>
<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></li><!-- ENDIF -->
<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
<!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
<!-- ENDIF -->
<!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
<!-- IF S_DISPLAY_SEARCH -->
<li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
<!-- IF S_USER_LOGGED_IN --><li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li><!-- ENDIF -->
<li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
<!-- ENDIF -->
<!-- IF not S_IS_BOT and U_MARK_FORUMS --><li><a href="{U_MARK_FORUMS}" accesskey="m">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
<!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- ENDIF -->
<li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
<!-- IF U_MCP --><li><a href="{U_MCP}">{L_MCP}</a></li><!-- ENDIF -->
<!-- IF U_ACP --><li><a href="{U_ACP}">{L_ACP}</a></li><!-- ENDIF -->
</ul>
</dd>
</dl>
</li>
</ul>
<span class="corners-bottom"><span> </span></span></div>
</div>
<h2>H2 element options</h2>
<h3>H3 element options</h3>
<h4>H4 element options</h4>
<hr />
<hr class="dashed" />
<div class="panel">
<div class="inner"><span class="corners-top"><span></span></span>
<strong>panel class & above are the 2 horizontal rule elements</strong>
<span class="corners-bottom"><span></span></span></div>
</div>
<div class="panel bg3">
<div class="inner"><span class="corners-top"><span></span></span>
<strong>panel class - bg3 class</strong>
<span class="corners-bottom"><span></span></span></div>
</div>
<div class="rules">
<div class="inner"><span class="corners-top"><span></span></span>
<strong>rules class</strong>
<span class="corners-bottom"><span></span></span></div>
</div>
<div class="panel bg2">
<div class="inner"><span class="corners-top"><span></span></span>
<strong>panel class - bg2 class</strong>
<span class="corners-bottom"><span></span></span></div>
</div>
<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>
<strong>navbar class</strong>
<span class="corners-bottom"><span></span></span></div>
</div>
<div class="forabg" style="margin-top: 20px;">
<div class="inner"><span class="corners-top"><span> </span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dt>Sample block</dt>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row">
<dl class="icon" style="background-repeat: no-repeat;">
<dd>
<ul class="navlinks">
<li>This is the forabg class among a few others, replicating the forums.</li>
</ul>
</dd>
</dl>
</li>
</ul>
<span class="corners-bottom"><span> </span></span></div>
</div>
</div>
Adesso apri
common.css
è Trova:
Codice: Seleziona tutto
/* Main blocks
---------------------------------------- */
Codice: Seleziona tutto
#side-bar {
float: left;
width: 240px;
margin: 20px 0px 20px 0px;
padding: 0px;
min-height: 500px;
}
#side-bar ul.navlinks li{
margin: 0px;
padding: 5px;
}
#main {
float: left;
width: 680px;
margin: 20px 0px 0px 20px;
padding: 0px;
min-height: 500px;
}
Adesso apri
overall_header.html
è Trova:
Codice: Seleziona tutto
<a name="start_here"></a>
<div id="page-body">
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
<div id="information" class="rules">
<div class="inner"><span class="corners-top"><span></span></span>
<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->
Codice: Seleziona tutto
<!-- INCLUDE side_bar.html -->
<div id="main">
overall_footer.html
è trova:
Codice: Seleziona tutto
</div>
Codice: Seleziona tutto
</div>
Extra modifica per avere lo stesso risultato dello stile della Demo: Proseguire quanto segue sotto.
Apri:
common.css
è trova:
Codice: Seleziona tutto
#wrap {
padding: 0 20px;
min-width: 650px;
}
Codice: Seleziona tutto
#wrap {
background-color: #fff;
margin: 0px auto;
width: 940px;
padding: 20px;
min-width: 650px;
border: 1px solid #0f9ce2;
}
Guida Analoga con diverse istruzioni----> viewtopic.php?f=9&t=674#p785