Dimensione logo e risoluzione schermo

[potrikkia]

ciao a tutti,

come faccio a far si che il site_logo nel tema prosilver occupi tutto lo spazio fino alla fine del form di ricerca(cioè tutto il rettangolo in alto all'inizio della pagina) e che questa cosa resti anche guardando il forum da altri pc con risoluzioni differenti dello schermo??

perchè su alte risoluzioni il logo è piccolo e arriva a metà pagina mentre su basse risoluzioni arriva anche dopo il form di ricerca...

vi ringrazio

[Barrnet]

Un link al forum sarebbe utile per determinare il problema.
Considera che il layout è liquido ergo si adatta in % rispetto alla larghezza in px dello schermo, se vuoi occupare a prescindere tutta la larghezza devi o rendere fissa la larghezza o allargare in maniera dinamica il logo, magari usando un .svg, nel secondo caso dovrai fare attenzione all'altezza del logo, che crescerà per mantenere le proporzioni con la larghezza.

[potrikkia]

ecco il link

www.lupirovereto.com/forum

vorrei che al posto del rettangolo verde ci fosse l'immagine...anche sotto al form di ricerca.

Non è che invece di agire sul site_logo che va a coprire il rettangolo verde mi conviene modificare il rettangolo verde vero e proprio? però non saprei dove mettere le mani..

[potrikkia]

nessuno?

[Tiger]

Con Photoshop,ti crei un'immagine-logo di queste dimensioni:

1250x120px

Apri il tuo colours.css e trovi:

Codice: Seleziona tutto

.headerbar {
	background-color: #5e7f3a;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}

Sostituendolo con:

Codice: Seleziona tutto

.headerbar {
	background-color: #5e7f3a;
	background-image: url("{T_THEME_PATH}/images/tuaimmagine.estensione(gif;png;jpg)");
	background-repeat: no-repeat;
	color: #FFFFFF;
}

Poi apri il tuo common.css:
trovi:

Codice: Seleziona tutto

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
}

sostituendolo con:

Codice: Seleziona tutto

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
height: 120px;
}

Apri il tuo overall_header.html:
trovando:

Codice: Seleziona tutto

<div id="site-description">

aggiungendo prima di esso:

Codice: Seleziona tutto

<div style="height: 120px;">

trovando:

Codice: Seleziona tutto

<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
      <!-- ENDIF -->

aggiungendo dopo:
</div>
Infine trovi:(nel caso il logo di default non ti serva piu':

Codice: Seleziona tutto

<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>

commentandolo diventerebbe:

Codice: Seleziona tutto

<!--<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>-->

Aggiorni temi e template da pca infine svuoti la chace da pca.

[potrikkia]

come mai devo creare il logo con risoluzione 1250x120px?

se impostassi il forum con risoluzione fissa di 1024x768?

[Tiger]

Quella che ti ho proposto e' soltanto una delle tante soluzioni che si possono adottare ad esempio per personalizzare il propio . header con un' immagine personalizzatta senza utilizzare necessariamente la classe o id che sia .logo/logo a patto di conoscere i css.
ad esempio nessuno ti voeta di riutilizzare tale classe o id e di personalizzare anche l'header, oppure staccare l'header dal contenitore .wrap e dargli un width di 100% per adattarlo a tutto schermo e con qualsiasi risoluzione, come vedi le soluzioni possono essere svariate a patto di conoscere i css.


Inviato dal mio iPhone usando Tapatalk xD! ^^

[Tiger]

come mai devo creare il logo con risoluzione 1250x120px?

se impostassi il forum con risoluzione fissa di 1024x768?

Nel tuo caso allora dovrai settare l'immagine con valori fissi,essendo l'header all'interno del "contenitore" .wrap

Quindi:
1024 px(larghezza)
Altezza a piacere.