[Réglé] Navabar tout en haut du forum

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é] Navabar tout en haut du forum

Messagepar ninouee » 18 Fév 2017 à 11:30

Bonjour à tous!

Je suis entrain de créer mon propre style en m'inspirant de proformel qui est actuellement sur mon forum. Voila à quoi il ressemble normalement et j'aimerai m'en rapprocher : http://ddstv.fr/forum/index.php

Je travaille actuellement sur la base prosilver pour faire mon style perso.

Actuellement je cherche à remettre la navbarr tout en haut du forum. La ligne fixe qui est présente où qu'on soit et qui contiennent les notifications, les messages privés et la zone recherche.
Il y a une partie du code liée au responsive et je sais que je vais devoir l'intégrer à la feuille de style.
Dans le CSS j'ai ajouté tous les élements du style s'y rapportant mais la seule chose que ça fait c'est changer la couleur et je ne vois pas la barre grise en haut du forum.

J'ai pensé m'inspirer du fichier "navbar_header" du style proformel. Pour tester je ai collé le fichier dans mon style en bidouillant un peu mais il n'y a pas eu de réaction au niveau de mon style pour que je trouve les éléments dont j'ai besoin.

Voila le fichier en question:
Code: Tout sélectionner
<div class="navbar" role="navigation">
	<div class="inner">

	<ul id="nav-main" class="linklist bulletin" role="menubar">

		<li id="quick-links" class="small-icon responsive-menu dropdown-container<!-- IF not S_DISPLAY_QUICK_LINKS and not S_DISPLAY_SEARCH --> hidden<!-- ENDIF -->" data-skip-responsive="true">
			<a href="#" class="responsive-menu-link dropdown-trigger">{L_QUICK_LINKS}</a>
			<div class="dropdown hidden">
				<div class="pointer"><div class="pointer-inner"></div></div>
				<ul class="dropdown-contents" role="menu">
					<!-- EVENT navbar_header_quick_links_before -->

					<!-- IF S_DISPLAY_SEARCH -->
						<li class="separator"></li>
						<!-- IF S_REGISTERED_USER -->
							<li class="small-icon icon-search-self"><a href="{U_SEARCH_SELF}" role="menuitem">{L_SEARCH_SELF}</a></li>
						<!-- ENDIF -->
						<!-- IF S_USER_LOGGED_IN -->
							<li class="small-icon icon-search-new"><a href="{U_SEARCH_NEW}" role="menuitem">{L_SEARCH_NEW}</a></li>
						<!-- ENDIF -->
						<!-- IF S_LOAD_UNREADS --> 
							<li class="small-icon icon-search-unread"><a href="{U_SEARCH_UNREAD}" role="menuitem">{L_SEARCH_UNREAD}</a></li>
						<!-- ENDIF -->
						<li class="small-icon icon-search-unanswered"><a href="{U_SEARCH_UNANSWERED}" role="menuitem">{L_SEARCH_UNANSWERED}</a></li>
						<li class="small-icon icon-search-active"><a href="{U_SEARCH_ACTIVE_TOPICS}" role="menuitem">{L_SEARCH_ACTIVE_TOPICS}</a></li>
						<li class="separator"></li>
						<li class="small-icon icon-search"><a href="{U_SEARCH}" role="menuitem">{L_SEARCH}</a></li>
					<!-- ENDIF -->

					<!-- IF not S_IS_BOT and (S_DISPLAY_MEMBERLIST or U_TEAM) -->
						<li class="separator"></li>
						<!-- IF S_DISPLAY_MEMBERLIST --><li class="small-icon icon-members"><a href="{U_MEMBERLIST}" role="menuitem">{L_MEMBERLIST}</a></li><!-- ENDIF -->
						<!-- IF U_TEAM --><li class="small-icon icon-team"><a href="{U_TEAM}" role="menuitem">{L_THE_TEAM}</a></li><!-- ENDIF -->
					<!-- ENDIF -->
					<li class="separator"></li>

					<!-- EVENT navbar_header_quick_links_after -->
				</ul>
			</div>
		</li>

		<!-- EVENT overall_header_navigation_prepend -->
		<li class="small-icon icon-faq" <!-- IF not S_USER_LOGGED_IN -->data-skip-responsive="true"<!-- ELSE -->data-last-responsive="true"<!-- ENDIF -->><a href="{U_FAQ}" rel="help" title="{L_FAQ_EXPLAIN}" role="menuitem">{L_FAQ}</a></li>
		<!-- EVENT overall_header_navigation_append -->
		<!-- IF U_ACP --><li class="small-icon icon-acp" data-last-responsive="true"><a href="{U_ACP}" title="{L_ACP}" role="menuitem">{L_ACP_SHORT}</a></li><!-- ENDIF -->
		<!-- IF U_MCP --><li class="small-icon icon-mcp" data-last-responsive="true"><a href="{U_MCP}" title="{L_MCP}" role="menuitem">{L_MCP_SHORT}</a></li><!-- ENDIF -->

	<!-- IF S_REGISTERED_USER -->
		<li id="username_logged_in" class="rightside <!-- IF CURRENT_USER_AVATAR --> no-bulletin<!-- ENDIF -->" data-skip-responsive="true">
			<!-- EVENT navbar_header_username_prepend -->
			<div class="header-profile dropdown-container">
				<a href="{U_PROFILE}" class="header-avatar dropdown-trigger"><!-- IF CURRENT_USER_AVATAR -->{CURRENT_USER_AVATAR} <!-- ENDIF -->{CURRENT_USERNAME_SIMPLE}</a>
				<div class="dropdown hidden">
					<div class="pointer"><div class="pointer-inner"></div></div>
					<ul class="dropdown-contents" role="menu">
						<!-- IF U_RESTORE_PERMISSIONS --><li class="small-icon icon-restore-permissions"><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li><!-- ENDIF -->
	
						<!-- EVENT navbar_header_profile_list_before -->
	
						<li class="small-icon icon-ucp"><a href="{U_PROFILE}" title="{L_PROFILE}" role="menuitem">{L_PROFILE}</a></li>
						<li class="small-icon icon-profile"><a href="{U_USER_PROFILE}" title="{L_READ_PROFILE}" role="menuitem">{L_READ_PROFILE}</a></li>
	
						<!-- EVENT navbar_header_profile_list_after -->
	
						<li class="separator"></li>
						<li class="small-icon icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">{L_LOGIN_LOGOUT}</a></li>
					</ul>
				</div>
			</div>
			<!-- EVENT navbar_header_username_append -->
		</li>
	<!-- ELSE -->
		<li class="small-icon icon-logout rightside"  data-skip-responsive="true"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">{L_LOGIN_LOGOUT}</a></li>
		<!-- IF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
			<li class="small-icon icon-register rightside" data-skip-responsive="true"><a href="{U_REGISTER}" role="menuitem">{L_REGISTER}</a></li>
		<!-- ENDIF -->
		<!-- EVENT navbar_header_logged_out_content -->
	<!-- ENDIF -->
	</ul>

	<ul id="nav-breadcrumbs" class="linklist navlinks" role="menubar">
		<!-- DEFINE $MICRODATA = ' itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""' -->
		<!-- EVENT overall_header_breadcrumbs_before -->
		<li class="small-icon icon-home breadcrumbs">
			<!-- IF U_SITE_HOME --><span class="crumb"{$MICRODATA}><a href="{U_SITE_HOME}" data-navbar-reference="home" itemprop="url"><span itemprop="title">{L_SITE_HOME}</span></a></span><!-- ENDIF -->
			<!-- EVENT overall_header_breadcrumb_prepend -->
			<span class="crumb"{$MICRODATA}><a href="{U_INDEX}" accesskey="h" data-navbar-reference="index" itemprop="url"><span itemprop="title">{L_INDEX}</span></a></span>
			<!-- BEGIN navlinks -->
				<!-- EVENT overall_header_navlink_prepend -->
				<span class="crumb"{$MICRODATA}<!-- IF navlinks.MICRODATA --> {navlinks.MICRODATA}<!-- ENDIF -->><a href="{navlinks.U_VIEW_FORUM}" itemprop="url"><span itemprop="title">{navlinks.FORUM_NAME}</span></a></span>
				<!-- EVENT overall_header_navlink_append -->
			<!-- END navlinks -->
			<!-- EVENT overall_header_breadcrumb_append -->
		</li>
		<!-- EVENT overall_header_breadcrumbs_after -->

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<li class="rightside responsive-search" style="display: none;"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}" role="menuitem">{L_SEARCH}</a></li>
		<!-- ENDIF -->
	</ul>

	</div>
</div>


Savez comment je peux m'y prendre?

Mes bidouilles ne mènent pas à grand choses :lol:
Modifié en dernier par ninouee le 18 Fév 2017 à 13:28, modifié 1 fois.
Avatar de l’utilisateur
ninouee
Maître-posteur
Maître-posteur
 
Messages: 419
Enregistré le: 22 Nov 2009 à 20:12

Re: Navabar tout en haut du forum

Messagepar cabot » 18 Fév 2017 à 12:29

Hello,

Si tu veux juste la déplacer, ouvre overall_header.html, déplace ces deux lignes là où tu veux la voir affichée :
Code: Tout sélectionner
		<!-- EVENT overall_header_navbar_before -->
		<!-- INCLUDE navbar_header.html -->

Par exemple, juste après :
Code: Tout sélectionner
<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>


Si tu veux aussi qu'elle soit fixée en haut du forum lors du scroll, installe cette extension.
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26896
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque

Re: Navabar tout en haut du forum

Messagepar ninouee » 18 Fév 2017 à 13:28

Elle est géniale ton extension!

J'ai juste à changer les couleurs plus tard.

Merci beaucoup.
Avatar de l’utilisateur
ninouee
Maître-posteur
Maître-posteur
 
Messages: 419
Enregistré le: 22 Nov 2009 à 20:12

Re: Navabar tout en haut du forum

Messagepar cabot » 18 Fév 2017 à 14:10

L'extension ne modifie aucune couleur, ce sont celles du style qui sont utilisées. :wink:
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26896
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque

Re: Navabar tout en haut du forum

Messagepar ninouee » 18 Fév 2017 à 14:49

Oui c'est ce qui est pratique.

Je peux continuer mes modifications de forme avant de faire les couleurs.
Avatar de l’utilisateur
ninouee
Maître-posteur
Maître-posteur
 
Messages: 419
Enregistré le: 22 Nov 2009 à 20:12


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