Überschrift der Portalblöcke bei prosilver mittig anordnen

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.
Antworten
Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 8179
Registriert: 24.05.2010 08:31
Kontaktdaten:

Überschrift der Portalblöcke bei prosilver mittig anordnen

Beitrag von Kirk »

Hallo

Wie kann man die Überschriften der mittleren Blöcke im Portal mittig anordnen?
Style ist prosilver
Hab zwar mit Firebug das hier verändert:

Original:

Code: Alles auswählen

li.header dl.icon dt {
    padding-left: 0;
    padding-right: 50px;
Änderrung:

Code: Alles auswählen

li.header dl.icon dt {
    padding-left: 86px;
    padding-right: 0;
}
Funktioniert aber nur wenn die Überschrift zusammen hängend ist.
Bei dem Block Aktuelle Beiträge wird zb. das hier Letzter Beitrag unter den Aktuelle Beiträge
angezeigt und nicht daneben wie es normal sein sollte.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5041
Registriert: 08.06.2009 12:03

Re: Überschrift der Portalblöcke bei prosilver mittig anordn

Beitrag von Talk19zehn »

Hello Kirk,
ich habe hier noch eine Idee auf dem PC, die ich jedoch seinerzeit wieder verworfen habe.
Die Änderungen beziehen sich auf das Forum. Indirekt auf die Portalansicht (Version: 1.06)
da die Klassen ja teils durchgreifen.
Im Ergebnis verhielt es sich so, dass ich zu dem Ergebnis gelangte, neue Klassen definieren zu müssen bzw. diese für die Portalansicht ändern bzw. gar für den dortigen Bereich neu definieren oder prozentual neue Berechnungen vorgeben muss. Natürlich könnte man suchen, um für das Portal einen Style zu finden, der eine andere korrekte Berechnung bereits beinhaltet.
Der Aufwand erschien mir ziemlich hoch. Zudem reagierten die Boxen links und rechts teils nicht gleichermaßen, da erinnerlich h3 an verschiedenen stellen greift. Das Linksbündige habe ich von daher akzeptiert um das Erscheinungsbild in seiner Gesamtheit nicht zu zerstören. Denn im Grunde ist es doch wirklich ganz schön und passend abgestimmt.

Nur als weiteren Anhaltspunkt kann ich dir daher benennen: Ich veränderte......

Für die Hauptübersicht:

Code: Alles auswählen

li.header dt, li.header dd {
    border-left-width: 0;
    color: #FFFFFF;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
    line-height: 1em;
    margin: 2px 0 4px;
    padding-bottom: 2px;
    padding-top: 2px;
    text-align: center;
    text-transform: none;
}

Code: Alles auswählen

dd.lastpost {
    font-size: 1.1em;
    text-align: center;
    width: 25%;
}
Für die Themenübersicht:

Code: Alles auswählen

li.header dl.icon {
    min-height: 0;
    text-align: center;
}
Es ist durchaus möglich, dass meine Ansätze an falscher Stelle erfolgten.
Wenn du andere Ideen hast, würde mich das sehr freuen und gerne in einen
gedanklichen Austausch treten.

*Überlappung / Verschiebung Themen, Beiträge und letzter Beitrag: Aktuelle Beiträge i.d. Portalansicht:

Bei den aktuellen Themen kam ich zu dem Ergebnis, dass die Spalten Themen und Beiträge von je 11% im Grunde für die Portalansicht entbehrlich sind / sein könn(t)en. Ich kommentierte diese zwei Spalten einfach aus und änderte den prozentualen Wert der ersten Spalte von 44% auf 55% bzw. maximal 58%.

Ich hatte in der
Version 1.06
und dort in der news_compact.html geändert = auskommentiert:

Code: Alles auswählen

 <!-- <dd class="posts" style="width: 11%">{L_REPLIES}</dd>
<dd class="views" style="width: 11%">{L_VIEWS}</dd> -->

Code: Alles auswählen

<!-- <dd class="posts" style="width: 11%">{news_row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
<dd class="views" style="width: 11%">{news_row.TOPIC_VIEWS} <dfn>{L_VIEWS}</dfn></dd> -->

Inwieweit die neue Portalversion andere Möglichkeiten zuließe, entzieht sich noch meiner Kenntnis.
Ich freue mich schon jetzt auf die neue Version, die so viel versprechend ist.
http://www.board3.de/viewtopic.php?f=48&t=4485

Viele Grüße



* Edit: Überschrift kursiver Text
Zuletzt geändert von Talk19zehn am 11.06.2011 11:34, insgesamt 1-mal geändert.
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren.
Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 8179
Registriert: 24.05.2010 08:31
Kontaktdaten:

Re: Überschrift der Portalblöcke bei prosilver mittig anordn

Beitrag von Kirk »

Hallo Talk19zehn

Hab die css Datei so wie du beschrieben hast mal geändert,ist aber nicht das was ich mir vorstelle.
Hab jetzt in der content.css das hier bischen verändert so wird die Überschrift bischen nach rechts gerückt,
damit kann ich leben.

Code: Alles auswählen

li.header dl.icon dt {
	/* Tweak for headers alignment when folder icon used */
	padding-left: 6px;
	padding-right: 69px;
}
Was die Änderrung in der news_compact.html angeht, da im ACP/Portal bei Aktuelle Beiträge
"Antworten" und "Zugriffe" in Extraspalten deaktiviert habe kommt das selber raus wie deine Einstellungen.

Vielen Dank für deine Hilfe
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 5041
Registriert: 08.06.2009 12:03

Re: Überschrift der Portalblöcke bei prosilver mittig anordn

Beitrag von Talk19zehn »

OK, - ja, der Hinweis fehlte vorhin noch. Danke dir---> 8) !!

Ich habe folgende Einstellungen für die aktuellen Beiträge ACP / Mods / Portal /Aktuelle Beiträge

Aktuelle Beiträge Einstellungen

Aktuelle Beiträge anzeigen:
Diesen Block auf dem Portal anzeigen. --> Ja

Kompakter Block-Stil:
Wenn "ja" ausgewählt ist, wird die kompakte Ansicht für die aktuellen Beiträge
angezeigt, bei "nein" die Textansicht. --> Ja

Zeige alle Beiträge dieses Forums:
Auch Wichtige Beiträge. --> Ja

Entsprechende Foren sind ausgewählt.



Man könnte die Kategoriebescheibung ggf. gar in einen separaten DIV legen. Ich denke mal darüber nach.

Nochmalige Grüße


Edit:
Die einfachste Idee, die auszuprobieren wäre, um die Kategorie im Forum zentriert auszugeben: <dt style="text-align:center">

Bitte vgl. in der forumlist_body.html
(hardcodet)

Code: Alles auswählen

<!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW  or forumrow.S_NO_CAT  -->
		 <div class="forabg">
			<div class="inner"><span class="corners-top"><span></span></span>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt style="text-align:center"><!-- IF forumrow.S_IS_CAT --><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a><!-- ELSE -->{L_FORUM}<!-- ENDIF --></dt>
						<dd class="topics">{L_TOPICS}</dd>
						<dd class="posts">{L_POSTS}</dd>
						<dd class="lastpost"><span>{L_LAST_POST}</span></dd>
					</dl>
				</li>
			</ul>
			<ul class="topiclist forums">
	<!-- ENDIF -->

Für das Portal: TEST TEST TEST

portal/_block_config.html

Änderte ich von:

Code: Alles auswählen

<!-- Config for the center blocks //-->
<!-- DEFINE $C_BLOCK_H_L = '<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span><ul class="topiclist"><li class="header"><dl class="icon">' -->	
<!-- DEFINE $C_BLOCK_H_R = '</dl></li></ul>' -->
<!-- DEFINE $C_BLOCK_F_L = '' -->
<!-- DEFINE $C_BLOCK_F_R = '<span class="corners-bottom"><span></span></span></div></div><br style="clear:both" />' -->

.. wie folgt auf: (hardcodet)

Code: Alles auswählen

<!-- Config for the center blocks //-->
<!-- DEFINE $C_BLOCK_H_L = '<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span><ul style="text-align:center; line-height:1.4em; font-size:1.1em; font-weight:bold;"><li style="list-style-type:none;"><dl>' -->	
<!-- DEFINE $C_BLOCK_H_R = '</dl></li></ul>' -->
<!-- DEFINE $C_BLOCK_F_L = '' -->
<!-- DEFINE $C_BLOCK_F_R = '<span class="corners-bottom"><span></span></span></div></div><br style="clear:both" />' -->

Die meines Erachtens betreffenden Bereiche der news_compact.html habe ich erneut ändern müssen.

Zusätzlich auskommentiert:
<!-- <dd class="lastpost" style="width: 25%"><span>{L_LAST_POST}</span></dd> -->

Breite geändert, da FF anders rechnet als ich: style="width: 100%"

Code: Alles auswählen

{$C_BLOCK_H_L}
	<dt <!-- IF S_DISPLAY_NEWS_RVS -->style="width: 100%"<!-- ELSE -->style="width: 60%"<!-- ENDIF -->>{L_LATEST_NEWS}</dt>
	<!-- IF S_DISPLAY_NEWS_RVS -->
		<!-- <dd class="posts" style="width: 11%">{L_REPLIES}</dd>
		<dd class="views" style="width: 11%">{L_VIEWS}</dd> -->
	<!-- ENDIF -->
	<!-- <dd class="lastpost" style="width: 25%"><span>{L_LAST_POST}</span></dd> -->

{$C_BLOCK_H_R}
<ul class="topiclist topics">
<!-- ENDIF -->
	<li class="row<!-- IF news_row.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
		<dl class="icon" style="background-image: url({news_row.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
			<dt style="<!-- IF S_DISPLAY_NEWS_RVS -->width: 58%;<!-- ELSE -->width: 60%;<!-- ENDIF --> <!-- IF news_row.TOPIC_ICON_IMG -->background-image: url({T_ICONS_PATH}{news_row.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{news_row.TOPIC_FOLDER_IMG_ALT}"><!-- IF news_row.S_UNREAD_TOPIC --><a href="{news_row.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><!-- IF news_row.ATTACH_ICON_IMG -->{news_row.ATTACH_ICON_IMG} <!-- ENDIF --><!-- IF news_row.S_POLL --><strong>{L_POLL}: </strong><!-- ENDIF --><a href="{news_row.U_VIEW_COMMENTS}" title="{news_row.TITLE}" class="topictitle">{news_row.TITLE}</a><!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --> &bull; <a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->
				<!-- IF news_row.PAGINATION --><strong class="pagination"><span>{news_row.PAGINATION}</span></strong><!-- ENDIF -->
					<br />{L_POSTED} {L_POST_BY_AUTHOR} {news_row.POSTER_FULL} &raquo; {news_row.TIME}
				<!-- IF news_row.FORUM_NAME -->
					<br />{L_FORUM}: <a href="{news_row.U_VIEWFORUM}" style="font-weight: bold;">{news_row.FORUM_NAME}</a>
				<!-- ENDIF -->
				<!-- IF not S_DISPLAY_NEWS_RVS --><!-- IF news_row.FORUM_NAME -->&bull; <!-- ENDIF -->{L_REPLIES}: <strong>{news_row.REPLIES}</strong>  &bull; {L_VIEWS}: <strong>{news_row.TOPIC_VIEWS}</strong><!-- ENDIF -->
			</dt>
			<!-- IF S_DISPLAY_NEWS_RVS -->
				<!-- <dd class="posts" style="width: 11%">{news_row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
				<dd class="views" style="width: 11%">{news_row.TOPIC_VIEWS} <dfn>{L_VIEWS}</dfn></dd> -->
			<!-- ENDIF -->
			<dd class="lastpost" style="width: 25%"><span><dfn>{L_LAST_POST}</dfn>{L_POST_BY_AUTHOR} {news_row.USERNAME_FULL_LAST} <!-- IF news_row.S_UNREAD_INFO --><a href="{news_row.U_VIEW_UNREAD}">{NEWEST_POST_IMG}</a><!-- ELSE --><a href="{news_row.U_LAST_COMMENTS}">{READ_POST_IMG}</a><!-- ENDIF --><br />
				{news_row.LAST_POST_TIME}</span>
			</dd>
		</dl>
	</li>
Die zuvor gemachten Änderungen habe ich belassen.
Talk19zehn hat geschrieben:Ich hatte in der
Version 1.06
und dort in der news_compact.html geändert = auskommentiert:

Code: Alles auswählen

    <!-- <dd class="posts" style="width: 11%">{L_REPLIES}</dd>
    <dd class="views" style="width: 11%">{L_VIEWS}</dd> -->

Code: Alles auswählen

<!-- <dd class="posts" style="width: 11%">{news_row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
    <dd class="views" style="width: 11%">{news_row.TOPIC_VIEWS} <dfn>{L_VIEWS}</dfn></dd> -->

IE8 und FF OK, denke ich.
Was mir dabei persönlich noch nicht so gefällt, ist der innere Abstand ( oben / unten ) der ausgegebenem Texte. Evtl. muss ich das Line-Hight noch erhöhen.

Hat sonst jemand eine weitere Idee?


LG und Dank
Adventereigniskalender für phpBB 3.3.x,
Meine persönliche Meinung im Jahr 2024: Im Zenit seiner Popularität wirkt KI zunächst wie eine Blaupause und lässt sich aufgrund der Vielschichtigkeit nicht auf eine einzige Botschaft reduzieren.
Antworten

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