phpBB.de

phpBB.de - Die deutsche phpBB-Community
https://www.phpbb.de/community/

Postbuttons immer (!) zusammengefasst

https://www.phpbb.de/community/viewtopic.php?t=232564

Seite 1 von 1

Postbuttons immer (!) zusammengefasst

Verfasst: 30.10.2014 19:22
von Nico12345
Hallo zusammen,

ich habe meinen Style, der auf Prosilver aufbaut bereits etwas bearbeitet.
Eine Sache, die ich gerne noch ändern möchte bereitet mir Schwierigkeiten.

Ich möchte, dass die Postbuttons (Zitieren, Bearbeiten, ...) immer zusammengefasst sind.
Normalerweise sind sie das nur, auf Mobilen Geräten.

Könnt Ihr mir sagen wo ich das ändern kann?

Gemeint sind diese Buttons (oben) und der untere ist die "Zusammenfassung": [ externes Bild ]

Viele Grüße

Re: Postbuttons immer (!) zusammengefasst

Verfasst: 01.11.2014 10:35
von Lehrling
Hallo,
die Sache ist nicht so einfach. Ich habe bis jetzt auch nicht rausbekommen, wie man es schafft, dass dieses Dropdown-Menü auch in der nicht-responsiven Ansicht erscheint.
Aber nach etwas Basteln habe ich dieses Dropdown-Menü hingekriegt (im Style prosilver). Ist jetzt nicht ganz das, wonach du suchst, aber vielleicht gefällt es ja doch dem ein oder anderen.
Und so würde es dann aussehen:
[ externes Bild ]
Finde in der viewtopic_body.html diese Stelle

Code: Alles auswählen

<!-- IF not S_IS_BOT -->
			<!-- IF postrow.U_EDIT or postrow.U_DELETE or postrow.U_REPORT or postrow.U_WARN or postrow.U_INFO or postrow.U_QUOTE -->
				<ul class="post-buttons">
					<!-- EVENT viewtopic_body_post_buttons_before -->
					<!-- IF postrow.U_EDIT -->
						<li>
							<a href="{postrow.U_EDIT}" title="{L_EDIT_POST}" class="button icon-button edit-icon"><span>{L_BUTTON_EDIT}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_DELETE -->
						<li>
							<a href="{postrow.U_DELETE}" title="{L_DELETE_POST}" class="button icon-button delete-icon"><span>{L_DELETE_POST}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_REPORT -->
						<li>
							<a href="{postrow.U_REPORT}" title="{L_REPORT_POST}" class="button icon-button report-icon"><span>{L_REPORT_POST}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_WARN -->
						<li>
							<a href="{postrow.U_WARN}" title="{L_WARN_USER}" class="button icon-button warn-icon"><span>{L_WARN_USER}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_INFO -->
						<li>
							<a href="{postrow.U_INFO}" title="{L_INFORMATION}" class="button icon-button info-icon"><span>{L_INFORMATION}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_QUOTE -->
						<li>
							<a href="{postrow.U_QUOTE}" title="{L_REPLY_WITH_QUOTE}" class="button icon-button quote-icon"><span>{L_QUOTE}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- EVENT viewtopic_body_post_buttons_after -->
				</ul>
			<!-- ENDIF -->
		<!-- ENDIF -->
und ersetze sie mit

Code: Alles auswählen

	<!-- IF not S_IS_BOT -->				
		<!-- IF postrow.U_EDIT or postrow.U_DELETE or postrow.U_REPORT or postrow.U_WARN or postrow.U_INFO or postrow.U_QUOTE -->
				<ul class="post-buttons">
				<!-- EVENT viewtopic_body_post_buttons_before -->
		<div class="dropdown-container dropdown-button-control topic-tools">
		<span title="{L_TOPIC_TOOLS}" class="button icon-button tools-icon dropdown-trigger dropdown-select"></span>
		<div class="dropdown hidden">
			<div class="pointer"><div class="pointer-inner"></div></div>
			<ul class="dropdown-contents">	
			<!-- IF postrow.U_EDIT -->
						<li>
							<a href="{postrow.U_EDIT}" title="{L_EDIT_POST}" class="button icon-button edit-icon"><span>{L_BUTTON_EDIT}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_DELETE -->
						<li>
							<a href="{postrow.U_DELETE}" title="{L_DELETE_POST}" class="button icon-button delete-icon"><span>{L_DELETE_POST}</span></a>
						</li>
					<!-- ENDIF -->
					
					<!-- IF postrow.U_REPORT -->
						<li>
							<a href="{postrow.U_REPORT}" title="{L_REPORT_POST}" class="button icon-button report-icon"><span>{L_REPORT_POST}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_WARN -->
						<li>
							<a href="{postrow.U_WARN}" title="{L_WARN_USER}" class="button icon-button warn-icon"><span>{L_WARN_USER}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_INFO -->
						<li>
							<a href="{postrow.U_INFO}" title="{L_INFORMATION}" class="button icon-button info-icon"><span>{L_INFORMATION}</span></a>
						</li>
					<!-- ENDIF -->
					<!-- IF postrow.U_QUOTE -->
						<li>
							<a href="{postrow.U_QUOTE}" title="{L_REPLY_WITH_QUOTE}" class="button icon-button quote-icon"><span>{L_QUOTE}</span></a>
						</li>
					<!-- ENDIF -->		
						</ul>
		</div>
	</div><!-- EVENT viewtopic_body_post_buttons_after --></ul><!-- ENDIF --><!-- ENDIF -->
Dann öffnest du das buttons.css und suchst nach

Code: Alles auswählen

.post-buttons .icon-button {
	padding: 0 5px;
Du änderst den Wert für padding um in 10 12px;
Danach den Cache leeren.
LG Beate

Re: Postbuttons immer (!) zusammengefasst

Verfasst: 01.11.2014 11:57
von Nico12345
Das ist schon mal nicht verkehrt, ich werde es mal ausprobieren.

Re: Postbuttons immer (!) zusammengefasst

Verfasst: 01.11.2014 17:06
von Dr.Death
Hat vielleicht nicht direkt mit diesem Thema zu tun, aber mit den folgenden CSS Klassen könnte man etwas testen:

class="responsive-show-inline-block"
class="responsive-hide"

Damit lasse ich bestimmte Blöcke in meine F1 Mod "verschwinden".....falls es auf reinem Mobilen Gerät verwendet wird.

Re: Postbuttons immer (!) zusammengefasst

Verfasst: 10.11.2014 18:27
von Nico12345
Dr.Death hat geschrieben:Hat vielleicht nicht direkt mit diesem Thema zu tun, aber mit den folgenden CSS Klassen könnte man etwas testen:

class="responsive-show-inline-block"
class="responsive-hide"

Damit lasse ich bestimmte Blöcke in meine F1 Mod "verschwinden".....falls es auf reinem Mobilen Gerät verwendet wird.
Kann man auch bestimmte Dinge nur auf mobilen Geräten einblenden? Ich habe es mit class="responsiv-show" versucht. Jedoch ohne Erfolg, der Inhalt ist immer sichtbar.

Re: Postbuttons immer (!) zusammengefasst

Verfasst: 11.11.2014 15:49
von HabNurNeFrage
Hi,

diese responsiven CSS-Klassen greifen ja nur bei Bildschirmauflösungen kleiner xx Pixel.

Um Inhalte nur für kleine Bildschirme anzubieten, schreibe Dir selbst ein paar CSS Regeln wie folgt.

Beispiel Anzeige verborgen für Bildschirme über 500 Pixel:

Code: Alles auswählen

@media only screen and (min-width : 500px) {
    .meine_css_klasse { display: none; }
}
Alle Elemente, die Du fortan mit class="meine_css_klasse" ausstattest, werden über 500 Pixel Bildschirmbreite ausgeblendet.

LG

PS: Infos zum Thema: http://wiki.selfhtml.org/wiki/CSS/Media_Queries

Re: Postbuttons immer (!) zusammengefasst

Verfasst: 11.11.2014 19:07
von Nico12345
Hallo,

leider scheint es nicht zu funktionieren.

In der Datei viewtopic_body.html steht:

Code: Alles auswählen

<div class="ad">
   {L_PP_AD_RESP}
</div>
In der Datei responsiv.css steht:

Code: Alles auswählen

@media only screen and (min-width: 500px) {
    .ad { display: none; }
}
Ergebnis: Der Text wird immer dargestellt.

Nachtrag: Ich sehe gerade, dass der Text nur in einem Bereich nicht angezeigt wird. Und zwar, wenn das prosilver beginnt eckig zu werden. Dann wird der Text nicht gezeigt. Ziehe ich das Browserfenster noch kleiner erscheint er wieder (wohl ab 500px). Also ist das Problem, dass der Text wieder erscheint, sobald prosilver rund wird. Ich hoffe es ist klar was ich meine.

Nachtrag 2: Okay scheinbar hat die responsiv.css keine Wirkung auf diese html Datei. Wenn ich den Code in die common.css einfüge klappt es. Danke für Eure/Deine Hilfe!

Re: @media only screen and (max-width: 500px) ...

Verfasst: 11.11.2014 20:04
von Talk19zehn
Hi, können wir davon ausgehen, dass du dein Auszeichnung im HEAD, vgl. overall_header.html, vollzogen hast?

Dein CSS hast du also als Standard aufgenommen: Beispielsweise in der common.css am Ende.

Code: Alles auswählen

.ad {
	color: #ffffff;
	font-weight: bold;
	font-size: 1.4em;
}

In der responsive.css ist die Begrenzung auf maximal 500px bereits vorhanden: *) @media only screen and (max-width: 500px), only screen and (max-device-width: 500px) { hier folgt der Inhalt usw. ... (...)...

*) Suche am Ende (Prosilver-Standard 3.1.1) der Notation:

Code: Alles auswählen

	.captcha-panel .recaptcha-responsive {
		display: inline-block !important;
		margin-top: 10px;
		vertical-align: middle;
	}
}
und füge am ENDE vor (!)

Code: Alles auswählen

}
ein:

Code: Alles auswählen

	.ad {
	display: none;
	}

Teste es bitte einmal. Es sollte m.E. funktionieren. Achte bitte auf die genaue Positionierung beim Einfügen.

Gruß
Alle Zeiten sind UTC+02:00
Seite 1 von 1

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de