[Réglé] Déplacer et fixer la navbar

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é] Déplacer et fixer la navbar

Messagepar On Stage » 04 Avr 2018 à 18:56

Bonjour,

J'aimerais pouvoir agir sur cette partie de la navbar :

Image

Il faudrait que cette partie se trouve tout en haut du forum, au-dessus du header, et qu'elle suive à l'écran lorsque l'on fait défiler les pages.
J'ai trouvé et installé l'extension de Cabot mais ce n'est pas exactement le rendu que je cherche.
Au lieu d'une extension il faudrait pouvoir l'intégrer au thème en lui-même.

Par avance merci
Modifié en dernier par On Stage le 07 Avr 2018 à 19:04, modifié 1 fois.
Version de PHP : 7.2.5
Version du forum : 3.2.2

Image
Avatar de l’utilisateur
On Stage
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 19 Mar 2018 à 17:04

Re: Déplacer et fixer la navbar

Messagepar On Stage » 05 Avr 2018 à 17:15

Personne ?

Cette solution est bien proposée dans le thème Blue Turtle
Version de PHP : 7.2.5
Version du forum : 3.2.2

Image
Avatar de l’utilisateur
On Stage
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 19 Mar 2018 à 17:04

Re: Déplacer et fixer la navbar

Messagepar cocooncrash » 05 Avr 2018 à 17:49

Bonjour,
Attention le méchant modérateur que je suis te répondra de laisser le temps aux intervenants, car la moins de 24 avant ta relance, ce qui peut être apparenté a du UP, et c'est interdit.
decouvrez l'aide complete : ICI
découvrez les règles : La_bas

Pensez a ajouter le tag [réglé] en modifiant votre premier message s'il est résolu. Merci :wink:
Avatar de l’utilisateur
cocooncrash
Resp. des modérateurs
Resp. des modérateurs
 
Messages: 7657
Enregistré le: 07 Jan 2008 à 09:29
Localisation: dans un bocal en compagnie de nemo!!

Re: Déplacer et fixer la navbar

Messagepar Mazeltof » 05 Avr 2018 à 19:41

'soir ici,

Si tu veux la même chose qu'un autre style tu peux reprendre les modifications faite dans le hoverall_header.html du style en question et la partie css correspondante dans la feuille de style.

J'y regarderai quand j'aurai l'occasion si tu n'es pas trop a l'aise avec le html.
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2734
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Déplacer et fixer la navbar

Messagepar On Stage » 06 Avr 2018 à 00:47

J'ai réussi à faire l'import dans mon style des paramètres des navbars de Blue Turtle

La navbar qui se situe en dessous du header est parfaitement positionnée
Les 2 autres, en haut et en bas du forum elles dépassent largement du cadre

Image

Je ne suis pas arrivé à changer la police de couleur du menu déroulant, blanc sur blanc ça n'aide pas à la lecture :?
Et si quelqu'un à le code de couleur du bleu du style prosilver je suis preneur

J'aimerais bien également que la navbar supérieur suive lors du défilement au lieu de rester constamment en haut
Version de PHP : 7.2.5
Version du forum : 3.2.2

Image
Avatar de l’utilisateur
On Stage
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 19 Mar 2018 à 17:04

Re: Déplacer et fixer la navbar

Messagepar Mazeltof » 06 Avr 2018 à 09:50

'jour ici,

Sans accès au forum en question, ça va être difficile de t'aider.
Il faut mettre ton style en cours de modification par défaut ou au minimum que l'on puisse voir les modifications apportées au niveau html/css. (url d'un forum test ou compte test qui permette la sélection du style ou au minimum code html/css)

prosilver contient de nombreux codes couleurs différents rien que pour le(s) bleu(s), tu veux lequel ?

pour fixer ta navbar on va attendre que celle-ci soit terminée.
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2734
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Déplacer et fixer la navbar

Messagepar On Stage » 06 Avr 2018 à 10:34

J'avais commencé à faire les modifs depuis MAMP sur l'ordi, je viens de les importées sur le forum
Dans le template j'ai importé aussi le fichier navbar_header.html du style

Navbar du haut et dessous du header :
Image

Pour la navbar en dessous du header tout est OK
La navbar du haut de forum n'est pas cadrée, trop large. De plus la transparence n'y est pas

Idem pour la navbar du bas de forum :
Image

La couleur de police du menu déroulant ne va pas non plus, blanc sur blanc :
Image

Pour la couleur du bleu de prosilver je pense à celle des cadres de catégories

EDIT :
La navbar supérieur du style Blue Turtle n'est pas centrée sur la cadre du forum non plus, j'aimerais bien qu'elle le soit sur mon style.
Pour le menu déroulant j'aimerais garder les mêmes paramètres
Image

EDIT 2 :
J'ai réussi à avoir ce que je voulais, sauf 1 chose, la dimension de la navbar inférieur
Quel paramètre à modifier pour qu'elle ne sorte pas du cadre du forum ?

Image
Version de PHP : 7.2.5
Version du forum : 3.2.2

Image
Avatar de l’utilisateur
On Stage
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 19 Mar 2018 à 17:04

Re: Déplacer et fixer la navbar

Messagepar Mazeltof » 06 Avr 2018 à 18:37

On Stage a écrit:Dans le template j'ai importé aussi le fichier navbar_header.html du style

tu veux dire celui de Blue Turtle ? si tu veux le même résultat c'est correct.

pour modifier la largeur, dans ton fichier style_stageleft.css
trouve :
Code: Tout sélectionner
.navbar .inner {
    background-color: transparent;
    color: #777a7c;
    max-width: 1100px;
    margin: 0 auto;
}

remplace par :
Code: Tout sélectionner
.navbar .inner {
    background-color: transparent;
    color: #777a7c;
    max-width: 1152px;
    margin: 0 auto;
}
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2734
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Déplacer et fixer la navbar

Messagepar On Stage » 06 Avr 2018 à 19:09

La valeur max-width n'a pas modifié la largeur de la navbar inférieur
Version de PHP : 7.2.5
Version du forum : 3.2.2

Image
Avatar de l’utilisateur
On Stage
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 19 Mar 2018 à 17:04

Re: Déplacer et fixer la navbar

Messagepar tomberaid » 06 Avr 2018 à 19:25

Hello
Pour la navbar du bas (et uniquement celle là) c'est :
Code: Tout sélectionner
.page-footer .navbar {
    max-width: 1164px;
    margin: 0 auto;
}

Cordialement
Image
Avatar de l’utilisateur
tomberaid
Roi des posts
Roi des posts
 
Messages: 714
Enregistré le: 18 Juin 2009 à 00:27

Re: Déplacer et fixer la navbar

Messagepar On Stage » 06 Avr 2018 à 19:37

Merci tomberaid

Mais il y a moyen de la placer dans le cadre du forum afin qu'elle suive la largeur donnée ?
Version de PHP : 7.2.5
Version du forum : 3.2.2

Image
Avatar de l’utilisateur
On Stage
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 19 Mar 2018 à 17:04

Re: Déplacer et fixer la navbar

Messagepar Mazeltof » 07 Avr 2018 à 09:46

'jour ici,

D'origine la navbar basse est dans le cadre (wrap), il te faut annulé la modif, dans overall_footer.html, que tu as apporté pour la mettre a l'extérieur.
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2734
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Déplacer et fixer la navbar

Messagepar On Stage » 07 Avr 2018 à 10:16

Le overhall_footer n'a pas été modifié

Dans ma stylesheet j'ai ce code :
Code: Tout sélectionner
html, body {
	color: #FFFFFF;
	background: url("./images/background.png") no-repeat center fixed; 
	background-size: cover;
}

.site_logo {
	background-image: url("./images/site_logono.png");
	width: 260px;
	height: 91px;
}

.wrap {
    margin: 18px auto;
	border-radius:20px;
	border: 2px solid #0080FF;
	box-shadow: 2px 2px 5px #053754;
    background-color: rgba(255, 255, 255, 0.45);
    border-color: #0080FF;
    background-image: none;
    padding: 0 20px;
}

.wrap, .panel-container h3, .panel-container hr, .cp-menu hr, ul.linklist li.responsive-menu a.responsive-menu-link::before, ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist li.responsive-menu a.responsive-menu-link.a:before {
	border-color: #0080FF;
}


J'ai modifié le wrap et rajouté cette ligne ce matin :
Code: Tout sélectionner
.wrap, .panel-container h3, .panel-container hr, .cp-menu hr, ul.linklist li.responsive-menu a.responsive-menu-link::before, ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist li.responsive-menu a.responsive-menu-link.a:before {
	border-color: #0080FF;
}


La seule incidence est de m'avoir réduit le cadre en haut et en bas
Version de PHP : 7.2.5
Version du forum : 3.2.2

Image
Avatar de l’utilisateur
On Stage
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 19 Mar 2018 à 17:04

Re: Déplacer et fixer la navbar

Messagepar Mazeltof » 07 Avr 2018 à 10:58

On Stage a écrit:Le overhall_footer n'a pas été modifié

Dans ce cas, il y a un soucis de </div> fermant suite aux modifs que tu as faites dans le overall_header.html
Vérifie tes modifications ligne par ligne.
Tu peux également virer la mise en forume de style du html et le mettre dans le CSS, c'est fait pour ça :wink:
Code: Tout sélectionner
<style type="text/css">
#wrap {
	max-width: 1152px; !important;
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	#wrap {
		margin: auto;
		max-width: none !important;
	}
}

@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {
	#wrap {
		margin: auto;
	}
}

</style>
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2734
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Déplacer et fixer la navbar

Messagepar On Stage » 07 Avr 2018 à 11:16

OK il me manquait ce code dans le overall_header

Code: Tout sélectionner
<a id="start_here" class="anchor"></a>
	<div id="page-body" class="page-body" role="main">
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner">
				<strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
			</div>
		</div>
		<!-- ENDIF -->

		<!-- EVENT overall_header_content_before -->


Je ne suis pas certain de comprendre ce que tu me dis de faire là :
Tu peux également virer la mise en forume de style du html et le mettre dans le CSS, c'est fait pour ça :wink:


J'ajoute ce code dans le overhall_header mais je vire quoi exactement dans la stylesheet ?
Version de PHP : 7.2.5
Version du forum : 3.2.2

Image
Avatar de l’utilisateur
On Stage
Apprenti-posteur
Apprenti-posteur
 
Messages: 189
Enregistré le: 19 Mar 2018 à 17:04

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 2 invités