[3.3] Neues Thema und Suchleiste zentrieren

[Walter Wegeland]

Hallo sehr verehrte Community,

Style: original Prosilver von phpbb.com

wenn möglich, würde ich gerne den Button "Neues Thema" und die rechts danebenstehende "Suchleiste" zentriert darstellen.
Die Information über Beitrags- und Seitenzahlen hab ich bereits entfernt, mir gelingt nur nicht die Zentrierung der "action-bar", in der viewforum_body.html:

Code: Alles auswählen

<!-- IF S_DISPLAY_POST_INFO or .pagination or TOTAL_POSTS or TOTAL_TOPICS -->
	<div class="action-bar bar-top">

	<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
			<!-- EVENT viewforum_buttons_top_before -->

		<a href="{U_POST_NEW_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
			<!-- IF S_IS_LOCKED -->
				<span>{L_BUTTON_FORUM_LOCKED}</span> <i class="icon fa-lock fa-fw" aria-hidden="true"></i>
			<!-- ELSE -->
				<span>{L_BUTTON_NEW_TOPIC}</span> <i class="icon fa-pencil fa-fw" aria-hidden="true"></i>
			<!-- ENDIF -->
		</a>
			<!-- EVENT viewforum_buttons_top_after -->
	<!-- ENDIF -->

	<!-- IF S_DISPLAY_SEARCHBOX -->
		<div class="search-box" role="search">
			<form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
			<fieldset>
				<input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
				<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_FORUM }}" 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_LOCAL_HIDDEN_FIELDS}
			</fieldset>
			</form>
		</div>
	<!-- ENDIF -->

	</div>
<!-- ENDIF -->

Vielleicht kann mir ja einer von Euch helfen.

Mit den besten Grüßen

Walter Wegeland

[Mike-on-Tour]

Bevor wir uns darüber eventuell unnötige Gedanken machen, was hast du denn bisher schon versucht, wenn du schreibst

mir gelingt nur nicht die Zentrierung der "action-bar"

[Walter Wegeland]

Servus Mike-on-Tour,

ich habe da nicht wirklich viel herumprobiert, da ich die css-attribute der "action-bar" insbesondere in der responsive.css nicht so ganz verstehe, zumal da auch noch die css-Attribute zu "search-box" und "button" eine Rolle spielen. Insbesondere die Searchbox wird ja noch mit weiteren css-Attributen definiert.

Daher habe ich bisher nur versucht, den Code als Gesamtes mit

Code: Alles auswählen

<div align="center">

bzw. mit dem css-Attribut

Code: Alles auswählen

margin: 0 auto;

zu zentrieren, was aber nicht funktioniert hat. Zuerst habe ich dafür die rechts ausgerichtete "Pagination" verantwortlich gemacht, aber obwohl ich diese entfernt habe, bleibt der Button "Neues Thema" und die rechts danebenstehende "Suchleiste" linksbündig.

Ich habe es auch mal mit einer klassischen Tabelle

Code: Alles auswählen

<table align="center"><tr><td></td></tr></table>

versucht, aber auch damit habe ich beides nicht auch nur einen Milimeter von der Stelle bewegen können.

Ich habe nicht sonderlich viel Verständnis von HTML und CSS. Etwas zu kopieren und an anderer Stelle einfügen oder Texte wie Forumstitel zu zentrieren funktioniert so gut wie Farben verändern, aber viel mehr kann ich nicht. Jetzt ist es nur so, dass ich sowohl die Formstitel, die Forumsbeschreibung und die Forumsregeln zentriert darstellen möchte, was auch funktioniert, aber der linksbündige "Antworten Button" und die "Suchleiste" passen dann nicht mehr so gut dazu

Ich hatte gehofft, dass es da eine ganz einfach Möglichkeit gibt, beides zu zentrieren.

Mit den besten Grüßen

Walter Wegeland

[Mike-on-Tour]

Okay, diese Methoden werden bei einem div auch nicht funktionieren, da muss man anders rangehen. Eine kurze Google-Suche mit den Suchbegriffen "css center div" liefert u.a. diese Seite und wenn du den ersten Tipp ausprobierst, funktioniert das auch schon, also die zweite Zeile in deinem Startbeitrag (<div class="action-bar bar-top">) so
<div class="action-bar bar-top" style="width: 35%; margin: auto;">
abändern bzw. ergänzen.

Um solche Möglichkeiten durchzutesten, brauchst du übrigens nicht jede Änderung im Quellcode durchzuführen, den Cache löschen und die Seite dann aufrufen; einfach die Entwicklerwerkzeuge nutzen, die in (fast) jedem Browser enthalten sind, in FireFox z.B. über F12.

[Walter Wegeland]

Vielen Dank, Mike-on-Tour,

ich kann jetzt den Button und die Suchleiste verschieben. Nur die größe der Div-Box musste ich anpassen, weil sowohl Button und Suchleiste ja immer noch in der Box linksbündig ausgerichtet sind. Ich habe einen recht genauen Pixelwert statt Prozentwert angegeben, weil es sonst, gegenüber des zentrierten Titels, doch recht "schief" aussieht. Jetzt habe ich nur das Problem, dass bei kleinen Bildschirmauflösungen (max 700Pix), der "neues Thema" Button unterhalb der Suchleiste angezeigt wird. Ich habe jetzt aber durch Deinen Link einige Ansätze, die ich verfolgen kann und bin erst einmal zufrieden!

Mit besten Dank dafür!

Walter Wegeland

[hackepeter13]

display: flex könnte doch auch helfen.

einfach in der common.css die .action-bar Klasse erweitern:

Code: Alles auswählen

display: flex
justify-content: center;

[Walter Wegeland]

Perfekt, hackepeter13!
Sowohl "Neues Thema" als auch die "Suchleiste" werden jetz zentriert dargestellt. Egal bei welcher Bildschirmauflösung.

Vielen Dank und mit besten Grüßen

Walter Wegeland

[Talk19zehn]

Hi hackepeter13, wirkt sich die Ergänzung action-bar nicht auch auf die Kodierung --> bar-bottom aus? Und zeigt vermutlich im Verlauf u.a. "global" in der viewtopic Wirkung? Also vermutlich in Templates ohne Umbau jeweilig betroffener Container .... (reines Gedankenspiel).

Eventuell eher so? Greift sozusagen in Folge auch "global" - jedenfalls ist´s mein Gedanke:

Code: Alles auswählen

div.action-bar.bar-top {
	display: flex;
	justify-content: center;
}

LG


Edit: 10:38
Eventuell könnte man der Kodierung ein "@media min-width" spendieren, wie z.B.:

@media (min-width: 701px) {
.....
.....
{

oder ab 851px?

Grüße

[hackepeter13]

@Talk19zehn

da hast du natürlich recht, das ganze war nur ein schneller Lösungsvorschlag.
Aber da @Walter Wegeland schrieb:

Die Information über Beitrags- und Seitenzahlen hab ich bereits entfernt

weiß ich nicht, was er noch so alles am Style geändert hat und inwiefern sein ganzes Layout aussieht.

[Talk19zehn]

Ja, mich machte es gedanklich einfach nur stutzig. Danke dir für deine Rückantwort.

LG und ein schönes WE ...