Postbuttons immer (!) zusammengefasst

[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

[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

[Nico12345]

Das ist schon mal nicht verkehrt, ich werde es mal ausprobieren.

[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.

[Nico12345]

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.

[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

[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!

[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ß