Forum - HACKER-TERMINAL Style für das Xobor Forum Business (v4)

Um alle Funktionen nutzen zu können, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! » HACKER-TERMINAL Style für das Xobor Forum Business (v4)

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. Ärger mit dem PC, Laptop oder Tablet? Ärger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? Ärger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolutionär! Videos und Webseiten zur Freien Energie. Wasserstoff - Energieträger der Zukunft. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps für Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschläge. Spiel & Spaß, Witz & gute Laune! Spiritualität, Seele, New Age, Yoga, Gesundheit. Alles, was noch so übrig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | HACKER-TERMINAL Style für das Xobor Forum Business (v4) datum

31.05.2026 10:49

Daishi

Informationen anzeigen

Beiträge:	489
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 € Forum Spende
Sternzeichen	Steinbock
Likes	473

Hallo @Wolfgang

Ich möchte euch heute meine neueste Arbeit vorstellen. Mein Kumpel Lui hat mich beauftragt, für ihn ein cooles und modernes Forendesign zu entwerfen.

Nach insgesamt 4 Monaten intensiver Arbeit ist es nun endlich vollbracht!

Der Wunsch war ein Design, das stark an einen Linux-Server und ein Hacker-Terminal erinnert – inklusive des ikonischen Matrix-Regens.

Es war verdammt viel Arbeit, das im Xobor-System sauber umzusetzen, aber ich habe es komplett hinbekommen.

Das Design basiert auf dem Business 4 Template.

1. CSS-Code (Hacker-Terminal Design)Einzubinden im Admin-Bereich unter: Design -> CSS-Stylescss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
 
/* ==========================================================================
   DAISHI HACKER-TERMINAL v47.0 - MEMBER-DATA CORE UNIFICATION
   PURE CSS - SECURES FORM-TABLES & PROFILES - 100% XOBOR COMPLIANT
   ========================================================================== */
 
/* ==========================================================================
   DAISHI TERMINAL SCROLLBAR ENGINE - ALL BROWSER COMPLIANT
   ========================================================================== */
html {
  scrollbar-color: #00ff33 #050a05 !important;
  scrollbar-width: thin !important;
}
 
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  background: #050a05 !important;
}
 
::-webkit-scrollbar-thumb {
  background: #004411 !important;
  border: 1px solid #00ff33 !important;
  border-radius: 0px !important;
}
 
::-webkit-scrollbar-thumb:hover {
  background: #00ff33 !important;
  box-shadow: 0 0 10px rgba(0, 255, 51, 0.5) !important;
}
 
::-webkit-scrollbar-track {
  background: #050a05 !important;
  border-left: 1px dashed #004411 !important;
}
 
/* HARD LOCK FÜR DEN STATISTIK-HAUPTTITEL */
.box:has(#foverview_stat1) > .boxheader,
.box:has(#foverview_stat1) > h3,
.boxcontent:has(#foverview_stat1) h2,
#wcontainer .box:has(#foverview_stat1) .boxheader,
#wcontainer div:has(#foverview_stat1) > h3 {
  color: #00ff33 !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: bold !important;
}
 
.box:has(#foverview_stat1) > .boxheader::before,
.box:has(#foverview_stat1) > h3::before,
.boxcontent:has(#foverview_stat1) h2::before,
#wcontainer .box:has(#foverview_stat1) .boxheader::before,
#wcontainer div:has(#foverview_stat1) > h3::before {
  content: "[le_dernier_clan]:~# " !important;
  color: #ffffff !important;
  font-weight: normal !important;
}
 
/* 1. CORE BACKGROUND & TRANSPARENCY SHIELD */
html, body, #wrapper, .content, #wcontainer, .main, #main-content, .center, 
.ox-wrapper, .ox-main, .content-wrap, .ox-container, .main-content, .ox-body, #ox-html {
  background: transparent !important;
  background-color: transparent !important;
  color: #33ff66 !important;
  font-family: 'Courier New', Courier, monospace !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
 
/* Standard-Forenboxen (Blickdicht vor dem Matrix-Regen) */
.box, .box.cat, #board_stats, #foverview, .boxcontent, .ox-box {
  background: #050a05 !important;
  background-color: #050a05 !important;
  border: 1px solid #004411 !important;
  border-left: 3px solid #00ff33 !important;
  padding: 14px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
 
/* 2. MEMBER-DATA & FORMULAR PROFILE ENGINE (Macht deine Profilseite perfekt sichtbar) */
body[action*="member"], .memberdata_box, table.formtable, .boxcontent form {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #33ff66 !important;
}
 
table.formtable tr td, .boxcontent table tr td, .boxcontent form td {
  background: #050a05 !important;
  background-color: #050a05 !important;
  border: 1px solid #004411 !important;
  color: #33ff66 !important;
  padding: 8px 12px !important;
}
 
/* Beschriftungen der Eingabefelder im leuchtenden Terminal-Style */
table.formtable td:first-child, .boxcontent form td strong, label, .form_label {
  color: #00ff33 !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
 
/* 3. GENERAL BOX-HEADER OPTICS */
.boxheader, .box h2, .box h3, th, .boxtitle, .main-title, .ox-box-title {
  color: #00ff33 !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  border-bottom: 2px dashed #004411 !important;
  padding-bottom: 8px !important;
}
.boxheader a, .boxheader span, .boxheader strong { color: #00ff33 !important; }
 
/* ANTI-DUPLICATE ENGINE */
.boxheader::before, .box h2::before, .box h3::before, .boxtitle::before, .main-title::before, .ox-box-title::before {
  content: "[le_dernier_clan]:~# " !important;
  color: #ffffff !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: normal !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}
.boxheader *::before, .box h2 *::before, .box h3 *::before, .boxtitle *::before { 
  content: "" !important; 
  display: none !important; 
}
 
/* 4. PRECISION STATS PROMPT INJECTION */
#foverview_stat1 strong, #foverview_stat2 strong, #foverview_stat3 strong, #foverview_legend strong {
  color: #00ff33 !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: block !important;
  border-bottom: 1px dashed #004411 !important;
  padding-bottom: 4px !important;
  margin-bottom: 6px !important;
}
 
#foverview_stat1 strong::before, #foverview_stat2 strong::before, #foverview_stat3 strong::before, #foverview_legend strong::before {
  content: "[le_dernier_clan]:~# " !important;
  color: #ffffff !important;
  font-weight: normal !important;
}
 
/* 5. TOPNAVIGATION & SEARCH ENGINE */
#obere_leiste, .topnavigation_wrap, #topnavigation-ul {
  background: #000000 !important;
  border-bottom: 2px dashed #004411 !important;
}
#topnavigation-ul li, #topnavigation-ul li a {
  color: #00ff33 !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
#topnavigation-ul li a:hover {
  color: #000000 !important;
  background: #00ff33 !important;
  box-shadow: 0 0 10px rgba(0,255,51,0.25) !important;
}
.navigation_wrap, .navigation, #navigation {
  background: #050a05 !important;
  border: 1px solid #004411 !important;
  padding: 6px 12px !important;
}
ul.navigation li a { color: #00ff33 !important; font-weight: bold !important; }
ul.navigation li.currentpage a, ul.navigation li a:hover { background: rgba(0, 255, 51, 0.08) !important; border: 1px solid #00ff33 !important; }
#hpmsearchform input[type="text"] { background:#000000 !important; border:1px solid #004411 !important; color:#33ff66 !important; }
 
/* 6. INPUTS, TEXTAREAS & CONSOLE BUTTONS (Perfekte Formularfelder) */
input[type="text"], input[type="password"], textarea, select {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #004411 !important;
  color: #ffffff !important;
  font-family: 'Courier New', Courier, monospace !important;
  padding: 6px 10px !important;
  border-radius: 0px !important;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
  border-color: #00ff33 !important;
  box-shadow: 0 0 10px rgba(0,255,51,0.25) !important;
}
.button, button, input[type="submit"], .submit, a.button, .reply_button {
  background: transparent !important;
  border: 1px solid #00ff33 !important;
  color: #00ff33 !important;
  font-family: monospace !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 0px !important;
  cursor: pointer !important;
}
.button:hover, button:hover, input[type="submit"]:hover {
  background: #00ff33 !important;
  color: #000000 !important;
}
 
/* 7. FORUM ELEMENTS & ROWS */
table, tr, td, th, tbody, thead { max-width: 100% !important; box-sizing: border-box !important; }
.boxcontent table, .boxcontent td { max-width: 100% !important; }
td.fnew { width: 50px !important; color: #00ff33 !important; font-weight: bold; }
td.fdesc { width: auto !important; color: #33ff66 !important; }
td.fstat { width: 250px !important; text-align: right !important; border-left: 1px dashed #004411 !important; color: #008822 !important; }
.forumlink, a.forumlink { font-size: 1.1rem !important; color: #ffffff !important; font-weight: bold !important; text-decoration: none !important; }
#wcontainer table.forum-tabelle tr td, #wcontainer table.forum tr td { background: transparent !important; border-bottom: 1px solid rgba(0, 68, 17, 0.3) !important; color: #33ff66 !important; }
.breadcrumb, .nav_path, #wcontainer .nav { color: #008822 !important; }
.breadcrumb a, .nav_path a { color: #00ff33 !important; }
blockquote, pre, code { background: #000000 !important; border: 1px solid #004411 !important; border-left: 3px solid #00ff33 !important; color: #008822 !important; padding: 10px !important; }
 
/* 8. DAISHI HACKER-FOOTER ENGINE v47.0 */
footer, .footer, #footer, .footer_wrap, table:has(.footer), .boxcontent:has(.footer), div[class*="footer"], #wcontainer + div, .ox-footer {
  background: #000000 !important;
  background-color: #000000 !important;
  border-top: 2px dashed #004411 !important;
  padding: 25px 0 !important;
  margin-top: 40px !important;
  width: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
footer a, .footer a, #footer a, .ox-footer a {
  color: #00ff33 !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-block !important;
}
footer a:hover, .footer a:hover { color: #000000 !important; background: #00ff33 !important; }
 
/* MOBILE FIX */
@media (max-width: 768px) {
  ul.noimage.forum li td { display: block !important; width: 100% !important; text-align: left !important; border: none !important; }
  .boxcontent table, .boxcontent td { width: 100% !important; display: block !important; border-left: none !important; }
}
 
/* ==========================================================================
   DAISHI OVERFLOW SHIELD - BEHEBT DAUERHAFTE SCROLLBALKEN
   ========================================================================== */
html, body, #wrapper, #wcontainer {
  overflow-x: hidden !important; /* Verhindert das seitliche Scrollen durch unsichtbare Überbreite */
}
 
/* Verhindert, dass Tabellen oder Boxen trotz max-width ausbrechen */
.box, .boxcontent, table, tr, td {
  overflow: hidden; 
}
/* ==========================================================================
   DAISHI VERTICAL SCROLLBAR LOCK
   ========================================================================== */
html {
  overflow-y: auto !important; /* Zeigt die rechte Scrollbar NUR an, wenn die Seite scrollbar ist */
}
 
 

Schließen

2. JavaScript-Code (Matrix-Regen & Terminal-Funktionen)Einzubinden im Admin-Bereich unter: Einstellungen -> Globale Einstellungen -> Header & Footer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<!-- === DAISHI MATRIX-REGEN GENERATOR START === -->
<canvas id="matrixCanvas" style="position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:-999; pointer-events:none; background:#000000;"></canvas>
<script type="text/javascript">
window.addEventListener('load', function() {
    setTimeout(function() {
        var canvas = document.getElementById('matrixCanvas');
        if (!canvas) return;
        var ctx = canvas.getContext('2d');
 
        // Leinwand-Größe an den Browser anpassen
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
 
        // Matrix-Zeichen (Binärcode, Katakana und Zahlen)
        var matrixChars = "01010101ABCDEFGHIJKLMNOPQRSTUVWXYZｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ".split("");
        var fontSize = 14;
        var columns = canvas.width / fontSize;
 
        // Startpositionen für den Regen
        var drops = [];
        for (var x = 0; x < columns; x++) {
            drops[x] = Math.random() * -100; // Unregelmäßiger Start
        }
 
        function drawMatrix() {
            // Erzeugt den klassischen, dezenten Nachleucht-Effekt (Fading)
            ctx.fillStyle = "rgba(0, 0, 0, 0.06)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
 
            ctx.fillStyle = "#00ff33"; // Farbe des Regens
            ctx.font = fontSize + "px monospace";
 
            for (var i = 0; i < drops.length; i++) {
                // Ein zufälliges Zeichen auswählen
                var text = matrixChars[Math.floor(Math.random() * matrixChars.length)];
                
                // Zeichen zeichnen
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
 
                // Wenn der Tropfen den Boden erreicht, unregelmäßig zurücksetzen
                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                    drops[i] = 0;
                }
 
                // Tropfen nach unten bewegen
                drops[i]++;
            }
        }
 
        // Steuert die Fallgeschwindigkeit (33 Millisekunden)
        setInterval(drawMatrix, 33);
    }, 200);
});
</script>
<!-- === DAISHI MATRIX-REGEN GENERATOR ENDE === -->
 

Schließen

Konnte es soweit anpassen, wenn noch was fehlt, versuche ich es weiter, wollte hier nur mal meine Arbeit präsentieren und zeigen, was mit CSS alles möglich ist.

Bilder wie es ausschaut:

Forum Übersicht:

Forum übersicht

Private Narichten:

Private Narichten

Das fertige Ergebnis könnt ihr euch hier Live ansehen:
forenstyle

Hoffe das die Ideen und Inspirationen hier gut ankommen.

Ich bin gespannt auf euer Feedback!

Mit Herzlichen Grüßen
Daishi

Daishi

Wolfgang findet das Top!

Antworten

#2 | RE: HACKER-TERMINAL Style für das Xobor Forum Business (v4) und Mobile datum

19.06.2026 18:59 (zuletzt bearbeitet: 19.06.2026 19:05)

Daishi

Informationen anzeigen

Beiträge:	489
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 € Forum Spende
Sternzeichen	Steinbock
Likes	473

🚀 DURCHBRUCH: Die starre mobile Version Layouts komplett durchbrochen! (v48.0)

Hallo @Wolfgang!

Nach insgesamt vier Monaten intensiver Detailarbeit und unzähligen Testläufen habe ich es geschafft: Ich habe das extrem sture, tief im System verankerte mobile Design des Xobor Layouts vollständig durchbrochen!

Das Ziel war ein kompromissloser, voll funktionsfähiger **Linux-Server / Hacker-Terminal-Style**, der auf Smartphones und Tablets absolut flüssig läuft.

Wer schon einmal versucht hat, die verschachtelten Tabellen, tiefen Vererbungsketten und dynamischen Hintergrundklassen der mobilen Version des Systems umzubiegen, weiß, gegen was für eine Wand man da normalerweise rennt.

Hier ist die lückenlose Dokumentation und der gesamte Code in einem einzigen, sauberen Paket für Dich.

---

## 🛠️ Wie ich die mobile Version des Layouts durchbrochen habe:

1. **Aggressive Klassen-Aushebelung:**
Das mobile Business 4 Layout nutzt hochspezifische, verschachtelte CSS-Klassen für Inhaltsboxen. Normale CSS-Befehle verpuffen hier einfach.
Ich musste universelle Attribut-Selektoren wie `[class*="content"]` einsetzen, um alle dynamischen Kind-Elemente gleichzeitig im Keim zu ersticken und transparent zu zwingen.

2. **Der mobile Tabellen-Crash-Schutz:**
Standardmäßig quetscht das System Statistiken und letzte Beiträge mobil zusammen.
Durch gezielte Media-Queries ab `900px` wird das Layout am PC via Flexbox elastisch in die Breite gezogen, während es auf Handys sauber untereinander gestapelt wird – ohne unschöne horizontale Scrolleisten!

3. **Der dreifache Textumbruch-Schild:**
Um zu verhindern, dass extrem lange Benutzernamen, Thread-Titel oder Links das Terminal-Design in der mobilen Version sprengen, habe ich eine dreifache Absicherung aus `overflow-wrap: anywhere`, `word-break: break-word` und `white-space: normal` über alle Titelklassen gelegt.

4. **Performance-optimierter Matrix-Regen:**
Ein normales HTML5-Canvas zwingt mobile CPUs schnell in die Knie und blockiert Touch-Gesten. Mein Skript löst das über ein fixiertes, klick-neutrales (`pointer-events: none`) Canvas mit einer dynamischen Schriftgrößen-Weiche (`12px` auf Smartphones statt `16px` auf PC) sowie einem organischen, zeitversetzten Start-Algorithmus (`Math.random() * -100`).

Als kleine persönliche Signatur habe ich im Hauptcontainer via CSS-Pseudoelement sogar ein unsichtbares Easter Egg hinterlegt: Die System-ID `44.41.49.53.48.49` – das ist mein Name **D-A-I-S-H-I** in echtem ASCII-Code!

---

## 📋 DIE VOLLSTÄNDIGE ANLEITUNG (KOMPLETT-CODE FÜR MOBIL)

Folgt einfach diesen Schritten im Admin-Bereich unter **Layout ➔ Mobil**, um den Style für die mobile Ansicht des Business 4 Templates fehlerfrei zu aktivieren:

### ⚙️ Schritt 1: Die System-Farben anpassen
Tragt im Reiter **"Theme"**
Diese exakten Hex-Codes ein, damit keine hellen Standard-Flächen beim Laden des Business 4 Styles aufblitzen:

* Hintergrundfarbe des Forums & Inhaltsboxen: `#050505` (Tiefschwarz)

* Theme-Farbe 1 & 2 (Hauptfarbe / Überschriften): `#00ff33` (Terminal-Grün)

* Farbe der Rahmenlinien: `#00ff33` (Matrix-Grün)

### 💾 Schritt 2 & 3: CSS und JavaScript einfügen
Kopiert den folgenden, kombinierten Block. Das CSS gehört in den Reiter **"CSS/SCSS"** Mobile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
/* ============================================================
   HACKER TERMINAL: INNENBEREICHE & BEITRÄGE SCHWÄRZEN
   ============================================================ */
 
/* 1. Foren-Inhalte, Tabellenzellen und Beitragsboxen auf Dunkel zwingen */
.mobile-page,
.forum-content,
.message-box,
.post-box,
.reply-box,
.thread-view,
.forum-view,
.content-area,
main, 
article {
    background-color: #050505 !important;
    background: #050505 !important;
}
 
/* 2. Hartnäckige Tabellen und Listen im Inneren schwärzen */
.mobile-page table, 
.mobile-page td, 
.mobile-page tr, 
.mobile-page th,
.mobile-page li,
.mobile-page ul {
    background-color: rgba(10, 10, 10, 0.95) !important;
    background: rgba(10, 10, 10, 0.95) !important;
    border-color: #00ff33 !important;
}
 
/* 3. Texte und Titel im Inneren auf Terminal-Grün setzen */
.mobile-page p, 
.mobile-page span, 
.mobile-page td, 
.mobile-page h1, 
.mobile-page h2, 
.mobile-page h3,
.post-text,
.message-text {
    color: #00ff33 !important;
    font-family: 'Courier New', 'Lucida Console', monospace !important;
}
 
/* 4. Verhindern, dass Xobor-Standard-Hintergründe durchbrechen */
[class*="content"], 
[class*="inner"], 
[class*="body"] {
    background-color: transparent !important;
    background: transparent !important;
}
/* Versteckter System-Stempel im Hauptcontainer */
#main_container::after {
    content: "SYS-ID: 44.41.49.53.48.49" !important; /* Die Zahlen stehen im ASCII-Code für D-A-I-S-H-I */
    display: none !important; /* Macht den Text für normale User zu 100% unsichtbar */
}
 
/* --- GLOBALE STRUKTUR FÜR TEXTUMBRÜCHE (Handy, Tablet & PC) --- */
.v4-forum-title, .v4-thread-title, .v4-last-post, .forum-row, li {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
}
 
/* --- GLOBALE STRUKTUR (Handy, Tablet & PC) --- */
.v4-forum-title, .v4-thread-title, .v4-last-post, .forum-row, li, .v4-forum-info {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
}
 
/* --- GLOBALER SCHUTZ FÜR TEXTUMBRÜCHE --- */
.v4-forum-title, .v4-forum-text, .v4-forum-posts, .v4-forum-threads, .v4-last-post {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
}
 
/* --- QUERFORMAT & PC-ANSICHT (Ab 900px Breite) --- */
@media screen and (min-width: 900px) {
 
    /* Zwingt die Forumzeile (z.B. Plauderecke) in eine Reihe von links nach rechts */
    .v4-forum-wrapper {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
 
    /* Linke Seite: Name & Beschreibung (50% Platz) */
    .v4-forum-info {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        text-align: left !important;
    }
 
    /* Rechte Seite: Zwingt Statistik & Letzten Beitrag nebeneinander */
    .v4-forum-data {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        display: flex !important;
        flex-direction: row !important; /* Verhindert das Untereinanderstehen */
        justify-content: space-between !important;
        align-items: center !important;
    }
 
    /* Die Zahlen (Themen & Beiträge) rücken in die Mitte der rechten Hälfte */
    .v4-forum-posts, .v4-forum-threads {
        flex: 0 0 25% !important;
        text-align: center !important;
        display: block !important;
    }
 
    /* Der letzte Beitrag steht ganz rechts außen */
    .v4-last-post {
        flex: 0 0 50% !important;
        text-align: right !important;
        font-size: 0.9em !important;
    }
}
 

Schließen

Das JavaScript gehört in den Reiter **"Eigenes HTML/JS"** in das Feld **"Eigenes Javascript"**:Mobile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<!-- Daishis stabiler Mobil-Regen -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
    // 1. Canvas erstellen, falls nicht da
    let canvas = document.getElementById('matrixCanvas');
    if (!canvas) {
        canvas = document.createElement('canvas');
        canvas.id = 'matrixCanvas';
        canvas.style.cssText = "position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:-1; pointer-events:none;";
        document.body.insertBefore(canvas, document.body.firstChild);
    }
 
    const ctx = canvas.getContext('2d');
 
    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);
 
    // 2. Zeichen & Setup
    const matrixChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ";
    const charsArray = matrixChars.split("");
    const fontSize = window.innerWidth < 768 ? 12 : 16;
    const columns = Math.floor(canvas.width / fontSize);
 
    const rainDrops = [];
    for (let x = 0; x < columns; x++) {
        rainDrops[x] = Math.random() * -100;
    }
 
    // 3. Animation
    function drawMatrix() {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#00ff00';
        ctx.font = fontSize + 'px monospace';
 
        for (let i = 0; i < rainDrops.length; i++) {
            const text = charsArray[Math.floor(Math.random() * charsArray.length)];
            const x = i * fontSize;
            const y = rainDrops[i] * fontSize;
 
            ctx.fillText(text, x, y);
 
            if (y > canvas.height && Math.random() > 0.975) {
                rainDrops[i] = 0;
            }
            rainDrops[i]++;
        }
    }
    setInterval(drawMatrix, 33);
});
</script>
 
 

Schließen

Ich hoffe, dass ich es Dir so gut es geht erklären konnte, wie ich das starre Style von Mobile durchbrochen habe. Ich hoffe, du findest eine Lösung für dein Style, damit es mobile klappt.

Wie gesagt, ich weiß von außen nicht, was du verändert hast und ob du noch divs verwendet hast – diese konnte ich nicht sehen. Sei mir nicht böse, wenn das PC-Style bei dir nicht direkt auf Mobile läuft.

Vielleicht hilft dir diese Lösung von mir für Lui, und sie bringt dich weiter.

Wie gesagt, das mobile Style und Theme ist sehr hartnäckig und stur, aber wie du siehst, habe ich sie durchbrochen und es an das PC-Style auf dem Handy angepasst.

Ich hoffe, die Idee und Inspiration kommt hier sehr gut an.

Kann auch live angesehen werden:

Hacker Style mit Matrix regen Mobile!

Mit herzlichen Grüßen

Daishi 🏴‍☠️

Daishi

Antworten

#3 | RE: HACKER-TERMINAL Style für das Xobor Forum Business (v4) und Mobile datum

20.06.2026 08:31 (zuletzt bearbeitet: 20.06.2026 08:39)

Daishi, wie immer tolle Arbeit mit einer riesigen Arbeitsleistung!
Aber:
Beim Anblick dieser Seite kommt es in meinem altersbedingt etwas überforderten Zentralnervensystem regelmäßig zu kurzfristigen neuronalen Fehlverschaltungen.
Die synaptische Reizübertragung gerät ins Stocken, während der präfrontale Kortex offenbar vorübergehend den Dienst quittiert.

Auf Deutsch gesagt: Mein Gehirn signalisiert der Hand unmissverständlich: „Klick die Seite weg!“

Aber dein Auftraggeber wollte das so und du hast das super umgesetzt.

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Dankeschön findet das Top!

Antworten

#4 | HACKER-TERMINAL Style für das Xobor Forum Business (v4) und Mobile datum

20.06.2026 20:30

HACKER-TERMINAL Style für das Xobor Forum Business (v4) und Mobile

Hallo DaishiIch bin ja ein Fan von Sciences Fiction !
Das Forum so umzugestalten, dass es wie in einer "MATRIX " aussieht ist der absolute Hammer.
Hat bestimmt viel Arbeit gemacht alles so anzupassen!
Passt natürlich nicht für jedes Forum, auf keinen Fall in ein Plauder-Forum,
eher in ein Forum mit übersinnlichen und fantastischen Geschichten.

Bis dann und vielen Dank für Dein außergewöhnliches Design

Wolfgang

Kipper-Spedition und Dankeschön finden das Top!

Antworten

Fliege im Forum » « Zitatfunktion beim Bearbeiten - Mit Xobor Zitat-Funktion und Zitat-Kürzel Teil 1-3

Ähnliche Themen

Antworten

Letzter Beitrag

Was ist im Forum so los? Das Community Radar!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 10 17.07.2026 11:16
L2otbart • Zugriffe: 665

Hilfe für das Xobor-Forum (Infobox-Skript wegen Serverumzug-Fehlern)
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi

24.05.2026 10:22
von

Daishi • Zugriffe: 904

Statistik neu stylen, brauche Hilfe
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi 1 28.02.2026 09:39
Daishi • Zugriffe: 421

📢 Meine Entdeckung: Warum Xobor-Foren sich "eigenartig" verhalten
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi

24.02.2026 01:54
von

Wolfgang • Zugriffe: 293

Nur Business (v4): "Legende anzeigen" unter "Letzte Beiträge" optisch anpassen!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

15.05.2023 17:11
von

Wolfgang • Zugriffe: 648

Zuklappen der Forum-Statistik Teil 1+2 - Geburtstage, Ereignis und Online oben in der Forum-Übersicht anzeigen
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

07.04.2022 19:31
von

Gabriella • Zugriffe: 1144

Xobor-Spoiler mit Hinweis
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 0 01.01.2021 19:49
Wolfgang • Zugriffe: 1686
FAQ verbessern und interessanter gestalten - (v4, v6 + Mobil)
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 5 09.07.2023 12:13
Daishi • Zugriffe: 3710

Userbox / User-Menü im Business (v4) perfekt anpassen
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

20.09.2025 18:19
von

Wolfgang • Zugriffe: 12604

Forum Übersicht → XOBOR-Foren und Homepages →

Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! → HACKER-TERMINAL Style für das Xobor Forum Business (v4)

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gefällt und Du Dich hier genauso wohlfühlst wie wir.

Um Dir und den anderen Mitgliedern das Bestmögliche bieten zu können, würden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras ergänzen.

Wenn Du uns dabei unterstützen möchtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €