🎮 Tutorial "Voice Hub" Integration WordPress...

Sun, 11 Jan 2026 07:30:42 +0100

Dieses Tutorial beschreibt die vollständige Integration des animierten Voice-Hubs für TeamSpeak und Discord. Das Design ist vollständig reponsive (optimiert für Desktop, Tablet und Smartphone).

Schritt 1: Das Design (Custom CSS)

Dieser Teil steuert das Aussehen, den roten Neon-Glow und sorgt dafür, dass sich das Layout auf Handys automatisch anpasst.

Gehe in dein WordPress-Backend zu Design -> Customizer.

Wähle den Punkt Zusätzliches CSS.

Kopiere diesen gesamten Block hinein:

Code:
/* --- Voice Hub CSS (STABIL & MOBIL) --- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@500;700&display=swap');

:root {
    --dg-red: #e60000;
    --dg-dark: #121212;
    --dg-white: #ffffff;
}

/* Hauptcontainer */
.dg-wrapper {
    background: var(--dg-white);
    padding: 40px 20px;
    font-family: 'Rajdhani', sans-serif;
    text-align: center;
}

/* Überschrift mit Glow-Animation */
.animated-title {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 2.8rem;
    color: var(--dg-dark);
    text-transform: uppercase;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
}

.animated-title::after {
    content: 'VOICE HUB';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--dg-red);
    width: 100%;
    overflow: hidden;
    border-right: 3px solid var(--dg-red);
    white-space: nowrap;
    animation: typewriter 4s steps(10) infinite;
    filter: drop-shadow(0 0 10px var(--dg-red));
}

@keyframes typewriter {
    0%, 10% { width: 0; }
    40%, 60% { width: 100%; }
    90%, 100% { width: 0; }
}

/* Grid Layout */
.dg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
}

/* KARTEN-DESIGN & HOVER (MOUSEOVER FIX) */
.dg-wrapper .dg-card {
    background: #ffffff !important;
    border: 2px solid #f0f0f0 !important;
    border-radius: 20px !important;
    padding: 40px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    flex: 1 1 350px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative !important;
    z-index: 1 !important;
}

/* DIESER TEIL STEUERT DAS MOUSEOVER */
.dg-wrapper .dg-card:hover {
    border-color: var(--dg-red) !important;
    transform: translateY(-12px) !important; /* Karte hebt sich ab */
    box-shadow: 0 20px 45px rgba(230, 0, 0, 0.15) !important;
    z-index: 10 !important;
}

/* Discord Viewer - Lang gezogen */
.discord-widget {
    width: 100%;
    height: 600px !important;
    margin-bottom: 25px;
    border-radius: 10px;
    border: none;
}

/* Pulsierende Icons */
.voice-icon-box {
    width: 80px;
    height: 80px;
    background: var(--dg-red);
    border-radius: 50%;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.voice-icon-box svg {
    width: 40px;
    height: 40px;
    fill: white;
}

.voice-icon-box::before, .voice-icon-box::after {
    content: '';
    position: absolute;
    border: 2px solid var(--dg-red);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: pulse-ring 2s linear infinite;
}
.voice-icon-box::after { animation-delay: 1s; }

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Button Design */
.dg-btn {
    display: inline-block;
    background: var(--dg-dark);
    color: white !important;
    text-decoration: none !important;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s !important;
    margin-top: auto;
}

.dg-wrapper .dg-card:hover .dg-btn {
    background: var(--dg-red) !important;
    box-shadow: 0 5px 15px rgba(230, 0, 0, 0.4);
}

/* --- MOBILOPTIMIERUNG --- */
@media (max-width: 768px) {
    .animated-title { font-size: 1.8rem; margin-bottom: 40px; }
    .dg-grid { gap: 20px; }
    .dg-card { flex: 1 1 100% !important; padding: 30px 20px !important; }
    .discord-widget { height: 500px !important; }
    .dg-btn { width: 100%; }
}

Schritt 2: Die Einbindung (HTML)

Füge diesen Code auf deiner WordPress-Seite in einen "Individuelles HTML" Block ein.

Code:


    VOICE HUB

    
        
            
                
            
            TEAMSPEAK
            
                User online:

                
                
                
            
            Beitreten
        

        
            
                
            
            DISCORD
            
            Beitreten
        
    

    
        Powered by GameServer-Install.de by rumpel

💡 Zusammenfassung der Funktionen:

Schreibmaschinen-Animation: Der Titel "VOICE HUB" tippt sich selbst und leuchtet rot.
Puls-Icons: Die Icons haben animierte Ringe, die Aufmerksamkeit erzeugen.
Interaktive Karten: Beim Drüberfahren mit der Maus (Hover) hebt sich die Karte leicht an.
Mobil-Check: Auf Smartphones wird die Schrift kleiner und die Karten stapeln sich sauber untereinander, um horizontales Scrollen zu vermeiden.

Damit hast du alles perfekt dokumentiert. Soll ich dir noch zeigen, wie du die TeamSpeak-Useranzahl farblich hervorheben kannst?

Lg

rumpel

Battlefield 6: Fix für EA App behebt Abstürze auf der Map „Eastwood

Wed, 19 Nov 2025 21:36:52 +0100

Viel Spaß beim Spielen...

Lg rumpel

Dawn of Defiance - Ressourcen finden kurz beschrieben... ....

Sun, 18 Aug 2024 08:42:45 +0200

Ressourcen in Dawn of Defiance finden

In Dawn of Defiance müsst ihr als Spieler verschiedene Ressourcen sammeln, um zu überleben und im Spiel weiter zu kommen . Wo ihr diese findet erklären wir euch in wenigen kurzen Sätzen.

Fangen wir auf der Starterinsel an dort könnt ihr Brombeeren, Himbeeren, Spartium, Flachs und andere Ressourcen finden.. Kupfer findet ihr überall auf der Karte , vorallem nördlich in der Wüste. Zinn findet ihr im Dunklen Wald. Eisenerz kommt in den Bergen vor , vorallem in den Gebieten Linkas und Pindus.

Gold ist sehr selten zu finden ich selber habe es an den großen Torbogen gefunden.

Weitere Ressourcen wie Ton,

Harz, Schilf und Muscheln findet ihr an Wasserquellen. Ton findet ihr in der Wüste oder in der Nähe von Wasser . Harz bekommt ihr von bestimmten Bäumen wenn ihr dessen Stamm zerhackt. Dunkles und Hartes Harz findet ihr im dunklen Wald und am Wüstenrand. Schilf kommt häufig in der Nähe von Flüssen vor. Muscheln, sind auf kleinen Inseln im Nordosten zu finden.

Jagd erleichtern

Wir empfehlen Pfeil und Bogen zum Jagen vor allem Kopfschüsse erhöhen die Chance auf bessere Beute. Das Verwenden von Lockhölzern erleichtert euch die Jagd durch das anlocken der Tiere. Stern-Tiere sollten für den Metzgerblock aufgehoben werden, da sie für die Jäger-Meisterschaft benötigt werden.

Weiter Tipps folgen in kürze...

Ps. hier noch ein kleines Info Video vom Release Tag...

Dawn of Defiance - Ressourcen finden kurz und bündig... Part 2

Ps . Wir empfehlen euch auch immer genügend gegrilltes Fleisch dabei zu haben. Den durch das zu euch nehmen des Fleisches erhöhen sich eure Stamina und Lebensbalken, dadurch habt ihr mehr Energie und Durchhalte vermögen.

Iron findet ihr auch bei Smolikas Mountains ungefär beim I von Smolikas.

LG

rumpel

GameServer-Install.de - Forum - Gaming Tut`s

🎮 Tutorial "Voice Hub" Integration WordPress...

VOICE HUB

TEAMSPEAK

DISCORD

Battlefield 6: Fix für EA App behebt Abstürze auf der Map „Eastwood

Dawn of Defiance - Ressourcen finden kurz beschrieben... ....