[Réglé] Modifier le logo PHPBB 3.1.5

[marabout]

Bonjour,
j'ai migré il y a peu mon forum en 3.1.5 et installé le style Aéro. Je souhaiterais maintenant modifier le logo. Un dessin valant mieux qu'un long discourt...

Le logo actuel (bandeau supérieur) a cette tête-là :


Ce que je voudrais obtenir :

Donc, le logo occuperait tout le bandeau et la boite de recherche déplacée légèrement vers le bas. (Peut-être arrondir un peu les coins du logo, mais ça je n'ai pas réussi en CSS ?)

J'ai fait quelques essais sur un forum de dev.
1) Modification du common.css

Code : Tout sélectionner

#site-description h1 {
display: none ;    /* added to remove site description */
margin-right: 0;
}

2) Modification du imageset.css pour Global imageset items

Code : Tout sélectionner

/* Global imageset items */
.imageset.site_logo {
	background-image: url("./images/site_logo_bis.png");   /* My new logo */
	padding-left: 1107px;    /* New size X */
	padding-top: 170px;     /* New size Y */
	}

3) Modification du form.css (pour déplacer la search box)

Code : Tout sélectionner

/* Topic and forum Search */
.search-box {
	float: left;
	padding-top: 165px; /* added to move down the search box */
}

Voici ce que j'obtiens: http://amback.890m.com/forum/forum/phpBB3/index.php

=> Le logo (l'image) n'occupe pas tout le cadre (image) mais est entouré de bleu.
=> Le nom du site est présent (forum de test)
=> Il y a une transparence non désirée au-dessus de la box Recherche et le pompon, quand on modifie la taille de la fenêtre windows contenant le forum (avant de passer en mode affichage mobile, l’image fini par sortir du cadre !!


(lire au dessus et pas au dessu ! )

Mes modifs sont donc incomplètes ou inappropriées...
Pouvez-vous m'aider ?
Merci.
Cordialement

[cabot]

Hello,

As-tu essayé de réduire la largeur de la fenêtre du navigateur pour voir le problème avec le logo ?

Pour le coup il vaudrait mieux charger la bannière directement dans le HTML avec une balise img, ce qui te permettrait de déclarer un width/auto de façon à ce que l'image s'adapte à l'affichage.

Ouvre overall_header.html, trouve :

Code : Tout sélectionner

{SITE_LOGO_IMG}

Remplace par :

Code : Tout sélectionner

<img src="{T_THEME_PATH}/images/nom-du-logo.truc" alt="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">

Ensuite on tricote un peu le CSS pour réorganiser tout ça.

Ouvre common.css
Commente ou supprime :

Code : Tout sélectionner

.logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}

Ajoute après :

Code : Tout sélectionner

#logo > img {
	width: 100%;
	height: auto;
	vertical-align: middle;
}

Trouve :

Code : Tout sélectionner

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

Remplace par :

Code : Tout sélectionner

#site-description {
	text-align: center;
}

Trouve :

Code : Tout sélectionner

.headerbar {
	background: transparent none no-repeat top right;
	padding: 5px;
	min-height: 75px;
}

Remplace par :

Code : Tout sélectionner

.headerbar {
	position: relative;
}

Ouvre forms.css
Trouve :

Code : Tout sélectionner

.search-header {
	border-radius: 4px;
	display: block;
	float: right;
	margin-right: 5px;
	margin-top: 23px;
}

Remplace par :

Code : Tout sélectionner

.search-header {
	border-radius: 4px;
	position absolute;
	padding: 0;
	right: 5px;
	bottom: 5px;
}

Voilà, on devrait commencer à avoir quelque chose qui tient la route.

[marabout]

Merci Cabot !
Oui, j'avais vu le problème en réduisant la taille de la fenêtre du navigateur ! C'est ce que j'ai tenté d'expliquer plus haut.
En fait, ayant lu, qu'il n'était pas recommandé de modifier le code du 3.1.5, je pensais m'en sortir qu'en ne modifiant les CSS.
Je vais essayer tout ça et je reviens pour un feedback.
Merci encore !

[cabot]

On ne modifie pas le core de phpBB, uniquement les fichiers du style, donc c'est pas un problème.

Maintenant on pourrait faire toute cette modif en utilisant le système d'extension si tu souhaites conserver d'origine les fichiers du style afin d'en faciliter les mises à jour. À toi de voir si tu es envie de te lancer là-dedans, auquel cas je te suggère de jeter un œil ici.

[marabout]

Oui, merci je vais voir ça aussi !
En attendant, j'ai fait les modifs que tu m'as indiquées. Y'a du mieux ! (Et plus de problème quand on réduit la fenêtre du navigateur).
Par contre j'obtiens ça:


Il y a encore tout le background bleu et vert sous le logo ainsi que le nom du site.

Ce que je souhaiterais obtenir c'est ça:



cad ne conserver que le logo (et la boite de recherche) pas le fond.

Merci d'avance pour ton aide. Cordialement.


EDIT du 30/08

Cabot,
j'ai été bricoler le color.css en commentant le .headerbar et le .headerbg

Code : Tout sélectionner

/* Round cornered boxes and backgrounds
---------------------------------------- */
/*
.headerbar {
	 background-image: url("./images/header_blue.png"); 
	color: #FFFFFF; */
}

.rtl .headerbar {
	background-image: url("./images/header_blue_rtl.png");
}
/*
.headerbg {
	background-color: #032942;
	background-image: url("./images/headerbg_blue.gif");
}*/

Voila ce que cela donne...



C'est presque ça !
Reste à virer le nom du site (votredomaine.com et Forum de Test), virer la partie inférieure en bleu et placer la serch box à droite dans le bas du logo)

Mai là, je sèche...

[cabot]

Si tu avais suivi les indications données, tu n'aurais pas eu ces problèmes et la searchbox ne serait pas positionnée ainsi.

=> reprends les modifications

[marabout]

Bonjour Cabot,
je viens de vérifier, tout est conforme avec les modifs que tu m'avais indiqué. (Je n'ai modifie que dans le style aero, pas dans prosilver)

Par contre dans le overall_header.html il y a aussi 3 lignes qui parlent du site description/sitename etc. (les 3 juste avant la clôture de la balises div

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 -->"><img src="{T_THEME_PATH}/images/site_logo_bis.png" alt="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"></a>
				<!-- <h1>{SITENAME}</h1> -->
				<!-- <p>{SITE_DESCRIPTION}</p> -->
				<!-- <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p> -->
			</div>

J'ai mis ces lignes en commentaires et voici ce que j'obtiens. (Tu confirmes qu'il faut les commenter ? Ca me parait logique sauf pour la class skipling dont je ne comprends pas la signification et l'usage... ?)



C'est presque ça ! Juste que la search box n'est pas au bon endroit.

[cabot]

La position en absolute de la searchbox n'est pas reconnue car il manque les : entre la propriété et la valeur.
Et c'est de ma faute car j'ai fait une erreur de frappe.

L'élément "skipling" contient un lien d'évitement pour l'accessibilité, il ne faut pas le commenter. Il n'apparaitra pas car il est sorti de l'affichage en absolute.

Par contre je te conseille de ne pas commenter non plus le titre et la description qui sont utiles pour les moteurs de recherche.

[marabout]

Arf ! J'aurais du le voir le coup des :

Bon effectivement la box est au bon endroit. J'ai aussi "décommenté" titre et description mais là ça fait tarte...
Y'a pas un moyen de laisser ces infos pour les moteurs de recherche mais ne pas afficher ?



En fait il faudrait que titre et description soient sous la bannière, masqués par celle-ci.

[cabot]

Dans common.css, trouve :

Code : Tout sélectionner

#site-description h1 {   /*ici */
	margin-right: 0;
position: absolute;
    right: 0px;
    top: 0px;
}

Remplace par :

Code : Tout sélectionner

#site-description h1, #site-description p {
	position: absolute;
	left: -999px;
}

[galixte]

Salut,

avec ta modification cabot, sur un écran 4K on les verra toujours, non ?

Pourquoi ne pas simplement leur attribuer une transparence ?

[sub60]

text-indent: -99999px;

[marabout]

@Cabot
oui, j'avais modifié le CSS pour déplacer le texte. Mais le texte est toujours visible car en blanc.

Code : Tout sélectionner

#site-description h1 {   /*ici */
	margin-right: 0;
position: absolute;
    right: 0px;
    top: 0px;
}

@galixte
Je ne maîtrise encore pas trop tous les attributs du CSS je ne sais pas rendre ce texte invisible. Si le fond était uni, oui car je pourrais écrire de la même couleur que le fond (c'est crade comme silution, d'accord ) mais la le fond est une image.

@ sub60 le indend -9999 va positionner le texte hors de l'écran, c'est ça ?

Bon là c'est le site description mais il reste le titre aussi qui pose le même problème ? J'avais pensé mettre un attribut sur la balise <p> du titre dans la class #site description

[sub60]

Ha... ben c'est bien, je vois que tu a réussi, c'est super

[marabout]

Tu m'as grillé !

http://amback.890m.com/forum/forum/phpBB3/index.php

Oui, cela fonctionne avec les solutions de Cabot ou la tienne

Bon seul problème c'est que maintenant sur smartphone il n'y a pas le logo bien sûr mais pas le texte non plus (nom du site et description)

Enfin c'est un dommage collatéral bien supportable

Merci à vous tous pour l'aide apportée. C'est vraiment sympa.

Je vais pouvoir implémenter la solution sur mon vrai forum.
Aller je fais un peu de prosélytisme , il est là -> http://www.annees-marabout.com/index.php avec l'ancien logo (pas pour longtemps)

Merci encore. Amicalement.