Forumbook Farbe im Header ändern

[LisaserstesForum]

Das ist richtig aber wenn man über das ACP die Adresse einstellt, dann läuft auch die Forenübersicht usw auf diesen Link.
Ich habe es jetzt über die overall_header.html so abgeändert bekommen, wie ich es brauche, danke für eure Hilfe!

[LisaserstesForum]

Ich habe die "Foren-Übersicht" über die navbar_header.html zu "Startseite" umbennant:

Code: Alles auswählen

<span class="crumb"><a href="{U_INDEX}" accesskey="h"{$MICRODATA} data-navbar-reference="index">Startseite</a></span>

Ich verstehe aber noch nicht, wozu dieser Code darüber gehört:

Code: Alles auswählen

<!-- IF U_SITE_HOME --><span class="crumb"><a href="{U_SITE_HOME}"{$MICRODATA} data-navbar-reference="home">{L_SITE_HOME}</a></span><!-- ENDIF -->

Kann mir jemand von euch die Bedeutung oder Zugehörigkeit erklären?

Zweite Frage: Gibt es einen Code für den Responsive-Fall? Also etwas wie

Code: Alles auswählen

<!-- IF RESPONSIVE -->

oder sowas?
Denn ich habe einige Änderungen gemacht, die nur im Desktopmodus aktiv sein sollen, im Responsive-Modus soll es wieder anders sein.

[Talk19zehn]

Hi, das habe ich nicht verstanden:

Das ist richtig aber wenn man über das ACP die Adresse einstellt, dann läuft auch die Forenübersicht usw auf diesen Link.

Das ist in meinem Falle nicht so. Der Link in der Navigation ist korrekt.

Das Style verhält sich korrekt, wie seitens phpBB-3.1.x vorgegeben.

Code:

Code: Alles auswählen

<!-- IF U_SITE_HOME --><span class="crumb"><a href="{U_SITE_HOME}"{$MICRODATA} data-navbar-reference="home">{L_SITE_HOME}</a></span><!-- ENDIF -->

gehört zur Homepage / Startseite, die du laut ACP (be)nutzen kannst. Ein schickes neues Feature in 3.1.x, welches der Navigation(!) vorangestellt wird.

Zu deiner letzten Frage:
Sofern du neue Klassen, IDs nutzt, musst du sie im responsiven Layout anpassen. Hast du z.B. h3 einer Klasse zugewiesen, die 2.3em (font-size) ausgibt, macht das ab 768px / 550px womöglich keinen Sinn. Standardklassen verhalten sich in aller Regel phpBB-konform. Es sei denn, ihm wäre ihm / dir / uns ein Fehler unterlaufen.
Um was geht es denn in deinem Falle? Ich denke nur dann kann man dir helfen, wenn du Codierungen offenlegst.

Nutzt das Style Klassen, IDs, die bereits responsive angepasst und von dir verändert wurden? Wenn ja wie? Leider kann man das so einfach nicht beantworten.
Nützlich ist ggf. Firebug (angepasste Layouts), um zu sehen, wo an welcher Stelle bereits agiert oder deinerseits nicht agiert worden ist.


LG und viel Glück


P.S.: Ich muss allerdings auch zugeben, dass ich jenes (BETA)-Style nur testweise und aus Interesse installierte.

[Kirk]

Was dieses {U_SITE_HOME} bedeutet habe ich hier schon erklärt.
Für das responsive kann man z.b. das hier nehmen

Code: Alles auswählen

<span class="responsive-hide">Dein Code</span>

Alles was sich darin befindet wird ab einer Auflösung von 700px abwärts nicht angezeigt.
Ein andere Möglichkeit wäre z.b. für eine kleine Auflösung eine andere css zu benutzen, schau dir mal die responsive.css an.

[LisaserstesForum]

@Talk19Zehn
Puh, das klingt für mich ja fast chinesisch, ich verstehe von den Begriffen leider nicht viel.

Ich erkläre einfach mal, was ich gemacht habe.
Ich habe in der navbar_header.html die Codes aus <ul id="nav-main" und <ul id="nav-breadcrumbs" zusammen gesetzt,
damit beides in nur einer Zeile steht.
So sieht es im Original aus: http://img5.fotos-hochladen.net/uploads ... 15ufdz.jpg
Und so sieht es bei mir abgeändert aus: http://img5.fotos-hochladen.net/uploads ... 9enfyg.png

Dafür habe ich den Code von unten eigentlich nur oben eingesetzt, der Code der navbar_header.html sieht also jetzt so aus:

Code: Alles auswählen

<div class="navbar" role="navigation">
	<div class="inner">

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

		<!-- EVENT overall_header_navigation_prepend -->
		
				<!-- 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"><a href="{U_SITE_HOME}"{$MICRODATA} data-navbar-reference="home">{L_SITE_HOME}</a></span><!-- ENDIF -->
			<!-- EVENT overall_header_breadcrumb_prepend -->
			<span class="crumb"><a href="{U_INDEX}" accesskey="h"{$MICRODATA} data-navbar-reference="index">Startseite</a></span>
			<!-- BEGIN navlinks -->
				<!-- EVENT overall_header_navlink_prepend -->
				<span class="crumb"><a href="{navlinks.U_VIEW_FORUM}"{$MICRODATA}<!-- IF navlinks.MICRODATA --> {navlinks.MICRODATA}<!-- ENDIF -->>{navlinks.FORUM_NAME}</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 -->
		<li class="small-icon">
		|
		</li>
		
		
		<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 -->

	<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_REGISTERED_USER -->
	<!-- ELSE -->
		<!-- 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>



	</div>
</div>

Soweit - so gut. Im Desktopmodus sieht das, meiner Meinung nach, besser aus.
Allerdings nicht im Responsive-Style.
Hier ohne die geänderte Navbar: http://img5.fotos-hochladen.net/uploads ... xvgmyr.png
Und mit der geänderten Navbar: http://img5.fotos-hochladen.net/uploads ... 7di5qt.png

Da passt es dann leider nicht. Deswegen würde ich es gerne in etwa so machen:
Wenn nicht responsive-Style, dann: abgeänderter Code
Wenn repsonisve-Style, dann: Original Code.

@Kirk
Mit dem Code von dir habe ich jetzt genau das gemacht, was ich eben geschrieben habe:
https://www.phpbb.de/support/pastebin.p ... iew&s=1510

Jetzt ist nur noch das Problem, dass im Desktop-Modus beide Navbars angezeigt werden.
Gibt es also noch einen umgekehrten Code dazu, der im Desktop-Modus etwas versteckt?

[Kirk]

Wenn ich dich richtig verstanden habe möchtest du 2 Navbars.
Du müsstet die eine Navbar die nur responsive angezeigt werden soll eine andere Klasse geben z.b. <div class="navbar-responsive" role="navigation">
Jetzt erstellst du in der responsive.css eine neue css Anweisung z.b. so:

Code: Alles auswählen

@media only screen and (max-width: 350px), only screen and (max-device-width: 350px) {
	.navbar-responsive{
		deine css anweisungen	}
}

Damit wir diese Navbar erst ab einer Auflösung von 350px angezeigt, passe diese Auflösung nach deinen Wünschen an.
Warum verwendest du nicht nur 1 Navbar das täte dir viel Arbeit ersparen.

[LisaserstesForum]

Ja, das hast du richtig verstanden, ich möchte im normalen PC-Design Navbar 1 und im Responsive-Design Navbar 2 haben.

Ich habe in der responsive.css dies eingetragen:

Code: Alles auswählen

@media only screen and (max-width: 350px), only screen and (max-device-width: 350px) {
   .navbar-responsive{
	padding: 3px 10px;
	border-radius: 7px;}
}

In der navbar_header.html habe ich dann <div class="navbar" role="navigation"> zu <div class="navbar-responsive" role="navigation"> geändert.

Leider ist das Ergebnis aber nur, dass der Rahmen der Navbar nicht mehr zu sehen ist, weder in der Desktop-Ansicht, noch im Responsive-Design.
[ externes Bild ]
Hab ich was falsch gemacht?

[Lehrling]

beide Container müssen in beiden Stylesheets aufgelistet sein, also im common.css und im responsive.css.
Um einen Container sichtbar bzw. unsichtbar zu machen, kannst du dir mit visibility: visible; bzw.visibility: hidden; behelfen.
Als Beispiel: deine navbar-responsive soll ja nur sichtbar sein, wenn der Bildschirm klein ist.
Also fügst du ins common.css diese Klasse ein:

Code: Alles auswählen

.navbar-responsive  {
      visibility: hidden;
      }

Im responsive.css hingegen muss

Code: Alles auswählen

.navbar-responsive  {
      visibility: visible;
      }

stehen. Für die navbar musst du es genau andersherum machen.

[LisaserstesForum]

Mh, habe ich so probiert aber auch da fällt dann nur der Rahmen weg, der Rest bleibt stehen.
[ externes Bild ]

Das ist der aktuelle Code der navbar_header.html: https://www.phpbb.de/support/pastebin.p ... iew&s=1511

[Lehrling]

bei mir klappt es mit deinem Code, allerdings ist mir aufgefallen, dass in Zeile 52 der navbar_header.html navbar_responsiv steht.
Hast du die Klasse in den Stylesheets auch so genannt? Oder steht da eventuell navbar_responsive? Ich hatte nämlich die Klasse navbar_responsive genannt.