Bräuchte mal Hilfe, ich komme mit dem Umschreiben auf das Xobor-Forum nicht weiter. Habe mich an Wolfgangs Tipps und Ratschläge gehalten.

In CodePen zeigt es sauber an, aber im Xobor-Forum mit anderen Größen. Musste im Xobor-Forum die Größe ändern, dass es soweit gut ausschaut.

Mit "z-index" blicke ich jetzt nicht mehr durch. Jetzt hat das mir die % Anzeige der Spendenanzeige um 2 Reihen nach unten geschoben. Wie gesagt ich schlage mich mit 2 Software herum, ist nicht böse gemeint, mich kotzt es an, dass es bei der einen sauber aussieht und bei der anderen total beschissen.

Und ändert man das beim Original, sieht es im anderen noch beschissener aus.

Entschuldigung, habe gerade die Geduld verloren. Wieso ist das Xobor-Forum so kompliziert?

Ich habe den HTML-Code in die Iconbar eingefügt, ersetze [about] mit HTML-Code dann speichern.

Hier das Original, wie es ausschaut.
about!

Hier wie es im Forum aussieht, mit Fehlern:
about!

Hier mal das HTML Code:

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
 

<button class="show">about</button>
<div id="modal">
  <button class="close">X</button>
  <br>
  <br>
  <br>
  <center><p>Hallo ich bin Daishi der Admin dieses Forums<br> möchten sie mich Kontaktieren?<br> <a href="https://www.black-angels-club.org/private_new.php?sendto=1"" target="_blank">Private Nachrichten</a></p>     </div> </center>    
</div>
 
<script id="rendered-js">
const show = document.querySelector(".show");
 
const modal = document.querySelector("#modal");
 
const close = document.querySelector(".close");
 
show.onclick = () => {
  modal.style.top = "50%";
};
 
close.onclick = () => {
  modal.style.top = "-100%";
};
 
window.addEventListener("mouseup", e => {
  if (e.target.id != "modal") {
    modal.style.top = "-100%";
  }
});
//# sourceURL=pen.js
    </script>
 

Schließen

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
 

 
 {
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  background-color: #e9e9e9;
  font-family: poppins;
}
 
.show {
  background-color: #cccccc;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
 
}
 
#modal {
  position: fixed;
  top: -100%;
  left: 50%;
  z-index: 88;
  transform: translateX(-50%) translateY(-50%);
  width: 350px;
  height: 20%;
  background-color: #e9e9e9;
  border-radius:17px 17px 17px 17px;
  box-shadow:1px 1px 10px 1px #000000;
  postion: relative;
  transition: top 300ms ease-in-out;
}
 
.close {
  float: right;
  margin: 10px 10px 0 0;
  background-color: #cccccc;
  color: white;
  border: none;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
}
 

Schließen

Habe den ersten Fehler gefunden dieser code veränderte unten die Zahl der Forenspende die % zahl.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 
}
 

Nur den zweiten Fehler finde ich nicht.

Die z-index:88; habe ich geändert auf z-index: 999999; aber keine Veränderung. Sichtbar ist immer noch unter dem Forum-Balken.

Mit freundlichen Grüßen

Daishi

Du hast ja immer tolle Ideen. Kann man dich mieten?

Gestern und heute Nacht - bis 7 Uhr früh sprudelten Ideen und Inspirationen durch meinen Kopf. Ich habe geschlafen, bis jetzt.

Bei der Umsetzung habe ich gemerkt, dass ich nicht mehr kopieren kann, sei es mit Strg + C und mit einfügen Strg + V. Der fügt mir überall zusätzlich den Leerzeichen-Code " " mit ein. Auch mit normalen kopieren geht das nicht. Ich weiß nicht, wo das Problem hier ist. Nur komisch, auf meinem Linux PC ist das nicht so.

Das Problem erscheint nur auf dem Windows 10 PC. Wenn ich mit dem kopiere und einfüge sind die Leerzeichen-Codes " " mit drin. Und aus der Textdatei kann ich nicht mal 1 Zeile kopieren mit Doppelklick, das geht nicht.

Hier eine besondere Inspiration, die ich bekam, als Wolfgang und ich schrieben und es mit einem Namen hatten für eine schöne Gestaltung. Danach trank ich ein Bier und 5 Gläser Whiskey, da kam mir die Idee und ich fing an dies umzusetzen.

Hier das Original:
Kleiner Scripter!

Also nicht wundern, ich habe den HTML-Code in die Iconbar eingefügt, ersetze [scripter] mit HTML-Code, dann speichern.
Kleiner Scripter!

Hier der HTML - Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 

<div class="a">
 
<div class="b">
  <div class="badge">
    <img src="https://files.homepagemodules.de/b906480/avatar-ad1661ca-1.jpg">
    <div class="data">
      <b>Daishi</b><br>
      Kleiner Scripter
    </div>
    </div>
    
    
</div>
</div>
 

Schließen

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
 

.a {
background-color:transparent;
  width:500px;
  height:350px;
}
 
.b {
  font-size: 24px;
  padding: 15px;
  position:relative;
  top:25%;
  left:20%;
  width:300px;
  height:150px;
border-radius: 25px;
background: linear-gradient(145deg, #583d71, #000);
box-shadow:  7px 7px 7px #000,
             -7px -7px 7px #402c53;
}
.badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.badge img {
  margin-right: 15px;
  width: 130px;
  height: 130px;
  border-radius: 15px;
  box-shadow:  7px 7px 7px #000,
             -7px -7px 7px #402c53;
  }
 
.badge img:hover {
  transform: scale(1.2);
  transition: all .5s ease;
}
.data {
   display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  font-size: 1.3rem;
}
 

Schließen

1
 

<div class="quote"> <em>" Das hier ist das Ergebniss "<em></div>
 

Im Portal und "Eigene Seiten" muss diese Zeile nicht eingefügt werden, nur zur Info.
Warum das so ist, habe ich keine Erklärung, ich merkte das beim Einfügen dieser Info.

Also nicht wundern, ich habe den HTML-Code in die Iconbar eingefügt, ersetze [inspiration] mit HTML-Code, dann speichern.
Inspiration!

Hier das Original:
Inspiration!



Der HTML - Code:

1
2
3
4
5
6
7
8
9
10
11
12
 

<div class="quote-container">
  <div class="quote"> <em>" Wolfgang hat mich inspiriert "<em></div>
  <br> 
  <div class="quote"> <em>" Das hier ist das Ergebniss "<em></div>
    
 
  <div class="rounded-border r1"></div>
  <div class="rounded-border r2"></div>
  <div class="rounded-border r3"></div>
  <div class="rounded-border r4"></div>
  <div class="title">Daishi</div>
</div>
 

Schließen

Und hier der CSS - Code:

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
 

.quote-container {
  border: 2px solid gold;
  width: 40%;
  margin: auto;
  padding: 50px 0;
  text-align: center;
  font-size: 120%;
  position: relative;
  background-color: #323232;
}
.r1 {
  top: -10px;
  left: -10px;
  transform: rotate(-45deg);
}
.r2 {
  top: -10px;
  right: -10px;
  transform: rotate(45deg);
}
.r3 {
  bottom: -10px;
  right: -10px;
  transform: rotate(135deg);
}
.r4 {
  bottom: -10px;
  left: -10px;
  transform: rotate(-135deg);
}
.rounded-border {
  width: 30px;
  height: 25px;
  position: absolute;
  background-color: #323232;
  z-index: 50;
  border-bottom: 2px solid gold;
  border-radius: 50%;
}
.title {
  position: absolute;
  top: -10px;
  background-color: #323232;
  right: 45%;
  padding: 0 10px;
  color: gold;
}
.quote {
  color: azure;
}
body {
  background-color: #323232;
}
 
 

Schließen

Ich hoffe, ich konnte es so gut erklären, dass es jeder verstanden hat.

Ich hoffe, dass meine Inspiration gut ankommt.

Mit freundlichen Grüßen

Daishi

Hallo, Wolfgang, ich wusste jetzt nicht, ob ich deswegen extra ein neuer Beitrag dafür eröffnen sollte.

Ich arbeite seit Tagen an 2 Menüs, 1-mal für den Administrator und einmal für die Gäste und Mitglieder.

Diese kann man in der Iconbar trennen, mit den Rechten, wer sie sehen kann und wer nicht. Funktioniert sehr gut. Für Gäste und Mitglieder blendet man Administrator und Moderator aus, für Admin Gäste und Mitglieder aus.

Bin aber noch daran am Basteln. Ich hoffe, dass es so weit ok war, dass ich da Veränderungen vorgenommen habe. Komme mit den Div's nicht klar, aber mit "optgroup" komme ich etwas besser klar. Ich weiß nicht warum das aber so ist.

Hier mal die Links zu der Arbeit, kann man in CodePen auch anklicken und überfahren. Ich benutze schon die 2 Menüs im Forum, aber baue sie noch etwas aus. Ich wollte nur einen kleinen Vorgeschmack, geben und hoffen, dass das so weit ok war. Ich möchte mich nicht mit fremden Federn schmücken.


Admin & Moderatoren Menü
Admin & Moderatoren Menü!


Gäste & Mitglieder Menü
Gäste & Mitglieder Menü!