neue Fenster haben keine Rundungen : X-Silver Style

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
niwes
Mitglied
Beiträge: 266
Registriert: 11.10.2010 14:42
Wohnort: ~~
Kontaktdaten:

Re: neue Fenster haben keine Rundungen : X-Silver Style

Beitrag von niwes »

Sau gute Antwort ,danke :)
damit konnte ich schon mal alles auf dem Index schnell und sauber anpassen :cookie:

außer TopStats da gibt es ja sozusagen 2 reihen
Das ist mal ein Auszug davon

Code: Alles auswählen

	<div class="forabg">
		<div class="inner"><span class="corners-top"><span></span></span>
		<ul class="topiclist">
			<li class="header">
				<dl>
					<dt style="width:70%;">{TSMVT_NUMBER} {L_MOST_VIEWED}</dt>
					<dd class="lastpost" style="width:auto;"><span>{L_VIEWS}</span></dd>
				</dl>
			</li>
		</ul>
da du das dt mit einem <a> ersetzt hast
frag ich mich ob ich in beide reihen das <a> setzten kann
oder läuft das anders ab?

______
Danke nochmal für den Code der hilft mir sehr gut weiter 8)
Gruß niwes
Willst du den Charakter eines Menschen erkennen, so gib ihm Macht!
Abraham Lincoln, 12.02.1809 - 15.04.1865
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: neue Fenster haben keine Rundungen : X-Silver Style

Beitrag von Melmac »

Das sieht dch schon klasse aus bei Dir :grin: *daumen*


Der Code

Code: Alles auswählen

<div class="forabg">
...
</div>
definiert die einzelnen Statistikblöcke, die Du im ACP getrennt aktivieren/deaktivieren kannst.
Der Container für das ganze ist eine Tabelle, in der diese Blöcke dann eingefügt sind.

Die Frage wäre vielleicht: willst Du den X-Silver-Look für die einzelnen Statistikblöcke oder nur für den Container selbst (die einzelnen Stytistikblöcke würden innerhalb dieses dann weiter so angezeigt werden, wie bisher)?

Ist jetzt nur meine persönliche Meinung: Letzteres würde sich, imho, optisch harmonischer in das restliche Styling der Indexseite einpassen (okay: ist auch etwas weniger aufwändig zu realisieren ... :oops: )
[ externes Bild ]

=>
- in top_stats_body.html:

suche

Code: Alles auswählen

<!-- IF S_TSMVT_ENABLE or S_TSMRT_ENABLE -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
ersetze durch

Code: Alles auswählen

<!-- IF S_TSMVT_ENABLE or S_TSMRT_ENABLE -->

	{$SKIN_CAT_HEADER_OPEN}
		<a class="c-h-link">{L_TOPSTATS_TITLE}</a>
	{$SKIN_CAT_HEADER_CLOSE}
	<div class="v-left" style="padding-left: 15px;">
		<div class="v-right" style="padding-right: 15px;">
			
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
({L_TOPSTATS_TITLE} muss dann noch definiert werden: s.u.)

suche

Code: Alles auswählen

</tr>
</table>
<!-- ENDIF -->
ersetze durch

Code: Alles auswählen

</tr>
</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
<div class="c-f-l"><div class="c-f-r"><div class="c-f-c"></div></div></div>

<!-- ENDIF -->
suche (kommt mehrfach vor: für jeden Statistikblock einmal):

Code: Alles auswählen

<div class="forabg">
ersetze jeweils durch

Code: Alles auswählen

<div class="forabg" style="margin-bottom: -5px;">
suche (dito: kommt ebenfalls mehrfach vor)

Code: Alles auswählen

<div class="inner"><span class="corners-top"><span></span></span>
ersetze jeweils durch

Code: Alles auswählen

<div class="inner"><span class="corners-top" style="height: 0;"><span></span></span>

- in /language/de/common.php und /language/en/common.php

suche

Code: Alles auswählen

	'LAST_VISITED_BOTS'			=> 'Last visited bots',
danach in neuer Zeile einfügen

Code: Alles auswählen

	'TOPSTATS_TITLE'		=> 'Top Stats'
Dies definiert dann das, was in der Titelzeile angezeigt wird - Du kannst den Text entsprechend anpassen.


Die andere Variante (jeder Block einzeln) müsste ich später nochmals durchspielen und nachreichen, wenn die Dir lieber wäre.
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: neue Fenster haben keine Rundungen : X-Silver Style

Beitrag von Melmac »

Separater Post, sonst wirds unübersichtlich ...

Die Variante mit den getrennt formatierten Statiistikblöcken:
[ externes Bild ]

Ist im Prinzip das gleiche wie bisher auch: jeder der einzelnen Blöcke beginnt mit

Code: Alles auswählen

	<div class="forabg">
		<div class="inner"><span class="corners-top"><span></span></span>
und endet mit

Code: Alles auswählen

		<span class="corners-bottom"><span></span></span></div>
	</div>
</td>
Alles dazwischen steuert die Anzeige des eigentlichen Inhalts - bleibt also beim Anpassen auch wieder unverändert.

Du gehst dann wieder so vor, wie Du es bei den anderen MODs auch bereits gemacht hast:
Ersteres ersetzt Du jeweils durch

Code: Alles auswählen

	<div class="forabg">
	{$SKIN_CAT_HEADER_OPEN}
		<a class="c-h-link">{TSMVT_NUMBER} {L_MOST_VIEWED}</a>
	{$SKIN_CAT_HEADER_CLOSE}
	<div class="v-left" style="padding-left: 15px;">
		<div class="v-right" style="padding-right: 15px;">
(Die die Ausgabe der Titelzeilen steuernden Variablen, in diesem Beispiel {TSMVT_NUMBER} {L_MOST_VIEWED}, findest Du jeweils ein paar Zeilen tiefer im Block - einfach reinkopieren ;) )

Letzteres jeweils mit

Code: Alles auswählen

		<span class="corners-bottom" style="height: 0;"><span></span></span></div>
	</div>
	<div class="c-f-l"><div class="c-f-r"><div class="c-f-c"></div></div></div>
Fertig ;)
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
niwes
Mitglied
Beiträge: 266
Registriert: 11.10.2010 14:42
Wohnort: ~~
Kontaktdaten:

Re: neue Fenster haben keine Rundungen : X-Silver Style

Beitrag von niwes »

Bei dir klingt das immer so einfach aber :grin:

Habe mich für die erste Variante entschieden
da TopStats zusammen gehört soll es auch in einem Kasten zu sehen sein :wink:

Habe alles so ausgeführt allerdings habe ich ganz unten bei TopStats nun einen Abstand
"FireBug" zeigt mir das es es 5px sind , wenn ich daraus ne 0 mache ist der Abstand weg...
allerdings finde ich die Position nicht in der html sowie nicht in der colurs.css da ich dachte ist vielleicht auch dort angegeben :geek:
(da fehlt mir die firebug Kenntnis)

________________________________________
________________________________________

So und da es im Grunde bislang nur noch aktuell im Index um PayPal Donate Stats geht habe ich mich auch daran immer wieder versucht :roll:
das Teil macht mich fertig.... Habe es mal in den Ursprung versetzt damit man sieht was ich meine

ich habe in der donate_stats schon mal ein <div class="panel bg3"> und unten natürlich ein schließendes </div> eingefügt
und das innere wird zwar gefüllt aber auch der Rest was von Forum Statistik zu sehen ist ...

Wie wenn Forum Statistik und Spenden zusammen gehören würde ,ein Quadrat was über die Ecken ragte war auch mit dabei []
aber man konnte dafür den Text gut lesen
Gruß niwes
Willst du den Charakter eines Menschen erkennen, so gib ihm Macht!
Abraham Lincoln, 12.02.1809 - 15.04.1865
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: neue Fenster haben keine Rundungen : X-Silver Style

Beitrag von Melmac »

War mein (Copy & Paste) Fehler ... :oops:

Die oben genannte Ersetzung

Code: Alles auswählen

    </tr>
    </table>

       <span class="corners-bottom"><span></span></span></div>
    </div>
    <div class="c-f-l"><div class="c-f-r"><div class="c-f-c"></div></div></div>

    <!-- ENDIF -->
hätte so lauten müssen:

Code: Alles auswählen

</tr>
</table>

	<span class="corners-bottom" style="height: 0;"><span></span></span></div>
</div>
<div class="c-f-l"><div class="c-f-r"><div class="c-f-c"></div></div></div>

<!-- ENDIF -->
Das style="height: 0;" nimmt die dieser auch an anderen Stellen verwendeten Klasse "corners-bottom" einheitlich vordefinierte Höhe von 5px nur für diese abschließende Zeile wieder raus.
Jetzt müsste es hoffentlich wieder passen.

Diesen Paypal-MOD schaue ich mir im Laufe des Tages/Abends mal an.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
niwes
Mitglied
Beiträge: 266
Registriert: 11.10.2010 14:42
Wohnort: ~~
Kontaktdaten:

Re: neue Fenster haben keine Rundungen : X-Silver Style

Beitrag von niwes »

Haha ja ok passt jetzt, war bestimmt ein Test ... Habe ihn wohl nicht bestanden :lol:

Ok danke nochmal für die ganze Hilfe :ugeek: 8)
Gruß niwes
Willst du den Charakter eines Menschen erkennen, so gib ihm Macht!
Abraham Lincoln, 12.02.1809 - 15.04.1865
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: neue Fenster haben keine Rundungen : X-Silver Style

Beitrag von Melmac »

Sooo link bin ich ja jetzt auch wieder nicht ;)
Ich hatte schlicht und ergreifend aus der "falschen" Datei herauskopiert ...

Zu diesem Paypal Donation MOD schon mal ein erster grober Ansatz (Deiner war schon ganz dicht dran ;) ):

- in donate_stats.html

1) suche

Code: Alles auswählen

<!-- IF DONATION_STATS_INDEX_ENABLE -->
	<!-- IF U_DONATE --><h3><a href="{U_DONATE}">{L_DONATION_INDEX}</a></h3><!-- ELSE --><h3>{L_DONATION_INDEX}</h3><!-- ENDIF -->
<!-- ENDIF -->
ersetze durch

Code: Alles auswählen

<!-- IF DONATION_STATS_INDEX_ENABLE -->
	{$SKIN_CAT_HEADER_OPEN}
		<!-- IF U_DONATE --><a class="c-h-link" href="{U_DONATE}">{L_DONATION_INDEX}</a><!-- ELSE --><a class="c-h-link">{L_DONATION_INDEX}</a><!-- ENDIF -->
	{$SKIN_CAT_HEADER_CLOSE}
	<div class="v-left" style="padding-left: 15px;">
		<div class="v-right" style="padding-right: 15px;">
<!-- ENDIF -->
Der Titeltext ist jetzt auch wieder als Link formatiert, der auf die Infoseite weiterleitet.

2) suche

Code: Alles auswählen

<!-- IF S_GOAL_NUMBER -->
	<div class="prog_grey"><div class="prog_green" style="width:{DONATION_GOAL_NUMBER}%;"><span class="progress">{DONATION_GOAL_NUMBER}%</span></div></div>
<!-- ENDIF -->
ersetze durch

Code: Alles auswählen

<!-- IF S_GOAL_NUMBER -->
        <div class="filler"></div>
	<div class="prog_grey"><div class="prog_green" style="width:{DONATION_GOAL_NUMBER}%;"><span class="progress">{DONATION_GOAL_NUMBER}%</span></div></div>
<!-- ENDIF -->
Die zusätzliche DIV sorgt für den Abstand zwischen Farbbalken und Titelzeile.

3) suche

Code: Alles auswählen

	<!-- IF DONATION_USED_ENABLE -->
				{L_DONATION_USED}
	<!-- ENDIF -->
</p>
ersetze durch

Code: Alles auswählen

	<!-- IF DONATION_USED_ENABLE -->
				{L_DONATION_USED}
	<!-- ENDIF -->
</p>

	<span class="corners-bottom" style="height: 0;"><span></span></span></div>
</div>
<div class="c-f-l"><div class="c-f-r"><div class="c-f-c"></div></div></div>
Kennste inzwischen ja wahrscheinlich schon auswendig ;)


- in donation.css

4) suche

Code: Alles auswählen

div.prog_grey {
	background: url("images/donation/prog_grey.png") repeat-x;
	background-color: #CCCCCC;
	border: 1px solid #000000;
	width: 100%;
	margin-top: 2px;
}
und entferne die letzte Zeile: ein margin sorgt wieder für einen unschönen Spalt. Als Ersatz gabs oben diese zusätzliche DIV.

5) suche

Code: Alles auswählen

p.donation_stats {
	margin-top: 10px;
	font-size: 1.5em;
	text-align: center;
}
und ersetze durch

Code: Alles auswählen

p.donation_stats {
	padding: 10px 0 22px 0;
	margin-bottom: 0;
	font-size: 1.5em;
	text-align: center;
	background-color: #d0d9e6;
}
Auch hier: margins zerreißen die Optik, daher durch entsprechende padding Werte ersetzt bzw. einmal auf "0" gesetzt.
Die letzte Zeile sorgt für eine Füllung des Hintergrundes in der Farbe, die auch X-Silver verwendet.

6) die Klasse für die neue DIV oben definieren:
ganz am Ende der Datei einfügen

Code: Alles auswählen

/* custom */
.filler {
	height: 5px;
	padding: 0 15px;
	background-color: #d0d9e6;	
}
Die Höhe kannst Du nach Bedarf ändern.
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Benutzeravatar
niwes
Mitglied
Beiträge: 266
Registriert: 11.10.2010 14:42
Wohnort: ~~
Kontaktdaten:

Re: neue Fenster haben keine Rundungen : X-Silver Style

Beitrag von niwes »

klasse Sache nun passts im Index :cookie:
Melmac hat geschrieben:Kennste inzwischen ja wahrscheinlich schon auswendig ;)
wenn ichs frei hand schreiben müsste ,würde ich es nicht hin bekommen :lol:

und CSS bleib für mich n rätsel :geek:
da kann ich noch so viel lesen :oops:
Gruß niwes
Willst du den Charakter eines Menschen erkennen, so gib ihm Macht!
Abraham Lincoln, 12.02.1809 - 15.04.1865
Benutzeravatar
niwes
Mitglied
Beiträge: 266
Registriert: 11.10.2010 14:42
Wohnort: ~~
Kontaktdaten:

Re: neue Fenster haben keine Rundungen : X-Silver Style

Beitrag von niwes »

Mal ein kleines Update :geek:

Also ich habe mich an den restlichen versucht ,ein paar hatte ich hinbekommen,
der Rest was mir ein wenig zu hoch war vom skill :cry: und noch fehlen habe ich unten mal niedergeschrieben
(2kamen noch hinzu,hatte ich vergessen :oops: )
Gruß niwes
Willst du den Charakter eines Menschen erkennen, so gib ihm Macht!
Abraham Lincoln, 12.02.1809 - 15.04.1865
Benutzeravatar
Melmac
Ehemaliges Teammitglied
Beiträge: 3623
Registriert: 15.10.2012 03:27

Re: neue Fenster haben keine Rundungen : X-Silver Style

Beitrag von Melmac »

Ist ja eine ganz schöne Liste, die Du Dir da vorgenommen hast ;)
niwes hat geschrieben:Paypal-Spende MOD - hier ist noch die einzelne Seite offen
Falls das die Seite ist, auf die beim Klicken auf "Donations" weitergeleitet wird: Mit Paypal habe ich nichts am Hut, auch kein Konto dort, von daher kann ich mir in meiner Testinstallation diese Seite nur eingeschränkt anzeigen lassen.
Könntest Du einen Testuser-Zugang zu deinem Board (=> Wie erstelle ich einen Testuser ) einrichten, damit ich mir dies mal ansehen kann?
niwes hat geschrieben:UltimatePoints [...] bei diesem hat nicht mal die Einpflanzung im Index "ganz" hingehauen
Bezieht sich dies auf die Installation des MODs selbst?
An welcher Stelle hat es da geklemmt?

btw:
Dein Style ist für phpBB 3.0.8 - ich gehe mal davon aus, dass Du eine neuere phpBB Version einsetzt, oder?
Dann solltest Du den vielleicht bei Gelegenheit auf den entsprechenden aktuellen Stand bringen, um eventuelle Probleme auszuschließen, die durch den Einsatz veralteter Styles ausgelöst werden könnten.

Den Rest schaue ich mir mal an - erst einmal alles installieren ;)
Handle nur nach derjenigen Maxime, durch die du zugleich wollen kannst, dass sie ein allgemeines Gesetz werde.
(Immanuel Kant)
Antworten

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