[Réglé] Modification du header

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 !
Partager sur FacebookPartager sur TwitterPartager sur Google+

[Réglé] Modification du header

Messagepar Morph29 » 04 Mai 2017 à 22:26

Bonjour,

Vous allez comprendre vide fait ce que je souhaite réalisé

Je souhaite déplacé :
1- Site description
2 - Search Box
3 - Moon (extension moon

Image

Modification du 05/05/17

Merci de votre aide.
Modifié en dernier par Morph29 le 11 Sep 2017 à 14:36, modifié 5 fois.
Morph29
Posteur néophyte
Posteur néophyte
 
Messages: 79
Enregistré le: 30 Jan 2017 à 20:11

Re: Modification du header

Messagepar galixte » 05 Mai 2017 à 02:33

Salut,

c’est insuffisant, il faut le lien vers le forum afin de réaliser les tests nécessaires.
Communau EzCom
Image
« Traductions d’extensions & styles pour phpBB 3.1.x & 3.2.x ».
ImageListes de toutes les extensions recensées pour phpBB 3.1.x & 3.2.x.
ImageListes de tous les styles recensés pour phpBB 3.1.x & 3.2.x.
Avatar de l’utilisateur
galixte
Floodeur universel
Floodeur universel
 
Messages: 9543
Enregistré le: 08 Mar 2004 à 02:40
Localisation: Sud de la France.

Re: Modification du header

Messagepar Morph29 » 06 Mai 2017 à 14:49

j'ai modifié le sujet avec L'url.

je pense que c'est le fichier overall_header.html qui gere l'affichage donc je travaille dessus mais j'ai beaucoup de mal
Merci.
Morph29
Posteur néophyte
Posteur néophyte
 
Messages: 79
Enregistré le: 30 Jan 2017 à 20:11

Re: Modification du header

Messagepar cabot » 07 Mai 2017 à 12:05

Oula ! :o

Y a du tableau de mise en page, une boîte de recherche sortie des conditions, une hiérarchie de titres peu banale et des trucs qui tournent partout. :mrgreen:

Je vais installer l'extension Moon machin pour tester et faire un peu de ménage dans le code pour te proposer quelque chose.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26717
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Modification du header

Messagepar Morph29 » 07 Mai 2017 à 12:14

Coucou Cabot,

je pense avoir réussi mais de manière peu orthodoxe, si tu veux jeter un œil!
Le rendu que je souhaitais est là, mais j'ai du replacer l'ensemble des infos et incorporer un tableau

Moi aussi je jette un œil sur le code "moon", il me semble super simple, je pense que c'est juste un lien vers un autre site.
si c'est le cas je vais directement l'intégrer dans mon overall

Merci en tout cas cabot pour ton regard avisé!
Morph29
Posteur néophyte
Posteur néophyte
 
Messages: 79
Enregistré le: 30 Jan 2017 à 20:11

Re: Modification du header

Messagepar cabot » 07 Mai 2017 à 13:45

Allez, on y va ! 8)

On vire le tableau et on rétabli le code d'origine dans le overall_header.html.
Trouve :
Code: Tout sélectionner
	<div id="page-header">
	
		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
		
			<div class="inner">
			<table width=1152px>
			
				<tr>
					<td COLSPAN=2 >
					    <center>
						
						</center>
					</td>
				</tr>
				<tr>
					<TD ROWSPAN=2 VALIGN="bottom" HEIGHT="250" width="80%">
					<center>
						<h6>{SITENAME}</h6>
						<h5>{SITE_DESCRIPTION}</h5>
					</center>
					</TD>
					<TD>
						<center>
						<!-- EVENT overall_header_searchbox_before -->
						<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
						<!-- ENDIF -->
						</center>
					</TD>
				</TR>
				<TR>
					<TD>
						<center>
						<div id="search-box" class="search-box search-header" role="search">
							<form action="{U_SEARCH}" method="get" id="search">
							<fieldset>
								<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
								<button class="button button-search" type="submit" title="{L_SEARCH}">
									<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
								</button>
								<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
									<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
								</a>
								{S_SEARCH_HIDDEN_FIELDS}
							</fieldset>
							</form>
						</div>
						</center>
					</TD>
				</TR>
			</table> 
			
				
			</div>
			
			
		
		</div> 
        <!-- EVENT overall_header_headerbar_after -->
		<!-- EVENT overall_header_navbar_before -->		
		<!-- INCLUDE navbar_header.html -->
	</div>

Remplace par :
Code: Tout sélectionner
	<div id="page-header">
		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">

			<div id="site-description" class="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 -->"><span class="site_logo"></span></a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<!-- EVENT overall_header_searchbox_before -->
			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header" role="search">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
			<!-- EVENT overall_header_searchbox_after -->

			</div>
			<!-- EVENT overall_header_headerbar_after -->
		</div>
		<!-- EVENT overall_header_navbar_before -->
		<!-- INCLUDE navbar_header.html -->
	</div>

On supprime l'image de fond du bloc headerbar et la règle pour le truc moon qui fait doublon avec celle de l'extension.
Ouvre colours.css
Supprime :
Code: Tout sélectionner
.headerbar, .forumbg {
	background-color: transparent;
	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 240px, #12A3EB 100%);
	background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 240px,#12A3EB 100%);
	background-repeat: repeat-x;
	background: url("images/newbanlcda.png") no-repeat;
	height: 240px; /* hauteur image en px */
	padding: 0;
}

.headerbar #moon {
    float: right;
    margin-right: 5px;
    margin-left: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-decoration: none;
}

On positionne le bloc headerbar en relative pour pouvoir ensuite positionner la lune en absolute.
Dans common.css, trouve :
Code: Tout sélectionner
.headerbar {
	margin-bottom: 4px;
	padding: 5px;
	border-radius: 7px;

}

Remplace par :
Code: Tout sélectionner
.headerbar {
	margin-bottom: 4px;
	padding: 5px;
	border-radius: 7px;
	position: relative;
}

On positionne la lune en absolute, en haut et à droite du headerbar, sous la règle précédente de common.css, ajoute :
Code: Tout sélectionner
#page-header #moon {
	position: absolute;
	top: 10px;
	right: 10px;
}

On ajoute le logo et on définit ses dimensions, dans colours.css, trouve :
Code: Tout sélectionner
.site_logo {
	background-image: url("images/newbanlcda.png");
}

Remplace par :
Code: Tout sélectionner
.site_logo {
	background-image: url("images/newbanlcda.png");
	width: 1170px;
	height: 240px;
}

On positionne le bloc lien/image du logo en absolute pour ne pas se prendre la tête avec les autres éléments du header.
Dans common.css, trouve :
Code: Tout sélectionner
.logo {
	/* Ici on peut poser un logo
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;*/
}

Remplace par :
Code: Tout sélectionner
.logo {
	position: absolute;
	left: 50%;
	margin-left: -585px;
}

On centre le titre et la description du forum et on les descend sous le logo, dans common.css, trouve :
Code: Tout sélectionner
.site-description {
	/*float: left;
	width: 65%;*/
}

.site-description h1 {
	margin-right: 0;
}

Remplace par :
Code: Tout sélectionner
.site-description {
	text-align: center;
}

.site-description h1 {
	margin: 0;
	padding-top: 180px;
}

On remonte le titre sur les petites résos, sous la règle précédente, ajoute :
Code: Tout sélectionner
@media (max-width: 700px) {
	.site-description h1 {
		padding-top: 0;
	}
}

On modifie la position du bloc de recherche, dans forms.css, trouve :
Code: Tout sélectionner
.search-header {
	border-radius: 4px;
	display: block;
	float: right;
	margin-right: 5px;
	margin-top: 30px;
}

Remplace par :
Code: Tout sélectionner
.search-header {
	border-radius: 4px;
	position: relative;
	float: left;
	margin: -50px 0 0 0;
}


Bon, comme tu vois il faut jongler dans les fichiers car tu modifies prosilver, alors que si tu avais créé un style perso comme indiqué dans la doc, on aurais pu simplifier les choses et tu aurais conservé prosilver intact en cas de pépin ou d’installation d'un style enfant.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26717
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Modification du header

Messagepar Morph29 » 07 Mai 2017 à 14:25

Merci Cabot,
Je vais appliquer tes correction de ce pas.

Pour info ce n'est pas prosilver, j'ai copier prosilver et renommé, il est intact le prosilver.
il est bien présent dans Style.

N"étant pas encore à la hauteur, j'ai délibérément opter pour cette option même si je sais que de repartir sur un style perso est plus pro et conforme au divers règles établie.

Ca sera la prochaine étape. mais je préfère comprendre et partir du prosilver pour absorber les techniques.
Je sais c'est mal, mais je ne suis pas aussi doué que vous tous, donc c'est un moyen détournée d'y arriver.

En tout cas merci de ton aide. je regarde ça de suite.
Morph


Info après correction :

j'ai modifier le sitename pour avoir mon effet glow noir /jaune.
Le reste niquel chrome.

Je vais essayer de faire mon propre thème mais pour l'heure je dois attaquer le reste des couleur pour le mettre en adéquation avec le thème a savoir le bleu le passer en noir et les liens en blancs



Merci Cabot!
Morph29
Posteur néophyte
Posteur néophyte
 
Messages: 79
Enregistré le: 30 Jan 2017 à 20:11

Re: Modification du header

Messagepar cabot » 08 Mai 2017 à 09:11

Morph29 a écrit:Pour info ce n'est pas prosilver, j'ai copier prosilver et renommé, il est intact le prosilver.

Au temps pour moi

Morph29 a écrit:N"étant pas encore à la hauteur, j'ai délibérément opter pour cette option même si je sais que de repartir sur un style perso est plus pro et conforme au divers règles établie.

Ce n'est pas une question de règles établies et il est évident que tu fais ce que tu veux, mais tu te compliques la vie alors qu'on a fait un tuto exprès pour proposer quelque chose de simple, avec une archive contenant un style prêt à l'emploi.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26717
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Modification du header

Messagepar Morph29 » 11 Mai 2017 à 20:58

Merci Cabot!

tu as tout a fait raison, j'ai lu le tuto pour info, et je travail dessus. mais j'ai pris l'option de facilité car mes membres (team de vieux playser + de 40 ans) me mette un peu la pression pour sortir un truc à leur gout.

ceci dit le tuto est super, mais etant perfectionniste je veux prendre le temps de bien faire les choses.
Mais tu as 1000 fois raison.

Merci d’ailleurs à tout ceux qui travail à nous répondre et gérer le forum sur leur temps perso.
je sais de quoi je parle.

merci à tous!
Morph29
Posteur néophyte
Posteur néophyte
 
Messages: 79
Enregistré le: 30 Jan 2017 à 20:11


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é