Prosilver: colonna del profilo fisso

Area dedicata alle Guide
Regole del forum
Immagine
Rispondi
Support Robot
Membro phpBB3World
Membro phpBB3World
Messaggi: 12
Iscritto il: 11 gen 2014, 2:01

Prosilver: colonna del profilo fisso

Messaggio da Support Robot » 27 feb 2014, 7:25

Autore: DionDesigns
Descrizione: Con questa guida apporteremo delle modifiche ai file html è CSS per arrivare ad avere la colonna del profilo in viewtopic con dimensioni fisse. :thumbup:
Freccia_Destra Argomento sul com: clicca qui
Attenzione Nota: Queste modifiche sono fatte sulla modifica viewtopic.php?t=149#p166, quindi facendo queste modifiche vi ritroverete anche il profilo a sinistra, ma e consigliato seguire la guida base Profili a Sinistra prima di apportare queste ulteriori modifiche. Attenzione

Ecco come rendere il profilo con una larghezza fissa. Si richiedono modifiche al template viewtopic_body.html e al CSS

In primo luogo, apri viewtopic_body.html e trova il seguente:

Codice: Seleziona tutto

		<div class="inner"><span class="corners-top"><span></span></span>

		<div class="postbody">
Sostituisci con:

Codice: Seleziona tutto

		<div class="inner"><span class="corners-top"><span></span></span>
		<div class="post-container">
		<div class="postbody">
Trova:

Codice: Seleziona tutto

		<div class="back2top"><a href="#wrap" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>
Sostituisci con:

Codice: Seleziona tutto

		</div>
		<div class="back2top"><a href="#wrap" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>
E infine, è necessario spostare tutto il Blocco postbody:

Codice: Seleziona tutto

<div class="postbody">
(Tutto il codice contenente)
</div>
E incollarlo appena sopra il tag </div>, in modo che appaia in questo modo:

Codice: Seleziona tutto

		<div class="postbody">
			(Tutto il codice contenente)
		</div>
		</div>
		<div class="back2top"><a href="#wrap" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>
viewtopic_body.zip
Esempio del file già modificato
(3.55 KiB) Scaricato 113 volte
Ora salvate il file. Successivamente, è necessario apportare alcune modifiche al CSS. Apri content.css ed elimina le due regole seguenti:

Codice: Seleziona tutto

.search .postbody {
	width: 68%
}

Codice: Seleziona tutto

/* Poster profile used by search*/
.search .postprofile {
	width: 30%;
}
Ora trova la seguente:

Codice: Seleziona tutto

.postbody {
	padding: 0;
	line-height: 1.48em;
	color: #333333;
	width: 76%;
	float: left;
	clear: both;
}
Sostituisci con:

Codice: Seleziona tutto

.post-container {
	margin-left: 210px;
}

.postbody {
	padding: 0;
	line-height: 1.48em;
	color: #333333;
	width: 100%;
	clear: none;
}
Trova:

Codice: Seleziona tutto

.postprofile {
	/* Also see tweaks.css */
	margin: 5px 0 10px 0;
	min-height: 80px;
	color: #666666;
	border-left: 1px solid #FFFFFF;
	width: 22%;
	float: right;
	display: inline;
}
.pm .postprofile {
	border-left: 1px solid #DDDDDD;
}

.postprofile dd, .postprofile dt {
	line-height: 1.2em;
	margin-left: 8px;
}
Sostituisci con:

Codice: Seleziona tutto

.postprofile {
	/* Also see tweaks.css */
	margin: 5px 0 10px -210px;
	min-height: 80px;
	color: #666666;
	border-right: 1px solid #FFFFFF;
	width: 200px;
	float: left;
	display: inline;
}
.pm .postprofile {
	border-right: 1px solid #DDDDDD;
}
*+html .postprofile {
	position: relative;
	left: -210px;
}
.postprofile dd, .postprofile dt {
	line-height: 1.2em;
}
Infine, trovare le seguenti:

Codice: Seleziona tutto

.online {
	background-image: none;
	background-position: 100% 0;
	background-repeat: no-repeat;
}
Sostituisci con:

Codice: Seleziona tutto

.online {
	background-image: none;
	background-position: 152px 0;
	background-repeat: no-repeat;
}
Ora salvate i file e aggiornare il vostro tema in ACP. Ora avrete il vostro post profilo sulla sinistra, e sarà una larghezza fissa di 200px. Questa modifica è compatibile con tutti i browser, e funziona anche con IE7. Esso può essere fatto funzionare anche con IE6 con un'aggiunta al CSS, ma mi rifiuto di supportare IE6, perché le uniche persone che lo utilizzano in questi giorni sono XRumer-based spambots.

Si prega di notare che .online regola CSS si suppone che si sta utilizzando l'icona di default online. Se hai cambiato l'icona, sarà necessario cambiare la .online regola CSS di conseguenza.

Si noti inoltre che questa modifica vale solo per lo stile Prosilver predefinito. Se si utilizza uno stile Prosilver modificato, allora si dovrebbe contattare l'autore di quello stile e chiedere come fare questi cambiamenti per quello stile.

Rispondi

Torna a “[3.0.x] Guide”

Chi c’è in linea

Visitano il forum: Nessuno e 3 ospiti