phpBB.de

Verfasst: **30.11.2017 06:25**

So ein paar Sachen blicke ich momentan gerade nicht, sorry.

chris1278 hat geschrieben:Der Aktueller wrap Container der über dem Forum erstellt wurde

Du hast also diesen Block komplett neu erstellt? "Gefüllt" mit dem Code der Headerbar DIV, mit Ausnahme dem der Searchbox?
Was ist mit der ursprünglichen DIV Headerbar geschehen?

Zu Deinen Fragen:

chris1278 hat geschrieben:womit muss ich folgenden Code austauschen um dort eine Hintergrundgrafick einzufügen die auch einen hyperlink zur indexseite des Forums hat.

Am besten dies erst einmal in zwei Teile aufdröseln

1) Link
Wenn Du die komplette Fläche dieser DIV "wrap2" als Link ausbilden willst, dann probiere mal (hier jetzt nur die ersten beiden Zeilen genannt)

Code: Alles auswählen

<div id="wrap2" class="wrap2">
	<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF --></a>

// hier dann den Rest des Codes //

2) neues Logo als Hintergrundbild:
Mit einem Hintergrundbild wird das nicht so ohne weiteres funktionieren können. Ein Hintergrundbild ist etwas anderes als ein Bild

Schau mal hier => viewtopic.php?f=154&t=240287&start=70#p1373761 rein, da geht es im Prinzip um genau diese Problematik.

3)

chris1278 hat geschrieben:Gibt es hier die Möglichkeit diese beiden Container mit einander zu verbinden (Ecken müssen nicht Rund sein.

Du hast sowohl für Deine wrap2 als auch für das reguläre wrap ein border-radius vonx Pixeln definiert, z.B. border-radius: 5px;.
Dadurch werden jeweils alle 4 Ecken der beiden DIVs gleich abgerundet.
Du kannst jede Ecke aber auch einzeln einstellen - das Muster für die Kurzhandnotierung wäre
border-radius: *links-oben* *rechts-oben" *rechts-unten* *links-unten*;

Für die wrap2 bei jeweils 5px für die oberen Ecken und keine Rundung bei den beiden unteren =>

Code: Alles auswählen

border-radius: 5px 5px 0 0;

analog hierzu dann für die wrap das ganze umgekehrt.

4)

chris1278 hat geschrieben:Was mus ich wo dort eintragen das die Ausrichtung der Schrift Zentriert und nicht Linksbündig ist.

Das geht über die Eigenschaft text-align einer Klasse => also: füge ein text-align: center; hinzu.

Ein Tipp zum Schluss noch: zum Thema CSS gibt es sehr gute Übersichten und Tutorials im Internet, z.B.
https://www.w3schools.com/css/default.asp , https://wiki.selfhtml.org/wiki/CSS usw.

Verfasst: **30.11.2017 06:44**

@Melmac Danke auf jeden Fall für deine Geduld.

Habe das alles Ausprobiert und siehe da wieder ein Stück weiter.

Nur eine Sache ncoh was die wrap Container oberhalb anbelangt.

wie bekomme ich diese dünne Linie zwischen den Containern Weg.

Mfg

Zu 2. Man Mus das Bild ja nicht als hintergrund über css laden. Bestünden denn die Möglichkeit ein innerhalb der Container angabe

<div id="wrap2" class="wrap2"> ... </div>

Ein bild direkt zu Laden mit eingebautem Hintergurndlink welches sich automatisch auf die Grösse des Containers stretcht.

Was deine Frage angeht nach der Original Headebar.

Der Original dazu gehöhrende Code sah so aus. Also über der eigentlichen Wrap-Box:

Code: Alles auswählen

<!-- EVENT overall_header_body_before -->
		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">

			<div id="site-description" class="site-description">
				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<!-- EVENT overall_header_searchbox_before -->
			<!-- 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 -->
			<!-- EVENT overall_header_searchbox_after -->

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

<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-header">
		<!-- INCLUDE navbar_header.html -->

nun sieht er so aus:

Code: Alles auswählen

<!-- EVENT overall_header_body_before -->
		
		<!-- EVENT overall_header_headerbar_before -->
			
			<!-- EVENT overall_header_headerbar_after -->
		
		<!-- EVENT overall_header_navbar_before -->

<div id="wrap2" class="wrap2">
	  
	<dt id="site-description" class="inner" >
		<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
	</dt>
</div>
<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-header">
		<!-- INCLUDE navbar_header.html -->
	</div>

	<!-- EVENT overall_header_page_body_before -->

Dort wo die Ursprünliche Headerbar war ist jetzt nur noch die Events.

Alternativ würde ich gerne Versuchen das Logo als bild so einzubauen wie du es am Anfang als Drittes Bild gepostet hast.

Dies hier meine ich:

Bild

Allerdings würde ich hierzu gerne wissen wäre das komplette bild also das mit der erdkugel auch wie das logo als link drinne.

Wenns du dazu mal eine Anleitung hättest ohne Extension wäre das super. Das würde ich alternativ gerne mal Ausprobieren anstelle meines Versuches der 2 ten Wrap-Box über dem Forum.

Verfasst: **30.11.2017 09:02**

Wenn Du nichts dagegen hast, werde ich die Antworten auf Deine Fragen auf mehre Posts aufteilen, sonst wird dies hier vielleicht doch etwas zu lang für einen und damit etwas unübersichtlich.
Einfach mal schauen, okay?

Rahmen:

chris1278 hat geschrieben:wie bekomme ich diese dünne Linie zwischen den Containern Weg.

Du hast für beide DIVs (wrap2 und wrap) einen Rahmen definiert: 5 Pixel breit, rot, mit jetzt teilweise abgerundeten Ecken (s.o.) und momentan noch auf allen Seiten (oben, rechts, unten, links).
Die Rahmenbreite wird über die Eigenschaft border-width definiert. Wenn Du hier nur einen Wert angibst, dann gilt der für alle vier Seiten.
Du musst dies jetzt also so ändern, dass dies in den beiden Klassen nur noch jeweils drei Seiten formatiert und eine auf die Breite "0" setzt: bei wrap2 die untere, bei wrap die obere.
Auch das kann man wieder über Kurzhannotierung machen - die Reihenfolge der Werte wäre bei Rahmen jetzt "oben", "rechts", "unten", "links".

Beispiele findest Du hierfür u.a. hier => https://wiki.selfhtml.org/wiki/CSS/Eige ... rder-width , alternativ => https://www.w3schools.com/css/css_border.asp

---------------------------

Dein Umbau der Headerbar:
Dein "kastrierter" Code wird Probleme machen: sobald Deine Auftraggeber mal eine Extension installieren sollten, die auf eines der Events in diesem Bereich zugreifen, wird es das Layout zerhacken.

Der Grund dafür liegt hierin:

chris1278 hat geschrieben:Dort wo die Ursprünliche Headerbar war ist jetzt nur noch die Events.

Du hast jetzt die Events aus ihrem vorgesehenen Kontext innerhalb der DIV herausgerissen und alle auf einen großen Haufen vor der neuen DIV geworfen - das kannst Du so nicht machen, sorry.

Vom Entfernen einiger Codeteile mal abgesehen hast Du ja im Prinzip diese DIV ja nur "umbenannt" (was alleine u.U. schon problematisch werden kann): statt mit "headerbar" wird sie jetzt mit "wrap2" angesprochen.
Zumindest die Events overall_header_headerbar_before, overall_header_headerbar_after und overall_header_navbar_before hätten an ihren ursprünglichen Positionen erhalten bleiben müssen.
overall_header_searchbox_before und overall_header_searchbox_after stehen in Verbindung mit der Searchbox und sollten dann, wenn Du sie an anderer Stelle wieder einbauen solltest, auch wieder mit ihr zusammen eingefügt werden.

Extensions erwarten, dass die Events, über die sie ihre Inhalte zur Anzeige bringen, auch genau an der Stelle vorzufinden sind, die für sie vorgesehen bzw. vorgegeben ist. Ihr Code (HTML und CSS) ist auf genau diesen Kontext um den Platz herum abgestimmt - ändert sich der jetzt aber ...

chris1278 hat geschrieben:Bestünden denn die Möglichkeit ein innerhalb der Container angabe [...]

Ja - aber dafür müsste die Struktur des Containers samt dem zugehörigen CSS entsprechend angepasst bzw. ergänzt werden.
Es einfach nur über eine <img .......... /> Zeile einzufügen wird Dir vielleicht das Bild selbst anzeigen, aber responsiv verhält es sich deswegen noch nicht. (Deswegen ja auch meine frühere Bemerkung: der Umbau wird so etwas aufwändiger werden).
"Automatisch" geht da auch nichts: dies muss ihm erst einmal "einprogrammiert" werden

// to be continued

Verfasst: **30.11.2017 10:07**

... weiter im Text

Alternativ würde ich gerne Versuchen das Logo als bild so einzubauen wie du es am Anfang als Drittes Bild gepostet hast.

Die dort eingestellten Screenshots zeigen das Ergebnis meines Ansatzes nur in unterschiedlichen Auflösungen: die Codeanpassungen hierfür werden nur ein einzigesmal vorgenommen und danach nicht mehr angerührt

Allerdings würde ich hierzu gerne wissen wäre das komplette bild also das mit der erdkugel auch wie das logo als link drinne.

Wie ich schon an Anke geschrieben hatte: das ist bei der genannten Extension so vorgesehen. Geht auch schlecht anders: das Logo hätte ja auch ein kleineres Bild sein können, das nicht die komplette Fläche dieses Bereichs ausfüllt und bei dem das "Drumherum" dann auch nicht klickbar sein sollte.

Wenns du dazu mal eine Anleitung hättest ohne Extension wäre das super.

Könnte ich machen, dauert aber etwas: seit es diese Extension gibt, habe ich mich damit nicht mehr groß befasst - muss mal in meinem "Archiv" graben, wie ich das vorher gemacht habe.

Trotzdem nochmals die Frage (nicht falsch verstehen, okay?!): warum willst Du unbedingt ohne die Extension vorgehen und stattdessen größere Umbauten am Originalcode vornehmen, wenn das Ergebnis am Ende doch das gleiche wäre?
Mit dem einen Unterschied halt: der Umbau ist aufwändiger, weil er eben auch Folgeanpassungen nach sich ziehen wird - die Searchbox muss umgesetzt werden; Forumname und Forumbeschreibung müssten dann ebenfalls aus diesem Bereich weichen (es sei denn, Du nimmst beides mit ins neue Logo-Bild auf) ...

Mit dem Umbau des Styles für Deine Auftraggeber ist es ja auch alleine nicht getan - danach kommt weitere Arbeit auf Dich zu, früher oder später.
Was ist mit der Wartung und Pflege des Styles? Wie schauts bei Updates aus, wenn diese eingepflegt werden müssen?
Es ist eben nicht damit getan, dann einfach die neue Styleversion über die bisherige zu ziehen: die jetzt gemachten Änderungen müssten dann, da Du die originalen Styledateien abgeändert hast, manuell übertragen werden.
Spätestens dann solltest Du auch die entsprechenden Werkzeuge hierfür haben - und jetzt bereits beim Umbauen dokumentieren, wo Du welche Anpassung durchgeführt hast, wie diese zusammenhängen und wie der neue Code "funktioniert": da Du den Style "erstellt" hast, wärst Du für sie auch der erste Ansprechpartner bei Fragen oder Problemen

Verfasst: **30.11.2017 15:37**

@melmac Da hast du im Prinzip recht.

Ich werde den Kopf wieder so herstellen wie im Original und dann wenn du mir erklärts das mal so probieren wie du es gemacht hast.

So habe jetzt mal die Original overall-Header wiederhergestellt so wie sie im Style war.

Deine extensions Installiert.

Mit option: Oberhalb der Navbar gibt folgendes Resultat.

[ externes Bild ]

Leider hier ohne Anklickbares Logo.

Mit option: Unterhalb der Navbar gibt folgendes Reultat.

[ externes Bild ]

Wieder ohne anklickbares Logo und ausserdem Völlig Falsch am platz. wenn es hier unterhalb des roten randes wäre könnte man ja was machen.

Wobei für die Searchbox zu versetzen ist das schon mal gut.

Hab jetzt mal den Original Revolution style noch rein gemacht und deine Änderungen so wie du sie am Anfang geschrieben hattest eingefügt.

Resultat:

[ externes Bild ]

auch nicht ganz so wie du es als bild gepostet hast. da zumindest das logo revolution dort irgendwo zu sehen sein sollte.

Und das ist die Ansicht des Original und unveränderten Styles.

Ich hab jetzt auch das gif bild bekommen was dort rein soll.

Dieses habe ich so abgespeichert: /theme/images/minipom-logo.gif

Evtl. Kannst du mir da erklären wie ich das jetzt an die stelle bekomme so wie du es mit deinem bild hattest.

Verfasst: **30.11.2017 20:12**

Ich hatte ja geschrieben, dass auch noch eine Kleinigkeit in der Extension selbst angepasst werden muss

Was Deine bisherigen Styleanpassungen betrifft: die overall_header.html wieder in den Originalzustand zu versetzen reicht noch nicht: Du musst auch alle Änderungen, die Du für Deinen bisherigen Anlauf am CSS von Revolution vorgenommen hast, wieder zurücknehmen.

Du hast die Extension bisher auch nur installiert, sonst aber noch nichts gemacht, oder?

Für Revolution musst Du noch einen neuen Ordner im Styles-Verzeichnis der Extension anlegen.
Außerdem brauchst Du auch noch eine Dummy-Grafik, die das neue Logo repräsentieren soll. Ich gehe erst einmal davon aus, dass es weiter unter dem Namen site_logo.gif im Verzeichnis /styles/revolution/theme/images/ gespeichert ist.

Das ganze jetzt mal der Reihe nach:

Ordner für Deinen Style im Styles-Verzeichnis der Ext anlegen
- Öffne /ext/kirk/site_logo_responsive/styles/ - dort sind zwei Ordner enthalten: dark_vision und prosilver
- Lege dort jetzt einen weiteren Ordner revolution an
- Kopiere den kompletten Inhalt des dort bereits vorhandenen Ordners prosilver und füge ihn in den neuen Ordner ein.
Extension für den Style anpassen
- Öffne /ext/kirk/site_logo_responsive/styles/revolution/theme/site_logo_responsive_3_2.css und suche dort nach
  Code: Alles auswählen
```
.headerbar {
	padding: 5px;
}
```
  Ersetze
  Code: Alles auswählen
```
padding: 5px;
```
  durch
  Code: Alles auswählen
```
padding: 0;
```
Jetzt noch wie hier => viewtopic.php?f=153&t=240630#p1376397 angesprochen eine custom.css erstellen (Code darin wie dort angegeben) und diese in der stylesheet.css an letzter Stelle einbinden

chris1278 hat geschrieben:zumindest das logo revolution dort irgendwo zu sehen sein sollte.

Der Name des originalen Revolution Logos lautet aber nicht site_logo.gif, wie von der Extension erwartet, sondern bei diesem Style site_logo.png - da der Dateinam also abweicht, musst Du dies in der Ext anpassen:
=> öffne die /ext/kirk/site_logo_responsive/styles/revolution/template/event/overall_header_headerbar_after.html und suche dort (Zeile 3) nach

Code: Alles auswählen

<img src="{T_THEME_PATH}/images/site_logo.png"

und ändere dies entsprechend ab.

Verfasst: **30.11.2017 20:41**

Das letzte Bild ím Beitrag über deinem zeigt das Resultat mit dem Original unverändertem Style Revolution.

Das einzige was ich gemacht hatte waren dort

Ersttelung der coust.css nach deinen Vorgaben sowie anpassung der stylesheet.css um die andere zu laden.

Die andere css Dateien sind wie gesagt Original und unverändert so wie die Template Dateien.

Reultat war was ich dir als bild dann gepostet hatte.

werde jetzt erst mal schauen das ich das mit dem logo nach deiner Anleitung einbaue und dann die Farbangaben aus dem geänderten style nachträglich über die coustom.css einbaue. So das die original css Dateien erhalten bleiben. scheint ja möglich zu sein den Style so die Farben anzupassen ohne die Original Dateien zu ändern.

Das einzige was was ich mit der extension gemacht hatte war aktiviert und die einzelnen Optionen im admin bereich und deren Änderungen im Forum selber anzuschauen. aber am code selber habe ich nix gemacht.

Aktuell sieht es so aus:
[ externes Bild ]

Die Einstellungen im ACP:
[ externes Bild ]

Die Searchbox passt schon mal dort wo Sie jetzt ist.

werde gleich noch die anderen angaben ändern und dann meld ich mich wieder.

Edit:

Jetzt Schaut es so aus:

[ externes Bild ]

So sind wir auf demn Richtigen Weg. Jäh.

Drei fragen einstweilen noch.

Ich sehe es richtig dass Diese custom.css die standard css datein überschreibt sofern angaben.

z.B.

wenn ich jetzt aus der original colours.css folgenden wert ändern will.

Code: Alles auswählen

.forumbg,.forabg {
	background-color: #862c23;
}

Dann kopiere ich den So wie ich es hier habe und trage den in die coustom.css datei ein und ändere dann dort entsprechend meinen Wünschen den Farbewert. Dann würde die Auswahl sagen das wenn die Coustom.css in der Stylesheet.css geladen wird (in diesem Fall als letzte denk ich mir) das die Farbangabe nicht aus der colours.css gehohlt wird sondern diese Angabe aaus der coustom.css benutzt wird. Und wenn ich die Coustom.css nicht lade das die aus der Standard Datei gehohlt wird.

Wie würde es sich verhalten wenn ich css datei als beispiel zusätzlich als ext lade. (Nur gedankenspiel um zu verstehen)

Wenn ich das jetzt so mache.

colours.css (original)

Code: Alles auswählen

.forumbg,.forabg {
	background-color: #862c23;
}

coustom.css (geladen über die stylesheet.css)

Code: Alles auswählen

.forumbg,.forabg {
	background-color: #114411;
}

Würde das grünlich laden. Das funktioniert auch das hab ich schonmal so getestet.

Und jetzt mache ich noch einen Styleänderungsextension. (hatte ich schonmal gehabt würde aber im einsatz nicht wirrklich was bringen)

Lade also im prinzip über die extensions Strasse eine weitere ich nenne sie hier mal extension.css

Extesnsion.css

Code: Alles auswählen

.forumbg,.forabg {
	background-color: #fef0f0;
}

Das sollte eine rötliche ausgabe bringen.

Alle drei css. Dateien werden geladen welche farbe kommt raus.

Das Wäre dann die erste Frage.

Frage nummer Zwei Warum hat mein Logo runde Ecken wie bekomme ich die eckig.

Frage Drei wie kann ich die grösse des Logos ausgabe dort anpassen.

Verfasst: **03.12.2017 05:54**

Ok das Thema hier hat sich soweit erst mal erledigt da jetzt doch nur ein leicht angepasster Prosilver genutzt werden soll. Daher hab ich drt einen Prosilver Tochter style erstellt und nur die Farbcodes über eine extra coustom.css geladen.

Sollte aber jemand anders eine Anpassung Ähnlich wie schon hier beschrieben vornehmen wollen darf er dieses Thema gerne weiterführen.

Soviel sei gesagt wenn man die Änderungen so anwendet wie Melmac es beschreibt funktioniert das recht gut. Noch nicht ganz Perfekt da das Logo also in meinem Fall runde ecken hat aber in der Headerbar rechteckig ist. Somit hat es an den Ecken weise Flächen erzeugt.

Denke das wäre aber nur eine kleine Änderung die man per css machen könnte.

Auf jeden fall Danke ich melmac für seine Hilfe und seine Geduld. Ich habe auch wenn jetzt ein andere Style zum Einsatz kommt einiges gelernt.

Verfasst: **03.12.2017 10:54**

chris1278 hat geschrieben:Denke das wäre aber nur eine kleine Änderung die man per css machen könnte.

Genau - das wäre dann das von mir angesprochene Feintuning, das für die konkrete Konstellation noch erforderlich gewesen wäre

Verfasst: **03.12.2017 23:18**

@Melmac

Um das zu Vervollständigen bezüglich der abgerundeten ecken.

Für in der coustom.css

Code: Alles auswählen

.site_logo {
	display: inline-block;
	width: 149px;
	height: 52px;
	border-radius: 0;
}

Somit lädt das Logo dann die Ecken eckig und nicht abgerundet.

phpBB.de

[3.2] Revolution.

Re: [3.2] Revolution.

Re: [3.2] Revolution.

Re: [3.2] Revolution.

Re: [3.2] Revolution.

Re: [3.2] Revolution.

Re: [3.2] Revolution.

Re: [3.2] Revolution.

Re: [3.2] Revolution.

Re: [3.2] Revolution.

Re: [3.2] Revolution.