schnellzugriff verschieben

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: schnellzugriff verschieben

Beitrag von Melmac »

In Ergänzung zu dem, was Talk19zehn geschrieben hat:
824400 hat geschrieben:ich kann die codes finden aber die html dateien kann ich leider nicht mehr finden.
Falls Du die Vorlage verwenden solltest, die ich oben eingestellt habe, dann wirst Du natürlich eine ganze Menge HTML-Dateien in ihr nicht mehr vorfinden, die in prosilver noch vorhanden sind und verwendet werden.
Wie geschrieben: diese Vorlage setzt auf das, was sich "Template Inheritance" nennt - sie enthält nur noch diejenigen HTML-Dateien, deren Code gegenüber den originalen Dateien von prosilver abgeändert wurde. Alle anderen HTML-Dateien, die nicht abgeändert wurden/werden, werden dann von "prosilver_new" mitverwendet; so wie sie sind.
Du kannst "Inheritance" hier also wörtlich übersetzen: Vererbung - prosilver "vererbt" seine Templatedateien an "prosilver_new".

Wenn Du jetzt eine HTML-Datei anpassen willst oder musst, die momentan noch nur im Template-Verzeichnis von prosilver vorhanden ist, dann kopierst Du diese von prosilver nach prosilver_new und bearbeitest sie dort.

Was uns die Sache jetzt etwas schwierig macht ist, dass wir nicht wissen können, welche Anpassungen Du bereits vorgenommen hast und wie Du das umgesetzt hast.

Einen Ansatz, wie Du die nav-main über die headerbar bekommen kannst, poste ich später in einem separaten Beitrag.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: schnellzugriff verschieben

Beitrag von Melmac »

Wie angedroht ( :wink: ): ein erster Ansatz hierfür.
Ich gehe jetzt von den Änderungen aus, die Du an einem bisher unveränderten prosilver-Tochterstyle "prosilver_new" (s.o.) vornimmst.
  1. Vorbereitung
    Der Code für die DIV "navbar", die die beiden jetzt aufzusplittenden Elemente "nav-main" und "nav-breadcrumbs" enthält, befindet sich in der Datei navbar_header.html.
    Momentan ist diese Datei allerdings nur im Templateordner von prosilver enthalten und prosilver_new "erbt" sie von dort.
    Damit Du an ihr Änderungen vornehmen kannst, ohne die Originaldatei in prosilver anrühren zu müssen:
    1. kopiere diese Datei füge die Kopie danach in den Templateordner von prosilver_new ein
  2. HTML anpassen:
    Der Code der nav-main wird jetzt in eine separate HTML-Datei ausgelagert und am ursprünglichen Platz entfernt
    1. öffne /styles/prosilver_new/template/navbar_separate.html und füge am Anfag folgendes ein:

      Code: Alles auswählen

      <div class="navbar" role="navigation">
      	<div class="inner">
    2. öffne /styles/prosilver_new/template/navbar_header.html und suche

      Code: Alles auswählen

      	<ul id="nav-main" class="nav-main linklist" role="menubar">
      
      		<li id="quick-links" class="quick-links dropdown-container responsive-menu<!-- IF not S_DISPLAY_QUICK_LINKS and not S_DISPLAY_SEARCH --> hidden<!-- ENDIF -->" data-skip-responsive="true">
      			<a href="#" class="dropdown-trigger">
      				<i class="icon fa-bars fa-fw" aria-hidden="true"></i><span>{L_QUICK_LINKS}</span>
      			</a>
      			<div class="dropdown">
      				<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>
      								<a href="{U_SEARCH_SELF}" role="menuitem">
      									<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>{L_SEARCH_SELF}</span>
      								</a>
      							</li>
      						<!-- ENDIF -->
      						<!-- IF S_USER_LOGGED_IN -->
      							<li>
      								<a href="{U_SEARCH_NEW}" role="menuitem">
      									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>{L_SEARCH_NEW}</span>
      								</a>
      							</li>
      						<!-- ENDIF -->
      						<!-- IF S_LOAD_UNREADS -->
      							<li>
      								<a href="{U_SEARCH_UNREAD}" role="menuitem">
      									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>{L_SEARCH_UNREAD}</span>
      								</a>
      							</li>
      						<!-- ENDIF -->
      							<li>
      								<a href="{U_SEARCH_UNANSWERED}" role="menuitem">
      									<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>{L_SEARCH_UNANSWERED}</span>
      								</a>
      							</li>
      							<li>
      								<a href="{U_SEARCH_ACTIVE_TOPICS}" role="menuitem">
      									<i class="icon fa-file-o fa-fw icon-blue" aria-hidden="true"></i><span>{L_SEARCH_ACTIVE_TOPICS}</span>
      								</a>
      							</li>
      							<li class="separator"></li>
      							<li>
      								<a href="{U_SEARCH}" role="menuitem">
      									<i class="icon fa-search fa-fw" aria-hidden="true"></i><span>{L_SEARCH}</span>
      								</a>
      							</li>
      					<!-- ENDIF -->
      
      					<!-- IF not S_IS_BOT and (S_DISPLAY_MEMBERLIST or U_TEAM) -->
      						<li class="separator"></li>
      						<!-- IF S_DISPLAY_MEMBERLIST -->
      							<li>
      								<a href="{U_MEMBERLIST}" role="menuitem">
      									<i class="icon fa-group fa-fw" aria-hidden="true"></i><span>{L_MEMBERLIST}</span>
      								</a>
      							</li>
      						<!-- ENDIF -->
      						<!-- IF U_TEAM -->
      							<li>
      								<a href="{U_TEAM}" role="menuitem">
      									<i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>{L_THE_TEAM}</span>
      								</a>
      							</li>
      						<!-- ENDIF -->
      					<!-- ENDIF -->
      					<li class="separator"></li>
      
      					<!-- EVENT navbar_header_quick_links_after -->
      				</ul>
      			</div>
      		</li>
      
      		<!-- EVENT overall_header_navigation_prepend -->
      		<li <!-- 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">
      				<i class="icon fa-question-circle fa-fw" aria-hidden="true"></i><span>{L_FAQ}</span>
      			</a>
      		</li>
      		<!-- EVENT overall_header_navigation_append -->
      		<!-- IF U_ACP -->
      			<li data-last-responsive="true">
      				<a href="{U_ACP}" title="{L_ACP}" role="menuitem">
      					<i class="icon fa-cogs fa-fw" aria-hidden="true"></i><span>{L_ACP_SHORT}</span>
      				</a>
      			</li>
      		<!-- ENDIF -->
      		<!-- IF U_MCP -->
      			<li data-last-responsive="true">
      				<a href="{U_MCP}" title="{L_MCP}" role="menuitem">
      					<i class="icon fa-gavel fa-fw" aria-hidden="true"></i><span>{L_MCP_SHORT}</span>
      				</a>
      			</li>
      		<!-- ENDIF -->
      
      	<!-- IF S_REGISTERED_USER -->
      		<!-- EVENT navbar_header_user_profile_prepend -->
      		<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">
      					<div class="pointer"><div class="pointer-inner"></div></div>
      					<ul class="dropdown-contents" role="menu">
      						<!-- IF U_RESTORE_PERMISSIONS -->
      							<li>
      								<a href="{U_RESTORE_PERMISSIONS}">
      									<i class="icon fa-refresh fa-fw" aria-hidden="true"></i><span>{L_RESTORE_PERMISSIONS}</span>
      								</a>
      							</li>
      						<!-- ENDIF -->
      
      					<!-- EVENT navbar_header_profile_list_before -->
      
      						<li>
      							<a href="{U_PROFILE}" title="{L_PROFILE}" role="menuitem">
      								<i class="icon fa-sliders fa-fw" aria-hidden="true"></i><span>{L_PROFILE}</span>
      							</a>
      						</li>
      						<li>
      							<a href="{U_USER_PROFILE}" title="{L_READ_PROFILE}" role="menuitem">
      								<i class="icon fa-user fa-fw" aria-hidden="true"></i><span>{L_READ_PROFILE}</span>
      							</a>
      						</li>
      
      						<!-- EVENT navbar_header_profile_list_after -->
      
      						<li class="separator"></li>
      						<li>
      							<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">
      								<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>{L_LOGIN_LOGOUT}</span>
      							</a>
      						</li>
      					</ul>
      				</div>
      			</div>
      			<!-- EVENT navbar_header_username_append -->
      		</li>
      		<!-- IF S_DISPLAY_PM -->
      			<li class="rightside" data-skip-responsive="true">
      				<a href="{U_PRIVATEMSGS}" role="menuitem">
      					<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span>{L_PRIVATE_MESSAGES} </span><strong class="badge<!-- IF not PRIVATE_MESSAGE_COUNT --> hidden<!-- ENDIF -->">{PRIVATE_MESSAGE_COUNT}</strong>
      				</a>
      			</li>
      		<!-- ENDIF -->
      		<!-- IF S_NOTIFICATIONS_DISPLAY -->
      			<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">
      				<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger">
      					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span>{L_NOTIFICATIONS} </span><strong class="badge<!-- IF not NOTIFICATIONS_COUNT --> hidden<!-- ENDIF -->">{NOTIFICATIONS_COUNT}</strong>
      				</a>
      				<!-- INCLUDE notification_dropdown.html -->
      			</li>
      		<!-- ENDIF -->
      		<!-- EVENT navbar_header_user_profile_append -->
      	<!-- ELSE -->
      		<li class="rightside"  data-skip-responsive="true">
      			<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">
      				<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>{L_LOGIN_LOGOUT}</span>
      			</a>
      		</li>
      		<!-- IF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
      			<li class="rightside" data-skip-responsive="true">
      				<a href="{U_REGISTER}" role="menuitem">
      					<i class="icon fa-pencil-square-o  fa-fw" aria-hidden="true"></i><span>{L_REGISTER}</span>
      				</a>
      			</li>
      		<!-- ENDIF -->
      		<!-- EVENT navbar_header_logged_out_content -->
      	<!-- ENDIF -->
      	</ul>
    3. kopiere dies und füge es in der navbar_separate in einer neuen Zeile am Ende ein
    4. lösche diesen Code danach aus der navbar_header.html raus - er wird dort nicht mehr benötigt.
    5. öffne nochmals navbar_separate.html und füge am Ende die jetzt noch fehlenden beiden schließenden <div> Tags ein:

      Code: Alles auswählen

          </div>
      </div>
  3. Die jetzt separierte Menüzeile einbauen:
    1. öffne /styles/prosilver_new/template/overall_header.html und suche

      Code: Alles auswählen

      <div id="wrap" class="wrap">
      	<a id="top" class="top-anchor" accesskey="t"></a>
      	<div id="page-header">
    2. danach in einer neuen Zeile einfügen

      Code: Alles auswählen

      		<!-- INCLUDE navbar_separate.html -->
      Damit importierst Du den Code dieser HTML-Datei, sodass er an dieser Stelle dann angezeigt wird.
Zum Abschluss noch, wie immer, Board- und Browser-Caches leeren.

Das Ergebnis sollte dann so aussehen:
navbar_separated.png
Was jetzt noch zu machen ist: die Optik anpassen = das formatierende CSS anpassen.
Probiere es mal zuerst selbst, okay? :wink:
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Antworten

Zurück zu „Styles, Templates und Grafiken“