Yannick Zipf

Hallo,

die Idee habe ich auch von einer anderen Website. Genutzt habe ich die Bootstrap Cards (https://getbootstrap.com/docs/5.3/components/card/)

<article <?php post_class($post_css_classes." mb-2"); ?> id="post-<?php the_ID(); ?>">
	<a href="<?php echo get_permalink(); ?>" class="card shadow-lg">
		<div class="card-front">
			<?php if(has_post_thumbnail()) { ?>
		  		<figure class="mb-0">
					<div class="card-img" style="background-image:url(<?php the_post_thumbnail_url("medium_large"); ?>);"></div>
				</figure>
		  	<?php } ?>
			<div class="card-body">
				<small class="text-uppercase"><?php echo get_the_date(); ?></small>
				<?php 
					the_title( '<h3 class="card-title">', '</h3>' ); 
					if(!has_post_thumbnail()) {
						echo get_the_content('');
					}
				?>
			</div>
			<span class="sr-only sr-only-focusable">Weiterlesen</span>
		</div>
		<div class="card-back">
			<div class="card-body">
				<?php the_title( '<h3>', '</h3>' ); ?>
				<?php echo get_the_content(''); ?>
			</div>
			<div class="card-footer">
				<i class="fas fa-arrow-right"></i>
			</div>
		</div>
   	</a>
</article>

Folgendes CSS:

.card-back {
position:absolute;
top:0;
width:100%;
height:100%;
transform:translate(-100.5%,0);
transition:transform 0.4s ease-in-out;
color:$light;
}
article .card-back {
background:$dark;
}
.card-back:hover,
.card-front:hover + .card-back {
transform:translate(0,0);
}
.card-front {
flex-grow:1;
background:$light;
color:$dark;
figure {
width:100%;
padding-bottom:67%;
overflow:hidden;
position:relative;
div.card-img {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background-repeat: no-repeat;
background-size:cover;
background-position: center center;
}
}
}
.card {
overflow:hidden;
height:100%;
color:$body-color;
.card-title {
margin-bottom:0;
}
}
.card:hover {
text-decoration: none;
color:$body-color;
}
.card-footer {
background-color:transparent;
position:absolute;
bottom:0;
i {
font-size:25pt;
}
}

Mit ein bisschen Reverse Engineering kriegst du das bestimmt zum Laufen.

Viele Grü?e
Yannick

Hallo @guenniun ,

auf die Schnelle kann ich folgendes liefern.

N?chste Spiele:

• .rh4a-next-match-wrapper (div): Wrapper, in dem alle n?chsten Spiele enthalten sind
• .rh4a-next-match (div): enth?lt ein n?chstes Spiel
• .rh4a-next-match-class (span): Liga des n?chsten Spiels
• .rh4a-next-match-datetime (span): Datum und Uhrzeit des n?chsten Spiels
• .rh4a-next-match-clubs (span): Spielpaarung des n?chsten Spiels
• .rh4a-next-match-location (span): Halle und Adresse des n?chsten Spiels

Tabelle:

• .rh4a-standing (table): Tabelle (im wahrsten Sinne des Wortes)
• .rh4a-own-team-row (tr): Zeile, die das eigene Team enth?lt

Spielplan:

• .rh4a-timetable (table): Spielplan
• .rh4a-own-team-row (tr): Zeile, die das eigene Team enth?lt
• .rh4a-own-team-span (span): Name des eigenen Teams
• .rh4a-location-wrapper (div): Wrapper für die Halle und Adresse des Spiels (enth?lt das Icon und das Popover)
• .rh4a-location-icon (span): Location-Icon
• .rh4a-location-popover (div): Wrapper für Popover
• .rh4a-location-name (span): Name der Halle

Ich hoffe, das hilft.

Viele Grü?e
Yannick

Hi,

ja genau, du würdest den Code, den Du erg?nzt hast, einfach in den Custom CSS Teil kopieren, damit er beim n?chsten Update des Plugins nicht überschrieben wird.

Vielen Dank für Deine Positive Bewertung!

Hi, vielen Dank für das Lob (ich freue mich immer über eine positive Bewertung :)).

Zu Deiner Frage: Wie ich sehe, kennst Du Dich ein bisschen im CSS aus. Damit kriegst Du die Tabelle responsive. Ich halte mich dabei an die Implementierung von Boostrap:
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;

Die Tabellen erreichst Du über die Selektoren:
Spielplan: .rh4a-timetable
Tabelle: .rh4a-standing

Das ganze dann noch verpackt in die für deine Website passenden Media Queries und schon sollte das auch mobil ordentlich aussehen.

Wenn Du weitere Infos oder Unterstützung brauchst, gerne melden.

Ansonsten würde ich Dir noch empfehlen, die CSS-Anpassungen, die Du bisher gemacht hast, nicht direkt im Plugin CSS zu machen, sondern über den WordPress Customizer im Bereich Custrom CSS hinzuzufügen. Das hat den Vorteil, dass Deine Anpassungen im Plugin CSS beim n?chsten Update des Plugins nicht überschrieben werden.

Hi, sorry für die sp?te Antwort, ich habe garnicht mitbekommen, dass hier Fragen gestellt werden.

Das mit den Spaltenüberschriften bei den Spielpl?nen ist eine gute Idee, das werde ich als Feature bringen. Leider geht das in der aktuellen Version noch nicht.

Hi and sorry for the late reply. Unfortunately I don’t get emails when there’s a new support request.

I checked the team ID and your website and from my point of view, it seems that everything is fine here. The matches are shown on your website.

There’s one hint: A match is only shown if it has a date AND a time. Sometimes, in an early stage of the season, matches are only entered with a date, but not with a time. I use the time to verify that the match actually happens and is not postponed or canceled completely. That’s why probably the matches weren’t shown some weeks ago, but now are.

Please let me know if I can help you with anything else.

Hi thavilang, you are right. That’s not possible and that’s not what the plugin is meant for. You can use it to create an additional role and not enhance an existing role like the editor. A good feature request though. Thank you.