Teammitglieder online
Regeln und nützliche Hinweise
Neueste Themen
» Das Plauderforum ist zurück!von Eto Mo 25 Nov 2024 - 17:59
» Style-Wechsel funktioniert nicht mehr
von Miho Mo 25 Nov 2024 - 11:05
» Profil in beiträgen nur im blog deaktivieren.
von Skouliki Mo 25 Nov 2024 - 10:16
» [Invision] Editor über den Bildrand ziehbar + Schriftgrößenproblem
von Skouliki Mi 20 Nov 2024 - 8:06
» Passwort für meinen Adminbereich vergessen.
von Joost Sa 9 Nov 2024 - 10:13
» [Invision] Signatur wird nicht immer eingefügt
von Skouliki Mo 4 Nov 2024 - 16:33
» [Invision] Schriftgröße Navigationsleiste, Links und Forenbeschreibungen
von Skouliki So 27 Okt 2024 - 13:29
» [Invision] Transparent Logohintergrund/Struktur
von Joost So 27 Okt 2024 - 12:58
» png wird im servimg in ein jpg umgewandelt
von Skouliki Mi 23 Okt 2024 - 20:26
» Passwort Vergessen (SilentHowl)
von Joost Do 17 Okt 2024 - 17:14
» [Invision] Hintergrundbild fixieren
von Skouliki Mo 14 Okt 2024 - 11:30
» Paßwort vergessen
von Joost So 13 Okt 2024 - 17:58
» Anti-Spam-Prüfung
von Hana19 Sa 12 Okt 2024 - 16:59
» Private Nachrichten bleiben im Postausgang hängen
von Skouliki Fr 11 Okt 2024 - 11:11
» [phpBB3] Mittelteil des Forums verschoben
von Eto Mo 7 Okt 2024 - 20:50
» [phpBB3] Farbpalette ändern
von Skouliki Mo 7 Okt 2024 - 10:08
» [Klassische Version] Account löschen
von Joost Sa 5 Okt 2024 - 21:05
» Chatbox einloggen nicht möglich
von Joost So 29 Sep 2024 - 8:01
Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Agorass in Passwort für meinen Adminbereich vergessen. ( 2 )
» Beitrag von Keks in [phpBB2] Unterforen Nebeneinander
( 1 )
[Tuto] [alle Versionen] Rahmen - Hintergrund um Avatare in Beiträgen
Seite 1 von 1 • Teilen
[Tuto] [alle Versionen] Rahmen - Hintergrund um Avatare in Beiträgen
- Rahmen - Hintergrund um Avatare in Beiträgen:
Da hier im Forum immer wieder einmal gefragt wurde ob es möglich sei, um die Avatare in den Beiträgen einen Rahmen oder aber auch eine Grafik einzusetzen, habe ich mir einmal die Arbeit gemacht und eine kleine Anleitung dafür ausgearbeitet.
Die einzelnen Arbeitsschritte sind mit Buchstaben versehen, sodass Du Dir Dein gewünschtes Ziel bzw. Deine ausgewählte Variante selbst auswählen kannst.
Für die Anleitungen der verschiedenen Versionen wurden statt Texte selbsterklärende Grafiken sowie die zu verwendenden Codes zum Kopieren eingesetzt. Ersetze bitte innerhalb der Codes die entsprechende "URL-GRAFIKADRESSE" durch Deine eigene Grafikadresse.
Für die Umsetzung jeder Variante musst Du lediglich die entsprechenden Einträge in das persönliche CSS des Forums vornehmen.
Beispiel: Rahmen um ein Avatar
Bei der Ausarbeitung für die verschiedenen Foren-Versionen ist mir noch aufgefallen, dass man für die Version PHPBB3 und INVISION in Abhängigkeit ob ein User On- oder gerade Offline ist verschiedene Rahmen bzw. Grafiken einsetzen kann. Für die Versionen PUNBB und PHPBB2 war mir diese Umsetzung über CSS leider nicht möglich.
Beispiel: Der User ist gerade Online, die Farbe des Rahmens ändert sich. Nur für PHPBB3 und INVISION
Beispiel: Eine Grafik als Rahmen um ein Avatar.
Wenn Du eine Grafik um Deine Avatare einsetzen möchtest, dann sollten auch gleichgroße Avatare für alle User in Deinem Forum verwendet werden. Dazu könntest Du zum einen auch einen Hinweis in Deinen Forenregeln machen. Weiterhin kann man entsprechende Einstellungen vornehmen um die User schon während des Eintrags für das Avatar auf die Größe hinzuweisen. Zusätzlich haben wir nun noch die Möglichkeit die Größe der Avatare in den Beiträgen genau festzulegen bzw. zu erzwingen. Sollte nun noch ein User eine falsche Größe für sein Avatar einsetzen, dann wird er sich wundern das sein Avatar verzerrt dargestellt wird. Auch musst Du damit rechnen, dass der besagte User dann wahrscheinlich auch im Deinem Forum anfragt, warum dies so ist.
Beispiel: Das Avatar ist in der Höhe zu klein und wird größer aufgezogen. (Funktioniert natürlich auch in der Breite, oder aber wenn ein Avatar zu groß sein sollte wird es verkleinert.)
Folgende Varianten stehen Dir in dieser Anleitung zur Verfügung:
Rahmen um ein Avatar
Rahmen um ein Avatar und wechselnd wenn ein User Online geht (nur für PHPBB3 und INVISION )
Grafik um ein Avatar
Grafik um ein Avatar und wechselnd wenn ein User Online geht (nur für PHPBB3 und INVISION )
Hinweise:
Natürlich lassen sich die Codes für einen Rahmen und einer Grafik auch vermischen.
Innerhalb der CSS-Codes sind Abstände (padding) eingeben, die Du entsprechend anpassen kannst. Auch ist das Hinzufügen von weiteren Abständen (margin) wie z.B. dem Abstand zu einem Beitrag denkbar.
Zum Probieren eines Rahmens mit einer Grafik, stelle ich hier einmal eine einfache Grafik zur freien Verfügung. Weiter Grafiken können natürlich hier im Grafikbereich von Forumieren bestellt werden.
und als URL-Adresse https://i.servimg.com/u/f86/19/29/84/79/border10.png
Anleitungen
- Klick für Anleitung -A-:
- Klick für Anleitung -B-:
Nach dem Einstellen der Breite x Höhe des Avatars, wird dies auch dem User in den Profileinstellungen angezeigt.
- Klick für Anleitung -C-:
Erzwingen der Avatargröße:
Wähle den Code für Deine Forenversion und trage diesen in Dein persönliche CSS ein.- Klick für Anleitung -C- #PUNBB:
- Code:
/*Avatargröße in Beiträgen erzwingen #PUNBB*/
div.user-basic-info a img {
height: 200px;
width: 150px;
}
- Klick für Anleitung -C- #PHPBB2:
- Code:
/*Avatargröße in Beiträgen erzwingen #PHPBB2*/
.poster-profile a img {
height: 200px;
width: 150px;
}
- Klick für Anleitung -C- #PHPBB3:
- Code:
/*Avatargröße in Beiträgen erzwingen #PHPBB3*/
.postprofile dt a img {
height: 200px;
width: 150px;
}
- Klick für Anleitung -C- #INVISION:
- Code:
/*Avatargröße in Beiträgen erzwingen #Invision*/
.postdetails dt a img {
height: 200px;
width: 150px;
}
- Klick für Anleitung -D-:
Rahmen um ein Avatar in den Beiträgen:
Wähle den Code für Deine Forenversion und trage diesen in Dein persönliche CSS ein.- Klick für Anleitung -D- #PUNBB:
- Code:
/*Avatarrahmen in Beiträgen #PUNBB*/
div.user-basic-info a img {
border: 3px double #0000ff;
-webkit-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
-moz-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
margin-bottom: 5px;/*Abstand unten zum Rang*/
padding: 10px;
}
- Klick für Anleitung -D- #PHPBB2:
- Code:
/*Avatarrahmen in Beiträgen #PHPBB2*/
.poster-profile a img {
border: 3px double #0000ff;
-webkit-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
-moz-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
padding: 10px;
}
- Klick für Anleitung -D- #PHPBB3:
- Code:
/*Avatarrahmen in Beiträgen #PHPBB3*/
.postprofile dt a img {
border: 3px double #0000ff;
-webkit-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
-moz-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 10px;
}
- Klick für Anleitung -D- #INVISION:
- Code:
/*Avatarrahmen in Beiträgen #Invision*/
.postdetails dt a img {
border: 3px double #0000ff;
-webkit-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
-moz-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 10px;
}
- Klick für Anleitung -E-:
Rahmen um ein Avatar und wechselnd wenn ein User Online geht (nur für PHPBB3 und INVISION ):
Wähle den Code für Deine Forenversion und trage diesen in Dein persönliche CSS ein.- Klick für Anleitung -E- #PHPBB3:
- Code:
/*Avatarrahmen in Beiträgen - User Offline #PHPBB3*/
.postprofile dt a img {
border: 3px double #0000ff;
-webkit-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
-moz-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 10px;
}
/*Avatarrahmen in Beiträgen - User Online #PHPBB3*/
.online .postprofile dt a img {
border: 3px double #ffa500;
-webkit-box-shadow: 0 0 12px #ffa500 inset, 0 0 10px #ffa500 inset, 0 0 8px #ffffff inset, 0 0 4px #ffa500 inset;
-moz-box-shadow: 0 0 12px #ffa500 inset, 0 0 10px #ffa500 inset, 0 0 8px #ffffff inset, 0 0 4px #ffa500 inset;
box-shadow: 0 0 12px #ffa500 inset, 0 0 10px #ffa500 inset, 0 0 8px #ffffff inset, 0 0 4px #ffa500 inset;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 10px;
}
- Klick für Anleitung -E- #INVISION:
- Code:
/*Avatarrahmen in Beiträgen - User Offline #Invision*/
.postdetails dt a img {
border: 3px double #0000ff;
-webkit-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
-moz-box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
box-shadow: 0 0 12px #0000ff inset, 0 0 10px #0000ff inset, 0 0 8px #ffffff inset, 0 0 4px #0000ff inset;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 10px;
}
/*Avatarrahmen in Beiträgen - User Online #Invision*/
.online .postdetails dt a img {
border: 3px double #ffa500;
-webkit-box-shadow: 0 0 12px #ffa500 inset, 0 0 10px #ffa500 inset, 0 0 8px #ffffff inset, 0 0 4px #ffa500 inset;
-moz-box-shadow: 0 0 12px #ffa500 inset, 0 0 10px #ffa500 inset, 0 0 8px #ffffff inset, 0 0 4px #ffa500 inset;
box-shadow: 0 0 12px #ffa500 inset, 0 0 10px #ffa500 inset, 0 0 8px #ffffff inset, 0 0 4px #ffa500 inset;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 10px;
}
- Klick für Anleitung -F-:
Grafik um ein Avatar:
Wähle den Code für Deine Forenversion und trage diesen in Dein persönliche CSS ein.- Klick für Anleitung -F- #PUNBB:
- Code:
/*Avatarrahmen als Grafik in Beiträgen #PUNBB*/
div.user-basic-info a img {
background-image: url("URL-GRAFIKADRESSE");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 5px;
padding: 18px;
}
- Klick für Anleitung -F- #PHPBB2:
- Code:
/*Avatarrahmen als Grafik in Beiträgen #PHPBB2*/
.poster-profile a img {
background-image: url("URL-GRAFIKADRESSE");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 5px;
padding: 18px;
}
- Klick für Anleitung -F- #PHPBB3:
- Code:
/*Avatarrahmen als Grafik in Beiträgen #PHPBB3*/
.postprofile dt a img {
background-image: url("URL-GRAFIKADRESSE");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 18px;
}
- Klick für Anleitung -F- #INVISION:
- Code:
/*Avatarrahmen als Grafik in Beiträgen #Invision*/
.postdetails dt a img {
background-image: url("URL-GRAFIKADRESSE");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 18px;
}
- Klick für Anleitung -G-:
Grafik um ein Avatar und wechselnd wenn ein User Online geht (nur für PHPBB3 und INVISION ):
Wähle den Code für Deine Forenversion und trage diesen in Dein persönliche CSS ein.- Klick für Anleitung -G- #PHPBB3:
- Code:
/*Avatarrahmen als Grafik in Beiträgen - User Offline #PHPBB3*/
.postprofile dt a img {
background-image: url("URL-GRAFIKADRESSE-1");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 18px;
}
/*Avatarrahmen als Grafik in Beiträgen - User Online #PHPBB3*/
.online .postprofile dt a img {
background-image: url("URL-GRAFIKADRESSE-2");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 18px;
}
- Klick für Anleitung -G- #INVISION:
- Code:
/*Avatarrahmen als Grafik in Beiträgen - User Offline #Invision*/
.postdetails dt a img {
background-image: url("URL-GRAFIKADRESSE-1");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 18px;
}
/*Avatarrahmen als Grafik in Beiträgen - User Online #Invision*/
.online .postdetails dt a img {
background-image: url("URL-GRAFIKADRESSE-2");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 5px;/*Abstand unten zum Usernamen*/
padding: 18px;
}
Have Fun
Manch einer wird vielleicht denken "Weshalb ich nicht für jede Version einen einzelnen Post gemacht habe?" Ich darf laut Forenregeln keine Doppelpost machen! Auch darf ich keine Formatierungen verwenden, anstelle dessen habe ich Spoiler und Grafiken verwendet um diese Anleitung ein wenig zu entwirren. Ich bin mir aber sicher, wer ordentlich liest, gewissenhaft arbeitet und sich an seine Version hält.... der bekommt das schon hin. Auch sind die Codes noch weiter ausbaufähig z.B. Hover-Effekte o.ä.
LG inde
PS. Wer Rechtschreibfehler findet der darf sich diese gerne kopieren und in seinem Forum weiter verwenden.
inde- Admin a.D.
- Beiträge : 5658
Anmeldedatum : 20.10.11
Ähnliche Themen
» [Tuto] [mobile Version] [Alle Versionen] Betriebssystem OS? - Screenshot?
» [Tuto][alle Versionen] Tooltip Benutzernamen-Tag / @Tag Aussehen anpassen
» [Tuto] [alle Versionen] Funktion "diesen Code markieren"
» [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum
» [Tuto][alle Versionen] ServIMG komfortables hochladen von Bildern in einem Popup
» [Tuto][alle Versionen] Tooltip Benutzernamen-Tag / @Tag Aussehen anpassen
» [Tuto] [alle Versionen] Funktion "diesen Code markieren"
» [Tuto] [Alle Versionen] Verschiedene Styles per Wahlschalter im Forum
» [Tuto][alle Versionen] ServIMG komfortables hochladen von Bildern in einem Popup
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten