• Codesammlung fürs Profildesign •
[ Nach unten | Zum letzten Beitrag | Thema abonnieren | Neueste Beiträge zuerst ]
• Codesammlung fürs Profildesign •
von Krawalliersdelikt am 21.02.2019 10:37Selbstverständlich wird es schwierig sein, hier wirklich alle Codes aufzulisten, die man in der Theorie verwenden kann, doch das Wichtigste soll hier in Zukunft vorgefunden und der Thread regelmäßig aktualisiert werden.
Wenn du den Code für ein bestimmtes Element suchst, empfiehlt sich die Suchfunktion. Klicke dafür einfach Strg + F und gib das gewünschte Element ein - vielleicht wirst du fündig!
Wenn du Fragen oder Probleme hast, melde Dich doch direkt bei @Krawalliersdelikt oder schreibe in diesen {*klick*} Thread, wobei es bei dringlichen Fragen ratsamer wäre, eine Nachricht zu verschicken - die sieht man eher, als einen Beitrag im Forum.
through the sands of time, through the angel's eye
my final breath, swallowed by the womb of death
Antworten» Einführung
von Krawalliersdelikt am 21.02.2019 10:41Bei manchen Elementen ist es auch ohne Code möglich, diese Deinem Profil hinzuzufügen. Wenn du erfolgreich auf der entsprechenden Seite gelandet bist, wirst du oben zunächst vier Leisten erkennen können.
Die erste Leiste ist für den Body-Hintergrund - die beiden großen Flächen ganz links und rechts auf Deinem Bildschirm.
Die zweite Leiste ist für den Header-Hintergrund - die Grafik ganz oben, die normalerweise unser RSH-Design darstellt.
Die dritte Leiste ist für den Content-Hintergrund - die Fläche, die sich hinter den zahlreichen Boxen in der Mitte befindet.
Die vierte Leiste ist für den Footer-Hintergrund - die kleine Fläche ganz unten, wo das Impressum etc. vorzufinden ist.
Für sonstige Modifikationen kannst du grundsätzlich den CSS-Generator {*klick*} verwenden, doch nicht alle Codes sind dort vorzufinden und ich persönlich finde die Arbeit mit dem Generator unheimlich umständlich, weswegen dieser hier nicht das Thema sein soll.
through the sands of time, through the angel's eye
my final breath, swallowed by the womb of death
» Header, Mainbar & Container
von Krawalliersdelikt am 21.02.2019 10:54Falls du diesen direkt in Deinen späteren Code mit einbinden möchtest, benötigst du folgendes Element:
/*Header*/
#head {
background-color: transparent;
background-image: url(LINK);
background-repeat: repeat;
}
HIER den Link zu Deiner Grafik einfügen, die du als Header verwenden möchtest.
Außerdem kann die Headerinfo verschoben werden, also der Bereich, in dem Deine Schreibcoins, Nachrichten etc. angezeigt werden:
/*Headerinfo verschieben*/
#head_center {
margin-right: 20px;
margin-top: 20px;
}
HIER änderst du, wie weit rechts oder links die Info stehen soll, und HIER, wie weit oben oder unten.
Dabei bietet es sich an, einfach selbst ein wenig auszuprobieren, bis man die geeignete Stelle gefunden hat - es ist nicht so schwierig, wie es vielleicht auf den ersten Blick wirken mag.
Um die Hintergrundfarbe beim Klicken mit der Maus auf die einzelnen Punkte der Mainbar zu verändert, wird dieser Code gebraucht:
/* Mainbar-Hintergrund */
#mainbar a:hover{
opacity: 0.8;
background: #a4a4a4;
}
HIER die Hintergrundfarbe ändern.
Für die Hintergründe der Unterpunkte der Mainbar brauchst du diesen Code:
/* Mainbar Unterpunkte */
#mainbar ul li ul li a:hover {
background-color: #a4a4a4;
color: #ffffff !important;
}
HIER die Hintergrundfarbe ändern. HIER die Schriftfarbe.
Auch die Schriftfarbe der Mainbar kann angepasst werden:
/* Mainbar Schriftfarbe */
#mainbar ul li a, #mainbar ul li a span {
color: #000000;
}
HIER die Schriftfarbe ändern.
Für den Container, also die beiden farblich an unser RSH-Design angepassten Balken links und rechts, wird dieser Code benötigt:
/* Container */
#container {
border-width: 35px !important;
border-color: #a4a4a4 !important;
border-style: solid !important;
box-shadow: 0 0 3px #000000;
}
HIER kannst du die Breite der Balken verändern, HIER die Farbe, HIER den Schatten, den man jeweils links und rechts sieht, und HIER die Art der Balken - welche Formen es neben 'solid' noch gibt, kannst du hier {*klick*} herausfinden.
through the sands of time, through the angel's eye
my final breath, swallowed by the womb of death
» Boxen
von Krawalliersdelikt am 21.02.2019 11:17Für die Überschriften der Boxen wird dieser Code benötigt:
/* Zwischenueberschriften */
#content h4, #content h4.sub_head {
font-family: book antiqua !important;
font-size: 10px !important;
letter-spacing: 4px;
font-weight: lighter !important;
color: #4d4d4d; !important;
text-align: center !important;
text-transform: uppercase !important;
background-color: #f3f3f3 !important;
background-repeat: repeat !important;
border: 1px solid #ffffff !important;
border-radius: 0px 0px 0px 0px !important;
padding: 5px !important;
box-shadow: 0px 3px 0px #ffffff !important;
}
Das ist nun ziemlich viel auf einmal, was man verändern/anpassen kann. Wenn du beispielsweise keine Schattierung haben möchtest, kannst du diesen Teil auch aus dem Code herausstreichen, um ihn zu kürzen. Doch erst einmal wäre es dafür wohl gut, zu wissen, welches Element eigentlich was bedeutet - wir gehen von oben nach unten und teilen es in kleine Gruppen auf.
HIER änderst du die Schriftart, HIER die Schriftgröße, HIER den Abstand zwischen den einzelnen Buchstaben, HIER die Strichstärke. Was Letzteres bedeutet, kannst du auf Wunsch hier {*klick*} herausfinden.
HIER änderst du die Schriftfarbe, HIER die Positionierung des Textes, also ob rechtsbündig, linksbündig oder mittig, HIER die Groß-/Kleinschreibung. Inwiefern du Letzteres verändern kannst, findest du hier {*klick*} heraus.
HIER änderst du die Hintergrundfarbe der Boxen, HIER den Rahmen, HIER kannst du für abgerundete Ecken sorgen, wenn du möchtest, HIER den Innenabstand verändern und HIER Deiner Box eine Schattierung hinzufügen.
Für die Optionen und die damit verbundenen Menüpunkte werden andere Codes benötigt:
/* Optionen */
.profileOptions div.profileOptionsTitle {
color: #000000;
font-size: 10px;
font-weight: lighter;
font-family: book antiqua;
letter-spacing: 3px;
text-transform: uppercase;
text-align: center;
background-color: #a4a4a4 !important;
border: 2px solid #000000 !important;
border-radius: 0px 0px 0px 0px;
padding: 5px 10px 5px;
}
HIER änderst du die Schriftfarbe, HIER die Schriftgröße, HIER die Strichstärke, HIER die Schriftart, HIER den Abstand zwischen den Buchstaben, HIER die Groß-/Kleinschreibung, HIER die Positionierung des Textes.
HIER änderst du außerdem die Hintergrund-Farbe, HIER den Rahmen, HIER kannst du abgerundete Ecken hinzufügen und HIER den Innenabstand verändern.
Für die Menüpunkte unterhalb der Optionen-Überschrift benötigst du diesen Code:
/* Menuepunkte */
#profileOptions ul li a {
background-color: #ffffff !important;
border-color: #a4a4a4 !important;
}
HIER änderst du auf Wunsch die Hintergrundfarbe, HIER die Rahmenfarbe.
Die Überschriften der Boxen sind nun klar - kommen wir also zum Inhaltsbereich.
/* Boxen */
div.box2 {
background-color: #a4a4a4 !important;
background-repeat: repeat !important;
border: 2px solid #000000 !important;
}
HIER änderst du die Hintergrundfarbe, HIER den Rahmen.
Dann gibt es noch einen extra Code dafür, wenn man mit der Maus über die Boxen fährt:
/* Boxen (Mouseover) */
div.box2:hover {
background-color: #a4a4a4 !important;
background-repeat: repeat !important;
border: 2px solid #000000 !important;
}
HIER änderst du einmal mehr die Hintergrundfarbe, HIER den Rahmen.
Mit diesem Code änderst du die Reiter 'Gästebuch', 'Blog' und Co:
/* Gaestebuch, Blog und Co */
.dynamic-tab-pane-control .tab-row .tab a:hover {
background-image: url(LINK);
text-shadow: 0px 0px #000000 !important;
box-shadow: 0 0 3px #000000;
}
HIER musst du eine kleine Grafik {bspw. 30x30px} mit der Farbe einfügen, die der Hintergrund haben soll, HIER kannst du die Text-Schattierung ändern, HIER den Box-Schatten.
Den Kasten mit Deinen Freunden kannst du ebenfalls verändern:
/* Freundesliste: Profilbilder */
ul.relationships li img {
background-color: #ffffff !important;
border-color: #a4a4a4 !important;
}
HIER änderst du die Hintergrundfarbe, HIER den Rahmen.
Kommen wir nun zum Gruppenkasten, der nicht im Generator enthalten ist:
/* Gruppenkasten */
.profile_list_groups {
border: 2px solid #a4a4a4 !important;
background-color: #ffffff;
}
HIER änderst du den Rahmen, HIER auf Wunsch die Hintergrundfarbe.
Zudem kannst du, wenn du möchtest, das kleine Anzeigebild verändern, das neben jeder Deiner Gruppen angezeigt wird:
/* Anzeigebild der Gruppen */
#profileAppGroups ul li {
list-style-type: none;
text-align: left !important;
list-style-image: url(LINK) !important;
}
HIER den Link zu Deiner gewünschten Grafik einfügen, Größe beispielsweise 12x12px.
Für die Box mit Deinen Geschenken brauchst du folgenden Code:
/* Geschenkekasten */
ul.profile_list_gifts {
border: 2px solid #a4a4a4 !important;
background-color: #ffffff !important;
}
HIER änderst du den Rahmen, HIER auf Wunsch die Hintergrundfarbe.
Und zu guter Letzt haben wir neuerdings noch die Vitrine:
/* Vitrine */
#profileAppShowcase {
border: 2px solid #a4a4a4 !important;
background-color: #ffffff !important;
}
HIER änderst du den Rahmen, HIER auf Wunsch die Hintergrundfarbe.
through the sands of time, through the angel's eye
my final breath, swallowed by the womb of death
» Sonstiges
von Krawalliersdelikt am 21.02.2019 11:51#linet_profileText {
background: #a4a4a4;
border: 1px solid #000000;
box-shadow: 3px 3px 0px #000000;
}
HIER änderst du den Hintergrund, HIER änderst du den Rahmen, HIER die Schattierung.
Unter dieser Beschreibung befinden sich noch die Statusmeldungen, sofern du die LiNet-Dienste aktiviert hast. Falls Dich diese stören sollten, kannst du sie mit folgendem Code ausblenden:
/* Statusmeldungen */
#linet_status_profile ul li {
display: none !important;
}
Kommen wir nun noch zur Überschrift, also dem Schriftzugt 'Profil von...', zunächst zum einfachen Teil:
/* Ueberschrift */
h1 {
background-color: #ffffff !important;
font-family: book antiqua;
text-tranform: uppercase;
letter-spacing: 1px;
color: #a4a4a4 !important;
text-shadow: 0 1px 0 #ffffff;
}
HIER die Hintergrundfarbe ändern, HIER die Schriftart, HIER die Groß-/Kleinschreibung, HIER den Abstand zwischen den Buchstaben, HIER die Schriftfarbe, HIER die Schattierung.
Der erste Buchstabe wird dann aber immer noch die Falsche farbe tragen. Das änderst du so:
/* Erster Buchstabe */
h1:first-letter {
font-size: 30px;
font-family: Book Antiqua;
font-weight: bold;
color: #a4a4a4;
text-shadow: 0 1px 0 #000000;
}
HIER änderst du die Schriftgröße, HIER die Schriftart, HIER die Strichstärke, HIER die Schriftfarbe, HIER die Schattierung.
Für die Buttons 'Profil bearbeiten' und 'Profilbeschreibung und -design anpassen' brauchst du diesen Code:
/* Buttons */
button, .button {
background-color: #a4a4a4 !important;
}
HIER die Hintergrundfarbe ändern.
Dein Profilbild und der Rahmen können selbstverständlich auch verändert werden:
/* Profilbild */
#profileImage img {
border: 3px solid #a4a4a4 !important;
box-shadow: 0px 0px 1px 1px #ffffff;
opacity: 0.9;
border-radius: 10px;
}
HIER änderst du den Rahmen, HIER die Schattierung, HIER die Sichtbarkeit und HIER kannst du abgerundete Ecken hinzufügen. Was es mit der Sichtbarkeit auf sich hat, kannst du hier {*klick*} herausfinden.
through the sands of time, through the angel's eye
my final breath, swallowed by the womb of death