Aero 1.4.6 (phpBB 3.0.10)

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Benutzeravatar
Sandra95
Mitglied
Beiträge: 131
Registriert: 16.01.2012 20:53

Aero 1.4.6 (phpBB 3.0.10)

Beitrag von Sandra95 »

Hi,

ich weiß, es gibt schon ein Thema für Aero(Blue) aber der Style wurde zwischenzeitlich so sehr verändert, dass die meißten Beiträge aus diesem Beitrag nicht mehr stimmen, deswegen mache ich für die neue Version ein neues Thema auf.
Erstmal ein paar Links für Suchende...

Style Aero 1.4.6 auf phpbb.com
Deutsche Buttons (funktionieren auf 3.0.10 und vorigen Versionen) (danke an korona)
Großes Thema auf phpbb.de
Website vom Autor jrolson



Prosilver oder Subsilver2?
Die erste Frage ist jetzt, ob der Style auf prosilver oder subsilver2 basiert.
In einem anderem Beitrag (Link) hat franki geschrieben:
Aero war, in den Vorversionen, schon immer ein Zwitter aus prosilver und subsilver2 Style.
Ich habe die 3.0.10 Version mal überflogen und es sieht so aus, dass der Style jetzt auf prosilver basiert.
Ich bin mir da aber nicht sicher, denn bevor franki das geschrieben hat, habe ich die Mod NV_who_was_here_1_2_1 installiert und natürlich die Anleitung für subsilver2 benutzt, weil ich bisher dachte, der Style basiert darauf.
Mit der Anleitung hat es auch funktioniert. Um nun zu testen, auf was der Style basiert, habe ich versucht die Mod mit der Anleitung für prosilver einzubauen, das hat nicht geklappt.

Ich zeige es hier mal kurz:
Öffnen: styles/prosilver/template/index_body.html
Finden:

Code: Alles auswählen

	<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
	<p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
	<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
Danach einfügen:

Code: Alles auswählen

	<!-- IF WHO_WAS_HERE_TOTAL -->
		<h3>{L_WHO_WAS_HERE}</h3>
		<p>{WHO_WAS_HERE_TOTAL} ({WHO_WAS_HERE_EXP})<br />{WHO_WAS_HERE_RECORD}<br />{WHO_WAS_HERE_LIST}</p>
	<!-- ELSEIF U_ACP -->
		<h3>{L_WHO_WAS_HERE}</h3>
		<p>{L_WWH_UPDATE_NEED}</p>
	<!-- ENDIF -->
Link zum Quelltext der index_body.html

Wie man sieht, klappt es damit nicht, mit der Anleitung für subsilver2 aber schon:
Öffne: styles/subsilver2/template/index_body.html
Finde:

Code: Alles auswählen

<!-- ENDIF -->

<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
Davor einfügen:

Code: Alles auswählen

	<!-- IF WHO_WAS_HERE_TOTAL -->
		<br clear="all" />

		<table class="tablebg" width="100%" cellspacing="1">
		<tr>
			<td class="cat" colspan="2"><h4>{L_WHO_WAS_HERE}</h4></td>
		</tr>
		<tr>
			<td class="row1" align="center" valign="middle"><img src="{T_THEME_PATH}/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" /></td>
			<td class="row1" width="100%"><span class="genmed">{WHO_WAS_HERE_TOTAL} ({WHO_WAS_HERE_EXP})<br />{WHO_WAS_HERE_RECORD}<br />{WHO_WAS_HERE_LIST}</span></td>
		</tr>
		</table>
	<!-- ELSEIF U_ACP -->
		<br clear="all" />

		<table class="tablebg" width="100%" cellspacing="1">
		<tr>
			<td class="cat" colspan="2"><h4>{L_WHO_WAS_HERE}</h4></td>
		</tr>
		<tr>
			<td class="row1" align="center" valign="middle"><img src="{T_THEME_PATH}/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" /></td>
			<td class="row1" width="100%"><span class="genmed">{L_WWH_UPDATE_NEED}</span></td>
		</tr>
		</table>
	<!-- ENDIF -->
Zumindest bei dieser Mod muss man es auf subsilver2-basis einbauen, wie man aber in dem oben verlinktem Beitrag (nochmal Link) sieht, klappt bei anderen Mods nur die prosilver Anleitung.
Ist es also immer noch ein "Zwitter"?



Umrahmung von Mods
Wenn man neue Mods einbaut, fehlen bei dem Style ja immer die Umrahmungen um die Mods herum, z.B. bei der Mod NV_who_was_here_1_2_1, die ja auf der Indexseite erscheint.
Also muss man die Mods selbst umrahmen.
Oberer Rahmen:

Code: Alles auswählen

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="tl"></td>
    <td class="tm"></td>
    <td class="tr"></td>
  </tr>
  <tr>
    <td class="ml"></td>
    <td>
Unterer Rahmen:

Code: Alles auswählen

</td>    <td class="mr"></td>
  </tr>
  <tr>
    <td class="bl"></td>
    <td class="bm"></td>
    <td class="br"></td>
  </tr>
</table>
Hier im Beispiel mit der Mod NV_who_was_here_1_2_1:
Öffne: styles/subsilver2/template/index_body.html
Finde:

Code: Alles auswählen

<!-- ENDIF -->

<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
Davor einfügen:

Code: Alles auswählen

	<!-- IF WHO_WAS_HERE_TOTAL -->
		<br clear="all" />

		<table class="tablebg" width="100%" cellspacing="1">
		<tr>
			<td class="cat" colspan="2"><h4>{L_WHO_WAS_HERE}</h4></td>
		</tr>
		<tr>
			<td class="row1" align="center" valign="middle"><img src="{T_THEME_PATH}/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" /></td>
			<td class="row1" width="100%"><span class="genmed">{WHO_WAS_HERE_TOTAL} ({WHO_WAS_HERE_EXP})<br />{WHO_WAS_HERE_RECORD}<br />{WHO_WAS_HERE_LIST}</span></td>
		</tr>
		</table>
	<!-- ELSEIF U_ACP -->
		<br clear="all" />

		<table class="tablebg" width="100%" cellspacing="1">
		<tr>
			<td class="cat" colspan="2"><h4>{L_WHO_WAS_HERE}</h4></td>
		</tr>
		<tr>
			<td class="row1" align="center" valign="middle"><img src="{T_THEME_PATH}/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" /></td>
			<td class="row1" width="100%"><span class="genmed">{L_WWH_UPDATE_NEED}</span></td>
		</tr>
		</table>
	<!-- ENDIF -->
Mit Umrahmung sieht der Code so aus:

Code: Alles auswählen

	<!-- IF WHO_WAS_HERE_TOTAL -->
		<br clear="all" />
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="tl"></td>
    <td class="tm"></td>
    <td class="tr"></td>
  </tr>
  <tr>
    <td class="ml"></td>
    <td>
		<table class="tablebg" width="100%" cellspacing="1">
		<tr>
			<td class="cat" colspan="2"><h3>{L_WHO_WAS_HERE}</h3></td>
		</tr>
		<tr>
			<td class="mainbox-content" align="center" valign="middle"><img src="{T_THEME_PATH}/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" /></td>
			<td class="mainbox-content" width="100%"><span class="genmed">{WHO_WAS_HERE_TOTAL} ({WHO_WAS_HERE_EXP})<br />{WHO_WAS_HERE_RECORD}<br />{WHO_WAS_HERE_LIST}</span></td>
		</tr>
		</table>
		</td>    <td class="mr"></td>
  </tr>
  <tr>
    <td class="bl"></td>
    <td class="bm"></td>
    <td class="br"></td>
  </tr>
</table>
	<!-- ELSEIF U_ACP -->
		<br clear="all" />
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="tl"></td>
    <td class="tm"></td>
    <td class="tr"></td>
  </tr>
  <tr>
    <td class="ml"></td>
    <td>
		<table class="tablebg" width="100%" cellspacing="1">
		<tr>
			<td class="cat" colspan="2"><h4>{L_WHO_WAS_HERE}</h4></td>
		</tr>
		<tr>
			<td class="row1" align="center" valign="middle"><img src="{T_THEME_PATH}/images/whosonline.gif" alt="{L_WHO_IS_ONLINE}" /></td>
			<td class="row1" width="100%"><span class="genmed">{L_WWH_UPDATE_NEED}</span></td>
		</tr>
		</table>
		</td>    <td class="mr"></td>
  </tr>
  <tr>
    <td class="bl"></td>
    <td class="bm"></td>
    <td class="br"></td>
  </tr>
</table>
	<!-- ENDIF -->
Das Ergebnis sieht dann so aus: Screenshot
Das sieht auch fast richtig aus, wenn man aber genau hinschaut und z.B. den Statistikblock mit dem Wer war da Block miteinander vergleicht sieht man, dass bei dem Wer war da Block rechts und links ein ganz kleiner Abstand zum Rahmen ist.
Und ich bekomme nicht heraus, warum dieser Abstand entsteht oder wie ich den weg bekommen könnte.
Der Code vom Statistikblock, der ja ohne den Abstand ist, sieht so aus:

Code: Alles auswählen

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="tl"></td>
    <td class="tm"></td>
    <td class="tr"></td>
  </tr>
  <tr>
    <td class="ml"></td>
    <td>
<div class="cat">
	<h3>{L_STATISTICS}</h3>
</div>
<div class="mainbox-content">
	<p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
</div>
    	</td>    <td class="mr"></td>
  </tr>
  <tr>
    <td class="bl"></td>
    <td class="bm"></td>
    <td class="br"></td>
  </tr>
</table>
Ich sehe da aber keinen Unterschied zu dem Code, mit dem ich den Rahmen darum gebastelt habe.
Vielleicht findet ihr den Fehler?


So, das war jetzt wirklich mal ein langer Beitrag aber eigentlich sind es nur diese zwei Fragen, auf was der Style basiert und wieso meine Umrahmung den Abstand an den Seiten hat.
Würde mich freuen, wenn sich jemand die Zeit nimmt, alles zu lesen und mir zu helfen, danke schön :)
Benutzeravatar
franki
Ehemaliges Teammitglied
Beiträge: 2823
Registriert: 21.10.2007 14:02
Wohnort: Sonsbeck
Kontaktdaten:

Re: Aero 1.4.6 (phpBB 3.0.10)

Beitrag von franki »

Hallo

Ich würde grundsätzlich die prosilver Änderungen nehmen und das ganze dann so einbauen:
(nicht getestet)

suche

Code: Alles auswählen

<div class="catb">
					<!-- IF U_VIEWONLINE -->
						<h3><a class="genmedw" href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3>
					<!-- ELSE -->
						<h3>{L_WHO_IS_ONLINE}</h3>
					<!-- ENDIF -->
				</div>
				<div class="mainbox-content">  
					<p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
					<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
				</div>
füge danach ein

Code: Alles auswählen

<!-- IF WHO_WAS_HERE_TOTAL -->
					<div class="catb">
						<!-- IF U_VIEWONLINE -->
							<h3><a class="genmedw" href="{U_VIEWONLINE}">{L_WHO_WAS_HERE}</a></h3>
						<!-- ELSE -->
							<h3>{L_WHO_WAS_HERE}</h3>
						<!-- ENDIF -->
					</div>
					<div class="mainbox-content">  
						<p>{WHO_WAS_HERE_TOTAL} ({WHO_WAS_HERE_EXP})<br />{WHO_WAS_HERE_RECORD}<br />{WHO_WAS_HERE_LIST}</p>
					</div>
				<!-- ELSEIF U_ACP -->
					<div class="catb">
						<!-- IF U_VIEWONLINE -->
							<h3><a class="genmedw" href="{U_VIEWONLINE}">{L_WHO_WAS_HERE}</a></h3>
						<!-- ELSE -->
							<h3>{L_WHO_WAS_HERE}</h3>
						<!-- ENDIF -->
					</div>
					<div class="mainbox-content">  
						<p>{L_WWH_UPDATE_NEED}</p>
					</div>
				<!-- ENDIF -->
falls das nicht funktioniert (nicht gut aussieht) musst Du einen neuen Block erstellen:
suche

Code: Alles auswählen

				<div class="mainbox-content">  
					<p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
					<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
				</div>
			</td>
			<td class="mr"></td>
		</tr>
		<tr>
			<td class="bl"></td>
			<td class="bm"></td>
			<td class="br"></td>
		</tr>
	</table>
füge danach ein

Code: Alles auswählen

<!-- IF WHO_WAS_HERE_TOTAL -->
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td class="tl"></td>
			<td class="tm"></td>
			<td class="tr"></td>
		</tr>
		<tr>
			<td class="ml"></td>
			<td>
				<div class="catb">
					<!-- IF U_VIEWONLINE -->
						<h3><a class="genmedw" href="{U_VIEWONLINE}">{L_WHO_WAS_HERE}</a></h3>
					<!-- ELSE -->
						<h3>{L_WHO_WAS_HERE}</h3>
					<!-- ENDIF -->
				</div>
				<div class="mainbox-content">  
					<p>{WHO_WAS_HERE_TOTAL} ({WHO_WAS_HERE_EXP})<br />{WHO_WAS_HERE_RECORD}<br />{WHO_WAS_HERE_LIST}</p>
				</div>
			</td>
			<td class="mr"></td>
		</tr>
		<tr>
			<td class="bl"></td>
			<td class="bm"></td>
			<td class="br"></td>
		</tr>
	</table>
	<!-- ELSEIF U_ACP -->
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td class="tl"></td>
			<td class="tm"></td>
			<td class="tr"></td>
		</tr>
		<tr>
			<td class="ml"></td>
			<td>
				<div class="catb">
					<!-- IF U_VIEWONLINE -->
						<h3><a class="genmedw" href="{U_VIEWONLINE}">{L_WHO_WAS_HERE}</a></h3>
					<!-- ELSE -->
						<h3>{L_WHO_WAS_HERE}</h3>
					<!-- ENDIF -->
				</div>
				<div class="mainbox-content">  
					<p>{L_WWH_UPDATE_NEED}</p>
				</div>
			</td>
			<td class="mr"></td>
		</tr>
		<tr>
			<td class="bl"></td>
			<td class="bm"></td>
			<td class="br"></td>
		</tr>
	</table>
	<!-- ENDIF -->
Du siehst, der Style ist nicht ganz einfach und Du kannst so gut wie nichts via copy/paste aus den Installs ins Style übertragen.

Zu deiner letzten Frage:
Der Unterschied liegt im Datail
<h3>{L_STATISTICS}</h3> und <h4>{L_WHO_WAS_HERE}</h4>
Der Unterschied zwischen <h3> und <h4> kannst Du in den .css Dateien nachschauen.
LG Franki
Benutzeravatar
Sandra95
Mitglied
Beiträge: 131
Registriert: 16.01.2012 20:53

Aero 1.4.6 Symbol vor Link entfernen

Beitrag von Sandra95 »

Edit: Mir fällt gerade auf dass ich auf deine Antwort noch gar nicht geantwortet habe franki :oops:
Also nachdem ich jetzt einige Mods eingebaut habe sage ich auch, der Style ist eher auf prosilver basiert.
An manchen Stellen muss man ein bißchen basteln aber das Meißte funktioniert mit den Prosilver-Anleitungen. :)


Bei der aktuellen Styleversion (1.4.6) erscheint vor allen Links ein Symbol davor: [ externes Bild ]
In welcher Datei kann ich das ändern? :)
Zuletzt geändert von Sandra95 am 15.04.2012 14:49, insgesamt 1-mal geändert.
Benutzeravatar
Crizzo
Administrator
Administrator
Beiträge: 11968
Registriert: 19.05.2005 21:45
Kontaktdaten:

Re: Aero 1.4.6 (phpBB 3.0.10)

Beitrag von Crizzo »

Hi,

wenn ich den Aero-Style beim mir installiere, sehe ich diese Grafiken vor Links nicht. Die werden vermutlich per CSS definiert werden. Also ungefähr sowas in der Art:

Code: Alles auswählen

a:before[href^="http"] {
 content: url("../graphics/exlink.gif");
 }
Benutzeravatar
Sandra95
Mitglied
Beiträge: 131
Registriert: 16.01.2012 20:53

Re: Aero 1.4.6 (phpBB 3.0.10)

Beitrag von Sandra95 »

Bei der aktuellen Version von Aero siehst du dieses Symbol nicht? :o
Dann liegt es vielleicht doch an der BB Code Box (viewtopic.php?f=88&t=182351) die ich eingebaut habe,
das war das Einzige, worauf die Suchergebnisse hingedeutet haben aber das hab ich eigentlich auschgeschlossen.
Dann muss ich mal gucken, wo das Symbol überhaupt herkommt.

Edit:
Ja es liegt wohl an der BBCode Box, ich habe das Symbol im Installationspaket davon gefunden.

Nochmal:
Da ist der Schuldige :wink: : styles/prosilver/theme/bbcodebox3.css

Code: Alles auswählen

.postlink {
background: url(../imageset/buttons/urllink.gif) no-repeat center left;
padding-left: 18px;
}
Kann ich da einfach (../imageset/buttons/urllink.gif) raus löschen oder muss ich was beachten?
Benutzeravatar
Sandra95
Mitglied
Beiträge: 131
Registriert: 16.01.2012 20:53

Re: Aero 1.4.6 (phpBB 3.0.10)

Beitrag von Sandra95 »

Ich habe jetzt

Code: Alles auswählen

.postlink {
background: url(../imageset/buttons/urllink.gif) no-repeat center left;
padding-left: 18px;
}
in

Code: Alles auswählen

.postlink {
}
geändert, damit ist die Grafik zumindest schonmal weg.

Neu ist aber auch dass auch unter Grafiken, die zu einem Link führen, ein blauer Unterstrich ist: [ externes Bild ]
Nach was muss ich suchen, um den Unterstrich bei Grafiken mit Links zu entfernen? :)
Benutzeravatar
Crizzo
Administrator
Administrator
Beiträge: 11968
Registriert: 19.05.2005 21:45
Kontaktdaten:

Re: Aero 1.4.6 (phpBB 3.0.10)

Beitrag von Crizzo »

Hi,

kannst du mal verlinken, dann könnte ich dir relativ schnell sagen, welche CSS-Regel das verursacht.

Oder du installierst dir selbst Firebug (oder ähnliches) http://getfirebug.com , damit kannst du das Element dann anwählen und siehst die CSS-Regel.
Dabei musst du entweder auf "border-bottom" oder "text-decoration:underline" achten. Vermutlich betrifft das nur verlinkte Bilder, also könnte eine Ergänzung um:

Code: Alles auswählen

a img {
border: none;
text-decoration: none;
}
Das Problem vielleicht schon lösen.
Benutzeravatar
Sandra95
Mitglied
Beiträge: 131
Registriert: 16.01.2012 20:53

Re: Aero 1.4.6 (phpBB 3.0.10)

Beitrag von Sandra95 »

Hi BlackHawk87,

also ich habe Firebug jetzt installiert aber richtig verstehen tue ich es nicht. :oops:
Hier ist der Link zu dem Beitrag, habe den für Gäste frei gegeben: http://k-urz.de/v1
Benutzeravatar
FRvN
Mitglied
Beiträge: 604
Registriert: 16.07.2009 13:43
Wohnort: Wankum
Kontaktdaten:

Re: Aero 1.4.6 (phpBB 3.0.10)

Beitrag von FRvN »

suche mal in der links.css nach .postlink und dort nach border-bottom: 1px solid #d2d2d2;
entweder die Zeile löschen oder mit /* border-bottom: 1px solid #d2d2d2; */ ausklammern
Allround-phpBB.de - jung, frech, dynamisch...
Kein Support per PN oder eMail
Benutzeravatar
Sandra95
Mitglied
Beiträge: 131
Registriert: 16.01.2012 20:53

Re: Aero 1.4.6 (phpBB 3.0.10)

Beitrag von Sandra95 »

Mh, das funktioniert aber jetzt fehlt natürlich auch der Unterstrich beim Textlink, kann ich den irgendwie behalten?
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“