Avatar mit Statusanzeige, Avatar-Namen zentrieren

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 - Hilfe, Tricks & Tipps! » Avatar mit Statusanzeige, Avatar-Namen zentrieren

Seite 1 von 5 « Seite 1 2 3 4 5 Seite »

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 | Avatar mit Statusanzeige, Avatar-Namen zentrieren datum

20.09.2022 16:35 (zuletzt bearbeitet: 18.06.2023 13:03)

Daishi

Informationen anzeigen

Beiträge:	418
Registriert seit:	08.01.2022

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

Hallo Wolfgang, endlich nach 4 Tagen Arbeit habe ich es fertig, es war nur eine Idee. Ich finde, es sieht schön aus.

Bei online ist es klar, sauber und scharf.

Bei offline ist es ein bisschen unscharf und leicht stumpf.

Bei away ( AFK ) ist es grau und blass.

Wenn man die Bilder sieht, hoffe ich, dass man weis was ich meine. Entschuldigung, das Erklären ist nicht so meine beste Stärke.

Ich habe auch versucht es in "Eigenen Seiten" einzubinden, es geht und wird angezeigt. Dazu muss man an Anfang das ( body ) in der CSS entfernen, sonst verzerrt sich der Forum-Style.

Ich habe es auch getestet als Foren-Code für die iconbar. Auch das geht nur wenn es in der Mitte steht. Da muss man noch etwas machen oder etwas dran herumschrauben, dass es im Xobor - Forum geht.

Wie gesagt, es war eine Idee, Wolfgang hat mich mit den Status inspiriert und ich dachte, ich versuche auch etwas zu basteln. Ich denke aber, dass mein Script, damit es hier im Xobor - Forum geht, komplett zerlegt werden muss und neu geschrieben oder angepasst werden muss, so dass man das als online und offline mit dem Punkt hier sieht.

Wie gesagt, es war nur eine Idee und Inspiration.

Hier mal wie es aussieht.
Avatar mit Status!

Hier der HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
  <figure>
  <figcaption data-status='online'>32teeth</figcaption>  
  <picture>
    <img src='https://files.homepagemodules.de/b104774/avatar-8aaec346-954.jpg'/>
  </picture>
</figure>
 
<figure>
  <figcaption data-status='away'>32teeth</figcaption>  
  <picture>
    <img src='https://files.homepagemodules.de/b104774/avatar-8aaec346-954.jpg'/>
  </picture>
</figure>
 
<figure>
  <figcaption data-status='offline'>32teeth</figcaption>  
  <picture>
    <img src='https://files.homepagemodules.de/b104774/avatar-8aaec346-954.jpg'/>
  </picture>
</figure>  
 

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
  @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300);
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-family: "roboto";
  background-image: linear-gradient(to bottom right, #8281b3, #454471);
  justify-content: space-evenly;
}
 
figure {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  flex-direction: column;
}
figure figcaption {
  position: absolute;
  width: 25px;
  height: 25px;
  text-indent: -100vw;
  white-space: nowrap;
}
figure figcaption:before {
  position: absolute;
  top: 35px;
  left: 35px;
  z-index: 1;
  outline: solid 4px white;
  outline-offset: -4px;
  content: "";
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-indent: 0;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
  transition: all ease 250ms;
}
figure figcaption[data-status=online] + picture > img {
  filter: contrast(150%);
}
figure figcaption[data-status=online]:before {
  background: green;
}
figure figcaption[data-status=away] + picture > img {
  filter: opacity(75%);
}
figure figcaption[data-status=away]:before {
  background: maroon;
}
figure figcaption[data-status=offline] + picture > img {
  filter: grayscale(100%);
}
figure figcaption[data-status=offline]:before {
  background: gray;
}
figure picture {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
}
figure picture img {
  outline: solid 4px white;
  outline-offset: -4px;
  border-radius: 50%;
  width: 100%;
}  
 

Schließen

Ich hoffe, dass diese Erklärung verständlich ausgedrückt ist.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang und charlie1965 finden das Top!

Antworten

#2 | Avatar mit Status - Neue Version datum

24.09.2022 08:48 (zuletzt bearbeitet: 05.12.2024 22:34)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3875
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1719

Avatar mit Status - Neue Version
Aktualisiert 05.12.24

Hallo Daishi,
habe Deine Idee hier im Xobor-Forum erweitern können, so dass sie jetzt fürs Gaia (v3) + Business (v4) funktioniert.
Mal wieder besten Dank!

Was kann die neue Status-Anzeige?

Die Avatare sind animiert!
Die Avatare werden gerundet dargestellt, beim Mouseover werden sie quadratisch!
Der Avatar bekommt für den Status einen zusätzlichen Punkt.
Online-Status wird grün, der Offline-Status rot und der Gäste-Status wird grau angezeigt!
Zusätzlich werden die Avatare im Gäste-Zugang (nicht angemeldet) auch grau angezeigt.
Neu - Nur V4! Der Member-Status wird jetzt auch in "Beitrag bearbeiten" + "Neuer Beitrag" angezeigt!

Neu! Zusätzliche Optionen fürs Busines (v4):

Die kleine Statusanzeige links neben dem Member-Namen kann ausgeblendet werden!
Der Punkt beim Mouseover kann optional ausgeblendet werden!
Nur der Punkt wechselt die Farbe beim Mouseover, nicht zusätzlich der Rahmen!
Der Avatar kann eckig angezeigt werden, ohne Mouseovereffekt!
Der Member-Name kann zentriert dargestellt werden!
Gast-Avatar im Portal
Optional kann für Gäste der "Online- & Offline-Status" angezeigt werden!

Neu! Zusätzliche Optionen fürs Gaia (v3):

Der Avatar kann eckig angezeigt werden, ohne Mouseovereffekt!
Nur der Punkt wechselt die Farbe beim Mouseover, nicht zusätzlich der Rahmen!
Der Punkt beim Mouseover kann optional ausgeblendet werden!
Die kleine Online-Statusanzeige links neben dem Member-Namen kann ausgeblendet werden!
Optional kann für Gäste der "Online- & Offline-Status" angezeigt werden!

Installation fürs Business (v4) + Gaia (v3)

Da hier Variablen benötigt werden, wird alles als Plugin in "Untere leiste - Header" kopiert!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, Business - Template (144), Auswahl mit Mausklick oder Strg + Mausklick!

In den Zeilen 3, 4 + 5 wird die Farbe des Avatars gewählt!
Die Farbe kann einheitlich dem Status entsprechend ausgewählt werden!
Möchte man die Avatargröße in Zeile 14+15 ändern (hier 120px / 120px), ist ein Zusammenspiel von Zeile 24+25, 38+39 notwendig!

Neu! Zusätzliche Optionen fürs Business (v4):

Wird Zeile 61 gelöscht, wird die kleine Statusanzeige links neben dem Member-Namen wieder angezeigt, auch im Portal!
Wird Zeile 28 freigegeben, wird der Punkt beim Mouseover ausgeblendet!
Wird Zeile 75 freigegeben, Zeilen 78+81+85, 94, 106+109+113, 124+130 gelöscht, wechselt nur der Punkt die Farbe beim Mouseover, nicht der Rahmen!
Wird Zeile 17 gelöscht und Zeile 40+41 freigegeben, wird der Avatar eckig angezeigt, es gibt kein Mouseovereffekt!
Soll der Member-Name zentriert werden, Zeile 64 freigeben!
Soll ein Gast-Avatar im Portal angezeigt werden, Zeile 129 freigeben!
Soll für Gäste der "Online- & Offline-Status" angezeigt werden, müssen die Zeile 31, 74, 92-98 gelöscht werden!
Zusätzlich kann das Eingrauen des Avatars durch löschen der Zeilen 31, 87, 96+115 aufgehoben werden!

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
 
<style>
:root {
  --Gruen: #64A40B; /* Online */
  --Rot: #A02C2B; /* Offline */
  --Grau: gray; /* Gast */
}
.messageAvatar { 
  display: flex;
  justify-content: center;
  align-items: center;
  padding:10px;
}
.messageAvatar img {
  width: 120px !important;
  height: 120px !important;
  object-fit: contain; 
  border-radius: 50%; 
  box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4);
}
.messageAvatar:hover img {
  border-radius: 10% !important; 
}
.messageAvatar:hover .figure:before {
  top: 55px; 
  left: 55px;
}
.messageAvatar:hover span {
  /* display: none; */
}
 .messageAvatar .figure.gast + a > img {
  filter: grayscale(100%);
}
.figure {
  position: absolute; 
}
.figure:before {
  position: absolute;
  top: 35px; 
  left: 35px;
  /* top: 55px; */
  /* left: 55px; */
  z-index: 1;
  outline: solid 2px white;
  outline-offset: -4px;
  content: "";
  width: 25px;
  height: 25px;
  border-radius: 50%;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25); 
}
.figure.online:before {
  background: var(--Gruen);
}
.figure.offline:before {
  background: var(--Rot);
}
.figure.gast:before {
  background: var(--Grau);
}
.sidebarcontent .messageUser span img, .portal .rightcol .boxcont span img, .sidebarcontent div span img {
  display:none; 
} 
.sidebarcontent strong {
  /* display: flex; justify-content: center; margin: 5px 0 10px 0; */
}
</style>
 
 
<script>
// Avatar Online / Offline - Farbe / Gastzugang
window.addEventListener('load', function(){
  {{message.startlist}}
 
  {{user_registered==true.start}}
  /* $('#post{{message:pt}} .messageAvatar img').css({'border':'2px solid  var(--Grau)','padding':'3px'});  */
  
  {{message:online==true.start}}
    $('#post{{message:pt}} .messageAvatar img').css({'border':'2px solid var(--Gruen)','padding':'3px'});   
    $('#post{{message:pt}} .messageAvatar').prepend('<span class="figure online">&nbsp;</span>');
  {{message:online==true.else}}
    $('#post{{message:pt}} .messageAvatar img').css({'border':'2px solid var(--Rot)','padding':'3px'});  
    $('#post{{message:pt}} .messageAvatar').prepend('<span class="figure offline">&nbsp;</span>');  
 
    $('#post{{message:pt}} .messageUser:contains("Gast")').each(function(){
      $('#post{{message:pt}} .messageAvatar img').css({'border':'2px solid var(--Grau)','padding':'3px'});  
      $('#post{{message:pt}} .messageAvatar .figure.offline').addClass('gast');   
      $('#post{{message:pt}} .messageUser span img').css('filter', 'grayscale(100%)');
    });
  
  {{message:online==true.end}}
  
  {{user_registered==true.else}}
  
    $('#post{{message:pt}} .messageAvatar img').css({'border':'2px solid var(--Grau)','padding':'3px'});  
    $('#post{{message:pt}} .messageAvatar').prepend('<span class="figure gast">&nbsp;</span>');   
    $('#post{{message:pt}} .messageUser span img').css('filter', 'grayscale(100%)');   
  
  {{user_registered==true.end}}
  
  {{message.end}}
 
  // Avatar Portal + Beiträge 
  {{posts.startlist}}
  
  {{posts:online==true.start}}
    $('#mavatar{{posts:pt}} img').css({'border':'2px solid var(--Gruen)','padding':'3px'});   
    $('#mavatar{{posts:pt}}').prepend('<span class="figure online">&nbsp;</span>');
  {{posts:online==true.else}}
    $('#mavatar{{posts:pt}} img').css({'border':'2px solid var(--Rot)','padding':'3px'});  
    $('#mavatar{{posts:pt}}').prepend('<span class="figure offline">&nbsp;</span>');  
 
  $('#mavatar{{posts:pt}}').prev('strong:contains("Gast")').each(function(){
      $('#mavatar{{posts:pt}} img').css({'border':'2px solid var(--Grau)','padding':'3px'});  
      $('#mavatar{{posts:pt}} .figure.offline').addClass('gast');   
      $('#post{{message:pt}} .messageUser span img').css('filter', 'grayscale(100%)');
  });
  
  {{posts:online==true.end}}
  
  {{posts.end}}
   
  {{user_registered==true.start}}
  
  $('.portal .messageAvatar img, .messageAvatar#mavatar img').css({'border':'2px solid var(--Gruen)','padding':'3px'});   
  $('.portal .messageAvatar, .messageAvatar#mavatar').prepend('<span class="figure online">&nbsp;</span>'); 
 
  {{user_registered==true.else}}
 
  /* $('#login_form').before('<div class="messageAvatar"><span class="figure gast">&nbsp;</span><a href="u1_Wolfgang.html"><img src="//files.homepagemodules.de/b2001010/a_551.png" style="border:2px solid var(--Grau); padding: 3px;"></a></div>'); */
  $('.portal .messageAvatar img, .messageAvatar#mavatar img').css({'border':'2px solid var(--Grau)','padding':'3px'}); 
  $('.messageAvatar#mavatar').prepend('<span class="figure gast">&nbsp;</span>');
  
  {{user_registered==true.end}}
  
});  
</script>
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Da hier Variablen benötigt werden, wird alles als Plugin in "Untere leiste - Header" kopiert!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, Business - Template (144), Auswahl mit Mausklick oder Strg + Mausklick!

In den Zeilen 67, 70, 74+83 wird die Randfarbe des Avatars gewählt!
Die Farbe kann einheitlich oder auch dem Status entsprechend ausgewählt werden!
In Zeile 25 wird der Avatar im Gast-Zugang Grau dargestellt!
Möchte man das nicht, Zeile löschen!

In Zeile 68 (grün), 71 (rot) + 75/84 (grau) werden die kleinen Kreise gesetzt!
In Zeile 44 (grün), 47 (rot) + 50 (grau) werden die Statusfarben für die kleinen Kreise bestimmt!

Neu! Zusätzliche Optionen fürs Gaia (v3):

Wird Zeile 11 gelöscht, wird der Avatar eckig angezeigt, es gibt kein Mouseovereffekt!
Wird Zeile 22 freigegeben, wird der Punkt beim Mouseover ausgeblendet!
Wird Zeile 62 freigegeben, Zeilen 67, 70, 74+83 gelöscht, wechselt nur der Punkt die Farbe beim Mouseover, nicht der Rahmen!
Wird Zeile 52 freigegeben, wird die kleine Statusanzeige links neben dem Member-Namen ausgeblendet!
Soll für Gäste der "Online- & Offline-Status" angezeigt werden, müssen die Zeile 64, 81-86 gelöscht werden!
Zusätzlich kann das Eingrauen des Avatars durch löschen der Zeilen 25+76 aufgehoben werden!

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
 
<style>
.messagecont div div center:first-child {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.messagecont div div center:first-child img {
  width: 120px !important;
  height: 120px !important;
  object-fit: contain; 
  border-radius: 50%; 
  box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4);
}
.messagecont div div:hover center img {
  border-radius: 0% !important; 
} 
.messagecont div div:hover center .figure:before {
  top: 0; 
  left: -11px;
}
.messagecont div div:hover center span {
  /* display:none; */
} 
.messagecont div div:hover center .figure.gast + a > img {
  filter: grayscale(100%);
}
.figure {
  position: absolute; 
}
.figure:before {
  position: absolute;
  top: -25px; 
  left: -25px;
  z-index: 1;
  outline: solid 2px white;
  outline-offset: -4px;
  content: "";
  width: 25px;
  height: 25px;
  border-radius: 50%;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25); 
}
.figure.online:before {
  background: #64A40B;
}
.figure.offline:before {
  background: #A02C2B;
}
.figure.gast:before {
  background: gray;
}
/* .onstat img {display: none;} */
</style>
 
 
<script>
// Avatar Online / Offline - Farbe / Gastzugang 
window.addEventListener('load', function(){
 
  {{message.startlist}}
 
  /* $('#msg_{{message:id}} .messagecont div div center:first img').css({'border':'2px solid gray','padding':'3px'}); */
  
  {{user_registered==true.start}}
  
  {{message:online==true.start}}
  $('#msg_{{message:id}} .messagecont div div center:first img').css({'border':'2px solid #64A40B','padding':'3px'});   
  $('#msg_{{message:id}} .messagecont div div center:first').prepend('<span class="figure online">&nbsp;</span>');   
  {{message:online==true.else}}
  $('#msg_{{message:id}} .messagecont div div center:first img').css({'border':'2px solid  #A02C2B','padding':'3px'});  
  $('#msg_{{message:id}} .messagecont div div center:first').prepend('<span class="figure offline">&nbsp;</span>');  
 
  {{message:user_registered==false.start}}
    $('#msg_{{message:id}} .messagecont div div center:first img').css({'border':'2px solid gray','padding':'3px'});  
    $('#msg_{{message:id}} .messagecont div div center:first .figure.offline').addClass('gast');   
    $('#msg_{{message:id}} .messagecont div div center:first span img').css('filter', 'grayscale(100%)');
  {{message:user_registered==false.end}} 
 
  {{message:online==true.end}}
  
  {{user_registered==true.else}}
  
  $('#msg_{{message:id}} .messagecont div div center:first img').css({'border':'2px solid gray','padding':'3px'});  
  $('#msg_{{message:id}} .messagecont div div center:first').prepend('<span class="figure gast">&nbsp;</span>');     
  
  {{user_registered==true.end}}
  
  {{message.end}}
 
});
</script>
 

Schließen

Spoiler mit einem Klick öffnen und schließen!

Auch hier zum Thema:

Kleine Online Ampel
Runde oder quadratische Avatar-Darstellung

Bis dann und viel Erfolg beim Umsetzen!

Wolfgang

Anne, Daishi und Nara finden das Top!

Antworten

Moderations-Kommentar:

Für verzerrungsfreie Grafiken "object-fit: contain" eingesetzt!"

#3 | RE: Avatar mit Statusanzeige - Neue Version datum

24.09.2022 21:18 (zuletzt bearbeitet: 01.02.2023 19:23)

Wolfgang, für dich mal ein mega dickes Lob.

Du bist echt der Hammer, wie du das so locker umsetzt. Es sieht wirklich Hammer aus, ich habe es bei mir auf dem Forum installiert funktioniert tatenlos.

Meine Freundin ist von dir hellauf begeistert, wie du das alles machst. Auch ein mega Lob von ihr an dich, das sieht sehr cool aus.

Sie meinte, das war bestimmt sehr viel Arbeit das so umzuschreiben das es auf dem Forum Business (v4) geht.

Ich sagte, bis ich dahin komme, wo Wolfgang ist, werden noch 100 Jahre vergehen.

Echt super Arbeit, Mega Leistung Top.

Mit freundlichen Grüßen

Daishi

Daishi

charlie1965, Wolfgang und 844er finden das Top!

Antworten

#4 | RE: Avatar mit Statusanzeige - Neue Version datum

25.03.2023 12:30 (zuletzt bearbeitet: 25.03.2023 12:51)

.sidebarcontent .messageUser span img {
display:none;
}

Das noch einfügen und der Kopf oben links am Avatar verschwindet

Wolfgang, Daishi und Maruso finden das Top!

Antworten

#5 | RE: Avatar mit Statusanzeige - Neue Version datum

10.06.2023 11:03

Hallo zusammen :3

Ich bin immer wieder begeistert, was man hier alles finden kann <3
Ist das auch für Gaia möglich?

Ganz liebe Grüße und ein schönes Wochenende!

Wolfgang findet das Top!

Antworten

#6 | RE: Avatar mit Statusanzeige - Neue Version datum

10.06.2023 12:33 (zuletzt bearbeitet: 10.06.2023 12:34)

Was noch ganz schick wäre, wenn der Name jetzt noch mittig wäre und vielleicht noch unterhalb des Avatars

Wolfgang findet das Top!

Antworten

#7 | Avatar mit Statusanzeige: Avatar-Name zentrieren (v4) datum

17.06.2023 21:40 (zuletzt bearbeitet: 19.06.2023 00:24)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3875
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1719

Avatar mit Statusanzeige: Avatar-Name zentrieren (v4)

Zitat von Maruso
Was noch ganz schick wäre, wenn der Name jetzt noch mittig wäre und vielleicht noch unterhalb des Avatars

Hallo Maruso,
Wenn du den Avatar-Name zentrieren möchtest, geht das wie folgt!
Habe mehrere Version zur Verfügung gestellt, denn jede Version hat so ihr Gutes!

Installation nur fürs Business-Template (v4)

Version 1: Avatar-Name und Statusanzeige oberhalb des Avatars zentrieren

Es ist nur ein Eintrag in notwendig!

1
 
.sidebarcontent {text-align: center !important;}

Version 2: Nur der Avatar-Name wird oberhalb des Avatars zentriert

Es ist nur ein Eintrag in notwendig!

1
 
.sidebarcontent strong {display: flex; justify-content: center; margin: -15px 0 10px 0;}

Version 3: Nur der Avatar-Name wird unterhalb des Avatars zentriert

Hier muss allerdings ein Plugin unter "" angelegt werden!
Wichtig! Im Plugin muss rechts oben das "Unterstützte Template" markiert werden, Business - Template (144), Auswahl mit Mausklick oder Strg + Mausklick!

1
2
3
4
5
6
7
 
<script>
{{message.startlist}}
window.addEventListener('load', function(){
  $('#post{{message:pt}} .sidebarcontent a:first').appendTo('#post{{message:pt}} .messageAvatar').css({'display':'block','margin':'10px 0'});
});
{{message.end}}
</script>
 

Bis dann und gutes Gelingen!
Wolfgang

844er, Daishi und Maruso finden das Top!

Antworten

#8 | RE: Avatar mit Statusanzeige: Avatar-Name zentrieren datum

18.06.2023 12:39

Moin Wolfgang

Ich vermute, das sich diese CSS-Scripte nur auf die v1 - v4 Template beziehen ?

Gruß
Alfred

Antworten

#9 | RE: Avatar mit Statusanzeige: Avatar-Name zentrieren datum

18.06.2023 13:09 (zuletzt bearbeitet: 19.06.2023 00:13)

Avatar mit Statusanzeige: Avatar-Name zentrieren

Zitat von 844er aus Beitrag #6
Moin Wolfgang

Ich vermute, das sich diese CSS-Scripte nur auf die v1 - v4 Template beziehen ?

Gruß
Alfred

Hallo Alfred,
habe zu Installation in Beitrag #7 noch eine Info hinzugefügt!

Die Installation aus Beitrag #7 ist erstmal nur fürs Business (v4) gedacht.

VG
Wolfgang

Antworten

#10 | Update: Avatar mit Statusanzeige - Neue Version datum

19.06.2023 00:20 (zuletzt bearbeitet: 19.06.2023 22:25)

Avatar mit Statusanzeige - Neue Version fürs Gaia (v3)

Zitat von bienchen im Beitrag #5
Hallo zusammen :3

Ich bin immer wieder begeistert, was man hier alles finden kann <3
Ist das auch für Gaia möglich?

Ganz liebe Grüße und ein schönes Wochenende!

Hallo Bienchen.

Habe fürs Gaia eine Lösung finden können und Beitrag #2 erweitert!

Bis dann und viel Erfolg beim Umsetzen!
Wolfgang

Daishi findet das Top!

Antworten

Weihnachts- und Neujahrs-Countdown! Mit vielen Optionen & Automatik! » « Sidebar "Tips"

Seite 1 von 5 « Seite 1 2 3 4 5 Seite »

Ähnliche Themen

Antworten

Letzter Beitrag

Logo Höhe Kopfzeile und Avatar
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von CrazySpacy 2 13.11.2024 22:22
CrazySpacy • Zugriffe: 313

Profilfelder ansprechen und anzeigen lassen - Linkliste unter Avatar
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von ms_fanie

20.02.2025 14:27
von

Wolfgang • Zugriffe: 926

Animierter Benutzer / Avatar mit Link zum Profil
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi 14 15.07.2023 11:14
Daishi • Zugriffe: 1777
Iconbar zentrieren
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von EaglePipe 1 23.07.2022 22:08
Wolfgang • Zugriffe: 473

Iconbar zentrieren oder linksbündig platzieren + Abstand Icons einstellen!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von bienchen

14.04.2022 18:19
von

Wolfgang • Zugriffe: 1431

Runde oder Quadratische Avatar-Darstellung im Template V4 + V6?
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 6 22.02.2022 16:53
Haviforumstreffpunkt • Zugriffe: 1797

Ersteller-Avatare in "Letzte Beiträge" - Zur bestimmten Seite springen - Link Korrektur
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Haviforumstreffpunkt

04.06.2025 23:13
von

Dankeschön • Zugriffe: 2019

Unterforen zentrieren
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Julia Ady Eden 5 25.07.2015 18:25
Julia Ady Eden • Zugriffe: 1214
Avatar-Bilder fürs Benutzer-Profil
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 2 21.03.2016 16:47
Wolfgang • Zugriffe: 22881

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

Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! » Avatar mit Statusanzeige, Avatar-Namen zentrieren

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 €

63%