Forum - Animierter Benutzer / Avatar mit Link zum Profil

Hallo Wolfgang, ich stehe vor einem kleinen Problemchen hier mit dem Xobor-Forum.

Ich habe jetzt ein Script geschrieben, auf Wunsch meiner Freundin. In CodePen läuft es tatenlos. Wenn ich es in Xobor - Forum einfüge läuft es nicht!

In der CSS habe ich einiges wegmachen müssen. Ich beschreibe, was ich weggemacht habe.

Dies hatte ich erst auskommentiert, also nur die Sterne vorn. Brachte nichts, der Forum-Style war verzerrt. Dann habe ich es komplett rausgelöscht. Im Body habe ich nur das "body" vorn entfernt.

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

Jetzt zu meinem kleinen Problem. Wo habe ich jetzt den Fehler gemacht, dass die Animation nicht im Xobor-Forum anzeigt. Habe extra aufgepasst, dass ich nicht so viel in der CSS schreibe, damit ich die CSS-Tags von Xobor - Forum nicht beeinflusse.

Vielleicht findest du auf Anhieb den Fehler, ich denke mehr Augen sehen besser als 2 Augen

Ich habe es als Icon ins Xobor - Forum eingefügt. Man sieht ganz schwach hinter dem dunklen Hintergrund blinken. Ich hoffe, du verstehst, was ich meine.

1
2
 

  <div class="efect"></div>
<a href="https://black-angels-club.xobor.de/u1_Blutwahn.html"><font color="grey"><b>© Blutwahn</b></font></a></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
45
46
47
48
49
50
51
52
53
54
 

  /* Hier beginnt der neue Benutzereffekt */
/* Hier beginnt der neue Benutzereffekt */
/* Hier beginnt der neue Benutzereffekt */
 
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.efect {
  height: 100px;
  width: 100px;
  background-image: url("https://files.homepagemodules.de/b906480/avatar-76b967fa-1.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  position: relative;
  border: 5px solid #3ef719;
}
.efect::before, .efect::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #590696;
  z-index: -1;
  animation: bo 1.3s infinite ease;
}
.efect::after {
  z-index: -2;
  animation-delay: 1s;
}
 
@keyframes bo {
  to {
    transform: scale(3);
    opacity: 0;
  }
}
 
/* Hier endet der neue Benutzereffekt */
/* Hier endet der neue Benutzereffekt */
/* Hier endet der neue Benutzereffekt */  
 

Schließen

Wolfgang, du hast mich gerade, umgehauen. Fantastisch, was du für Hammer Ideen hast. Hast du echt megakrass geschrieben, gefällt mir sehr gut.

Ist sogar 1000-mal besser als meine Idee.

Habe die CSS eingefügt und funktioniert tatenlos, ist ein mega Effekt.

Hmm, was ich nur nicht verstehe, ist die z-index Anpassung, das ist mir noch viel zu hoch. Bin ja froh, dass ich das so hinbekomme, dass es in CodePen geht.

Es gibt immer etwas zu lernen, man lernt im Leben nie aus, aber bis ich das mal so hinbekomme wie du werden noch Jahre vergehen.

PS: Die Idee war ja für die netten Spender des Boards, etwas speziell anzuzeigen, mit dem Avatar.
Bin ja noch daran am wursteln.


Mit freundlichen Grüßen

Daishi

Hallo Wolfgang, ich habe das Script soweit fertig, habe daran jetzt die ganze Nacht daran, gesessen bis jetzt.

Ich habe einen Hover-Effekt mit eingebaut. Da dreht sich die Farbe, ich habe auf deinen Rat gehört und es etwas dezenter gemacht.

Habe auch ein kleines Schildchen mit in den Avatar eingebaut. Wenn man einen Text eingibt, also den Namen des Projektes, passt sich das Schildchen automatisch mit an.

Wie du siehst, habe ich alle deinen Rat befolgt. Meine Idee war ja, dass ich das als Foren-Code für alle Mitglieder mache. Also so [Spender], [Spender2], [Spender3], [Spender4], u.s.w. anlegen!

Das funktioniert, muss gleich beim Anlegen geändert werden, Profil ID und Bild. Habe es getestet, es funktioniert.


Das einzige Problem ist das mit der Animation, wenn ich mit der Maus drüberfahre. Diese Animation geht im Xobor-Forum nicht. Sei mir nicht Böse, aber ich verstehe, dass mit dem Umschreiben nicht und mit dem z-index. Ich schaue mir das die ganze Zeit an, ich verstehe 0000.

Ich bin nur froh, dass ich sie so weit hinbekomme, dass sie in CodePen laufen.

Hier das Script in Action:

User mit Spender, Schild und Hover Funktion!



Der HTML Code:

1
2
3
4
5
6
7
8
9
10
11
 

 
<!-- Hier beginnt das User Avatar Spender Script -->
<div class="user-avatar"></div>
<!-- Hier beginnt das Javascript -->
<script id="rendered-js">
const user = document.querySelector('.user-avatar');
 
user.addEventListener('click', () =>
open('http://black-angels-club.xobor.de/u1_Blutwahn.html'));
//# 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 

/* Hier beginnt der neue Benutzereffekt für spender */
/* Hier beginnt der neue Benutzereffekt für Spender */
/* Hier beginnt der neue Benutzereffekt für Spender */
*, *::before, *::after {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  padding: 0;
  background: #0e0e10;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* User Avatar - Hier die Adresse des Bildes angeben */
.user-avatar {
  background: url(https://files.homepagemodules.de/b906480/avatar-76b967fa-1.png) no-repeat center;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: relative;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #0e0e10;
  cursor: pointer;
}
.user-avatar::before {
  content: "";
  background: linear-gradient(180deg, #9147ff 70%, rgba(255, 255, 255, 0.85));
  border-radius: 50%;
  height: 110%;
  width: 110%;
  position: absolute;
  z-index: -1;
}
/* User Avatar Hover-Effekt */
.user-avatar:hover::before {
  animation: avatar-rotate 1s linear infinite;
}
/* User Avatar Name für Project - Ist automatisch anpassbar */
.user-avatar::after {
  /* Project Name angeben z.b. Spender */
  content: "Spender";
  color: #fff;
  font-family: sans-serif;
  font-weight: 700;
  background: red;
  padding: 5px;
  border: 2px solid #0e0e10;
  border-radius: 10px;
  text-align: center;
  transform: translateY(143%);
}
 
@keyframes avatar-rotate {
  to {
    transform: rotate(360deg);
  }
}
 
/* Hier endet der neue Benutzereffekt für Spender */
/* Hier endet der neue Benutzereffekt für Spender */
/* Hier endet der neue Benutzereffekt für Spender */  
 

Schließen

Das ist eine schöne Animation.

Super Arbeit funktioniert Hammer, habe es installiert, krasse Arbeit. Muss auch hier ein mega Lob aussprechen. Einfach Hammer.


Mit freundlichen Grüßen

Daishi

Habe nochmal etwas gebastelt, bekomme es sehr schön in den Forenbeiträgen hin, über die Iconbar sieht es echt gut aus.

Geht auch im Portal zum Einfügen. Meine Frage ist, ich kenne hier die speziellen Codes nicht von Xobor - Forum.

Ich finde diese Codebeschreibung nicht mit den Usern, wenn man den Namen eingibt, dass er sich bei den registrierten Usern, direkt hinten im Profil geht.

Ich wollte fragen, ob das hier im Forum überhaupt möglich ist über HTML - Code und Javascript.

Wenn ich es mehrfach eingebe, muss ich für jede CSS3 - Code, neue Code - Blöcke anlegen. Ich weiß ja nicht, ob ich dann für jeden User ein Code - Block angelegt habe, dass ich die CSS sprenge.

Also zur Erklärung für jeden neuen User muss ich per Hand in HTML und Javascript so eingeben

  () => open('https://www.servicecrewloreth.de/u1_Loreth-christian.html')); //# sourceURL=pen.js   
 

und bei

  <script id="rendered-js"> const user = document.querySelector('.user-avatar1');  
 

Wollte da nur fragen, ob es eine Lösung gibt.

So wie in den CSS - Codes, da muss ich auch für jeden User, Änderungen per Hand machen,

  .user-avatar1::after {  
 

hier muss ich für jeden user die Classes ändern z.b. user-avatar1, user-avatar2 und so weiter ....... also in Zeile 16, 29, 39, 41

Auch hier die Frage gibt es dafür Vorschläge oder Ideen?

Also hier mal die Bilder, wie es aussieht und wie ich es meine.

Hier im Forum Beitrag über die Iconbar eingefügt:

1
 

  [left][spender1][/spender1][/left]   [center][spender1][/spender1][/center]    
 

Rechts bekomme ich es noch nicht hin.

Hier im Portal auf der linken Seite eingefügt:

Edit: Portal, Bearbeitungsmodus aktivieren, Box zum Bereich Hauptbereich_Links hinzufügen, Simple Textbox, Neu, bei Name - Namen eingeben, Inhalt der Box - den Code einfügen.

Der HTML - Code mit Javascript:

1
 

  <!-- Hier beginnt das User Avatar Spender Script --> <div class="user-avatar1"></div> <!-- Hier beginnt das Javascript --> <script id="rendered-js"> const user = document.querySelector('.user-avatar1');   user.addEventListener('click', () => open('https://www.servicecrewloreth.de/u1_Loreth-christian.html')); //# sourceURL=pen.js </script>  
 

Und hier wie man es in der iconbar eingibt:

1
2
3
 

   Ersetze: [spender1]
 
mit: <!-- Hier beginnt das User Avatar Spender Script --> <div class="user-avatar1"></div> <!-- Hier beginnt das Javascript --> <script id="rendered-js"> const user = document.querySelector('.user-avatar1');   user.addEventListener('click', () => open('https://www.servicecrewloreth.de/u1_Loreth-christian.html')); //# sourceURL=pen.js </script>   
 

Und hier der CSS Code User code - Blöcke:

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
 

  /* Hier beginnt der neue Benutzereffekt für spender1 */
/* Hier beginnt der neue Benutzereffekt für spender1 */
/* Hier beginnt der neue Benutzereffekt für spender1 */
 

{
  margin: 0;
  padding: 0;
  background: #0e0e10;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* User Avatar hier die adresse des Bildes angeben */
.user-avatar1 {
  background: url(https://files.homepagemodules.de/b906480/avatar-75e6190c-1.jpg) no-repeat center;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: relative;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #0e0e10;
  cursor: pointer;
}
.user-avatar1::before {
  content: "";
  background: linear-gradient(180deg, #9147ff 70%, rgba(255, 255, 255, 0.85));
  border-radius: 50%;
  height: 110%;
  width: 110%;
  position: absolute;
  z-index: -1;
}
/* User Avatar Hover bei maus überfahren */
.user-avatar1:hover::before {
  animation: avatar-rotate 1s linear infinite;
}
/* User Avatar Name für Project ist automatisch anpassbar */
.user-avatar1::after {
  /* Project name angeben z.b. Spender */
  content: "63 € gespendet";
  color: #fff;
  font-family: sans-serif;
  font-weight: 700;
  background: red;
  padding: 5px;
  border: 2px solid #0e0e10;
  border-radius: 10px;
  text-align: center;
  transform: translateY(143%);
}
 
@keyframes avatar-rotate {
  to {
    transform: rotate(360deg);
  }
}
 
/* Hier endet der neue Benutzereffekt für spender1 */
/* Hier endet der neue Benutzereffekt für spender1 */
/* Hier endet der neue Benutzereffekt für spender1 */  
 

Schließen

Wie oben schon beschrieben für jeden User neuer Code-Block, user-avatar1, z.b. 25 user 25 Code - Blöcke.

Ich hoffe, ich habe die Frage verständlich erklärt, und es gibt dafür eine Idee oder eine Lösung.

Ich bedanke mich im Voraus für genaue Erklärungen, Lösungsvorschläge und Ideen.

Nette Grüße Daishi

Hallo Wolfgang, tolle Arbeit einfach top. Funktioniert tatenlos. Du leistest hier echt super Arbeit und überrascht mich immer wieder mit deinen coolen Ideen.

Hier mal ein riesiges Lob an dich, und deine Arbeit.




Habe es mit längeren Namen probiert, das sieht dann so aus.

Bild:

  .user-avatar-text, .user-avatar-hover {
  display: flex;
  justify-content: center;
  color: #ffffff !important;
  font-family: sans-serif;
  font-weight: bold;
  background: #E5352E;
  padding: 5px;
  border: 2px solid #0e0e10;
  border-radius: 10px;
  text-align: center;
  margin-top:95%;
  z-index:99999;
}  
 

  .user-avatar-text, .user-avatar-hover {
  display: flex;
  justify-content: center;
  color: #ffffff !important;
  font-family: sans-serif;
  font-weight: bold;
  background: #E5352E;
  padding: 2px;
  border: 1px solid #0e0e10;
  border-radius: 10px;
  text-align: center;
  margin-top:95%;
  z-index:99999;
}