So, hier habe ich mal meine Idee so weit umgesetzt.
Ich finde, es sieht sehr gut für mich aus, ich habe eine schlichte Wahl getroffen, mit dem aussehen. Ich gebe zu so gut mit Scripte schreiben bin ich nicht, ich schaue auch im Internet nach wie oder was ich in CSS Code eingeben muss.
Oder im HTML Code, was ich an CodePen so gut finde, ist egal, was Du machst. Er aktualisiert immer nach Eingabe automatisch und man sieht, was man macht. Ich finde das Programm einfach gut, damit komme ich recht gut klar.
Das interessiert mich und inspiriert mich und ich habe da voll den Spaß dabei etwas damit zu machen. Es stimmt, was viele sagen, mit CodePen muss man kein Programmierer zu sein, um etwas zu erstellen, man muss nur verstehen, was man da macht und eingibt und man kann sich während der Arbeit immer im Internet nachschauen, was Du jetzt brauchst oder welche CSS-TAG Du eingeben musst und welche Funktion das hat.
Man lernt nie aus, im Leben habe ich schon gemerkt, man lernt immer dazu.
Ich hoffe das Wolfgang nichts dagegen hat.
Dass ich hier in diesem Post meine Arbeit Stück für Stück dokumentiere, von Anfang bis Ende, mit Bildern. Mit den "CSS Code" und "HTML Code" würde ich den Überblick sprengen.
Den kann man am Schluss ja sehen, wenn ich die beiden Codes am Schluss einfüge. Ich habe hier alle CSS-TAG geändert, diese schreibe ich jetzt mal hier rein.
Geänderte CSS-TAG "CSS Code" und "HTML Code"
"wrapper3", "left3", "right3", "info3", "info_data3", "data3", "projects3", "projects_data3", und am Schluss für die Verlinkung neuer TAB z.B. Facebook Symbol "<li><a href="#"" target="_blank"><i class="fab fa-facebook"></i></a></li>"
Und die "social_media3". <--- gehört zu Awesome Symbole!
Ich hoffe, dass ich so weit alle CSS-TAG geändert habe da ich Wolfgangs Rat gefolgt bin, da diese sonst Veränderungen im Xobor-Forum machen würden.
Viele würden sich jetzt fragen:
Wenn man sich das anschaut --> für die Verlinkung neuer TAB z.B. Facebook Symbol "<li><a href="#"" target="_blank"><i class="fab fa-facebook"></i></a></li>" was das ist und wo da die Verlinkung ist. Ich habe die Raute rot markiert, da der Facebook link des jeweiligen Benutzers da eingefügt wird.
Diese Symbole werden am Schluss unten rechts zu sehen sein.
Diese sind Font Awesome Symbole, diese werden mit "HTML Codes" erzeugt. Das sieht wie folgt aus "<i class="fab fa-facebook"></i>"
Um zu verstehen, wie ich das meine, könnt ihr es Euch hier anschauen --> Awesome Symbole! dort könnt ihr dann runterscrollen. Dann seht ihr alle Symbolen, die es gibt und den HTML Code wird dann angezeigt. Dazu müsst ihr dann das jeweilige Symbol anklicken. Man kann auch Symbole in der Suchleiste suchen.
Ich habe mich einfach für ein schlichtes Design entschieden.
Die Profilkarte ist noch nicht fertig, auf der rechten Seite werden Informationen und die Symbole sein.
Die E-Mail-Adresse ist auch schon mit eingebaut
Die Ansicht der Profilkarte ist jetzt schon der Hammer nur ist sie noch nicht fertig. Es fehlen noch die Font Awesome Symbole, wenn diese noch eingebaut sind ist diese Profilkarte für mich perfekt
Die Ansicht der Profilkarte ist jetzt schon perfekt für mich. Wie man jetzt erkennen kann, sind jetzt die Font Awesome Symbole eingefügt, um zu zeigen, dass dieser Font Awesome Symbole funktioniert habe ich den letzten verlinkt. Ich habe dafür ein Blogger Symbol benutzt und mit Wolfgangs Blog verlinkt. Es öffnet sich im neuen Tab.
So, meine Idee ist umgesetzt.
Das ist das Endergebnis
Damit die Font Awesome Symbole, so schön zur Geltung kommen habe ich den CSS-TAG "p3" geändert. So sieht es noch cooler aus.in "CSS" und in "HTML" und ich habe den CSS-TAG "a3" nur in der "CSS" geändert.
Ich wollte mit der Profilkarte Wolfgang eine Freude machen.
Ich möchte mich entschuldigen. Dass ich es nicht für das Xobor-Forum hinbekommen habe, es zeigt massive Fehler auf Xobor-Forum an. Wenn ich den CSS-TAG " * " bei CodePen rauslasse, macht er mir den Rahmen von Profil weg. Und wen ich "body" vorne auskommentiere dasselbe also in Codepen brauche ich das.
Ich bin jetzt mit meinem Latein am Ende. Kann den Fehler nicht finden, habe auf alles geachtet und trotzdem haben sich irgendwo Fehler eingeschlichen.
Hallo Daishi, erstmal besten Dank für Deine Arbeit, funktioniert und hat alles was man benötigt!
Die Profilkarte hat es wirklich in sich, wenn sie in allen Templates gleich aussehen soll! Habe wieder am Skript "gefeilt", damit die Profilkarte universell einsetzbar werden kann!
Was mir aufgefallen ist:
Wie bereits gesagt verändern Einträge wie * { ...... } und body { ...... } zu stark das vorhandene Template!
Die Social-Button rufen nur den Link auf, wenn man direkt auf das Symbol klickt! Symbole sind etwas klein geraten.
Konnte das Verdecken durch Foren-Elemente nachvollziehen.
Sonst alles Top!
Was ich geändert habe:
Habe die besagten CSS-Tag's und den Google-Schrift-Import herausgenommen und die Schriften "Arial" und "Lucida handwriting" genutzt.
Die Social-Verlinkung habe ich mit "onclick" realisiert, um die gesamte Fläche des Button zur Auslösung zu bekommen!
Musste die "Div-Containern" und Überschriften direkt mit "margin" und "Schriftformatierungen" festlegen. Übergeordnete Formatierungen haben nicht in allen Templates Wirkung gezeigt!
Das Verdecken durch Template-Elemente konnte ich durch "z-Index: 999999" beheben!
Habe festgelegte Breiten durch "width:auto" ersetzt!
Der E-Mail-Link und die Social-Button sind mit Mouseover-Farben ausgestattet.
Profilkarte mit Social-Button
Installation für alle Templates & Mobil
CSS-Code:
Für die Templates (v1-4) wird der folgende Eintrag in "Eigener CSS Code" kopiert! Pfad: "Admin > Layout > Farben- und Einstellungen > CSS > Eigener CSS Code"
Für das neue Template Xobor (v6) und "Mobil" kommt der folgende Eintrag in "CSS / SCSS Addon"! Pfad-V6: "Admin > Layout > Farben & Einstellungen > CSS/SCSS > CSS / SCSS Addon". Pfad-Mobil: "Admin > Layout > Mobil > CSS/SCSS > CSS / SCSS Addon".
Einige CSS-Einträge sind mit Erklärungen versehen!
Zum Testen und für Webseiten kann das Skript und der CSS-Eintrag für die Templates (v1-4) in die "Kopf- oder Fußzeile", für das Xobor (v6) oder Mobil in "Eigene Kopfzeile".
Zitat von Wolfgang im Beitrag GeburtstagskarteDeswegen können gleiche "CSS-TAG's" wie "body, card, header, content, container, ...." das gesamte Layout des Forums verändern."body" versuche ich wegzulassen oder die Werte auf einen anderen Div-Container zu übertragen! Abhilfe schafft auch, wenn man die "CSS-TAG's" mit einem Buchstaben oder einer Zahl verlängert!
Hmm, ich versuche das irgendwie zu verstehen aber raffe das irgendwie noch nicht. Suche einen passenden Begriff zu finden, da ich im Internet nichts finde wie ich das anders eingeben kann. Mit umwandeln das raffe ich noch nicht.
Fehleranzeige in CodePen Wenn ich den gesamten CSS-TAG "Stern" Code weglasse, und "body" davor weglasse, dann erscheinen auch Fehler in den Font Awesome Symbolen, da kommen dann die schwarzen Punkte. Der Rahmen von der Profilkarte ist dann auch weg und die Profilkarte hat sich in der Höhe verlängert.
Ich versuche seit 2 Tagen es zu ändern, aber ich raffe das nicht und wie gesagt finde ich im Internet nichts. Mir fehlt, der passende Begriff oder Name wie das heißt.
Wenn ich das im Internet eingebe --->>> Werte auf einen anderen Div-Container zu übertragen! Weil da nur Div Container übereinander legen im Internet erscheint.
Meinst du damit, das ich Div Container übereinander legen muss?
Oder habe ich das jetzt komplett falsch verstanden.
Bin mit Beitrag #2 noch nicht ganz fertig! Habe hier Lösungen gefunden, musste auch viel ausprobieren! Um den * CSS-Tag oder body CSS-Tag aufzulösen, muss man schauen, was sie machen! Siehe Dir jetzt mal die neuen Einträge der Classes an, wie ".wrapper3, .wrapper3 .social_media3 ul und .wrapper3 .social_media3 ul li" aussehen. Hier sind einige Lösungen zum Problem enthalten!
1. "list-style: none;":
Dieser CSS-Tag mit "Sternchen" löscht die schwarzen Punkte, aber im ganzen Forum! Sie werden zur Aufzählung mit Punkten genutzt (<ul><li> ... </li><(ul>), werden aber hier nicht gebraucht! Habe ich in ".wrapper3 .social_media3 ul li" mit "!important" geschoben!
2. ".wrapper3 .social_media3 ul li":
Habe für diese Class auch die "Font Awesome Symbole" fest einstellen können, mit Schriftfarbe und Schriftgröße!
3. Veränderung der Größen und Abstände in anderen Templates:
Das war das größte Problem! Habe es mit "margin:0;" in verschiedenen Div-Container hinbekommen.
Ich bekomme das nicht hin, teste die ganze Zeit herum. Oder muss ich Teil eins splitten? Also Zeile 4?
Bei dir sieht alles so einfach aus, mir raucht echt der Kopf. Ein Riesen-Respekt wie du das so locker umsetzt. Einfach Hammer oder muss ich noch einen gewissen Code hinzufügen? Ich raffe das nicht, sorry.
Hallo Daishi, habe den Fehler gefunden. Die Profilkarte für die iconbar ist fertig!
Was zu beachten ist:
Zusätzliche Skripte und CSS-Einträge sind am besten außerhalb eines neuen Forencodes zu platzieren!
Kommentare innerhalb des HTML-Code können entfallen!
Was habe ich gemacht? Habe so einiges ausprobiert und die CSS nochmal angepasst! Etwas speziell, aber eine super Idee die Profilkarten über die Iconbar zu erstellen! Ich finde, wenn man eine Erstellung der Profilkarte in der Iconbar allen Mitgliedern anbietet, müssen auch alle Punkte auf der Profilkarte änderbar sein, denn jeder User hat einen anderen Avatar, eine andere Email-Adresse, andere Rufnummern, u.s.w. Es ist auch möglich mit einem kurzen Foren-Code eine komplette Profilkarte für einen Partner anzulegen, die dann immer wieder in Beiträgen verwendet werden kann!
Will man nicht alle Mitglieder einbinden, sondern nur wenige "Partner" eintragen, fällt der Foren-Code ganz kurz aus!
[Partner1], [Partner2], [Partner3], u.s.w.
Was kann man auf der Profilkarte für alle Mitglieder ändern?
Avatar: Eintrag Bild-Adresse
Gruppe: Benutzergruppe wie Admin, Mitglied, Moderator
Email: Emailadresse oder PN
Phone: Telefonnummer
Projekt: z.B.: Forum-Text
ProjektLink: Link-Adresse zum Projekt, zum Forum
Hobby: z.B.: Webseiten erstellen
Facebook: Facebook-Adresse
Twitter: Twitter-Adresse
Instagram: Instagram-Adresse
Blog: Blog-Adresse
Wie sieht der neue Foren-Code für alle Mitglieder aus und was kann er?
In Zeile 1 wird der Avatar-Link angepasst.
In Zeile 2 wird der Avatar-Name eingetragen.
Die anderen Informationen werden durch Gleichheitszeichen getrennt!
Die Links für die Email-Adresse, für das Projekt und die Social-Button sind mit Mouseover-Farben und Tooltipps ausgestattet!
Soll eine Adresse oder Text nicht angegeben werden, braucht nur der Forum-Code mit der geschweiften Klammer entfernt werden!
1 2 3
[Partner=https://files.homepagemodules.de/b2001010/a_551.png={{Gruppe}}={{Email}}={{Phone}}={{Projekt}}={{ProjektLink}}={{Hobby}}={{Facebook}}={{Twitter}}={{Instagram}}={{Blog}}] Wolfgang [/Partner]
Du leistest hier echt eine Super-Arbeit, du setzt alles um wie im Handumdrehen. Wie wenn, das ein Klacks für dich wäre, ein Riesen-Respekt, das sieht alles so einfach bei dir aus.
Ich sehe es ja, wie viel Arbeit das alles macht. Respekt und deine Ideen, einfach Hammer, weiter so, ein mega Lob an dich.