[ninouee]

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

[cabot]

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.

[ninouee]

Elle est géniale ton extension!

J'ai juste à changer les couleurs plus tard.

Merci beaucoup.

[cabot]

L'extension ne modifie aucune couleur, ce sont celles du style qui sont utilisées.

[ninouee]

Oui c'est ce qui est pratique.

Je peux continuer mes modifications de forme avant de faire les couleurs.