Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 903333cac3 | |||
| 446e08dc91 | |||
| 231cf8fc6c | |||
| 2f93e98220 | |||
| 43f19e926a | |||
| 41e46b8804 |
@@ -1,229 +1,276 @@
|
|||||||
/* Minecraft Modern Theme Login Styles */
|
/* Minecraft Modern Theme Login & Registrierungs-Styles */
|
||||||
body.login {
|
body.login, body.login-action-register {
|
||||||
background-color: #14151a; /* Fallback-Farbe */
|
background-color: #14151a; /* Fallback-Farbe */
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
font-family: 'Raleway', sans-serif;
|
font-family: 'Raleway', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dunkler Overlay für bessere Lesbarkeit */
|
/* Dunkler Overlay für bessere Lesbarkeit */
|
||||||
body.login::before {
|
body.login::before, body.login-action-register::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(20, 21, 26, 0.8);
|
background: rgba(20, 21, 26, 0.8);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logo zentrieren */
|
/* Logo zentrieren */
|
||||||
.login h1 {
|
body.login h1, body.login-action-register h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 50px; /* ANGEPASST: Mehr Abstand für das größere Logo */
|
margin-bottom: 50px;
|
||||||
}
|
}
|
||||||
.login h1 a {
|
body.login h1 a, body.login-action-register h1 a {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 160px; /* ANGEPASST: Logo ist jetzt doppelt so groß */
|
height: 160px;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Haupt-Container, der alles umschließt */
|
/* Haupt-Container, der alles umschließt */
|
||||||
#login {
|
body.login #login, body.login-action-register #login {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: none;
|
background: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* NEU: Der Wrapper, der vom Skript erstellt wird. Dies ist unsere "Tabelle". */
|
/* Der Wrapper, der vom Skript erstellt wird. */
|
||||||
#login-content-wrapper {
|
body.login #login-content-wrapper, body.login-action-register #login-content-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch; /* Sorgt dafür, dass beide Spalten die gleiche Höhe haben */
|
align-items: stretch;
|
||||||
background-color: #252830;
|
background-color: #252830;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||||
overflow: hidden; /* Sorgt für abgerundete Ecken an den Kind-Elementen */
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Linke Spalte: Minecraft Avatar Slider (27.8%) */
|
/* Linke Spalte: Minecraft Avatar Slider (27.8%) */
|
||||||
#minecraft-avatar-slider {
|
body.login #minecraft-avatar-slider, body.login-action-register #minecraft-avatar-slider {
|
||||||
flex: 0 0 27.8%; /* Feste Breite, wächst nicht, schrumpft nicht */
|
flex: 0 0 27.8%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
padding-top: 50px; /* ANGEPASST: Erzeugt den Raum, in den die Avatare verschoben werden */
|
padding-top: 50px;
|
||||||
background-color: #1a1c23; /* Leicht anderer Hintergrund für Kontrast */
|
background-color: #1a1c23;
|
||||||
height: auto; /* Höhe anpassen, damit sie nicht fest ist */
|
height: auto;
|
||||||
position: relative; /* Wichtig für den Slider */
|
position: relative;
|
||||||
overflow: hidden; /* Verhindert, dass Bilder überstehen */
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#minecraft-avatar-slider .avatar-slide {
|
body.login #minecraft-avatar-slider .avatar-slide, body.login-action-register #minecraft-avatar-slider .avatar-slide {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto; /* Seitenverhältnis beibehalten */
|
height: auto;
|
||||||
max-height: 400px; /* Maximale Höhe des Avatars, damit er nicht zu groß wird */
|
max-height: 400px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
position: absolute;
|
||||||
/* Slider-spezifische Stile */
|
top: 25px;
|
||||||
position: absolute;
|
left: 0;
|
||||||
top: 25px; /* KORRIGIERT: Verschiebt alle Avatare um 50px nach unten */
|
opacity: 0;
|
||||||
left: 0;
|
transition: opacity 0.7s ease-in-out;
|
||||||
opacity: 0;
|
}
|
||||||
transition: opacity 0.7s ease-in-out;
|
|
||||||
}
|
body.login #minecraft-avatar-slider .avatar-slide-active, body.login-action-register #minecraft-avatar-slider .avatar-slide-active {
|
||||||
|
opacity: 1;
|
||||||
#minecraft-avatar-slider .avatar-slide-active {
|
}
|
||||||
opacity: 1;
|
|
||||||
}
|
/* Rechte Spalte: Login/Registrierungs-Formular (72.2%) */
|
||||||
|
body.login #loginform, body.login-action-register #registerform, body.login #loginform, body.login-action-register #registerform {
|
||||||
/* Rechte Spalte: Login-Formular (72.2%) */
|
flex: 1;
|
||||||
#loginform {
|
padding: 40px;
|
||||||
flex: 1; /* Nimmt den restlichen verfügbaren Platz ein */
|
background: none;
|
||||||
padding: 40px;
|
border: none;
|
||||||
background: none;
|
box-shadow: none;
|
||||||
border: none;
|
}
|
||||||
box-shadow: none;
|
|
||||||
}
|
/* Formular-Felder */
|
||||||
|
body.login #loginform p, body.login-action-register #registerform p,
|
||||||
/* Formular-Felder */
|
body.login #loginform label, body.login-action-register #registerform label {
|
||||||
#loginform p {
|
margin-bottom: 20px;
|
||||||
margin-bottom: 20px;
|
color: #e4e4e4;
|
||||||
}
|
font-weight: 600;
|
||||||
|
display: block;
|
||||||
#loginform label {
|
margin-bottom: 8px;
|
||||||
color: #e4e4e4;
|
}
|
||||||
font-weight: 600;
|
|
||||||
display: block;
|
body.login #loginform input[type="text"], body.login #loginform input[type="password"], body.login-action-register #registerform input[type="text"], body.login-action-register #registerform input[type="password"], body.login #loginform input[type="email"], body.login-action-register #registerform input[type="email"] {
|
||||||
margin-bottom: 8px;
|
width: 100%;
|
||||||
}
|
padding: 14px;
|
||||||
|
background-color: #1e2029;
|
||||||
#loginform input[type="text"],
|
border: 1px solid #333;
|
||||||
#loginform input[type="password"] {
|
border-radius: 4px;
|
||||||
width: 100%;
|
color: #e4e4e4;
|
||||||
padding: 14px;
|
font-family: 'Raleway', sans-serif;
|
||||||
background-color: #1e2029;
|
font-size: 16px;
|
||||||
border: 1px solid #333;
|
transition: border-color 0.3s, box-shadow 0.3s;
|
||||||
border-radius: 4px;
|
}
|
||||||
color: #e4e4e4;
|
|
||||||
font-family: 'Raleway', sans-serif;
|
body.login #loginform input[type="text"]:focus, body.login #loginform input[type="password"]:focus, body.login-action-register #registerform input[type="text"]:focus, body.login-action-register #registerform input[type="password"]:focus, body.login-action-register #registerform input[type="email"]:focus {
|
||||||
font-size: 16px;
|
border-color: #00d4ff;
|
||||||
transition: border-color 0.3s, box-shadow 0.3s;
|
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
|
||||||
}
|
outline: none;
|
||||||
|
}
|
||||||
#loginform input[type="text"]:focus,
|
|
||||||
#loginform input[type="password"]:focus {
|
/* "Angemeldet bleiben" Checkbox (nur Login) */
|
||||||
border-color: #00d4ff;
|
body.login .forgetmenot label, body.login .forgetmenot input[type="checkbox"] {
|
||||||
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
|
font-weight: 400;
|
||||||
outline: none;
|
font-size: 14px;
|
||||||
}
|
color: #a0a0a0;
|
||||||
|
display: flex;
|
||||||
/* Container für "Angemeldet bleiben" und "Passwort vergessen" */
|
align-items: center;
|
||||||
.login-options-container {
|
}
|
||||||
display: flex;
|
body.login .forgetmenot input[type="checkbox"] {
|
||||||
justify-content: space-between;
|
margin-right: 8px;
|
||||||
align-items: center;
|
}
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
/* NEU: Stile für die Registrierungsseite */
|
||||||
|
.auth-title {
|
||||||
.login-options-container .forgetmenot,
|
text-align: center;
|
||||||
.login-options-container #nav {
|
color: #e4e4e4;
|
||||||
margin: 0; /* Entfernt Standard-Abstände */
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
.auth-subtitle {
|
||||||
.forgetmenot label {
|
text-align: center;
|
||||||
font-weight: 400;
|
color: #a0a0a0;
|
||||||
font-size: 14px;
|
margin-bottom: 40px;
|
||||||
color: #a0a0a0;
|
}
|
||||||
display: flex;
|
.login-form-link {
|
||||||
align-items: center;
|
text-align: center;
|
||||||
}
|
margin-top: 30px;
|
||||||
.forgetmenot input[type="checkbox"] {
|
}
|
||||||
margin-right: 8px;
|
.login-form-link p {
|
||||||
}
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
.login-options-container #nav a {
|
.login-form-link a {
|
||||||
color: #a0a0a0;
|
color: #00d4ff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
}
|
||||||
transition: color 0.2s;
|
.login-form-link a:hover {
|
||||||
}
|
color: #fff;
|
||||||
.login-options-container #nav a:hover {
|
}
|
||||||
color: #00d4ff;
|
.logged-in-message {
|
||||||
}
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
/* Submit-Button */
|
background-color: #252830;
|
||||||
#loginform .submit input[type="submit"] {
|
border-radius: 8px;
|
||||||
width: 100%;
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||||
padding: 14px;
|
}
|
||||||
background-color: #00d4ff;
|
.logged-in-message h2 {
|
||||||
border: none;
|
margin-top: 0;
|
||||||
border-radius: 4px;
|
color: #00d4ff;
|
||||||
color: #fff;
|
}
|
||||||
font-family: 'Raleway', sans-serif;
|
.logged-in-message .button {
|
||||||
font-weight: 600;
|
display: inline-block;
|
||||||
font-size: 16px;
|
margin: 10px;
|
||||||
cursor: pointer;
|
padding: 12px 25px;
|
||||||
transition: background-color 0.3s;
|
background-color: #00d4ff;
|
||||||
}
|
color: #fff;
|
||||||
#loginform .submit input[type="submit"]:hover {
|
text-decoration: none;
|
||||||
background-color: #00a8cc;
|
border-radius: 4px;
|
||||||
}
|
font-weight: 600;
|
||||||
|
transition: background-color 0.3s;
|
||||||
/* Anpassungen für kleinere Bildschirme */
|
}
|
||||||
@media screen and (max-width: 768px) {
|
.logged-in-message .button:hover {
|
||||||
#login-content-wrapper {
|
background-color: #00a8cc;
|
||||||
flex-direction: column; /* Spalten untereinander */
|
}
|
||||||
}
|
|
||||||
#minecraft-avatar-slider {
|
/* Container für "Angemeldet bleiben" und "Passwort vergessen" (nur Login) */
|
||||||
flex: none; /* Setzt Flexbox zurück */
|
body.login .login-options-container {
|
||||||
width: 100%;
|
display: flex;
|
||||||
padding: 30px; /* Padding wird zurückgesetzt */
|
justify-content: space-between;
|
||||||
padding-top: 30px; /* Padding oben auch auf mobilen Geräten anpassen */
|
align-items: center;
|
||||||
}
|
margin-bottom: 25px;
|
||||||
#minecraft-avatar-slider .avatar-slide {
|
}
|
||||||
max-height: 300px; /* Auf mobilen Geräten etwas kleiner */
|
|
||||||
max-width: 200px; /* Und auch schmaler */
|
body.login .login-options-container .forgetmenot,
|
||||||
top: 30px; /* WICHTIG: Auch hier den top-Wert anpassen! */
|
body.login .login-options-container #nav {
|
||||||
}
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fehlermeldungen und Hinweise */
|
body.login .login-options-container #nav a {
|
||||||
.login .message, .login #login_error {
|
color: #a0a0a0;
|
||||||
background-color: rgba(0, 212, 255, 0.1);
|
text-decoration: none;
|
||||||
border-left: 4px solid #00d4ff;
|
font-weight: 400;
|
||||||
padding: 15px;
|
font-size: 14px;
|
||||||
margin-bottom: 20px;
|
transition: color 0.2s;
|
||||||
border-radius: 0 4px 4px 0;
|
}
|
||||||
color: #e4e4e4;
|
body.login .login-options-container #nav a:hover {
|
||||||
}
|
color: #00d4ff;
|
||||||
|
}
|
||||||
/* =========================================================================
|
|
||||||
=== NEU: STIL FÜR DIE LINKS UNTER DEM ANMELDE-BUTTON ====================
|
/* Submit-Button (gilt für Login & Registrierung) */
|
||||||
========================================================================= */
|
body.login #loginform .submit input[type="submit"], body.login-action-register #registerform .submit input[type="submit"] {
|
||||||
|
width: 100%;
|
||||||
.post-login-links {
|
padding: 14px;
|
||||||
display: flex;
|
background-color: #00d4ff;
|
||||||
justify-content: space-between; /* Verteilt die Links auf die ganze Breite */
|
border: none;
|
||||||
align-items: center;
|
border-radius: 4px;
|
||||||
margin-top: 15px;
|
color: #fff;
|
||||||
padding-top: 15px;
|
font-family: 'Raleway', sans-serif;
|
||||||
border-top: 1px solid #333; /* Trennlinie über den Links */
|
font-weight: 600;
|
||||||
}
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
.post-login-links a {
|
transition: background-color 0.3s;
|
||||||
color: #a0a0a0;
|
}
|
||||||
text-decoration: none;
|
body.login #loginform .submit input[type="submit"]:hover, body.login-action-register #registerform .submit input[type="submit"]:hover {
|
||||||
font-size: 14px;
|
background-color: #00a8cc;
|
||||||
transition: color 0.2s ease;
|
}
|
||||||
}
|
|
||||||
|
/* Anpassungen für kleinere Bildschirme */
|
||||||
.post-login-links a:hover {
|
@media screen and (max-width: 768px) {
|
||||||
color: #00d4ff;
|
body.login #login-content-wrapper, body.login-action-register #login-content-wrapper {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
body.login #minecraft-avatar-slider, body.login-action-register #minecraft-avatar-slider {
|
||||||
|
flex: none;
|
||||||
|
width: 100%;
|
||||||
|
padding: 30px;
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
body.login #minecraft-avatar-slider .avatar-slide, body.login-action-register #minecraft-avatar-slider .avatar-slide {
|
||||||
|
max-height: 300px;
|
||||||
|
max-width: 200px;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fehlermeldungen und Hinweise */
|
||||||
|
body.login .message, body.login #login_error, body.login-action-register .message, body.login-action-register #login_error {
|
||||||
|
background-color: rgba(0, 212, 255, 0.1);
|
||||||
|
border-left: 4px solid #00d4ff;
|
||||||
|
padding: 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
color: #e4e4e4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================================================
|
||||||
|
=== STIL FÜR DIE LINKS UNTER DEM ANMELDE-BUTTON ====================
|
||||||
|
========================================================================= */
|
||||||
|
|
||||||
|
body.login .post-login-links, body.login-action-register .post-login-links {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding-top: 15px;
|
||||||
|
border-top: 1px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.login .post-login-links a, body.login-action-register .post-login-links a {
|
||||||
|
color: #a0a0a0;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.login .post-login-links a:hover, body.login-action-register .post-login-links a:hover {
|
||||||
|
color: #00d4ff;
|
||||||
}
|
}
|
||||||
@@ -85,22 +85,9 @@ function minecraft_modern_customize_register( $wp_customize ) {
|
|||||||
) );
|
) );
|
||||||
|
|
||||||
// =========================================================================
|
// =========================================================================
|
||||||
// === NEU: Slider-Effekt-Einstellungen ===================================
|
// === ENTFERNT: Slider-Effekt-Einstellungen ==============================
|
||||||
// =========================================================================
|
// =========================================================================
|
||||||
|
|
||||||
$wp_customize->add_setting( 'slider_effect', array( 'default' => 'fade', 'sanitize_callback' => 'sanitize_key' ) );
|
|
||||||
$wp_customize->add_control( 'slider_effect', array(
|
|
||||||
'label' => 'Slider-Effekt', 'section' => 'header_slider', 'settings' => 'slider_effect', 'type' => 'select',
|
|
||||||
'choices' => array( 'slide' => 'Horizontales Gleiten', 'fade' => 'Überblenden', 'cube' => 'Würfel-Effekt' ),
|
|
||||||
) );
|
|
||||||
|
|
||||||
$wp_customize->add_setting( 'slider_direction', array( 'default' => 'horizontal', 'sanitize_callback' => 'sanitize_key' ) );
|
|
||||||
$wp_customize->add_control( 'slider_direction', array(
|
|
||||||
'label' => 'Slider-Richtung (nur für "Gleiten")', 'section' => 'header_slider', 'settings' => 'slider_direction', 'type' => 'select',
|
|
||||||
'choices' => array( 'horizontal' => 'Horizontal', 'vertical' => 'Vertikal' ),
|
|
||||||
) );
|
|
||||||
|
|
||||||
|
|
||||||
// --- Sektion: Startseiten-Hero (Fallback) ---
|
// --- Sektion: Startseiten-Hero (Fallback) ---
|
||||||
$wp_customize->add_section( 'hero_section', array(
|
$wp_customize->add_section( 'hero_section', array(
|
||||||
'title' => 'Startseiten-Hero (wenn Slider deaktiviert)',
|
'title' => 'Startseiten-Hero (wenn Slider deaktiviert)',
|
||||||
|
|||||||
@@ -1,65 +1,52 @@
|
|||||||
<!DOCTYPE html>
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
<html <?php language_attributes(); ?>>
|
// Hole den Slider-Container
|
||||||
<head>
|
const heroSlider = document.querySelector('.hero-slider');
|
||||||
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
||||||
<?php wp_head(); ?>
|
|
||||||
</head>
|
|
||||||
<body <?php body_class(); ?>>
|
|
||||||
<header id="masthead" class="site-header">
|
|
||||||
<div class="container">
|
|
||||||
<div class="header-main">
|
|
||||||
<div class="site-branding">
|
|
||||||
<?php
|
|
||||||
if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {
|
|
||||||
the_custom_logo();
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
<?php
|
|
||||||
|
|
||||||
if ( is_front_page() && is_home() ) :
|
// Stelle sicher, dass der Slider auf der Seite existiert
|
||||||
?>
|
if (!heroSlider) {
|
||||||
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
|
return;
|
||||||
<?php else : ?>
|
|
||||||
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
|
||||||
<nav id="site-navigation" class="main-navigation">
|
|
||||||
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false ) ); ?>
|
|
||||||
</nav>
|
|
||||||
<div class="header-info">
|
|
||||||
<div class="social-links">
|
|
||||||
<?php
|
|
||||||
// Array mit den Social-Media-Plattformen und ihren Font Awesome Klassen
|
|
||||||
$social_icons = array(
|
|
||||||
'discord' => 'fab fa-discord',
|
|
||||||
'youtube' => 'fab fa-youtube',
|
|
||||||
'twitter' => 'fab fa-x-twitter', // Neues Icon für Twitter/X
|
|
||||||
'facebook' => 'fab fa-facebook-f',
|
|
||||||
'instagram' => 'fab fa-instagram',
|
|
||||||
'tiktok' => 'fab fa-tiktok',
|
|
||||||
'twitch' => 'fab fa-twitch',
|
|
||||||
'steam' => 'fab fa-steam',
|
|
||||||
'github' => 'fab fa-github',
|
|
||||||
'linkedin' => 'fab fa-linkedin-in',
|
|
||||||
'pinterest' => 'fab fa-pinterest-p',
|
|
||||||
'reddit' => 'fab fa-reddit-alien',
|
|
||||||
'teamspeak' => 'fab fa-teamspeak',
|
|
||||||
'spotify' => 'fab fa-spotify'
|
|
||||||
);
|
|
||||||
|
|
||||||
// Schleife, die alle verfügbaren Icons durchgeht
|
|
||||||
foreach ($social_icons as $key => $class) {
|
|
||||||
// Prüfen, ob für diese Plattform eine URL im Customizer hinterlegt wurde
|
|
||||||
if (get_theme_mod('social_' . $key)) {
|
|
||||||
// Wenn ja, Link und Icon ausgeben
|
|
||||||
echo '<a href="' . esc_url(get_theme_mod('social_' . $key)) . '" target="_blank"><i class="' . esc_attr($class) . '"></i></a>';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
?>
|
|
||||||
</div>
|
// Konfiguration für den Slider vorbereiten
|
||||||
</div>
|
const swiperConfig = {
|
||||||
</div>
|
// Der Effekt ist jetzt fest auf "Überblenden" eingestellt
|
||||||
</div>
|
effect: 'fade',
|
||||||
</header>
|
fadeEffect: {
|
||||||
|
crossFade: true
|
||||||
|
},
|
||||||
|
|
||||||
|
// Loop-Einstellung ist jetzt DYNAMISCH
|
||||||
|
loop: sliderSettings.loop === '1',
|
||||||
|
|
||||||
|
// Autoplay
|
||||||
|
autoplay: {
|
||||||
|
delay: 5000,
|
||||||
|
disableOnInteraction: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
pauseOnMouseEnter: true,
|
||||||
|
|
||||||
|
// Prüfe, ob die Pfeile NICHT ausgeblendet werden sollen
|
||||||
|
navigation: sliderSettings.hideArrows !== '1' ? {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
} : false,
|
||||||
|
|
||||||
|
// Prüfe, ob die Paginierung NICHT ausgeblendet werden soll
|
||||||
|
pagination: sliderSettings.hidePagination !== '1' ? {
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
clickable: true,
|
||||||
|
} : false,
|
||||||
|
|
||||||
|
on: {
|
||||||
|
init: function () {
|
||||||
|
setTimeout(() => {
|
||||||
|
heroSlider.classList.add('swiper-initialized');
|
||||||
|
}, 50);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialisiere den Slider mit der konfigurierten Optionen
|
||||||
|
new Swiper('.hero-slider', swiperConfig);
|
||||||
|
});
|
||||||
@@ -1,208 +1,84 @@
|
|||||||
<?php
|
<?php
|
||||||
/*
|
/*
|
||||||
Template Name: Minecraft Modern Theme
|
Template Name: Benutzerdefinierte Authentifizierungsseite
|
||||||
*/
|
*/
|
||||||
|
|
||||||
get_header(); ?>
|
get_header(); ?>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div id="primary" class="content-area">
|
<div id="primary" class="content-area">
|
||||||
<main id="main" class="site-main">
|
<main id="main" class="site-main">
|
||||||
<div class="custom-login-container">
|
<div class="custom-auth-container">
|
||||||
<?php
|
<?php if (is_user_logged_in()) : ?>
|
||||||
// Wenn der Benutzer nicht angemeldet ist, zeige das Login-Formular
|
<!-- Wenn der Benutzer angemeldet ist, zeige eine Nachricht und einen Logout-Link -->
|
||||||
if (!is_user_logged_in()) {
|
<div class="logged-in-message">
|
||||||
// Custom Login Formular
|
<h2>Willkommen zurück, <?php echo esc_html(wp_get_current_user()->display_name); ?>!</h2>
|
||||||
$args = array(
|
<p>Du bist bereits angemeldet.</p>
|
||||||
'echo' => true,
|
<p>
|
||||||
'redirect' => admin_url(), // Weiterleitung zum Dashboard nach dem Login
|
<a href="<?php echo esc_url(wp_logout_url(home_url())); ?>" class="button">Abmelden</a>
|
||||||
'form_id' => 'custom_loginform',
|
<a href="<?php echo esc_url(admin_url()); ?>" class="button">Zum Dashboard</a>
|
||||||
'label_username' => __( 'Benutzername' ),
|
</p>
|
||||||
'label_password' => __( 'Passwort' ),
|
</div>
|
||||||
'label_remember' => __( 'Angemeldet bleiben' ),
|
<?php else : ?>
|
||||||
'label_log_in' => __( 'Anmelden' ),
|
<!-- Wenn der Benutzer nicht angemeldet ist, zeige das Registrierungsformular -->
|
||||||
'id_username' => 'user_login',
|
<h1 class="auth-title">Willkommen auf <?php bloginfo('name'); ?></h1>
|
||||||
'id_password' => 'user_pass',
|
<p class="auth-subtitle">Erstelle deinen Account und werde Teil unserer Community!</p>
|
||||||
'id_remember' => 'rememberme',
|
|
||||||
'id_submit' => 'wp-submit',
|
<?php
|
||||||
'remember' => true,
|
// Zeige das Registrierungsformular an
|
||||||
'value_username' => NULL,
|
$args = array(
|
||||||
'value_remember' => false
|
'echo' => true,
|
||||||
);
|
'redirect' => home_url('/login/?checkemail=registered'), // Weiterleitung nach der Registrierung
|
||||||
|
'form_id' => 'custom_registerform',
|
||||||
// Minecraft Avatar Container
|
'label_username' => __( 'Benutzername' ),
|
||||||
$avatar_uuid = get_theme_mod('login_avatar_uuid', '069a79f444e94726a5befca90e38eaf6');
|
'label_email' => __( 'E-Mail-Adresse' ),
|
||||||
if (!empty($avatar_uuid)) {
|
'label_password' => __( 'Passwort' ),
|
||||||
// === KORRIGIERT: Nutzen wir nun Minotar.net für den VOLLKÖRPER ===
|
'label_remember' => __( 'Angemeldet bleiben' ),
|
||||||
$avatar_url = "https://minotar.net/full/{$avatar_uuid}/256";
|
'label_log_in' => __( 'Registrieren' ),
|
||||||
echo '<div id="minecraft-avatar-container"><img src="' . esc_url($avatar_url) . '" alt="Minecraft Avatar"></div>';
|
'id_username' => 'user_login',
|
||||||
}
|
'id_email' => 'user_email',
|
||||||
|
'id_password' => 'user_pass',
|
||||||
// Login-Formular anzeigen
|
'id_remember' => 'rememberme',
|
||||||
wp_login_form($args);
|
'id_submit' => 'wp-submit',
|
||||||
} else {
|
'remember' => true,
|
||||||
// Wenn der Benutzer bereits angemeldet ist, zeige eine Nachricht und einen Logout-Link
|
'value_username' => NULL,
|
||||||
$current_user = wp_get_current_user();
|
'value_remember' => false
|
||||||
echo '<div class="logged-in-message">';
|
);
|
||||||
echo '<h2>Willkommen zurück, ' . esc_html($current_user->display_name) . '!</h2>';
|
wp_register_form($args);
|
||||||
echo '<p>Du bist bereits angemeldet.</p>';
|
?>
|
||||||
echo '<p><a href="' . esc_url(wp_logout_url(home_url())) . '" class="button">Abmelden</a></p>';
|
|
||||||
echo '<p><a href="' . esc_url(admin_url()) . '" class="button">Zum Dashboard</a></p>';
|
<div class="login-form-link">
|
||||||
echo '</div>';
|
<p>Schon hast du einen Account? <a href="<?php echo esc_url(wp_login_url()); ?>">Hier anmelden</a>.</p>
|
||||||
}
|
</div>
|
||||||
?>
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
// Login-Hintergrundbild aus dem Customizer holen und als Inline-CSS ausgeben
|
// Hintergrundbild aus dem Customizer holen und als Inline-CSS ausgeben
|
||||||
$login_bg_image = get_theme_mod('login_background_image');
|
$auth_bg_image = get_theme_mod('login_background_image');
|
||||||
if ($login_bg_image):
|
if ($auth_bg_image):
|
||||||
?>
|
?>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body.login, body.login-action-register {
|
||||||
background-image: url('<?php echo esc_url($login_bg_image); ?>') !important;
|
background-image: url('<?php echo esc_url($auth_bg_image); ?>') !important;
|
||||||
background-size: cover !important;
|
background-size: cover !important;
|
||||||
background-position: center !important;
|
background-position: center !important;
|
||||||
background-repeat: no-repeat !important;
|
background-repeat: no-repeat !important;
|
||||||
}
|
}
|
||||||
body::before {
|
body.login::before, body.login-action-register::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(20, 21, 26, 0.8);
|
background: rgba(20, 21, 26, 0.8);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<style>
|
|
||||||
.custom-login-container {
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 60px auto;
|
|
||||||
padding: 40px;
|
|
||||||
background-color: var(--card-bg, #252830);
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
||||||
border: 1px solid var(--border-color, #333);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#minecraft-avatar-container {
|
|
||||||
flex: 0 0 27.8%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #1a1c23;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#minecraft-avatar-container img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
max-height: 400px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 3px solid var(--primary-accent, #00d4ff);
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom_loginform {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom_loginform p {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom_loginform label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-color, #e4e4e4);
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom_loginform input[type="text"],
|
|
||||||
#custom_loginform input[type="password"] {
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px;
|
|
||||||
background-color: var(--surface-color, #1e2029);
|
|
||||||
border: 1px solid var(--border-color, #333);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--text-color, #e4e4e4);
|
|
||||||
font-family: 'Raleway', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom_loginform .forgetmenot label {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom_loginform .submit {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#custom_loginform input[type="submit"] {
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px;
|
|
||||||
background-color: var(--primary-accent, #00d4ff);
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
}
|
|
||||||
#custom_loginform input[type="submit"]:hover {
|
|
||||||
background-color: #00a8cc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logged-in-message {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logged-in-message h2 {
|
|
||||||
margin-top: 0;
|
|
||||||
color: var(--primary-accent, #00d4ff);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logged-in-message .button {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 10px;
|
|
||||||
padding: 12px 25px;
|
|
||||||
background-color: var(--primary-accent, #00d4ff);
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
}
|
|
||||||
.logged-in-message .button:hover {
|
|
||||||
background-color: #00a8cc;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.custom-login-container {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
#minecraft-avatar-container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#minecraft-avatar-container img {
|
|
||||||
max-height: 300px;
|
|
||||||
max-width: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<?php get_footer(); ?>
|
<?php get_footer(); ?>
|
||||||
@@ -4,7 +4,7 @@ Theme URI: https://git.viper.ipv64.net/M_Viper/Minecraft-Modern-Theme
|
|||||||
Author: M_Viper
|
Author: M_Viper
|
||||||
Description: Ein modernes Gaming-Theme mit konfigurierbarem Header-Slider.
|
Description: Ein modernes Gaming-Theme mit konfigurierbarem Header-Slider.
|
||||||
Author URI: https://M-Viper.de
|
Author URI: https://M-Viper.de
|
||||||
Version: 1.2
|
Version: 1.3
|
||||||
License: GNU General Public License v2 or later
|
License: GNU General Public License v2 or later
|
||||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||||
Text Domain: minecraft-modern-theme
|
Text Domain: minecraft-modern-theme
|
||||||
|
|||||||
101
README.md
101
README.md
@@ -1 +1,100 @@
|
|||||||
<img src="https://git.viper.ipv64.net/M_Viper/Minecraft-Modern-Theme/raw/branch/main/Minecraft-Modern-Theme/screenshot.PNG" alt="Backend" width="100%">
|
# Minecraft Modern Theme
|
||||||
|
|
||||||
|
Ein modernes und flexibles WordPress-Theme, perfekt für Minecraft-Server, Gaming-Communities und Gamer-Blogs. Passe deine Seite mit wenigen Klicks ganz nach deinem Stil an!
|
||||||
|
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img src="https://git.viper.ipv64.net/M_Viper/Minecraft-Modern-Theme/raw/branch/main/Minecraft-Modern-Theme/screenshot.PNG" alt="Theme Screenshot" style="max-width: 500px; width: 100%; height: auto; border-radius: 8px;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Hauptfunktionen
|
||||||
|
|
||||||
|
- **🎨 Dynamischer Header-Slider:** Zeige bis zu 5 beeindruckende Banner mit individuellem Text, Effekten und Animationen.
|
||||||
|
- **🌙 Dark & Light Mode:** Lass deine Besucher zwischen einem dunklen und einem hellen Design wählen.
|
||||||
|
- **🎨 Komplette Farbanpassung:** Wähle deine eigene Akzentfarbe und Hintergrundfarbe, um dein Branding perfekt abzubilden.
|
||||||
|
- **🌐 Social Media Integration:** Verlinke einfach all deine Kanäle (Discord, YouTube, Twitter, TikTok und viele mehr).
|
||||||
|
- **📄 Eigenes FAQ-System:** Erstelle und verwalte eine eigene FAQ-Seite direkt im WordPress-Menü, ohne zusätzliche Plugins.
|
||||||
|
- **🔐 Angepasste Login-Seite:** Gestalte die Login-Seite mit deinem eigenen Logo, Hintergrund und einem coolen Minecraft-Avatar-Slider.
|
||||||
|
- **⬆️ "Nach oben"-Button:** Ein praktischer Button, der deinen Besuchern das Scrollen erleichtert.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 Installation (in 3 einfachen Schritten)
|
||||||
|
|
||||||
|
1. **Lade das Theme herunter:** Lade die `minecraft-modern.zip`-Datei herunter.
|
||||||
|
2. **Lade es in WordPress hoch:**
|
||||||
|
* Gehe in deinem WordPress-Adminbereich zu **Design > Themes > Installieren**.
|
||||||
|
* Klicke auf den Button **Theme hochladen**.
|
||||||
|
* Wähle die heruntergeladene `minecraft-modern.zip`-Datei aus und installiere sie.
|
||||||
|
3. **Aktiviere das Theme:** Klicke nach der Installation auf **Aktivieren**. Fertig!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 👶 Wichtig: Nutze das Child Theme!
|
||||||
|
|
||||||
|
Wenn du planst, Anpassungen vorzunehmen (z.B. Farben per Code ändern oder PHP-Dateien bearbeiten), solltest du unbedingt das mitgelieferte **Child Theme** verwenden.
|
||||||
|
|
||||||
|
**Warum?** Damit deine persönlichen Anpassungen bei einem Theme-Update nicht überschrieben werden!
|
||||||
|
|
||||||
|
### Installation des Child Themes (Der einfache Weg)
|
||||||
|
|
||||||
|
1. **Lade das Child Theme herunter:** Lade die `minecraft-modern-child.zip`-Datei herunter.
|
||||||
|
2. **Lade es in WordPress hoch:**
|
||||||
|
* Gehe zu **Design > Themes > Installieren**.
|
||||||
|
* Klicke auf **Theme hochladen**.
|
||||||
|
* Wähle die `minecraft-modern-child.zip`-Datei aus und installiere sie.
|
||||||
|
3. **Aktiviere das Child Theme:** Klicke auf **Aktivieren**.
|
||||||
|
|
||||||
|
**Wichtig:** Das Haupt-Theme (Minecraft Modern) muss weiterhin installiert bleiben, darf aber nicht aktiviert sein. WordPress erkennt dies automatisch.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚙️ So passt du dein Theme an
|
||||||
|
|
||||||
|
Gehe in deinem WordPress-Dashboard zu **Design > Anpassen**, um in die Einstellungen zu gelangen.
|
||||||
|
|
||||||
|
### 1. Header-Slider einrichten
|
||||||
|
|
||||||
|
Unter dem Punkt **Header Slider** kannst du:
|
||||||
|
- Den Slider mit einem Haken aktivieren.
|
||||||
|
- Bis zu 5 **Bilder, Titel und Untertitel** hochladen.
|
||||||
|
- Die **Schriftart, -größe und -farbe** anpassen.
|
||||||
|
- Einen **Effekt** auswählen (z.B. Überblenden oder Würfel).
|
||||||
|
- Die **Pfeile** oder **Punkte** zur Navigation ausblenden.
|
||||||
|
|
||||||
|
### 2. Farben & Design auswählen
|
||||||
|
|
||||||
|
Unter **Farben & Darstellung** findest du:
|
||||||
|
- **Akzentfarbe:** Die Hauptfarbe deines Themes (wird für Buttons, Links etc. verwendet).
|
||||||
|
- **Hintergrundfarbe:** Die Farbe des Seitenhintergrunds.
|
||||||
|
- **Standard-Theme-Modus:** Entscheide, ob deine Seite standardmäßig im Dark- oder Light-Mode starten soll.
|
||||||
|
|
||||||
|
### 3. Social-Media-Links hinzufügen
|
||||||
|
|
||||||
|
Im Menüpunkt **Social Media Links** kannst du bei den jeweiligen Plattformen einfach deine URL eintragen. Die Icons erscheinen dann automatisch an der vorgesehenen Stelle.
|
||||||
|
|
||||||
|
### 4. Footer anpassen
|
||||||
|
|
||||||
|
Unter **Footer-Einstellungen** kannst du:
|
||||||
|
- Den **Copyright-Text** ändern.
|
||||||
|
- Die URLs für dein **Impressum** und die **Datenschutz**-Seite einfügen.
|
||||||
|
- Den "Erstellt von"-Verweis am Ende der Seite ausblenden.
|
||||||
|
|
||||||
|
### 5. FAQs erstellen
|
||||||
|
|
||||||
|
1. Gehe zu **FAQ Einstellungen** und setze einen Haken bei "FAQ System aktivieren".
|
||||||
|
2. Das Theme erstellt automatisch eine neue Seite namens "FAQ" und einen neuen Menüpunkt **FAQs** in deinem WordPress-Dashboard.
|
||||||
|
3. Unter **FAQs > Neue FAQ hinzufügen** kannst du jetzt deine Fragen und Antworten erstellen. Du kannst sie sogar in Kategorien sortieren!
|
||||||
|
|
||||||
|
### 6. Login-Seite gestalten
|
||||||
|
|
||||||
|
Unter **Login-Einstellungen** kannst du:
|
||||||
|
- Ein **Hintergrundbild** und ein **Logo** für die Login-Seite hochladen.
|
||||||
|
- Bis zu 5 **Minecraft-Avatar-UUIDs** eintragen, um einen dynamischen Avatar-Slider zu erzeugen. (Eine UUID findest du z.B. auf [minotar.net](https://minotar.net/)).
|
||||||
|
- Die **Geschwindigkeit** des Avatar-Wechsels einstellen.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Viel Spaß mit deinem neuen Theme! 🎮✨
|
||||||
Reference in New Issue
Block a user