Modifica header bar e nav bar come lo stile Supernova

Supporto stili in generale.
Avatar utente
systemcrack
Utente
Utente
Messaggi: 399
Iscritto il: 15/05/2010, 22:50
Sesso: Maschio
Versione: 3.1.3
Server: UNIX/Linux
PHP: 5.2.17
Database: MySQL 5.1.49-community-log
Contatta:

Modifica header bar e nav bar come lo stile Supernova

Messaggio da systemcrack » 15/09/2013, 15:55

Ciao a tutti vorrei modificare l'header del mio prosilver
Immagine

come quello del Supernova

Immagine
però senza i tasti del cambio colore della skin che non mi interessa.

In primis volevo sapere se era solo una questione di modifica del overall_header.html o se devo mettere mano anche su i css (se si quali? common e colours).

per prima cosa ho trovato il codice del mio header bar e la nav bar che andrà sovrascritto.. che se non sbaglio è questo:

Codice: Seleziona tutto

<div id="page-header">
		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

			<span class="corners-bottom"><span></span></span></div>
		</div>

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

			<ul class="linklist navlinks">			  
			<!-- IF SN_MODULE_ACTIVITYPAGE_ENABLED --><li class="icon-activitypage"><a href="{U_SN_ACTIVITYPAGE}">{L_SN_AP_ACTIVITYPAGE}</a><span id="sn-ntf-notify">(<a href="{U_VIEW_NOTIFY}">{S_SN_USER_UNREAD_NOTIFY}</a>)</span></li><!-- ENDIF -->
			
				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>
<li class="rightside"><!-- INCLUDE body_language.html --></li>
				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul>

			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
			        <!-- IF S_USER_LOGGED_IN and not S_IS_BOT and SN_MODULE_PROFILE_ENABLED --><li class="icon-profile"><a href="{U_SN_MY_PROFILE}" title="{L_SN_MYPROFILE}"><strong>{S_USERNAME}</strong></a></li><!-- ENDIF -->
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
					<!-- IF S_DISPLAY_SEARCH --> &bull;
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- ENDIF -->
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">
			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<li class="icon-photoshop"><a href="http://morfeuscommunity.altervista.org/forum/styles/prosilver/photoshop.html" target="_blank" title="Prova Photoshop">Photoshop</a></li>
			<!-- ENDIF -->
				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>

			<span class="corners-bottom"><span></span></span></div>
		</div>

	</div>
a questo punto il codice da inserire dovrebbe essere questo (nel codice è già stato eliminata la parte riguardante il cambio il blocco cambio colore skin):

Codice: Seleziona tutto

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) or U_RESTORE_PERMISSIONS -->
<div class="sn-header-alert">
<!-- IF S_BOARD_DISABLED --><img src="{T_THEME_PATH}/images/exclamation.png" width="16" height="16" alt="" /> {L_INFORMATION}: {L_BOARD_DISABLED}<!-- ENDIF --><!-- IF S_BOARD_DISABLED and U_RESTORE_PERMISSIONS -->&nbsp;&bull;&nbsp;<!-- ENDIF -->
<!-- IF U_RESTORE_PERMISSIONS --><img src="{T_THEME_PATH}/images/user_go.png" width="16" height="16" alt="" /> <a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
</div><!-- /sn-header-alert -->
<!-- ENDIF -->

<div id="sn-header">
<a id="top" name="top" accesskey="t"></a>
<div id="sn-header-content">
<a id="sn-logo" href="{U_INDEX}"><img src="{T_THEME_PATH}/images/logo-text-only.png" width="484" height="100" alt="" /></a>

<div id="sn-controlbox">

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<div id="sn-not-logged-in"></div>
<div id="sn-not-logged-in-hover">
<div id="sn-nli-content">

<form method="post" action="{S_LOGIN_ACTION}">
<fieldset style="margin-top: -5px;">
<span class="sn-form-label">{L_USERNAME}:</span><br />
<input type="text" name="username" class="sn-nli-form" title="{L_USERNAME}" />
<span class="sn-form-label">{L_PASSWORD}:</span><br />
<input type="password" name="password" class="sn-nli-form" title="{L_PASSWORD}" />

<a href="ucp.php?mode=sendpassword">{L_FORGOT_PASS}</a> <!-- IF S_REGISTER_ENABLED -->| <a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF -->
<br /><br />
<!-- IF S_AUTOLOGIN_ENABLED --><a href="#autologin2" class="fakecheck" id="fakeautologin2">{L_LOG_ME_IN}</a><input type="checkbox" name="autologin" id="autologin2" style="display: none;" /><!-- ENDIF -->
<div style="clear: both;"><a href="#hidestatus" class="fakecheck" id="fakehidestatus">{L_HIDE_ME}</a><input type="checkbox" name="viewonline" id="hidestatus" style="display: none;" /></div>
<input type="submit" name="login" value="" id="sn-nli-button" />
</fieldset>
</form>
</div><!-- /sn-nli-content -->
</div><!-- /sn-not-logged-in-hover -->
<!-- ENDIF --><!-- /s-user-not-logged-in -->

<!-- IF S_USER_LOGGED_IN and not S_IS_BOT -->
<div class="mini-profile"><div class="mini-profile-inner">
<table cellpadding="0" cellspacing="0" border="0">
	<tr>
    	<td rowspan="2"><div class="member-icon"></div></td>
        <td>
        <a href="{U_PROFILE}" class="sn-mini-profile-username"><span style="color: #FFFFFF;">{S_USERNAME}</span></a> <a href="{U_LOGIN_LOGOUT}" class="sn-mini-profile-logout">{L_LOGOUT}</a>
        </td>
	</tr>
    <tr>
        <td style="padding-top: 4px;">
        <!-- IF S_DISPLAY_PM --><img src="{T_THEME_PATH}/images/<!-- IF S_USER_NEW_PRIVMSG -->email_error<!-- ELSE -->email<!-- ENDIF -->.png" width="16" height="16" alt="" /><a href="{U_PRIVATEMSGS}" class="sn-mini-profile-link"><span style="color: #FFFFFF;">{PRIVATE_MESSAGE_INFO}</span></a><!-- ENDIF --> <!-- IF S_DISPLAY_SEARCH --> &bull; <a href="{U_SEARCH_SELF}" class="sn-mini-profile-link"><span style="color: #FFFFFF;">{L_SEARCH_SELF}</span></a><!-- ENDIF -->
        </td>
    </tr>
</table>
</div></div> 
<!-- ENDIF --><!-- /s-user-logged-in-->

</div><!-- /sn-controlbox -->

</div><!-- /sn-header-content -->
</div><!-- /sn-header -->

<div id="sn-navbar">
<div id="sn-navbar-content">

<div style="float: left;">
<img src="{T_THEME_PATH}/images/house.png" width="16" height="16" alt="" /><a href="{U_INDEX}">{L_INDEX}</a> &nbsp;
<img src="{T_THEME_PATH}/images/information.png" width="16" height="16" alt="" /><a href="{U_FAQ}">{L_FAQ}</a> &nbsp;
<!-- IF S_DISPLAY_SEARCH --><img src="{T_THEME_PATH}/images/magnifier.png" width="16" height="16" alt="" /><a href="{U_SEARCH}">{L_SEARCH}</a> &nbsp;<!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN -->
<img src="{T_THEME_PATH}/images/group.png" width="16" height="16" alt="" /><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a> &nbsp;
<img src="{T_THEME_PATH}/images/user_edit.png" width="16" height="16" alt="" /><a href="{U_PROFILE}">{L_PROFILE}</a>
<!-- ENDIF -->
</div><!-- /float left -->
<div style="float: right;">
<!-- IF S_USER_LOGGED_IN --><img src="{T_THEME_PATH}/images/disconnect.png" width="16" height="16" alt="" /><a href="{U_LOGIN_LOGOUT}">{L_LOGOUT}</a><!-- ENDIF -->
<!-- IF S_REGISTER_ENABLED and not S_USER_LOGGED_IN --><img src="{T_THEME_PATH}/images/add.png" width="16" height="16" alt="" /><a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF -->
<!-- IF not S_USER_LOGGED_IN -->&nbsp; <img src="{T_THEME_PATH}/images/key.png" width="16" height="16" alt="" /><a href="{U_LOGIN_LOGOUT}">{L_LOGIN}</a><!-- ENDIF -->
</div>

</div><!-- /sn-navbar-content -->
</div><!-- /sn-navbar -->

<div id="sn-shadows">

<div class="sn-breadcrumbs">
<img src="{T_THEME_PATH}/images/house.png" width="16" height="16" alt="" /><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <img src="{T_THEME_PATH}/images/breadcrumbs.png" width="12" height="16" alt="" /><a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks -->
</div>

<div class="sn-options <!-- IF SCRIPT_NAME eq 'index' or 'viewforum' -->sn-search-links<!-- ENDIF --><!-- IF SCRIPT_NAME eq 'viewtopic' -->sn-restore-link-size<!-- ENDIF -->">
<!-- IF SCRIPT_NAME eq 'index' -->
<!-- IF S_DISPLAY_SEARCH -->
<a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><!-- IF S_LOAD_UNREADS --> &bull; <a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a><!-- ENDIF --><!-- IF S_USER_LOGGED_IN --> &bull; <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><!-- ENDIF --> &bull; <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a><!-- IF not S_IS_BOT and U_MARK_FORUMS --> &bull; <a href="{U_MARK_FORUMS}" accesskey="m">{L_MARK_FORUMS_READ}</a><!-- ENDIF -->
<!-- ENDIF -->
<!-- ENDIF --><!-- /script-name-eq-index -->

<!-- IF U_EMAIL_TOPIC --><img src="{T_THEME_PATH}/images/email_go.png" width="16" height="16" alt="" /><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}">{L_EMAIL_TOPIC}</a>&nbsp;&nbsp;<!-- ENDIF --><!-- IF U_EMAIL_PM --><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}">{L_EMAIL_PM}</a><!-- ENDIF --><!-- IF U_PRINT_TOPIC --><img src="{T_THEME_PATH}/images/printer.png" width="16" height="16" alt="" /><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p">{L_PRINT_TOPIC}</a><!-- ENDIF --><!-- IF U_PRINT_PM --><img src="{T_THEME_PATH}/images/printer.png" width="16" height="16" alt="" /><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p">{L_PRINT_PM}</a><!-- ENDIF -->
</div>

<div style="clear: both; height: 1px;" class="annoying-ie-spacing-issue"></div>
<a name="start_here"></a>
<div id="page-body">
a questo punto aspettando qualche risposta mi metto a fare qualche esperimento.

Grazie in anticipo chi mi aiuterà e mi scuso in caso abbia sbagliato sezione o postato una argomento già trattato anche se io ho cercato e non l'ho trovato. ;)
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.

Avatar utente
Tiger
phpBB Expert
phpBB Expert
Messaggi: 1998
Iscritto il: 24/05/2011, 12:37
Sesso: Maschio
Versione: 3.0.12
Server: UNIX/Linux
PHP: 5.3.28
Database: MySQL(i) 5.5.35-cll
Località: Roma
Contatta:

Re: Modifica header bar e nav bar come lo stile Supernova

Messaggio da Tiger » 15/09/2013, 18:29

La cosa migliore e piu' rapida e' analizzare con firebug il colours.css ,piu' specificamente la classe .header poi intervenire nell'overall_header.html.

Avatar utente
systemcrack
Utente
Utente
Messaggi: 399
Iscritto il: 15/05/2010, 22:50
Sesso: Maschio
Versione: 3.1.3
Server: UNIX/Linux
PHP: 5.2.17
Database: MySQL 5.1.49-community-log
Contatta:

Re: Modifica header bar e nav bar come lo stile Supernova

Messaggio da systemcrack » 15/09/2013, 22:19

Non conosco firebug.. però ora mi documento poi e ti faccio sapere come va a finire.. i punti che avevo identificato negli header erano quelli giusti..?
...intanto grazie Tiger.

Avatar utente
Tiger
phpBB Expert
phpBB Expert
Messaggi: 1998
Iscritto il: 24/05/2011, 12:37
Sesso: Maschio
Versione: 3.0.12
Server: UNIX/Linux
PHP: 5.3.28
Database: MySQL(i) 5.5.35-cll
Località: Roma
Contatta:

Re: Modifica header bar e nav bar come lo stile Supernova

Messaggio da Tiger » 16/09/2013, 13:24

Credo che nell'ultima porzione di codice(quella relativa all'header di supernova)si deve eliminare questo:

Codice: Seleziona tutto

<a name="start_here"></a>
<div id="page-body">
In quanto se non erro richiama l'id del contenitore(wrap) dello style.

Avatar utente
systemcrack
Utente
Utente
Messaggi: 399
Iscritto il: 15/05/2010, 22:50
Sesso: Maschio
Versione: 3.1.3
Server: UNIX/Linux
PHP: 5.2.17
Database: MySQL 5.1.49-community-log
Contatta:

Re: Modifica header bar e nav bar come lo stile Supernova

Messaggio da systemcrack » 16/09/2013, 16:55

Tiger ha scritto:Credo che nell'ultima porzione di codice(quella relativa all'header di supernova)si deve eliminare questo:

Codice: Seleziona tutto

<a name="start_here"></a>
<div id="page-body">
In quanto se non erro richiama l'id del contenitore(wrap) dello style.
Bella! Grazie!

Allora nel frattempo io ho fatto i compiti a casa e mi sono tirato giù il colours.css

Codice: Seleziona tutto

}
#logo {
    float: left;
    padding: 10px 13px 0 10px;
    width: auto;
}
a#logo:hover {
    text-decoration: none;
}
#search-box {
    color: #FFFFFF;
    display: block;
    float: right;
    margin-right: 5px;
    margin-top: 30px;
    position: relative;
    text-align: right;
    white-space: nowrap;
}
#search-box #keywords {
    background-color: #FFFFFF;
    width: 95px;
}
#search-box input {
    border: 1px solid #B0B0B0;
}
#search-box input.button1 {
    padding: 1px 5px;
}
#search-box li {
    margin-top: 4px;
    text-align: right;
}
#search-box img {
    margin-right: 3px;
    vertical-align: middle;
}
#site-description {
    float: left;
    width: 70%;
}
#site-description h1 {
    margin-right: 0;
}
.headerbar {
    background: none repeat-x scroll 0 0 #EBEBEB;
    color: #FFFFFF;
    margin-bottom: 4px;
    padding: 0 5px;
}
.navbar {
    background-color: #EBEBEB;
    padding: 0 10px;
}
.forabg {
    background: none repeat-x scroll 0 0 #B1B1B1;
    clear: both;
    margin-bottom: 4px;
    padding: 0 5px;
}
.forumbg {
    background: none repeat-x scroll 0 0 #EBEBEB;
    clear: both;
    margin-bottom: 4px;
    padding: 0 5px;
}
.panel {
    background-color: #F3F3F3;
    color: #3F3F3F;
    margin-bottom: 4px;
    padding: 0 10px;
}
.post {
    background-position: 100% 0;
    background-repeat: no-repeat;
    margin-bottom: 4px;
    padding: 0 10px;
}
Diciamo che ciò che m'interessa è quello che c'è nell'header e nella navbar.. però non ricordo fin dove arriva il codice che m'interessa.. cioè non ricordo esattamente forumbg e forabg che cosa comandano.. comunque ora li confronto con quelli del prosilver e poi faccio due prove.

Avatar utente
Tiger
phpBB Expert
phpBB Expert
Messaggi: 1998
Iscritto il: 24/05/2011, 12:37
Sesso: Maschio
Versione: 3.0.12
Server: UNIX/Linux
PHP: 5.3.28
Database: MySQL(i) 5.5.35-cll
Località: Roma
Contatta:

Re: Modifica header bar e nav bar come lo stile Supernova

Messaggio da Tiger » 16/09/2013, 18:14

le classi:
.forumbg e .forabg controllano rispettivamente la "tabella" dove vengono racchiusi forum e subforum sia nell'index(forumlist_body.html) che nelle pagine del forum(wiewforum_body.html):
Quindi quelle classi a te non interessano,cio' che ti interessa invece e' questa porzione del colours.css:

Codice: Seleziona tutto

#logo {
    float: left;
    padding: 10px 13px 0 10px;
    width: auto;
}
a#logo:hover {
    text-decoration: none;
}
#search-box {
    color: #FFFFFF;
    display: block;
    float: right;
    margin-right: 5px;
    margin-top: 30px;
    position: relative;
    text-align: right;
    white-space: nowrap;
}
#search-box #keywords {
    background-color: #FFFFFF;
    width: 95px;
}
#search-box input {
    border: 1px solid #B0B0B0;
}
#search-box input.button1 {
    padding: 1px 5px;
}
#search-box li {
    margin-top: 4px;
    text-align: right;
}
#search-box img {
    margin-right: 3px;
    vertical-align: middle;
}
#site-description {
    float: left;
    width: 70%;
}
#site-description h1 {
    margin-right: 0;
}
.headerbar {
    background: none repeat-x scroll 0 0 #EBEBEB;
    color: #FFFFFF;
    margin-bottom: 4px;
    padding: 0 5px;
}
.navbar {
    background-color: #EBEBEB;
    padding: 0 10px;
}

Avatar utente
systemcrack
Utente
Utente
Messaggi: 399
Iscritto il: 15/05/2010, 22:50
Sesso: Maschio
Versione: 3.1.3
Server: UNIX/Linux
PHP: 5.2.17
Database: MySQL 5.1.49-community-log
Contatta:

Re: Modifica header bar e nav bar come lo stile Supernova

Messaggio da systemcrack » 18/09/2013, 19:14

Grazie Tiger per le dritte intanto ho fatto un primo esperimento.. ma il risultato è questo.. che non è del tutto deludente..

Immagine

le immagini e tutto il resto sono finiti dove dovevano però non c'è lo sfondo ne quello alto blu e neanche la navbar bianca sotto.
Che ci sia da guardare nello stylesheet.. o forse il colours ha bisogno di qualche altra aggiustatina..?

Avatar utente
Tiger
phpBB Expert
phpBB Expert
Messaggi: 1998
Iscritto il: 24/05/2011, 12:37
Sesso: Maschio
Versione: 3.0.12
Server: UNIX/Linux
PHP: 5.3.28
Database: MySQL(i) 5.5.35-cll
Località: Roma
Contatta:

Re: Modifica header bar e nav bar come lo stile Supernova

Messaggio da Tiger » 18/09/2013, 19:33

hai copiato le immagini associate alla classe .header e al body(del supernova)?

Avatar utente
systemcrack
Utente
Utente
Messaggi: 399
Iscritto il: 15/05/2010, 22:50
Sesso: Maschio
Versione: 3.1.3
Server: UNIX/Linux
PHP: 5.2.17
Database: MySQL 5.1.49-community-log
Contatta:

Re: Modifica header bar e nav bar come lo stile Supernova

Messaggio da systemcrack » 19/09/2013, 11:34

..ci avevo pensato pure io che il problema fosse dovuto da quello, ma ho caricato i files e nulla era cambiato, ma dal momento che sto riscuotendo difficoltà nel cambiare un semplicissimo bottone rispondi (nonostante io abbia cancellato tutte le cache possibili e immaginabili) mi chiedo se il problema non sia dovuto al servizio cloudflare a cui si appoggia altervista?

...dopo diverse prove: credo che il problema del bottone sia del servizio altervista, mentre il problema delle barre che non vengono fuori sia dovuto ad un file o una parte di esso che non viene toccato.. infatti riflettevo sulla cosa che mi avevi fatto notare anche tu, cioè le immagini.. e sono andato a riguardare il codice css di cui avevamo parlato e mi sa che ne manca un pezzo.. infatti l'headerbar e navbar vengono menzionate ma non parla di immagini di background.. c'è qualche cosa che mi sfugge... infatti guardando con opera dragonfly ho trovato questo codice che è quello che servirebbe, ma non ho ben capito in che file si trova:

Codice: Seleziona tutto

#dummy-element {width: 2px;}

#sn-shadows {
	min-height: 90%;
	width: 932px;
	padding: 0 19px;
	margin: 0 auto;
	background: url("./styles/supernova/theme/images/shadow.png") repeat-y;
	margin-top: -8px; /* Bury shadow borders below navbar */
	padding-top: 15px; /* We don't want the board content to be buried by the navbar */
}

#sn-header {
	width: 100%;
	height: 100px;
	background: url("./styles/supernova/theme/images/blue/headerbg.png") repeat-x bottom #0f518f;
}

#sn-header-content, #sn-navbar-content {width: 960px; margin: auto;}

a#sn-logo {
	width: 484px;
	height: 100px;
	background: url("./styles/supernova/theme/images/blue/logo.png") no-repeat;
	display: block;
	float: left;
}

#sn-controlbox {
	float: right;
	margin-right: 30px;
}

#sn-not-logged-in {
	width: 259px;
	height: 31px;
	background: url("./styles/supernova/theme/images/blue/login-notice.png") no-repeat;
	margin-top: 34px;
}

#sn-not-logged-in-hover {
	display: none;
	width: 271px;
	height: 248px;
	background: url("./styles/supernova/theme/images/blue/login-notice-hover.png") no-repeat;
	position: absolute;
	z-index: 9999; /* Make the div hover above the nav bar */
	margin-top: -39px;
	margin-left: -6px;
}

#sn-nli-content {
	padding: 5px 15px 10px 15px;
	margin-top: 45px;
	color: #0870d1;
}

span.sn-form-label, #sn-nli-content a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.5px;
}

#sn-nli-content a {
	text-transform:none;
	color: #0870d1;
	letter-spacing: normal;
}

.sn-nli-form {
	width: 233px;
	height: 24px;
	line-height: 24px;
	border: 1px solid #b8e3ff;
	background: url("./styles/supernova/theme/images/blue/nli-form-bg.png") repeat-x;
	margin-top: 4px;
	margin-bottom: 6px;
	color: #0a81d0;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
}

.fakecheck {
	font: 12px Tahoma, Arial, Helvetica, sans-serif;
	text-decoration: none;
	outline: none;
	background: url("./styles/supernova/theme/images/blue/checkbox.png") no-repeat;
	height: 16px;
	display: block;
	float: left;
	padding: 1px 0px 0px 20px;
}

.fakechecked {
	background-position: left -25px;
}

#sn-nli-button {
	width: 69px;
	height: 26px;
	background: url("./styles/supernova/theme/images/blue/login-button.png") no-repeat top;
	border: none;
	float: right;
	margin-top: 6px;
}

#sn-nli-button:hover {
	background-position: bottom;
}

div.mini-profile {
	background: transparent url("./styles/supernova/theme/images/blue/mini-profile-r.png") no-repeat scroll top right; 
	display: block;
	float: left;
	height: 52px;
	padding-right: 6px;
	text-decoration: none;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin-top: 21px;
	color: #FFFFFF;
}

div.mini-profile .mini-profile-inner {
	background: transparent url("./styles/supernova/theme/images/blue/mini-profile-l.png") no-repeat; 
	display: block;
	padding-left: 7px;
	padding-right: 5px;
	padding-top: 8px;
	height: 44px;
	text-align: left;
}

div.mini-profile img {
	vertical-align: middle;
	margin-top: -2px;
	margin-right: 3px;
}

.member-icon {
	width: 32px;
	height: 30px;
	background: url("./styles/supernova/theme/images/blue/member-icon.png") no-repeat;
	float: left;
	margin-right: 8px;
}

a.sn-mini-profile-username {
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #FFFFFF !important;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 1px 1px 5px #000000;
	letter-spacing: -0.3px;
	float: left;
}

a.sn-mini-profile-username:hover, a.sn-mini-profile-logout:hover {
	text-decoration: underline;
}

a.sn-mini-profile-link {
	color: #FFFFFF;
	font-family: Verdana, Geneva, sans-serif;
}

a.sn-mini-profile-logout {
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #87cfff;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 1px 1px 5px #000000;
	letter-spacing: -0.3px;
	float: right;
}

.sn-header-alert {
	background-color: #FBE3E4;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #860006;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border: 1px solid #FBC2C4;
}

.sn-header-alert a {color: #860006; text-decoration: underline;}
.sn-header-alert a:hover {text-decoration: none;}
.sn-header-alert img {vertical-align: middle; margin-top: -3px;}

#sn-navbar {
	width: 100%;
	height: 51px;
	line-height: 46px;
	background: url("./styles/supernova/theme/images/navbg.png") repeat-x bottom transparent;
	position: relative; /* Allows for navbar to overlap shadow border */
}

#sn-navbar a {
	color: #0870d1;
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: -0.5px;
}

#sn-navbar a:hover {
	text-decoration: underline;
	color: #0a8ee6;
}

#sn-navbar img {vertical-align: middle; margin-top: -2px; margin-right: 6px;}

div.colour-block {
	background: transparent url("./styles/supernova/theme/images/colour_block_right.png") no-repeat scroll top right; 
	float: right;
	height: 26px;
	padding-right: 7px;
	margin-top: 11px;
	margin-left: 10px;
	line-height: 25px;
}

div.colour-block span {
	background: transparent url("./styles/supernova/theme/images/colour_block_left.png") no-repeat; 
	display: block;
	padding-left: 29px;
	height: 26px;
}

div.colour-block span a {outline: none;}

img.colour-block {
	margin-right: 0px !important;
}

.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url("./styles/supernova/theme/images/tipsy.gif"); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }

.sn-breadcrumbs {float: left; margin-bottom: 5px;}
.sn-options {float: right; margin-bottom: 5px;}

.sn-breadcrumbs a, .sn-options a {
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif; 
	color: #0870D1;
	font-size: 12px;
}

.sn-breadcrumbs a:hover, a.sn-options a:hover {color: #0A8EE6;}

.sn-breadcrumbs img, .sn-options img {
	vertical-align: middle;
	margin-top: -6px;
	margin-right: 6px;
}

.sn-search-links a {
	font-size: 10px;
	letter-spacing: -0.04em;
}

.sn-cat-header {
	width: 932px;
	height: 31px; 
	background: url("./styles/supernova/theme/images/blue/cat-header.png") no-repeat;
	position: relative;
	z-index: 1;
}

.sn-cat-row {
	width: 924px;
	padding: 0 4px;
	background: url("./styles/supernova/theme/images/blue/cat-row.png") repeat-y;
	margin-top: -3px;
}

.sn-cat-footer {
	width: 932px;
	height: 6px;
	background: url("./styles/supernova/theme/images/blue/cat-footer.png") no-repeat;
	margin-bottom: 6px;
	position: relative;
	z-index: 1;
	margin-top: -2px;
}

div.cat-name {
	background: transparent url("./styles/supernova/theme/images/blue/cat-name-r.png") no-repeat scroll top right; 
	float: left;
	height: 21px;
	padding-right: 6px;
	margin-left: 4px;
	line-height: 21px;
}

div.cat-name span {
	background: transparent url("./styles/supernova/theme/images/blue/cat-name-l.png") no-repeat; 
	display: block;
	padding-left: 6px;
	height: 21px;
	letter-spacing: -1px;
}

div.cat-name span, div.cat-name span a {
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif;
	text-transform: uppercase;
	font-size: 12px;
	color: #096fb5;
	text-shadow: none;
}

.sn-cat-header-label {
	margin-top: 8px !important;
	text-shadow: 1px 1px 3px #000000;
	letter-spacing: 0.4px;
}

Avatar utente
Tiger
phpBB Expert
phpBB Expert
Messaggi: 1998
Iscritto il: 24/05/2011, 12:37
Sesso: Maschio
Versione: 3.0.12
Server: UNIX/Linux
PHP: 5.3.28
Database: MySQL(i) 5.5.35-cll
Località: Roma
Contatta:

Re: Modifica header bar e nav bar come lo stile Supernova

Messaggio da Tiger » 19/09/2013, 20:11

Ti avrei aiutato volentieri in modo piu' pèreciso,ma non ho veramente un goccio di tempo :D

Cmq cio' che ti serve puoi tranquillamente aggiungerlo o nel colours.css o nel common.css(vedendo il tutto al volo dal sorgente...)
es:

Codice: Seleziona tutto

#sn-header {
   width: 100%;
   height: 100px;
   background: url("./styles/supernova/theme/images/blue/headerbg.png") repeat-x bottom #0f518f;
}
Questo id puoi benissimo inserirlo alla fine dei uno dei due .css e richiamarlo poi nell'overall_header.html :

<div=id"sn-header">..........</div> e cosi' via gli altri.

Rispondi

Torna a “Supporto stili”

Chi c’è in linea

Visitano il forum: Bing [Bot] e 3 ospiti