Hilfreiche Codes

[ Nach unten | Zum letzten Beitrag | Thema abonnieren | Neueste Beiträge zuerst ]

Profildesign
Gelöschter Benutzer

Hilfreiche Codes

von Profildesign am 14.01.2020 07:45

Aloha!

Es gibt bereits einige Codes, die aufgelistet worden sind und auch einige hilfreiche User, wie @Designer, die beim Designen der Seite oder einem beim Erstellen von schicken Beiträgen weiterhelfen. Trotzdem gibt es immer noch die ein oder anderen Extrawünsche oder Ungereimtheiten, zu denen noch die Informationen fehlen. Da auch ich versuche, anderen zu helfen, stoße ich da leider manchmal an die Grenzen meines Wissens und wollte deswegen einfach mal fragen, was ihr so für Codes kennt, die hilfreich sein könnten, sodass es noch mehr Möglichkeiten gibt und ich auch dazu lernen kann. Beispielsweise habe ich bei manchen ein schiefes Profilbild gesehen, was echt cool ist oder die Zwischenüberschriften abgerundet sind. Etc.
Schreibt hier einfach, falls ihr irgendwas hilfreiches kennt, sodass wir eine größere Sammlung haben (;
Würde mich echt freuen

Liebe Grüße
Profildesign

P.S.: Hier gibt’s schon einiges vom Admin:

P.P.S.: Hier kommt ihr zu meiner Gruppe, wo ich einige fertige Profildesigne hochlade, die ich für andere User bereits erstellt habe.

Antworten Zuletzt bearbeitet am 17.01.2020 15:06.

Aneet
Gelöschter Benutzer

Re: Hilfreiche Codes

von Aneet am 14.01.2020 10:17

Zwischenüberschriften, Profilbild, o.ä. abrunden:

element {

border-radius: 10px;

}

Schatten hinter ein Objekt legen:

element {

box-shadow: 10px 10px #000000;

}

Schatten hinter allen vier Seiten des Elementes:

element {

-webkit-box-shadow: 0 0 10px #000000;

box-shadow: 0 0 10px #000000;

}

Schatten hinter einen Text legen:

element {

text-shadow: 3px 3px #000000;

}

Elemente ausblenden:

element {

display: none;

}

Element drehen:

element {

transform:rotate(60deg);

}

60deg steht dabei für Degree, also 60 Grad und kann beliebig variiert werden.

Wenn sonst noch irgendwer Fragen hat, wie er/sie das letztendlich auf welches Element anwendet oder wie etwas anders geht, stehen meine Privatnachrichten jedem offen. :)

Antworten Zuletzt bearbeitet am 14.01.2020 10:29.

Aneet
Gelöschter Benutzer

Re: Hilfreiche Codes

von Aneet am 14.01.2020 10:35

Schriftart ändern

In diesem Beispiel erkläre ich, wie ihr mithilfe von Google Fonts die Schriftart auf eurem Profil ändern könnt, um eurem Profil noch ein wenig persönlicher zu gestalten.

1. Sucht euch eine Schriftart bei Google Fonts raus

2. Geht anschließend auf das Plus-Symbol der Schriftart (dieses findet ihr oben Recht bei jeder Schriftart)

3. Anschließend erscheint unten rechts ein kleiner Balken, klickt darauf und es öffnet sich ein Fenster

4. Wählt in dem Reiter Embed den Unterreiter @Import aus

5. Kopiert von @import bis zum Semikolon den Text (z.B. @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');)

6. Fügt diese Zeile ganz oben in eurem CSS ein (andernfalls funktioniert es nicht)

7. Nun könnt ihr einem Element die Schriftart zuweisen (wie das geht steht in der jeweiligen Schriftart noch einmal unter dem Punkt Specify in CSS)

element {

font-family: 'Roboto';

}

Wenn sonst noch irgendwer Fragen hat, wie er/sie das letztendlich auf welches Element anwendet oder wie etwas anders geht, stehen meine Privatnachrichten jedem offen. :)

Antworten Zuletzt bearbeitet am 14.01.2020 10:35.

Cpt.Flausch
Gelöschter Benutzer

Re: Hilfreiche Codes

von Cpt.Flausch am 14.01.2020 10:49

Ich mache mal mit ein paar ganz einfachen Sachen weiter, die auch für Leute interessant sein könnten, die keine ahnung vom coden haben.
Nachfolgender Code ist für die Ausrichtung des Textes.

Justify steht hier für Blocksatz und kann durch center (zentrieren), left (linksbündig) oder right (rechtsbündig) ersetzt werden.

Man kann auch ohne das eingebunde Tool Bilder einbinden mit:

Man braucht in diesem Fall eben die Bild-Url. Idealerweise lädt man das Bild herunter und lädt es bei entsprechenden Seiten hoch. Hotlinking, also das direkte Verlinken eines Bildes von einer Webseite, ist in vielen Foren verboten, da eventuelle kleine Seiten durch die Anzahl an Anfragen ihre Kapazitäten übersteigen könnten.
Ach und der Text für den alt tag ist für Blinde und sollten eine knappe beschreibung des Bildes beinhalten, damit diese Personen wissen, was da zu sehen ist. Man kann das alt aber auch weglassen. ^^ (aber nicht die schließende Klammer) xD

Antworten

Profildesign
Gelöschter Benutzer

Re: Hilfreiche Codes

von Profildesign am 18.01.2020 10:55

Schwarzweiß-Färbung

Geschenke auf dem Profil

ul.profile_list_gifts {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
ul.profile_list_gifts:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
}

Profilbild

#profileImage img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
#profileImage img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
}

Profilbilder der Freunde

/* Freundesliste: Profilbilder Raender */
ul.relationships li img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
/* Freundesliste: Profilbilder*/
ul.relationships li img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
}

Man kann auch weniger als 100% eingeben, sodass noch ein Hauch der ursprüglichen Farbe zu sehen ist.

Dieser Teil ist dazu da, dass sobald man mit der Maus auf die Bilder geht, die Farbe zurückkommt. Wenn das nicht gewünscht wird, muss hier ebenfalls 100% eingetragen werden, anstelle der 0%.

Bei Fragen dazu, kann man sich jederzeit gerne an mich wenden

Antworten

Profildesign
Gelöschter Benutzer

Re: Hilfreiche Codes

von Profildesign am 20.01.2020 21:06

Wie spreche ich den User, der mein Profil anschaut direkt an?

1. Man geht auf sein Profil und klickt auf den Button "Profilbeschreibung & -design anpassen"

2. Man scrollt zu dem Feld, welches mit Beschreibung betitelt ist

3. In dieses Feld kann man einen beliebigen Text schreiben.

4. An die Stelle, an die der Name des Users eingeblendet werden soll, wird [[benutzername]] geschrieben.

5. Speichern nicht vergessen -> Fertig!

Wenn man die Farben des Kastens verändern möchte, kann man den folgenden Code verwenden, den man in das Feld "Eigenes CSS" einträgt:

#linet_profileText {
background: #ffffff;
border: 1px solid #ffffff

Der farbig markierte Teil bestimmt die Farbe, also je nachdem welche Farb-Bezeichnung du eingibst, ändert sich auch die Farbe.
Hier kannst du die Rahmendicke vergrößern oder verkleinern, indem du die Zahl änderst.
Hier kannst du entscheiden, ob der Rahmen eine durchgezogene Linie hat, gestrichelt, gepunktet etc. sein soll. Tausche "solid" gegen beispielsweise "dotted" für gepunktet oder "dashed" für gestrichelt oder "double" für einen doppelten Rahmen.

Vielen Dank für's Erklären, Amalthea

Antworten Zuletzt bearbeitet am 20.01.2020 21:15.

Amalthea

-, Weiblich

11. Ghostwriter

Beiträge: 2041

Re: Hilfreiche Codes

von Amalthea am 20.01.2020 21:20

Wie spreche ich den User, der mein Profil anschaut direkt an?1. Man geht auf sein Profil und klickt auf den Button "Profilbeschreibung & -design anpassen"2. Man scrollt zu dem Feld, welches mit Beschreibung betitelt ist3. In dieses Feld kann man einen beliebigen Text schreiben.4. An die Stelle, an die der Name des Users eingeblendet werden soll, wird [[benutzername]] geschrieben.5. Speichern nicht vergessen -> Fertig!Wenn man die Farben des Kastens verändern möchte, kann man den folgenden Code verwenden, den man in das Feld "Eigenes CSS" einträgt:#linet_profileText {background: #ffffff;border: 1px solid #ffffffDer farbig markierte Teil bestimmt die Farbe, also je nachdem welche Farb-Bezeichnung du eingibst, ändert sich auch die Farbe. Hier kannst du die Rahmendicke vergrößern oder verkleinern, indem du die Zahl änderst.Hier kannst du entscheiden, ob der Rahmen eine durchgezogene Linie hat, gestrichelt, gepunktet etc. sein soll. Tausche "solid" gegen beispielsweise "dotted" für gepunktet oder "dashed" für gestrichelt oder "double" für einen doppelten Rahmen.Vielen Dank für's Erklären, Amalthea

Super gerne :3
Du machst echt eine tolle Arbeit, dass du versuchst das designen von Profilen für jeden verständlich zu erklären. Mach weiter so! c:

Antworten

Profildesign
Gelöschter Benutzer

Re: Hilfreiche Codes

von Profildesign am 22.01.2020 20:35

Profilbild in die Mitte

Wenn man sein Profilbild in der Mitte, also zwischen den oberen beiden Kästen haben möchte, wie auf dem Bild zu sehen ist, kann man folgenden Code verwenden:

/*Name Alter etc.*/
#profile #profileInfosLeft {
margin-left: -140px;
position: relative;
width: 250px;
}
/*Statistik*/
#profile #profileInfosRight {
margin-right: -0px;
position: relative;
}
/*Bild*/
#profile #profileImage {
margin-left: 300px;
position: absolute;
}
/*Optionen*/
#profile #profileOptions {
margin-top: 235px;
position: relative;
}

Bei Fragen (oder auch anderen Wünschen für den Thread hier) schreibt mir einfach

Antworten

Profildesign
Gelöschter Benutzer

Re: Hilfreiche Codes

von Profildesign am 30.01.2020 11:49

Schrift ändern

Eigentlich ist die Schrift auf dem Profil schwarz. Es besteht jedoch die Möglichkeit die Farbe, sowie die Schriftart zu ändern (auf dem Bild ist sie beispielsweise blau).

Boxeninhalt

Mit dem folgenden Code kannst du die Schrift in den Boxen verändern:

/* Profilinfos: Werte */
.profileTable td {
color: #2436ff !important;
font-family: Courier New !important;
}

Hier kannst du die Farbe ändern.
Hier kannst du die Schriftart ändern.

Links

Mit dem folgenden Code kannst du die Links in den Boxen, die Gruppen, die Lieblingsrollenspieler und alle weiteren Links verändern:

/* Links (Inhaltsbereich) */
#content a {

color: #2436ff !important;

font-family: Courier New !important;
}

Text im Footer

/* Footer */
#footer {
color: #db1f1f !important;
font-family: Courier New !important;
}

Zusatz:
Falls die gewünschte Schrift nicht hier auf der Seite zur Verfügung gestellt wurde, kann man auch viele Schriften über Google Fonts importieren. Dafür ist das Markierte zuständig. Das ist die als Beispiel gewünschte Schrift, die ich bei Google Fonts ausgesucht habe. Bei Leerzeichen wird ein + geschrieben in der URL (ansonsten einfach den Namen den Schrift an beiden markierten Stellen einsetzen).

/* Footer */
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
#footer {
color: #db1f1f !important;
font-family: 'Indie Flower' !important;
}

Das ist nur ein kleiner Zusatz, den man auch bei den anderen Codes (z.B. der Schrift in den Boxen) einfügen kann. Ich hoffe, ich habe das verständlich erklärt, ansonsten nochmal nachfragen ^^'

Links im Footer

/* Links (Footer) */
#footer a {
color: #54db1f !important;
font-family: Courier New !important;
}

Antworten Zuletzt bearbeitet am 30.01.2020 11:52.