[FINAL] Silver-Xmas-Modern (Child) 3.3.11

[Tastenplayer]

Habe also Deinen letzten Code eingefügt.

- Entweder ich suche ein Bild, dass ich über die ganze Breite machen kann
- Oder ich füge das nach dem acp nochmals ein und suche zwei andere Bilder für links und rechts(oben nur links und unten nur rechts)

[ externes Bild ] [ externes Bild ] [ externes Bild ]
Schlaufe links war mein Fehler, wurde nicht korrekt verkleinert, warum auch immer [ externes Bild ]Bild links und rechts ist allerdings kaum zu sehen.

Ich denke, dass ich das mal wie mit dem statistik container versuche - über das ganze Copyright. Müsste irgendwie gehen. Ansatz habe ich ja nun von Dir

Oder so: [ externes Bild ] Müsste dann natürlich ohne Background sein, da es ja nicht über die ganze Breite geht und auch nicht muss.

Alternativ-Lösung: [ externes Bild ] Oben müsste natürlich noch etwas Rotes hin, zwecks mehr Farbe.

Alternative 2 [ externes Bild ] (Man suche allerdings ein solches freies Bild oder erstelle es selber)

Edit: Ganzen Beitrag geändert, da ein Bild zu gross war. Warum auch immer, hatte das korrekt angegeben.

Habe das jetzt mal mit den Schlaufen weiter gemacht. Obwohl sie jetzt etwas mikrig wirken. Allerdings musste ich 2 Stunden lang den PC säubern, weil ich mir erlaubte ein Happy New Year gif anzuschauen. Die Seite blockierte meinen Browser, es funktionierte nichts mehr. Die angezeigte Meldung war der Hit. Wer die Nummer anruft und die erhaltenen Felder ausfüllt: Oh Schreck!(Von wegen Notfallreparatur von Microsoft - Bitdefender habe ich deaktiviert) Deswegen mein Resultat später.

Also ich habe das jetzt einmal so gemacht: [ externes Bild ][ externes Bild ] Irgendwo habe ich noch den Wurm drinn. Bild rechts wandert, wenn div höher wird. Bild links leider nicht. Vielleicht komm ich noch dahinter. CSS muss ich zuerst aufräumen zwecks Code einfügen.

Ich habe bald Zustände bekommen, weil die Schlaufe unten links nicht mit dem crdesigncontainer-middle_down mitkommt. Bis jetzt versucht das Problem zu lösen. Die Zeit hätt ich mir sparen können . Oben kann ich löschen, was ich will, es sieht alles okay aus. Mehr Text scheint auch zu klappen, muss ich allerdings nochmals genauer überprüfen morgen. Wenn jemand einen riesen Text unten reinschreiben will oder riesen hohes Bild, dann muss er die Schlaufe unten links anpassen. Die Schlaufe rechts unten stimmt immer.
Schlaufe links unten stimmt einfach nicht so ganz, hab zig mal versucht, dass das so aussieht wie rechts unten.

CSS

Code: Alles auswählen

/* crdesign xmascontainer
================================== */
#crdesign_container {
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	clear: both;
}

#crdesign-textimg {
	background-image: url("./images/textimgxmas210x38.png");
	background-repeat: no-repeat;
	background-position: 50% 54%;
	height: 40px;
	padding-top: 20px;
}

.crdesigncontainer-left {
	background-image: url("./images/leftxmas.png");
	background-repeat: no-repeat;
	height: 68px;
	float: left;
	width: 70px;
	padding: 0px;
}

.crdesigncontainer-middle {
	height: 64px;
	width: auto;
	margin: 0px 70px 0px 70px;
	padding: 0px;
	text-align: center;
}

.crdesigncontainer-right {
	background-image: url("./images/rightxmas.png");
	background-repeat: no-repeat;
	height: 64px;
	float: right;
	margin-top: -64px;
	width: 64px;
	padding: 0px;
}

#crdesign_container_bottom {
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	clear: both;
}

#crdesign-textimg_bottom {
	background-repeat: no-repeat;
	background-position: 50% 54%;
	padding-top: 20px;
	background-image: url("./images/textimgxmas_bottom.png");
	background-repeat: no-repeat; 
}

.crdesigncontainer-left_bottom {
	background-image: url("./images/leftxmas_bottom.png");
	background-repeat: no-repeat;
	height: 64px;
	float: left;
	width: 64px;
	padding: 0px;
	margin-top: -36px;
}

.crdesigncontainer-middle_bottom {
	background: #dcdcdc;
	background: -moz-linear-gradient(45deg, #dcdcdc 0%, #dfdfdf 100%);
	background: -webkit-linear-gradient(45deg, #dcdcdc 0%,#dfdfdf 100%);
	background: linear-gradient(45deg, #dcdcdc 0%,#dfdfdf 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#dfdfdf',GradientType=1 );
	height: 22px;
	border: 3px double #3E3E3E;
}

.crdesigncontainer-right_bottom {
	background-image: url("./images/rightxmas_bottom.png");
	background-repeat: no-repeat;
	height: 64px;
	float: right;
	margin-top: -64px;
	width: 64px;
	padding: 0px;
}

overall_footer.html

Code: Alles auswählen

	<div class="copyright">
		<!-- EVENT overall_footer_copyright_prepend -->
		      <div class="inner">
         <div id="crdesign_container">
            <div class="crdesigncontainer-left"></div>
            <div class="crdesigncontainer-middle">
               <div id="crdesign-textimg"></div>
            </div>
            <div class="crdesigncontainer-right"></div>
         </div>
      </div>
		{S_TIMEZONE}
		<p class="footer-row">
			<span class="footer-copyright">{{ CREDIT_LINE }}</span>
		</p>
		<!-- IF TRANSLATION_INFO -->
		<p class="footer-row">
			<span class="footer-copyright">{{ TRANSLATION_INFO }}</span>
		</p>
		<!-- ENDIF -->
		<br>Style: Silver Xmas Modern by Tastenplayer <a href="https://www.my-tastenworld.ch/">my-tastenworld.ch</a><br />		
		Forenicons nach Vorlage von <a href="http://icons.mysitemyway.com/category/glossy-black-icons/">icons.mysitemyway.com</a><br />
		<!-- EVENT overall_footer_copyright_append -->
		<p class="footer-row">
			<a class="footer-link" href="{{ U_PRIVACY }}" title="{{ lang('PRIVACY_LINK') }}" role="menuitem">
				<span class="footer-link-text">{{ lang('PRIVACY_LINK') }}</span>
			</a>
			|
			<a class="footer-link" href="{{ U_TERMS_USE }}" title="{{ lang('TERMS_LINK') }}" role="menuitem">
				<span class="footer-link-text">{{ lang('TERMS_LINK') }}</span>
			</a>
		</p>
		<!-- IF DEBUG_OUTPUT -->
		<p class="footer-row">
			<span class="footer-info">{{ DEBUG_OUTPUT }}</span>
		</p>
		<!-- ENDIF -->
		<!-- IF U_ACP -->
		<p class="footer-row">
			<a class="footer-link text-strong" href="{{ U_ACP }}">{{ lang('ACP') }}</a>
		</p>
		<!-- ENDIF -->
		      <div class="inner">
			<div id="crdesign_container_down">
			<div class="crdesigncontainer-left_down"></div>
			 <div class="crdesigncontainer-middle_down">
			<div id="crdesign-textimg_down"></div>
			</div>
			<div class="crdesigncontainer-right_down"></div>
			</div>
		</div>
	</div>

	<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
		<div id="darken" class="darken">&nbsp;</div>
	</div>

[ externes Bild ]

Jetzt bin ich definitv reif für die Insel

[Tastenplayer]

Jetzt bin ich in jeder Beziehung Fix und Foxi. Talk19zehn sei Dank! [ externes Bild ][ externes Bild ]
Was responive passiert, wenn man jetzt da unten im Bild etwas extrem langes reinschreibt? Vermutlich stimmt dann der Schlaufeinteil links wieder nicht. Habe ich klaro so nicht bedacht(Schau ich mir noch an).
Weniger hoch hat es mir zwar besser gefallen. Jedoch es sollte schon noch die Opption für ein Logo oder Happy Newyear bestehen [ externes Bild ]

Ausserdem muss ich zuerst nochmals die ganze Style css sowie alle html Dateien kontrollieren, bevor ich den Download aktualisieren kann.

[Talk19zehn]

Hi , du hast es schon richtig erkannt. Die Rechnung steht und fällt mit der Breite der Bilder und anhand der Höhe. Auf dem transparenten Textimage hast du den Text versetzt erfasst und es sieht gemäß deiner Grafiken in dem Ansatz bereits gut aus.

Was passiert, wenn du jene Regel für die ID crdesign-textimg

Code: Alles auswählen

@media screen and (min-width: 700px) and (min-device-width: 700px){

	#crdesign-textimg {
	
	Dein gesamter Inhalt
	
	}
}

nutzt? Also diese eine ID komplett mit jener @Media-Regel umschließt ... Denkbar kann es funktionieren, da das Textimage nun ab 701px angezeigt werden müsste (ungetestet, nur laut gedacht). Die übrigen weihnachtlichen Grafiken sprechen im Grunde (kleinste responsive Auflösungen) bereits für sich selbst.

LG

[Tastenplayer]

Danke Talk19zehn, schau ich mir am Sonntag nochmals genauer an. Ein Happy Newyear hat ja problemlos platz [ externes Bild ]
Hatte gestern wieder kaum gearbeitet und muss heute voll an die Säcke sonst gibt es Haue . Ausserdem bin ich heute nicht mehr fähig etwas an phpbb zu machen. Die erfolgte Validierung des Blackfog mit kaum relevanten Beanstandungen(waren alles äusserst doofe Anfängerfehler) hat mich definitv umgehauen Da muss ich jetzt zuerst die Icons versuchen zu ändern, damit ich das Update zu 3.2.3 einreichen kann. Danach folgt der Xmas und dann der Graphit. Beim Graphit dürfte es eigentlich keine Probleme geben. Beim Modern wird es dann allerdings...

[Tastenplayer]

Hi , du hast es schon richtig erkannt. Die Rechnung steht und fällt mit der Breite der Bilder und anhand der Höhe. Auf dem transparenten Textimage hast du den Text versetzt erfasst und es sieht gemäß deiner Grafiken in dem Ansatz bereits gut aus.

Was passiert, wenn du jene Regel für die ID crdesign-textimg

Code: Alles auswählen

@media screen and (min-width: 700px) and (min-device-width: 700px){

	#crdesign-textimg {
	
	Dein gesamter Inhalt
	
	}
}

nutzt? Also diese eine ID komplett mit jener @Media-Regel umschließt ... Denkbar kann es funktionieren, da das Textimage nun ab 701px angezeigt werden müsste (ungetestet, nur laut gedacht). Die übrigen weihnachtlichen Grafiken sprechen im Grunde (kleinste responsive Auflösungen) bereits für sich selbst.

LG

Verstehe jetzt nicht so ganz was Du meinst? Ich habe das gemacht, passiert ist nichts.

Code: Alles auswählen

@media screen and (min-width: 700px) and (min-device-width: 700px){
   #crdesign-textimg_bottom {
    background-repeat: no-repeat;
    background-position: 50% 54%;
    padding-top: 40px;
    background-image: url("./images/textimgxmas_bottom.png");
    background-repeat: no-repeat;
   }
}

Es war ja zuvor schon im grünen Bereich. Ich hatte mir überlegt, ob es möglich wäre, dass mehr Text im Bild geschrieben werden kann. Geht nicht. Wer mehr schreiben will, lösche den unteren Teil und schreibe ins Copyright

Style lasse ich jetzt so. Muss nur noch den neuen Header überprüfen. Könnte gut sein, dass ich da noch einen Fehler drinn hab. Und die css wieder sortieren. Vinny & CO hätten keine Freude an dem Chaos

[Talk19zehn]

Hi, da ich von meiner o.g. Codierung ausgegangen bin und in der kein Chaos herrscht und auch noch immer kein Fehlerchen auftritt, hatte ich vorherigen Vorschlag angedacht. Ich wusste gar nicht, dass ich mit meiner Hilfe ein Chaos produzier(t)e und Validatoren damit Mühe haben. Ist wirklich lustig ..., wie wirkt sich das denn aus?
Und, wenn du es bereits gelöst hast, um so besser. Von einen Container (HTML / CSS) mit einem img bottom las ich zuvor gar nichts. Text = Worte wären sicherlich ebenso möglich. Das Grundkonzept muss sodann selbstverständlich geändert werden.

LG

[Tastenplayer]

Hi Talk19zehn

Logo hast nicht Du das Chaos verursacht sondern ich, indem ich alle neuen Codes einfach unten in der style.css einfügte Da ist nun code nach dem responsiven Teil und dann wieder responsive code. Das geht gar nicht Muss klaro jetzt alles an den korrekten Ort verschoben werden.

Von einen Container (HTML / CSS) mit einem img bottom las ich zuvor gar nichts

meinen Code hatte ich hier im Thema eingefügt. Hätte es allerdings noch erwähnen sollen, sorry. Hier nochmals die css(in html datei logisch auch eingefügt) So gemacht, weil es mit dem linken unteren Band sonst Probleme gab. Ausserdem wäre ja der container im unteren Teil sonst viel zu hoch und der obere nicht unsichtbar

Code: Alles auswählen

/* crdesign xmascontainer
-------------------------------------------------------------- */
#crdesign_container {
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	clear: both;
}

#crdesign-textimg {
	background-image: url("./images/textimgxmas210x38.png");
	background-repeat: no-repeat;
	background-position: 50% 54%;
	height: 40px;
	padding-top: 20px;
}

.crdesigncontainer-left {
	background-image: url("./images/leftxmas.png");
	background-repeat: no-repeat;
	height: 68px;
	float: left;
	width: 70px;
	padding: 0px;
}

.crdesigncontainer-middle {
	height: 64px;
	width: auto;
	margin: 0px 70px 0px 70px;
	padding: 0px;
	text-align: center;
}

.crdesigncontainer-right {
	background-image: url("./images/rightxmas.png");
	background-repeat: no-repeat;
	height: 64px;
	float: right;
	margin-top: -64px;
	width: 64px;
	padding: 0px;
}

#crdesign_container_bottom {
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	clear: both;
}

#crdesign-textimg_bottom {
	background-repeat: no-repeat;
	background-position: 50% 54%;
	padding-top: 40px;
	background-image: url("./images/textimgxmas_bottom.png");
	background-repeat: no-repeat; 
}

.crdesigncontainer-left_bottom {
	background-image: url("./images/leftxmas_bottom.png");
	background-repeat: no-repeat;
	height: 64px;
	float: left;
	width: 64px;
	padding: 0px;
	margin-top: -19px;
}

.crdesigncontainer-middle_bottom {
	background: #dcdcdc;
	background: -moz-linear-gradient(45deg, #dcdcdc 0%, #dfdfdf 100%);
	background: -webkit-linear-gradient(45deg, #dcdcdc 0%,#dfdfdf 100%);
	background: linear-gradient(45deg, #dcdcdc 0%,#dfdfdf 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#dfdfdf',GradientType=1 );
	height: 40px;
	border: 3px double #3E3E3E;
}

.crdesigncontainer-right_bottom {
	background-image: url("./images/rightxmas_bottom.png");
	background-repeat: no-repeat;
	height: 64px;
	float: right;
	margin-top: -64px;
	width: 64px;
	padding: 0px;
}

Da kannst Du ihn runterladen und anschauen, wenn Du willst https://www.forum.my-tastenworld.ch/dow ... hp?id=2115 müsste jetzt aufgeräumt sein. Könnte allerdings noch Überflüssiges zum Löschen enthalten.

Edit: 1 Fehler hat es mindestens schon mal in der overall_header.

Code: Alles auswählen

<!-- EVENT overall_header_searchbox_after -->

Habe ich plötzlich doppelt drinn. Muss man nur gut überlegen, welches von den Beiden denn jetzt zu eliminieren ist.

Code: Alles auswählen

			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header" role="search">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
		</div>
			<!-- EVENT overall_header_searchbox_after -->
	</div>
</div>
			<!-- EVENT overall_header_searchbox_after -->
			<div id="page-header">
			<div class="headerbar" role="banner">

      <!-- EVENT overall_header_headerbar_before -->
         <div class="inner">
      <a href="<!-- IF U_SITE_HOME -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">
      <img src="{T_THEME_PATH}/images/header.jpg" class="logo-image-wrapper" alt=""></a>

         </div>
         <!-- EVENT overall_header_headerbar_after -->

Ausserdem scheint sich die Seite mit den Icons definitiv verabschiedet zu haben. Der Link führt seit Tagen ins Leere. Ob ich jetzt da den Link im Copyright lassen soll

[Talk19zehn]

Hm, warum belassen? Das kann doch jeder handhaben, wie gewollt und gekonnt ...
Meine Tendenz: Wech damit... (Warum: Gründe kann ich keine erkennen) ..

LG

[Tastenplayer]

Hm, warum belassen? Das kann doch jeder handhaben, wie gewollt und gekonnt ...
Meine Tendenz: Wech damit... (Warum: Gründe kann ich keine erkennen) ..

LG

Ich nehm mal an, Du meinst den Link zu den Icons.
Man soll/ muss fremde Quellen angeben. Dann müsste ich das mindestens in die overall_header einfügen.
Zwar wurde es vom Anbieter nicht verlangt, jedoch gewünscht. Eingestellt als frei zur privaten sowie kommerziellen Nutzung.

[Tastenplayer]

Den Calender habe ich jetzt auch endlich angepasst und den Code im Styleforum eingefügt
Background color von SA+SO könnte besser sein
Hoffe habe jetzt keine falschem Farben angegeben für andere Ansicht - bei mir wird er ja über/unter dem Header nicht angezeigt.