Wir werden unterstützt von:


• Codesammlung fürs Profildesign •

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


Krawalliers...
Administrator

25, Weiblich

  15. Bestseller Author

Admin

Ambitionierter Teilnehmer

Beiträge: 19178

• Codesammlung fürs Profildesign •

von Krawalliersdelikt am 21.02.2019 10:37

Codesammlung fürs Profildesign
In diesem Thread entsteht eine kleine Codesamlung für all die User, die ihr Profil personalisieren möchten und nicht genau wissen, welche Codes für welchen Bereich gebraucht werden. 

Selbstverstä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. 


my mind has gone insane
maybe i'm addicted to the
dark parts of my brain

Antworten Zuletzt bearbeitet am 12.02.2021 09:53.

Krawalliers...
Administrator

25, Weiblich

  15. Bestseller Author

Admin

Ambitionierter Teilnehmer

Beiträge: 19178

» Einführung

von Krawalliersdelikt am 21.02.2019 10:41

Zunächst einmal stellt sich Dir vielleicht die Frage, wie du überhaupt auf die Seite gelangst, mit welcher du Dein Profil bearbeiten kannst. Dafür klicke diesen Link an oder gehe auf Dein Profil und klicke auf 'Profilbeschreibung und -design anpassen'.

Bei 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.

my mind has gone insane
maybe i'm addicted to the
dark parts of my brain

Antworten Zuletzt bearbeitet am 21.02.2019 10:44.

Krawalliers...
Administrator

25, Weiblich

  15. Bestseller Author

Admin

Ambitionierter Teilnehmer

Beiträge: 19178

» Header, Mainbar & Container

von Krawalliersdelikt am 21.02.2019 10:54

Kommen wir nun aber zu den ersten Codes, ganz oben beim Header startend.

Falls 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.

my mind has gone insane
maybe i'm addicted to the
dark parts of my brain

Antworten Zuletzt bearbeitet am 21.02.2019 21:37.

Krawalliers...
Administrator

25, Weiblich

  15. Bestseller Author

Admin

Ambitionierter Teilnehmer

Beiträge: 19178

» Boxen

von Krawalliersdelikt am 21.02.2019 11:17

Kommen wir nun zu einem der wohl wichtigsten Punkte - den zahlreichen Boxen auf Deinem Profil, wie beispielsweise 'Allgemeines' und 'Persönliches', aber auch die Geschenk- und Gruppen-Boxen.

Fü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.

my mind has gone insane
maybe i'm addicted to the
dark parts of my brain

Antworten Zuletzt bearbeitet am 16.06.2021 17:12.

Krawalliers...
Administrator

25, Weiblich

  15. Bestseller Author

Admin

Ambitionierter Teilnehmer

Beiträge: 19178

» Sonstiges

von Krawalliersdelikt am 21.02.2019 11:51

Wenn du Dich auf der Bearbeitungsseite befindet, gibt es unten noch eine Beschreibung, in die du etwas schreiben kannst, wenn du möchtest. Diese taucht auf Deinem Profil zwischen den Reitern 'Gästebuch' und Co und den ersten Boxen 'Allgemeines' und Co auf. Um sie zu verändern, wird folgender Code benötigt:

#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. 

my mind has gone insane
maybe i'm addicted to the
dark parts of my brain

Antworten Zuletzt bearbeitet am 21.02.2019 12:12.

« zurück zum Forum