Come inserire una sidebar allo stile prosilver

[Galandas]

:::Come inserire una sidebar allo stile prosilver:::

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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</span></span></div>
	</div>
</div>

Step: 2 File CSS

Adesso apri common.css è Trova:

Codice: Seleziona tutto

/* Main blocks
---------------------------------------- */

Aggiungi dopo:

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;
}

Step: 3 File Inserimento

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 -->

Aggiungi prima:

Codice: Seleziona tutto

<!-- INCLUDE side_bar.html -->

<div id="main">

Adesso apri overall_footer.html è trova:

Codice: Seleziona tutto

	</div>

Aggiungi dopo:

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;
}

Sostituisci con:

Codice: Seleziona tutto

#wrap {
	background-color: #fff;
	margin: 0px auto;
	width: 	940px;
	padding: 20px;
	min-width: 650px;
	border: 1px solid #0f9ce2;
}

CARICA I FILE MODIFICATI, AGGIORNA IL TEMPLATE E TEMI, VUOTA LA CACHE REFRESCH BROWSER.

Questo sara il risultato: clicca qui

---

Guida Analoga con diverse istruzioni----> viewtopic.php?f=9&t=674#p785

[paolo_74_17]

proprio quello che cercavo..
NEl file sidebar.html che hai messo come contenuto, perchè io dovrei mettere un banner adsense verticale..
ciaoo

[Rey]

Non ho capito se è una domanda, ho sai già come fare.

[paolo_74_17]

vorrei chiderti un paio di cose:
Ho seguito questa guida, semplice e chiara, perfetta.
Se vai a questo link:
http://forum.danireef.com/index.php

noterai che ci sono degli spazi tra il forum e la sidebar
Io vorrei che tra il forum e la sidebar ci fosse sempre quadratura a seconda della risoluzione dello schermo
Questo è il mio CSS:

[paolo_74_17]

Non ho capito se è una domanda, ho sai già come fare.

mentre mi rispondevo, ho scritto un post
Il contenuto della sidebar ho risolto..grazzie..

[Galandas]

nel common.css

sostituisci con questo codice

Codice: Seleziona tutto

/* Main blocks
---------------------------------------- */
    #side-bar {
       float:   left;
       width:   240px;
       margin: 57px 0px 20px 0px;
       padding: 0px;
       min-height:   500px;
    }

    #side-bar ul.navlinks li{
       margin: 0px;
       padding: 5px;
    }

    #main {
       float:   right;
       width:   82%;
       margin: 0px 0px 0px 0px;
       padding: 0px;
       min-height:   500px;
    }

[paolo_74_17]

ok..ho fatto qualche prova e penso possa andare...
Mi è rimasto di centrare il banner adsense all'interno del blocco..
che codice dovrei usare..??

[paolo_74_17]

ti allego il mio file sidebar per vedere il codice
ciaoo

[Rey]

Prova con il div

Codice: Seleziona tutto

 <div style="text-align: center;">

<script type="text/javascript"><!--
google_ad_client = "ca-pub-8304761643978054";
/* Forum side */
google_ad_slot = "9210275121";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
 </div>

[paolo_74_17]

Prova con il div

Codice: Seleziona tutto

 <div style="text-align: center;">

<script type="text/javascript"><!--
google_ad_client = "ca-pub-8304761643978054";
/* Forum side */
google_ad_slot = "9210275121";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
 </div>

nessun effetto...purtroppo