[pif-le-chien]

Bonjour,

Version 3.1.11
Prosilver SE

J'ai lu pas mal de choses, mais rien qui m'aiderait à positionner une bannière dans l'espace laissé libre comme le montre la capture d'écran suivante :



Merci pour votre aide éventuelle.

[galixte]

Salut,

il faut penser à partager le lien vers ton forum lors d’une demande, soit : http://vintage-audio-laser.fr ça facilite l’obtention d’une réponse.

[Mazeltof]

'soir ici,

Ca peut ressembler à l'insertion d'un second logo
Que veux-tu mettre comme "bannière" à cette endroit ?
As-tu pensé aux différentes tailles d'écrans ?

[pif-le-chien]

En effet, il 'agit d'une seconde bannière. Elle pourrait être positionnée à droite comme le montre cette simulation :



Cette seconde bannière pourrait ne pas apparaître sur les smartphones et autres écrans de petite taille.

Merci

[pif-le-chien]

Bonjour,

Personne pour me filer un coup de main ?

Pif

[Mazeltof]

'soir ici,

Si, bien sur, mais on a tous une vie à coté et pardois le temps nous manque

Pour arriver à ce résultat tu as modifié directement le style que tu utilises, on dirait. Tu devrais penser à te faire un style hérité histoire de simplifier la vie lors des mises à jour à venir (surtout que ça n'a plus grand chose a voir avec prosilver_SE ^^)

cela dit pour ajouter un second logo tu peux faire de cette façon :

ouvre overall_header.html avec ton éditeur préféré,
trouve (vers la ligne 99) :

Code: Tout sélectionner

			<!-- EVENT overall_header_searchbox_before -->

ajoute avant :

Code: Tout sélectionner

			<div id="logo2" class="logo2">  
				<a class="site_logo2"></a>
			</div>

Ajoute dans ton css :

Code: Tout sélectionner

/* second logo */
.logo2 {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}
@media (max-width: 700px) {
	.logo2 {
		display: none;
		float: none;
		padding: 10px;
	}
}
.site_logo2 {
	display: block;
	width: XXpx; /* largeur de ton logo2 */
	height: XXpx; /* hauteur de ton logo2 */
	background-image: url("./images/logo2.gif"); /* chemin et nom de ton logo2 */
	background-repeat: no-repeat;
}

Ajoute ton deuxième logo dans le répertoire ./theme/images/
Ca devrait fonctionner

[pif-le-chien]

Merci beaucoup pour ta réponse. Je comprends bien que les demandes ne peuvent pas être traitées dans la minute. Pas de soucis, rien ne presse.
Je vais tester ça dans le weekend.

pif

EDIT :

Pour arriver à ce résultat tu as modifié directement le style que tu utilises, on dirait. Tu devrais penser à te faire un style hérité histoire de simplifier la vie lors des mises à jour à venir (surtout que ça n'a plus grand chose a voir avec prosilver_SE ^^)

Je ne savais pas que je pouvais faire cela. Il va falloir que je me documente sur le sujet alors

[galixte]

Les documentations concernées sont ici : documentation/styles/creer-un-style-phpbb-31-ou-phpbb-32-a223-view.html & documentation/styles/creation-et-modification-de-styles-phpbb-31-amp-32-a231-view.html.

[pif-le-chien]

Bonjour,

Merci, je consulterai cela

[pif-le-chien]

@Mazeltof

J'ai modifié les fichiers html et css. Le logo2 se positionne en dessous du logo 1




Une idée ?

EDIT :

Dans l'idéal, je voudrais que le logo2 soit collé en haut au bord du header (le plus haut possible), comme ceci :




Mon code actuellement :


template/overall_header.html

Code: Tout sélectionner

			<div id="site-description">
				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
			<div id="logo2" class="logo2">  
				<a class="site_logo2"></a>
			</div>
			<!-- EVENT overall_header_searchbox_before -->

theme/stylesheet.css

Code: Tout sélectionner

.imageset.site_logo {
	background-image: url("./images/site_logo.png");
	padding-left: 149px;
	padding-top: 52px;
}

/* second logo */
.logo2 {
	float: right;
	width: auto;
	padding: 10px 13px 0 10px;
}
@media (max-width: 700px) {
	.logo2 {
		display: none;
		float: none;
		padding: 10px;
	}
}
.site_logo2 {
	display: block;
	width: 450px; 
	height: 72px; 
	background-image: url("./images/logo_2.png");
	background-repeat: no-repeat;
}

[Mazeltof]

'soir ici,

je ne vois aucune modification a ce sujet sur ton forum si tu as un forum de développement donne nous l'url ça sera plus pratique

une idée ? oui, la taille de ton second logo + la largeur réservée au logo et description du forum.
Avec un logo2 de cette largeur, il passera au dessous du premier dès que le membre réduira un peu sa fenêtre d'affichage (c'est aussi ça le responsive ^^)
tu peux essayer de modifier un poil la largeur de la description pour gagner quelques pixels mais ça ne changera pas grand chose je le crains.

dans common.css (vers la ligne 227) trouve :

Code: Tout sélectionner

#site-description {
    float: left;
    width: 65%;
}

remplace par (avec ta description de forum ça devrait passer) :

Code: Tout sélectionner

#site-description {
    float: left;
    width: 55%;
}

note scrupuleusement quelque part toutes les modifs que tu appliques a ton style actuel pour pouvoir les reprendre lorsque tu feras ton style hérité

[pif-le-chien]

Je fais les essais en local sur ma machine, difficile de le faire sur le site en ligne.
Je viens d'effectuer les modifications suggérées, mais le logo2 reste désespérément sous le logo1, au milieu du header.



Je galère un peu là..

[Mazeltof]

'soir ici,

Sans avec accès a ton forum de dev, ça va être difficile de t'aider d'avantage
Par ailleurs, je viens de tester sur mon forum de dev (avec prosilver) ça fonctionne parfaitement. Du moins, avec une largeur de forum supérieure a 1118 pixels, comme déjà dit sur les affichages inférieurs, logo2 passera sous le logo du forum du fait de ses dimensions.

[pif-le-chien]

J'ai finalement modifié le logo principal.
Je te remercie pour ton aide

[Mazeltof]

Si vous considérez votre requête comme résolue, merci d'ajouter l'attribut de sujet [Réglé]