Forumbook Farbe im Header ändern

LisaserstesForum · Beitrag von **LisaserstesForum** » 08.08.2015 07:49

Hallo,

ich habe mir für phpBB 3.1.5 den Style Forumbook (https://www.phpbb.com/community/viewtop ... &t=2329571) installiert und ändere ihn aktuell ein bißchen ab.
Ich habe die Schriftfarbe in dem Header von weiß zu schwarz geändert:

colours.css

Code: Alles auswählen

.headerlink, .headerlink:visited, .headerlink:hover, .headerlinksignedout, .headerlinksignedout:visited, .headerlinksignedout:hover {
	color: #FFFFFF;
	text-decoration: none;
}

Code: Alles auswählen

.headerlink, .headerlink:visited, .headerlink:hover, .headerlinksignedout, .headerlinksignedout:visited, .headerlinksignedout:hover {
	color: #000000;
	text-decoration: none;
}

Daurch wurden natürlich auch die Zahlen in den Notifications schwarz:
[ externes Bild ]

Diese Zahlen möchte ich wieder weiß färben.
Ich habe dafür also in der overall_header.html gesucht und wahrscheinlich schon den richtigen Part gefunden:

Code: Alles auswählen

	<!-- IF S_REGISTERED_USER -->
		<!-- IF S_NOTIFICATIONS_DISPLAY -->
			<li class="small-icon icon-notification-header dropdown-container dropdown-{S_CONTENT_FLOW_END} leftside" data-skip-responsive="true">
				<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger headerlink"><span><!-- IF $F_HEADER_TEXT --><span class="headlinktext">{L_NOTIFICATIONS}</span><!-- ENDIF --><div class="headernew"><div class="headernumber">{NOTIFICATIONS_COUNT}</div></div></span></a>
				<!-- INCLUDE notification_dropdown.html -->
			</li>
		<!-- ENDIF -->
		<!-- IF S_DISPLAY_PM -->
			<li class="small-icon icon-pm-header leftside" data-skip-responsive="true">
				<a href="{U_PRIVATEMSGS}" class="headerlink" role="menuitem"><span><!-- IF $F_HEADER_TEXT --><span class="headlinktext">{L_PRIVATE_MESSAGES}</span><!-- ENDIF --><div class="headernew"><div class="headernumber">{PRIVATE_MESSAGE_COUNT}</div></div></span></a>
			</li>
		<!-- ENDIF -->
	<!-- ELSE -->
		
		<!-- EVENT navbar_header_logged_out_content -->
	<!-- ENDIF -->

Allerdings weiß ich noch nicht so recht, was ich dort nun ändern muss.
Das Einzige, was ich dort finde und was ich vorher in der colours.css geändert habe ist

Code: Alles auswählen

class="headerlink"

Diese habe ich doch eigentlich nicht verändert:

Code: Alles auswählen

class="headlinktext"
class="headernew"
class="headernumber"
etc

Mir fehlen also eigentlich nur noch die letzten Meter, um die Änderung machen zu können.
Ich hoffe auf einen Tip von euch.

Hier der Link zum Forum:
http://short4u.de/55c598a62107f

Video-Tutorials für phpBB-Foren · Beitrag von **Lehrling** » 08.08.2015 09:44

Hallo,
eine Möglichkeit wäre die:
du legst in dem colours.css eine neue Klasse an, z.B.

Code: Alles auswählen

.white {
      color: #ffffff;
}

Dann öffnest du die Datei navbar_header.html und suchst nach folgender Stelle

Code: Alles auswählen

<span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></a>

Diese Stelle ersetzt du durch

Code: Alles auswählen

<span>{L_NOTIFICATIONS} [</span><span class="white"><strong>{NOTIFICATIONS_COUNT}</span></strong><span>]</span></a>

Cache leeren usw.

LisaserstesForum · Beitrag von **LisaserstesForum** » 08.08.2015 10:14

Hi Lehrling,

danke für deine Antwort.
Die beschriebene Stelle gibt es bei dem Style in der navbar_header.html leider nicht.
Das ist der Inhalt der navbar_header.html:

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 -->
		<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>

	<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"><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">{L_INDEX}</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 -->
	</ul>

	</div>
</div>

Video-Tutorials für phpBB-Foren · Beitrag von **Lehrling** » 08.08.2015 10:23

Du musst in der Datei overall_header.html nach diesen beiden Stellen suchen

Code: Alles auswählen

<div class="headernumber">{NOTIFICATIONS_COUNT}</div>

Code: Alles auswählen

<div class="headernumber">{PRIVATE_MESSAGE_COUNT}</div>

und dort die neue Klasse einfügen, also so

Code: Alles auswählen

<div class="headernumber white">{NOTIFICATIONS_COUNT}</div>

Code: Alles auswählen

<div class="headernumber white">{PRIVATE_MESSAGE_COUNT}</div>

Beitrag von **Crizzo** » 08.08.2015 10:25

Kleiner Tipp:

Niemals CSS-Klassen nach Eigenschaften wie Farben benennen, sondern immer nach Funktion und Inhalt!

Beitrag von **Kirk** » 08.08.2015 10:25

Hallo
Wenn du für die Zahlen in weiß haben möchtest, trage in der common.css bei .headernew { einfach das hier color: #ffffff; ein.

LisaserstesForum · Beitrag von **LisaserstesForum** » 08.08.2015 10:39

Lehrling hat geschrieben:Du musst in der Datei overall_header.html nach diesen beiden Stellen suchen
Code: Alles auswählen
<div class="headernumber">{NOTIFICATIONS_COUNT}</div>
Code: Alles auswählen
<div class="headernumber">{PRIVATE_MESSAGE_COUNT}</div>
und dort die neue Klasse einfügen, also so
Code: Alles auswählen
<div class="headernumber white">{NOTIFICATIONS_COUNT}</div>
Code: Alles auswählen
<div class="headernumber white">{PRIVATE_MESSAGE_COUNT}</div>

Wenn ich das mache wird die Schrift drum herum leider auch wieder weiß:
[ externes Bild ]

Kirk hat geschrieben:Hallo
Wenn du für die Zahlen in weiß haben möchtest, trage in der common.css bei .headernew { einfach das hier color: #ffffff; ein.

Das funktioniert, danke schön.

Gleich noch eine kleine Stylefrage: Wo wird denn bestimmt wie das Forum für Handys angezeigt wird? (Responsive Design)

Video-Tutorials für phpBB-Foren · Beitrag von **Lehrling** » 08.08.2015 10:57

LisaserstesForum hat geschrieben:Wenn ich das mache wird die Schrift drum herum leider auch wieder weiß

Bei mir nicht. Bei mir hat es eben funktioniert. Komisch. Aber Kirks Lösung ist trotzdem die elegantere.

Gleich noch eine kleine Stylefrage: Wo wird denn bestimmt wie das Forum für Handys angezeigt wird? (Responsive Design)

Dafür ist das Stylesheet responsive.css zuständig.

LisaserstesForum · Beitrag von **LisaserstesForum** » 08.08.2015 11:14

Super, danke schön.

Ich versuche gerade den Forennamen neben dem Logo gegen eine Grafik zu ersetzen, komme da aber noch nicht so ganz weiter.
Die Zeilen, die ich dafür vermute sind in der overall_header.html:

Code: Alles auswählen

		<li class="leftside no-bulletin headerhide"><div class="headersepl"></div><a href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" class="headerlink">{L_HOME}</a></li>
		<!-- IF not S_IS_BOT and (S_DISPLAY_MEMBERLIST or U_TEAM) --><!-- IF S_DISPLAY_MEMBERLIST --><li class="leftside no-bulletin headerhide"><div class="headersepl"></div><a href="{U_MEMBERLIST}" class="headerlink">{L_FIND_USERNAME}</a></li><!-- ENDIF --><!-- ENDIF -->
		
	<!-- ELSE -->
	
		<li class="leftside no-bulletin"><a href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" class="headerlinksignedout">{L_HOME}</a></li>
		<!-- IF not S_IS_BOT and (S_DISPLAY_MEMBERLIST or U_TEAM) --><!-- IF S_DISPLAY_MEMBERLIST --><li class="leftside no-bulletin"><div class="headersepl"></div><a href="{U_MEMBERLIST}" class="headerlink">{L_FIND_USERNAME}</a></li><!-- ENDIF --><!-- ENDIF -->

Allerdings finde ich nicht, wo z.B. {L_HOME} bestimmt wird.

Beitrag von **Kirk** » 08.08.2015 12:10

Der Forenname wird in der overall_header.html unter <div id="site-description"> bei <h1>{SITENAME}</h1> definiert.
Dieses {U_SITE_HOME} kann man im ACP unter Board-Einstellungen/Homepage-URL einstellen, wenn man dort einen Link eingibst wird man wenn man auf das Forenlogo klickt
nicht zur Forenübersicht sondern zur dieser URL geleitet.

phpBB.de

Forumbook Farbe im Header ändern

Forumbook Farbe im Header ändern

Re: Forumbook Farbe im Header ändern

Re: Forumbook Farbe im Header ändern

Re: Forumbook Farbe im Header ändern

Re: Forumbook Farbe im Header ändern

Re: Forumbook Farbe im Header ändern

Re: Forumbook Farbe im Header ändern

Re: Forumbook Farbe im Header ändern

Re: Forumbook Farbe im Header ändern

Re: Forumbook Farbe im Header ändern