phpBB.de • Fragen / Tips zu Aero Xmas - Seite 2

Seite 2 von 3

Re: Fragen / Tips zu Aero Xmas

Verfasst: 07.10.2012 22:30

von LisaserstesForum

Hi Knowhow-Sauger, das ist nett aber ich suche die Stelle, an der der Hintergrund von der Forenliste bestimmt wird.

Ich habe jetzt lange rum gefummelt und bin langsam am verzweifeln, deswegen brauche ich eure Hilfe, bitte.
Hier die aeroxmas/theme/colours.css: https://www.phpbb.de/support/pastebin.p ... iew&s=1134

Der Bereich an dem ich gebastelt habe ist Zeile 308 bis 364:

Code: Alles auswählen

/*  	
--------------------------------------------------------------
Colours and backgrounds for content.css
-------------------------------------------------------------- */

ul.forums {
	background: #EFF7FB url("{T_THEME_PATH}/images/gradient.gif") repeat-x;
}

ul.topiclist li {
	color: #000;
}

ul.topiclist dd {
	border-left-color: #CCE3F3;
}

.rtl ul.topiclist dd {
	border-right-color: #CCE3F3;
	border-left-color: transparent;
}

ul.topiclist li.row dt a.subforum.read {
	background-image: url("{IMG_SUBFORUM_READ_SRC}");
}

ul.topiclist li.row dt a.subforum.unread {
	background-image: url("{IMG_SUBFORUM_UNREAD_SRC}");
}

li.row {
	border: 1px solid transparent;
}

li.row strong {
	color: #000000;
}

li.row:hover {
	background-color: #E4F4FE;
	border: 1px solid #D4EEF9;
}

li.header dt, li.header dd {
	color: #FFFFFF;
}

/* Forum list column styles */
ul.topiclist dd.searchextra {
	color: #000000;
}

/* Post body styles
----------------------------------------*/
.postbody {
	color: #000000;
}

Ich habe die Farbeinträge durch #E5E500 (grün) ersetzt um zu sehen, welcher der richtige Code für den Hintergrund der Forenliste ist.
Von oben nach unten:

1.

Code: Alles auswählen

ul.forums {
	background: #EFF7FB url("{T_THEME_PATH}/images/gradient.gif") repeat-x;
}

zu

Code: Alles auswählen

ul.forums {
	background: #E5E500 url("{T_THEME_PATH}/images/gradient.gif") repeat-x;
}

= http://www.fotos-hochladen.net/uploads/01n249gmzhvj.png

2.

Code: Alles auswählen

ul.topiclist li {
	color: #000;
}

zu

Code: Alles auswählen

ul.topiclist li {
	color: #E5E500;
}

= http://www.fotos-hochladen.net/uploads/02rls5n4yva2.png

3.

Code: Alles auswählen

ul.topiclist dd {
	border-left-color: #CCE3F3;
}

zu
ul.topiclist dd {
border-left-color: #E5E500;
}
= http://www.fotos-hochladen.net/uploads/033f17dabrjx.png

4.

Code: Alles auswählen

.rtl ul.topiclist dd {
	border-right-color: #CCE3F3;
	border-left-color: transparent;
}

zu

Code: Alles auswählen

.rtl ul.topiclist dd {
	border-right-color: #E5E500;
	border-left-color: transparent;
}

= http://www.fotos-hochladen.net/uploads/04gm9dsven3i.png

5.

Code: Alles auswählen

li.row {
	border: 1px solid transparent;
}

zu

Code: Alles auswählen

li.row {
	border: 1px solid #E5E500;
}

= http://www.fotos-hochladen.net/uploads/05uovs5mkp0h.png

6.

Code: Alles auswählen

li.row strong {
	color: #000000;
}

zu

Code: Alles auswählen

li.row strong {
	color: #E5E500;
}

= http://www.fotos-hochladen.net/uploads/062uhc6iyo4p.png

7.

Code: Alles auswählen

li.row:hover {
	background-color: #E4F4FE;
	border: 1px solid #D4EEF9;
}

zu

Code: Alles auswählen

li.row:hover {
	background-color: #E5E500;
	border: 1px solid #E5E500;
}

= http://www.fotos-hochladen.net/uploads/070l6k7bod5j.png

8.

Code: Alles auswählen

li.header dt, li.header dd {
	color: #FFFFFF;
}

zu

Code: Alles auswählen

li.header dt, li.header dd {
	color: #E5E500;
}

= http://www.fotos-hochladen.net/uploads/08107sklgo96.png

9.

Code: Alles auswählen

/* Forum list column styles */
ul.topiclist dd.searchextra {
	color: #000000;
}

zu

Code: Alles auswählen

/* Forum list column styles */
ul.topiclist dd.searchextra {
	color: #E5E500;
}

= http://www.fotos-hochladen.net/uploads/09jswopgk84e.png

Wie man sieht, ist anscheinend keiner der Codes der passende.

Edit:
Hier ist der Link zum Testforum: http://www.upl0ad.de/phpBB3/index.php

Re: Fragen / Tipps zu Aero / Xmas

Verfasst: 07.10.2012 23:18

von Talk19zehn

Tipps zu Aero
Hi Lisa,

Der Ansatz ist bereits

Code: Alles auswählen

ul.forums {
   background: #EFF7FB url("{T_THEME_PATH}/images/gradient.gif") repeat-x;
}

der richtige Weg.

Nur, hast du du die Grafik "gradient.gif" nicht ersetzt, die 1 x 100px in der Größe hat. Der Farbwert #EFF7FB ist in dem Falle der untere Farbwert, der sich fortsetzt. Das siehst du bspw. nun an der auf Grün geänderten Farbe in der Fortsetzung ( Bild 1 ).

Habe ich bspw. eine Grafik von 500x300px und nehme den Farbwert heraus, wiederholt sich die Grafik vertikal und horizontal. Du siehst, wie schwierig es sein wird, auch wiederum in Abhängigkeit der Anweisung repeat eine derartige Grafik einzusteuern.
Ist meine Grafik hingegen 10x10 px groß, macht es keine Probleme und hätte nur der Charakter eines anderen Hintergrundes. Bedenke bitte, das jede Kategorie mit der Anzahl der Foren, dem Inhalt wächst. Unabhängig davon ist der Hovereffekt, evtl. die Link- und Textfarbe auch zu verändern.

Noch eine andere Idee: Ganz hübsch wäre es doch das Antwortfeld mit einer dezenten helleren weihnachtlichen Grafik zu versehen.
LG

Re: Fragen / Tips zu Aero Xmas

Verfasst: 08.10.2012 01:18

von LisaserstesForum

Hi Talk19zehn, danke für den Tip, langsam kommt es in die richtige Richtung.

Ich habe es jetzt wie folgt geändert:

Code: Alles auswählen

ul.forums {
	background: #E5E500 url("{T_THEME_PATH}/images/bg-03.jpg") repeat-x;
}

Die Beispieldatei bg-03.jpg ist 50 x 50 pc groß, im Forum sieht es so aus: http://www.fotos-hochladen.net/uploads/10h7gtnfo8be.png

Wie schaffe ich es, den Bereich, der jetzt grün ist auch mit dem Hintergrundbild zu füllen?
Wenn ich nur den Farbwert raus nehme, erscheint dort trotzdem nicht die Grafik.

Noch eine andere Idee: Ganz hübsch wäre es doch das Antwortfeld mit einer dezenten helleren weihnachtlichen Grafik zu versehen.
LG

Kannst du mir mal beschreiben, wie du das in etwa meinst?

Re: Fragen / Tips zu Aero Xmas

Verfasst: 08.10.2012 10:13

von Talk19zehn

Hello Lisa, bin zeiltlich leider eingebunden - nur kurz:

Code: Alles auswählen

ul.forums {
	background: url("{T_THEME_PATH}/images/deinegrafik.jpg") repeat;
}

LG

Re: Fragen / Tips zu Aero Xmas

Verfasst: 08.10.2012 12:20

von LisaserstesForum

Vielen Dank, so funktioniert es!

Ich habe jetzt das Hintergrundbild so festgelegt:

Code: Alles auswählen

ul.forums {
	background: url("{T_THEME_PATH}/images/bg-christmas1.gif") repeat;
}

Beim Hover-Effekt habe ich dieses:

Code: Alles auswählen

li.row:hover {
background: url("{T_THEME_PATH}/images/bg-christmas2.gif") repeat-x;
}

Die Datei bg-christmas1.gif ist etwas transparenter als die bg-christmas2.gif, so dass beim mit der Maus drüber
fahren der Hintergrund stärker angezeigt wird.
Das gefällt mir auch ganz gut, wenn aber mehr als ein Forum in einer Kategorie ist stimmt die Anzeige ja leider nicht mehr:
http://www.fotos-hochladen.net/uploads/11rfsg1l3kt4.png
Gibt es da noch eine Möglichkeit etwas zu verändern, dass der Hintergrund dann auch dort stimmt?

Re: Fragen / Tipps zu Aero Xmas

Verfasst: 09.10.2012 10:19

von Talk19zehn

Hallo Lisa, ich würde meinen, es geht ohne massive Umbauarbeiten nicht, einen Hovereffekt passgenau für das Bild einzurichten. Bedenke bitte, wie erwähnt, deine Größe der Grafik. Die in der Kategorie befindlichen Foren habe je eine Mindesthöhe von zunächst 35px. Die Höhe wächst je Forenbeschreibung und Auflösung mit. Das Forenicon wird zur Mitte zentriert ausgegeben.

Nehmen wir hier auf phpBB.de mal jenes Forum phpBB 3.0: Mod-Übersetzungen, welches einschl. der Forenbeschreibung an meinem Laptop bspw. 5 Zeilen in der Höhe umfasst. In kleinerer Auflösung werden es 6 Zeilen.
In Anlehnung an jenes Beispiel - deine ursprüngliche Grafik1 verschiebt sich entsprechend im unteren Verlauf.
Darin besteht die Schwierigkeit. Du müsstest den Hovereffekt für das Bild2 m.E. als feste Größe hinterlegen. Ebenso die Höhe der hinterlegten Mindesthöhe dahingehend angleichen. Das hat wiederum andere Konsequenzen.

Ggf. könnte man mit negativen Werten "Background-Position" arbeiten, habe es nicht ausprobiert.

Lege dir in deinem Test bitte in der Höhe unterschiedliche Forenbeschreibungen an und du erkennnst, dass sich je nachfolgend eine passende Höhe bei der Darstellung der Grafik1 ergibt. Darauf einen rechnerischen Automatismus für das Hoverbild anzuwenden, erscheint mir fast unmöglich, zumal du die Auflösungen berücksichtigen musst.
Ich würde in dem Falle keinen Hovereffekt anwenden und ggf. Border herausnehmen. Oder nur einen bildlichen Hovereffekt anwenden.

Evtl. hat jemand eine weitere Idee oder eine Modifikation in der Hinterhand.

LG

Edit:
Zur anderen Frage eines Hintergrundes ( #message-box textarea ) : eine mögliche Variante zur Einbindung einer hellen transparenten Grafik, dezent hinterlegt.

Es könnte ja ein grafischer Schriftzug sein Merry X-Mas...
https://www.phpbb.com/community/viewtop ... #p11330895

Re: Fragen / Tipps zu Aero Xmas

Verfasst: 09.10.2012 21:42

von LisaserstesForum

Hi Talks19zehn, danke für die Antwort und das du soviel Geduld mit mir hast.
Ich habe mir schon gedacht, dass das wenn nur mit großem Aufwand möglich ist, das lohnt sich hier nicht.

Talk19zehn hat geschrieben: Ich würde in dem Falle keinen Hovereffekt anwenden und ggf. Border herausnehmen. Oder nur einen bildlichen Hovereffekt anwenden.

Wie würde denn der bildliche Hovereffekt funktionieren? Müsste ich dort einfach statt der Grafik bg-christmas2.gif eine transparente Grafik einfügen?

Der Link ist super, habe das schonmal im Supportforum vom Board3 gesehen, da muss ich mir nur noch ein
passendes Bild zu suchen, danke

Re: Fragen / Tips zu Aero Xmas

Verfasst: 09.10.2012 23:31

von Talk19zehn

Hello Lisa,

du nutzt den Ursprung:

Code: Alles auswählen

ul.forums {
   background: #EFF7FB url("{T_THEME_PATH}/images/gradient.gif") repeat-x;
}

und nur jenen Hovereffekt:

Code: Alles auswählen

li.row:hover {
background: url("{T_THEME_PATH}/images/bg-christmas2.gif") repeat-x;
}

Wobei ich dann auf eine kleine Grafik ausweichen würde, die einen ähnlichen ( nicht gleichen ) Farbton im Hintergrund hat, wie der Farbverlauf -- ul.forums.
Das könnte m.E. sogar jener Farbton #EFF7FB für die Grafik sein, auf der deine transparenten weihnachtlichen Accessoires liegen. Da musst du mal schauen, welche transparenten Ornamente sich gut einpflegen lassen.
Denke daran, die Grafik nicht zu groß zu gestalten.

Du schaffst das!

Schau mal hier: http://www.ongray-design.de/forum/viewt ... 2625#p2625
Nur um zu zeigen, was möglich ist. Für dein Style ist die Grafik jedoch nicht geeignet.

[ot] Mein WebHoster hat jedoch leider seit Tagen eine Ladehemmung ......

- nein, das ist gelogen - nicht eine, mehrere....

Darum verzeih ggf. zeitweise unglaublich lange Ladezeiten....
[/ot]

LG

Re: Fragen / Tips zu Aero Xmas

Verfasst: 10.10.2012 14:06

von LisaserstesForum

Hi Talk19zehn,

das Problem mit dem Hover habe ich jetzt so gelöst, dass ich dort eine transparente Grafik eingebunden habe, so bleibt der Hovereffekt
und man sieht weiter trotzdem noch das Hintergrundbild.

Auch in das Antwortfeld habe ich eine kleine Grafik eingebaut, das hat einfach geklappt.
Im Hauptforum habe ich aber noch die MOD Prime Quick Reply (Link) eingebaut und möchte auch dort ein Bild im Antwortbereich einfügen, das scheint leider schwieriger.
Der in der prime_quick_reply.html für den Antwortbereich Bereich ist dieser:

Code: Alles auswählen

<fieldset class="fields1" style="margin-bottom:0.5em;">
			<!-- IF not S_USER_LOGGED_IN --><div><label for="username" style="float:left;width:64px;line-height:1.3;position:relative;bottom:-2px;">{L_USERNAME}:</label><input type="text" tabindex="2" name="username" id="username" size="25" maxlength="30" class="inputbox" /></div><!-- ENDIF -->
			<!-- IF S_SUBJECT_ALLOWED --><div<!-- IF not QUICK_REPLY_SHOW_SUBJECT --> style="display:none;"<!-- ENDIF --> id="quick_reply_subject"><label for="subject" style="float:left;width:64px;line-height:1.3;position:relative;bottom:-2px;">{L_SUBJECT}:</label><input type="text" name="subject" id="subject" size="45" maxlength="64" tabindex="2" value="{QUICK_REPLY_SUBJECT}" class="inputbox" /></div><!-- ELSE --><input type="hidden" name="subject" id="subject" value="{QUICK_REPLY_SUBJECT}" /><!-- ENDIF -->
			<!-- IF S_BBCODES_ALLOWED --><div<!-- IF not QUICK_REPLY_SHOW_BBCODES --> style="display:none;"<!-- ENDIF --> id="quick_reply_bbcodes"><!-- INCLUDE posting_buttons.html --></div><!-- ENDIF -->
			<!-- IF S_SMILIES_ALLOWED --><div<!-- IF not QUICK_REPLY_SHOW_SMILIES --> style="display:none;"<!-- ENDIF --> id="quick_reply_smilies"><!-- BEGIN smiley --> <a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a> <!-- END smiley --><!-- IF S_SHOW_SMILEY_LINK --><a href="{U_MORE_SMILIES}" onclick="window.open('{U_MORE_SMILIES}', '_phpbbsmilies', 'HEIGHT=600,resizable=yes,scrollbars=yes,WIDTH=839'); return false;">{L_QUICK_REPLY_MORE_SMILIES}</a><!-- ENDIF --></div><!-- ENDIF -->
			<div id="quick_reply_message" style="clear:both;text-align:center;">
				<textarea name="message" id="message" rows="9" cols="76" tabindex="3" onchange="prime_quick_reply_quotes(this);" onselect="storeCaret(this); prime_quick_reply_quotes(this);" onclick="storeCaret(this); prime_quick_reply_quotes(this);" onkeyup="storeCaret(this); prime_quick_reply_quotes(this);" class="inputbox" style="width:98%;height:160px;"></textarea>
			</div>
			<!-- IF not S_USER_LOGGED_IN -->
				<!-- IF CAPTCHA_TEMPLATE and S_CONFIRM_CODE -->
					<!-- DEFINE $CAPTCHA_TAB_INDEX = 3 -->
					<!-- INCLUDE {CAPTCHA_TEMPLATE} -->
				<!-- ENDIF -->
			<!-- ENDIF -->
			<fieldset class="submit-buttons" style="margin-bottom:0;">
				{QUICK_REPLY_HIDDEN_FIELDS}
				<input type="submit" name="preview" tabindex="6" value="{L_PREVIEW}" class="button1" onclick="document.getElementById('postform').action += '#preview';" />&nbsp;
				<input type="submit" name="post" tabindex="5" value="{L_SUBMIT}" class="button1" accesskey="s" />
				<input type="submit" name="full_editor" tabindex="7" value="{L_FULL_EDITOR}" class="button2" accesskey="f" />
			</fieldset>

Code: Alles auswählen

			<div id="quick_reply_message" style="clear:both;text-align:center;">
				<textarea name="message" id="message" rows="9" cols="76" tabindex="3" onchange="prime_quick_reply_quotes(this);" onselect="storeCaret(this); prime_quick_reply_quotes(this);" onclick="storeCaret(this); prime_quick_reply_quotes(this);" onkeyup="storeCaret(this); prime_quick_reply_quotes(this);" class="inputbox" style="width:98%;height:160px;"></textarea>
			</div>

Ich habe also versucht, das Hintergrundbild direkt einzubinden, weil es hier wohl keine css-Datei für gibt:

Code: Alles auswählen

			<div id="quick_reply_message" style="clear:both;text-align:center; background-image: url('{T_THEME_PATH}/images/xmas-texteingabe1.png'); background-repeat: no-repeat; background-position: 50% 50%">
				<textarea name="message" id="message" rows="9" cols="76" tabindex="3" onchange="prime_quick_reply_quotes(this);" onselect="storeCaret(this); prime_quick_reply_quotes(this);" onclick="storeCaret(this); prime_quick_reply_quotes(this);" onkeyup="storeCaret(this); prime_quick_reply_quotes(this);" class="inputbox" style="width:98%;height:160px;"></textarea>
			</div>

Das funktioniert leider nicht.
Ich habe auch versucht, clear:both;text-align:center; zu entfernen weil das vielleicht gegensätzlich zu dem Hintergrundbild ist aber auch das funktioniert nicht.
Siehst du da einen Fehler, den ich vlt. gemacht habe?

Re: Fragen / Tips zu Aero Xmas

Verfasst: 10.10.2012 21:36

von Talk19zehn

Hi Lisa,
deine Codierung müsste m.E. wie folgt lauten ===> background: url ... anstatt background-image: url ...

background: url('{T_THEME_PATH}/images/xmas-texteingabe1.png');

Du nutzt jedoch background-image:

Ich habe die Modifikation gar nicht im Einsatz. Spontan meine ich, du kannst es wie folgt versuchen, ohne das maßgeblich verschachtelte CSS bzw. JS zu kennen und mir scheint, am Ende der Anweisung ist ein Semikolon "abhanden" gekommen ==> ;

Siehe / vergleiche bitte:

Code: Alles auswählen

<div id="quick_reply_message" style="clear: both; text-align: center; background-image: url("http://www.upl0ad.de/phpBB3/styles/aero-xmas/theme/images/xmas-texteingabe1.png"); background-repeat: no-repeat; background-position: 50% 50%;">

usw. .

LG