[Réglé] Mettre en place une bannière plein format et Responsive

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.2

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !

[Réglé] Mettre en place une bannière plein format et Responsive

Messagepar paul12 » 07 Nov 2018 à 21:37

Bonjour à tous,

Je suis actuellement en train de remanier un forum et je souhaiterais mettre en place une bannière personnalisée.

J'ai récupéré le forum via le FTP ainsi que la base de donnée que j'ai exportée via PhpmyAdmin.

J'ai installé Wamp et ai tout mis en place en modifiant le php_config de la base de donnée (script path, server_name) ainsi que le fichier config.php à la racine du forum.

Puis j'ai mis à jour le forum en 3.2.3 et j'ai suivi cet excellent tuto de Kewee (Tu es très pédagogue) pour modifier un peu le style de base prosilver : documentation/styles/creer-un-style-phpbb-31-ou-32-a223-view.html

J'ai commencé à placer une "bannière test", j'ai retiré la couleur de fond du header, le logo et la description texte en ajoutant ces lignes de codes trouvées dans différents sujets :

Code: Tout sélectionner
/* Style Perso */
html, body {
	color: #053754;
	background: url("./images/gold-fond.jpg"); 
}
.site_logo {
	background-image: url("./images/site_logo.jpg");
	width: 270px;
	left: 120px;
	padding-left: 800px;
	padding-top: 105px;
}
.site-description h1, .site-description p  {
    display: none;
}
.headerbar {
   background: transparent;
}


Mais je suis confronté à deux problematiques :

- Je souhaiterais que la bannière soit responsive car quand je zoom, elle sort du cadre par exemple. Qu'elle prenne correctement sa place sans être zoomée ou dépassant du cadre.

- Je souhaiterais que la bannière soit en plein format de sorte que même le cadre blanc soit dissimulé derrière la bannière.
Je suppose qu'il y a une fonction pour que l'image passe au dessus du cadre blanc.

Voici une image pour illustrer, car je ne peux pas donner de lien vu que je suis en local :

Image

J'aimerais que la bannière face la taille du cadre rouge.

Pourriez-vous me donner les lignes de codes à inscrire pour que je puisse faire ces modifications ainsi qu'une explication détaillée sur le pourquoi du comment :D

PS : Quelle serait la taille idéale pour une bannière dans ces conditions ?

Merci par avance pour votre aide.

A bientôt.
Modifié en dernier par paul12 le 15 Nov 2018 à 10:34, modifié 1 fois.
paul12
Posteur néophyte
Posteur néophyte
 
Messages: 12
Enregistré le: 07 Nov 2018 à 16:29

Re: Mettre en place une bannière plein format

Messagepar cabot » 08 Nov 2018 à 13:10

Hello,

Pour coller à la largeur de prosilver, il faut une image de 1182px de large, genre comme ça, que tu envoies dans le répertoire /theme/images/ de ton style.

Ouvre overall_header.html, trouve :
Code: Tout sélectionner
				<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 -->"><span class="site_logo"></span></a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>

Remplace par :
Code: Tout sélectionner
				<a id="logo" class="logo" href="{U_INDEX}" title="{L_INDEX}"><img src="{T_THEME_PATH}/images/logo.jpg" alt="logo"></a>
				<h1 class="skiplink">{SITENAME}</h1>
				<p class="skiplink">{SITE_DESCRIPTION}</p>

Dans ton fichier CSS perso, trouve :
Code: Tout sélectionner
.site_logo {
	background-image: url("./images/site_logo.jpg");
	width: 270px;
	left: 120px;
	padding-left: 800px;
	padding-top: 105px;
}
.site-description h1, .site-description p  {
    display: none;
}
.headerbar {
   background: transparent;
}

Remplace par :
Code: Tout sélectionner
.headerbar {
	background: none;
	position: relative;
}

.site-description {
    float: none;
    width: auto;
	margin: -20px -20px 0 -20px;
}

.logo {
	padding: 0;
	float: none;
}

.logo img {
	width: 100%;
}

.search-header {
    position: absolute;
	top: 0;
	right: 0;	
	margin: 0;
}

@media (max-width: 700px) {
	.site-description .logo {
		display: block;
		padding: 15px 15px 0 15px;
	}	
}
Modifié en dernier par Mazeltof le 13 Nov 2018 à 22:26, modifié 1 fois.
Raison: correction du code html
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26830
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Mettre en place une bannière plein format

Messagepar paul12 » 09 Nov 2018 à 13:48

Bonjour Cabot,

Merci beaucoup pour cette réponse détaillée.

Avant de me mettre à l'ouvrage, petite question :

Est-il possible de faire ces modifications directement depuis mon thème hérité ?
Car je suppose que quand je devrai mettre à jour à l'avenir le forum, cela effacera ce qui a été modifié sur le prosilver non ?

A bientôt.
paul12
Posteur néophyte
Posteur néophyte
 
Messages: 12
Enregistré le: 07 Nov 2018 à 16:29

Re: Mettre en place une bannière plein format

Messagepar cabot » 09 Nov 2018 à 14:39

Non seulement c'est possible mais c'est surtout fortement conseillé.
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26830
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Mettre en place une bannière plein format

Messagepar paul12 » 09 Nov 2018 à 19:44

Du coup je fais comment ? Je peux ajouter le code de overall sur mon css ?
paul12
Posteur néophyte
Posteur néophyte
 
Messages: 12
Enregistré le: 07 Nov 2018 à 16:29

Re: Mettre en place une bannière plein format

Messagepar Mazeltof » 09 Nov 2018 à 23:02

'soir ici.

Pas vraiment non, le html et le css sont deux choses bien différentes.

Pour la modif html, en l'occurrence du fichier overall_header.html :
cabot a écrit:Ouvre overall_header.html, trouve :

C'est celui ton style perso, tu ne dois pas modifier prosilver qui doit rester d'origine.

Pour la modif css, en l'occurrence le fichier style_perso.css (si tu n'as pas modifié le nom) :
cabot a écrit:Dans ton fichier CSS perso, trouve :

Même chose ici, les feuilles de styles de prosilver doivent rester d'origine.

Dans le cas ou tu devrais modifier un fichier html qui ne se trouve pas dans ton style perso, il suffit d'en faire une copie depuis prosilver/template, de le coller dans style perso/template et de modifier cette copie.

Tu as un exemple de la marche a suivre dans la doc que tu évoques plus haut. :wink:
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 3317
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Mettre en place une bannière plein format

Messagepar paul12 » 10 Nov 2018 à 00:20

Bonsoir,

Merci je n'avais pas fait attention que mon thème perso possédait ces fichiers, d'où mon interrogation.

Merci a vous, je vais m'occuper de cela dès que possible et vous tient informé.

A bientôt.
paul12
Posteur néophyte
Posteur néophyte
 
Messages: 12
Enregistré le: 07 Nov 2018 à 16:29

Re: Mettre en place une bannière plein format

Messagepar paul12 » 13 Nov 2018 à 19:10

Bonjour,

J'ai crée une nouvelle bannière et ai appliqué la modification de code à faire selon Cabot et Mazeltof.

J'ai donc un fichier overall_header.html de mon thème perso qui contient maintenant cette ligne de code modifiée :
Code: Tout sélectionner
<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">

			<div id="site-description" class="site-description">
				<a id="logo" class="logo" href="{U_INDEX}" title="{L_INDEX}"><img src="{T_THEME_PATH}/images/logo.jpg" alt="logo"></a>
				<h1 class="skiplink">{SITENAME}</h1>
				<p class="skiplink">>{SITE_DESCRIPTION}</p>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<!-- EVENT overall_header_searchbox_before -->


Puis mon fichier perso qui est désormais ainsi :
Code: Tout sélectionner
/* Style Perso */
html, body {
	color: #053754;
	background: url("./images/gold-fond.jpg"); 
}

.headerbar {
	background: none;
	position: relative;
}

.site-description {
    float: none;
    width: auto;
	margin: -20px -20px 0 -20px;
}

.logo {
	padding: 0;
	float: none;
}

.logo img {
	width: 100%;
}

.search-header {
    position: absolute;
	top: 0;
	right: 0;	
	margin: 0;
}

@media (max-width: 700px) {
	.site-description .logo {
		display: block;
		padding: 15px 15px 0 15px;
	}	
}


Aux premiers essais, j'ai donc remplacé à partir de site_logo. Ma ligne de code supprimait donc site_logo et commençais avec headerbar comme Cabot le montre.

Mais je me retrouvais sans bannière.

J'ai donc essayé en laissant la ligne avec "site_logo" et ma bannière s'affichait bien, avec seulement un minuscule liserais blanc atour de la bannière donc cela s'annoncait bien. Seulement la bannière déborde sur la droite quand je zoom le navigateur, et ne fait pas la pleine largeur, ni la pleine hauteur.

Ma bannière fait 1182*230.

Puis j'ai remarqué que ma bannière en jpg s'appelait site_logo.jpg.

J'ai donc changé le nom par "logo.jpg" pour que cela colle aux lignes de codes.

Mais cette fois-ci, en enlevant la ligne site_logo et en modifiant mon fichier de bannière pour le renommer en "logo.jpg", c'est le simple logo PHPBB en bleu qui s'affiche désormais.

Où est le problème ?

Merci par avance. :)
paul12
Posteur néophyte
Posteur néophyte
 
Messages: 12
Enregistré le: 07 Nov 2018 à 16:29

Re: Mettre en place une bannière plein format

Messagepar Mazeltof » 13 Nov 2018 à 22:42

'soir ici.

La modification proposée par cabot fonctionne parfaitement, sans aucune autre modification supplémentaire.
Si ta bannière ne s'affiche pas c'est que l'image logo.jpg n'est pas au bon endroit.
Elle doit être dans le répertoire style_perso/theme/images/

Comme déjà dit :
Mazeltof a écrit:tu ne dois pas modifier prosilver qui doit rester d'origine.

Tout doit se faire depuis ton style perso
C'est aussi valable pour l'ajout et/ou la suppression d'image.

Cela dit vérifie ta modification du fichier style_perso/template/overall_header.html. Les modifications apportées ne sont pas correctes. :wink:
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 3317
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Mettre en place une bannière plein format

Messagepar paul12 » 14 Nov 2018 à 00:26

Bonsoir Mazeltof,

Je n'ai pas porté de modifications au prosilver. J'ai même remis le dossier de base de prosilver pour être sûr.

J'ai remis overall header a zéro en remettant celui de base et ai fait les modifications nécessaires (avec les modifications que tu as faites).

Et ça marche pas plus. Es-tu certain de tout le code?
Le chemin de mon image est bon.

Je ne vois pas le problème.
paul12
Posteur néophyte
Posteur néophyte
 
Messages: 12
Enregistré le: 07 Nov 2018 à 16:29

Re: Mettre en place une bannière plein format

Messagepar Mazeltof » 14 Nov 2018 à 10:50

'jour ici.

La modif proposée est correcte. (ma correction apportée plus haut concerne un > en trop, qui ne changeait rien a l'efficacité)
Pense également à vider le cache du forum et celui du navigateur (ctrl+F5) après chaque modification.

Si le soucis persiste, ça vient soit d'une erreur lors de la modification soit d'autres modifications qui interfèrent avec celle-ci.

Bref, ça doit fonctionner et sans accès au forum en question, je ne peut faire que des suppositions. :roll:
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 3317
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Mettre en place une bannière plein format

Messagepar paul12 » 14 Nov 2018 à 13:13

Bonjour,

J'ai supprimer prosilver et mon thème, j'ai remis prosilver, refais à zéro mon thème.

J'ai toujours le même problème :lol:

En examinant l'élément depuis Firefox, je remarque le site s'affiche sans considérer mon thème. Le logo pointe vers le dossier image de prosilver etc...

Dans mon ACP, j'ai uniquement mon thème d'activé. J'ai essayé en mettant hérité avec prosilver, ou sans.

Le seul moment où ma bannière s'affiche à peu près correctement, c'est avec ce code en plus :
Code: Tout sélectionner
.site_logo {
	background-image: url("./images/site_logo.jpg");
	width: 270px;
	left: 120px;
	padding-left: 800px;
	padding-top: 105px;


Sinon cela ne répond pas.

J'ai pourtant tout respecté à la lettre.

Cela peut-il venir de la base de donnée importée via phpmyadmin ?
Ou d'un problème plus en amont dans l'installation de Phpbb ?

Mon forum est installé à la racine www de Wamp, j'utilise wamp pour un autre forum également.

Ces deux forums sont à la racine, chacun dans leur dossier respectif.

Je vous joins en lien mon dossier phpbb, si cela peut aider,


lien retiré par la modération, car contenant des infos trop importantes!!
paul12
Posteur néophyte
Posteur néophyte
 
Messages: 12
Enregistré le: 07 Nov 2018 à 16:29

Re: Mettre en place une bannière plein format

Messagepar Mazeltof » 14 Nov 2018 à 16:09

Attention au lien que tu donnes, en l'occurrence, il donne accès à des infos importantes de configuration.
Même si l'installation en question est en local, à ta place, je ne prendrais pas le risque.


L'élément site_logo n'a rien a voir avec la modif en cours, il doit d'ailleurs être inexistant sur ton style puisque remplacé par logo

J'ai installé ton style don_et_compassion sur mon forum de dev et tout est ok (sauf le background.jpg manquant) le soucis vient donc de chez toi.

paul12 a écrit:J'ai essayé en mettant hérité avec prosilver, ou sans.

:shock: Je suis curieux de savoir comment tu as fait
L'héritage n'est pas un choix à définir dans l'ACP mais est défini par les fichiers style.cfg, overoll_header.html et simple_header.html
Que ton style prosilver soit actif ou pas n'a pas d'importance il faut juste qu'il soit installé, le style tiers utilisé est nativement hérité de prosilver ou pas.

paul12 a écrit:Cela peut-il venir de la base de donnée importée via phpmyadmin ?

J'en doute la base de donnée et les styles sont des choses bien différentes.

paul12 a écrit:d'un problème plus en amont dans l'installation de Phpbb

J'en doute également, si prosilver fonctionne normalement.
D'ailleurs tu peux installer temporairement un autre style compatible 3.2.3 pour t'assurer que tout es ok.
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 3317
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Mettre en place une bannière plein format

Messagepar paul12 » 14 Nov 2018 à 19:58

Bonsoir Mazeltof,

Par le choix "hérité ou non" je parlais de cette option, sans trop savoir si cela avait de l'importance :
Image

Mince de mince, alors je coince...
Prosilver semble fonctionner normalement...

J'installe un autre style pour voir, mais j'en doute...

Rien de spécial à faire pour lier ce nouveau style au mien ?

Merci pour ton temps et ton aide !

A bientôt !
paul12
Posteur néophyte
Posteur néophyte
 
Messages: 12
Enregistré le: 07 Nov 2018 à 16:29

Re: Mettre en place une bannière plein format

Messagepar Mazeltof » 14 Nov 2018 à 23:03

'soir ici.

Ah, je n'avais jamais fait attention à cette possibilité. Il faudra que j'y jette un oeil plus attentif à l'occasion. :roll:
Cela dit, l'héritage se fait directement depuis les fichiers des styles, donc je ne parierai pas sur la nécessité de cette option.

paul12 a écrit:Rien de spécial à faire pour lier ce nouveau style au mien

Quand tu parles de ton style tu penses à quel style au juste ?
S'il s'agit du style "prozen" que l'on voit sur ton screen tu peux oublier, sauf si tu as une version mise à jour 3.2.3 (sur le zip que j'ai récupéré, c'est une version 3.1.10 donc absolument incompatible avec phpBB 3.2.3)
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 3317
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Suivante

Retourner vers [3.2.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité