Seite 1 von 1

Facebook,Twitter anstelle "suche"

Verfasst: 28.07.2011 23:05
von Jimmyxxx
Suche eine Mod.
Wo anstelle der (suche) oben rechts im Header!

zb. 3 Icons ( Facebook, Twitter, etc.) angezeigt werden.

Re: Facebook,Twitter anstelle "suche"

Verfasst: 29.07.2011 00:00
von hackepeter13
Ein bisschen genau sollte dein Anliegen schon beschrieben werden. :roll:

Willst du einfach nur solche Icons, wo man auf dem Klick auf die entsprechende Fan-/Gruppen-Seite kommt oder sollen Es Like-Buttons sein oder oder oder?

Aber egal was du da nun hin haben willst, öffne die overall_header.html und entferne den HTML-Teil für das Suchfeld:

Code: Alles auswählen

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->
(prosilver)

Und dann baust du da einfach deine gewünschten Icons ein. :wink:

Re: Facebook,Twitter anstelle "suche"

Verfasst: 29.07.2011 17:08
von 7emper5i
Hallo,

Ich nehme an, dass du deine "Mod"-Suche auf der von http://www.phpBB.com verwendeten Darstellung basiert.

Anhand derer habe ich kurz den Code zusammen geworfen. Das Ergebnis ist noch "einfacher" zu gestalten, da aktuell sowohl der CSS-Code der Search-Box, als auch der Code der Social-Icons an sich miteinander zu dem von dir gewünschten Ergebnis führen.

Das Ergebnis der folgenden Code-Änderung sieht so aus:

[ externes Bild ]
Hinweis:
Eine sauber geschriebene Lösung liefere ich eventuell noch einmal nach.
Die "Anleitung" basiert auf dem phpBB-Werkstemplate prosilver, angelehnt an der Lösung von http://www.phpBB.com
Suche in deiner overall_header.html die Codezeilen

Code: Alles auswählen

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
             <div id="search-box">
                <form action="{U_SEARCH}" method="post" id="search">
                <fieldset>
                   <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
                   <input class="button2" value="{L_SEARCH}" type="submit" /><br />
                   <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
                </fieldset>
                </form>
             </div>
          <!-- ENDIF -->
Bei einem unmodifizierten phpBB der Version 3.0.9 befinden sich die Zeilen zwischen 114 und 124

Ersetze dies mit den folgenden Zeilen:

Code: Alles auswählen

			<div id="search-box">
				<div id="top-social" class="top-social-home">
					<div id="top-social-icons">
						<a href="http://www.deineseite.de/feeds/rss/?sid=xxx"><img src="{T_THEME_PATH}/images/rss.png" alt="RSS"></a>
						<a href="http://www.facebook.com/deineseite"><img src="{T_THEME_PATH}/images/facebook.png" alt="Facebook"></a>
						<a href="http://www.twitter.com/deineseite"><img src="{T_THEME_PATH}/images/twitter.png" alt="Twitter"></a>
					</div>
				</div>
			</div>
Hier kannst du nun entsprechend deinem Gusto die Anordnung ändern, oder auch einige Zeilen weglassen.
Die Zeilen sind prinzipiell selbsterklärend.

Anschließend gehst du in deinen phpBB3/styles/prosilver/theme/images/ - Ordner und fügst dort die folgenden drei Bilder ein:

Facebook: [ externes Bild ]
RSS: [ externes Bild ]
Twitter: [ externes Bild ]

Als abschließenden Schritt öffnest du im Ordner phpBB3/styles/prosilver/theme/common.css und scrollst nach ganz unten. Bei einem unmodifizierten phpBB der Version 3.0.9 wäre das ab Zeile 633.

Dort fügst du dann folgendes ein:

Code: Alles auswählen

/* Social Buttons im Header
---------------------------------------- */
#top-social {
    height: 20px;
    margin: 0 auto;
    position: relative;
    top: 15px;
}
.top-social-home {
    right: 10px !important;
}
#top-social-icons {
    float: right;
}
#top-social-icons img {
    float: left;
    padding: 0 3px;
}
#top-social-icons div {
    float: left !important;
    padding: 0 3px !important;
}

Wenn du alle drei Schritte entsprechend ausgeführt hast, gehst du bitte in dein Administrator Kontrollzentrum (ACP) und dort auf den Karteireiter STYLES.
Links siehst du dann die Option Style-Komponenten - dort aktualisierst du bitte alle prosilver-Komponenten. Insgesamt also drei Aktualisierungen.

Anschließend gehst du auf den Karteireiter ALLGEMEIN und führst eine CACHE LEERUNG aus.

Dann gehst du auf deine Forenansicht, und falls du noch nichts siehst, aktualisiere bitte deinen Browser mit F5.

Hinweis Nr 2:
Durch die Tatsache, dass die Forenlogos unterschiedliche Größe bei allen phpBB-Usern haben können, verschiebt sich auch die Höhe der Social-Network-Icons.
Die Höhe verändert ihr, indem ihr in der common.css den Wert

Code: Alles auswählen

#top-social { .. }
sucht und dort

Code: Alles auswählen

top: 5px;
entsprechend euren Ansprüchen verändert.
Viel Erfolg.

Re: Facebook,Twitter anstelle "suche"

Verfasst: 02.08.2011 20:53
von ronson
Hat jemand auch ne Info wie ich das ganze in den Style an die Stelle der beiden X bekomme ?

[ externes Bild ]

Vielen Dank

EDIT: Die Suche oben drüber soll erhalten bleiben

Re: Facebook,Twitter anstelle "suche"

Verfasst: 21.09.2011 10:34
von xTommY89x
Wäre hilfreich gewesen in welche datei genau man

Code: Alles auswählen

/* Social Buttons im Header
---------------------------------------- */
#top-social {
    height: 20px;
    margin: 0 auto;
    position: relative;
    top: 15px;
}
.top-social-home {
    right: 10px !important;
}
#top-social-icons {
    float: right;
}
#top-social-icons img {
    float: left;
    padding: 0 3px;
}
#top-social-icons div {
    float: left !important;
    padding: 0 3px !important;
}
eintragen muss...

Ich habe es in die "common.css" kopiert.
Funktioniert!

Re: Facebook,Twitter anstelle "suche"

Verfasst: 21.09.2011 11:33
von 7emper5i
Hallo,

da hast du Recht. Die Datei- innerhalb der Ordnerangabe ist mir beim schreiben untergegangen. Ich hab es nachgetragen.
Gottseidank hatte ich es im Hinweis Nr. 2 ja erwähnt. Der aufmerksame Leser konnte es sich ja auch so erschließen. :wink:

Danke und Gruß