• Aktualisierte Forenregeln

    Eine kleine Änderung hat es im Bereich Forenregeln unter Abschnitt 2 gegeben, wo wir nun explizit darauf verweisen, dass Forenkommentare in unserer Heftrubrik Leserbriefe landen können.

    Forenregeln


    Vielen Dank

Webseiten-Styles anpassen (Amino)

Worrel

Spiele-Guru
Mitglied seit
22.03.2001
Beiträge
25.081
Reaktionspunkte
10.295
Manch eine Webseite ist zu hell, zu dunkel, hat zu wenig / zu viel Rand oder oder oder.

Vieles davon kann man mit CSS anpassen.

Dafür gibt es zB die Erweiterung "Amino" für Chrome:

Mit einem Klick auf das Icon kommt man in den Editor. Dort auf "Domain" gehen und dem selber Stylen sind nur noch wenige Grenzen gesetzt.

Beispiel zum Reinkommen für das neue PCG Forum:


// Hintergrundfarbe
[data-theme="dark"]
{
// main bg
--bgColor: #225;
}

// schräglage postings
article.message--post {
transform: skew(-.075rad);
}

// bilder in der Signatur
.message-signature img {
max-height: 75px;
}



Und hier mal das, was ich mir als Ganzes für PCG zurechtgelegt hab:
[data-theme="dark"]
{
// main bg
--bgColor: #225;
// posting bg
--bgColor2: #557;
// zitat bg
--bgColor3: #522;
// Ähnliche Themen
--bgHeader: #222;
// text content
--textColor: #fff;
// Link farbe
--textLinkColor: gold;

--articleInfo: #BFBFBF;
// input box formatting buttons --inputIconColorHover: #FFDC01;
--inputIconBgHover: #333333;
--inputIconColor: #cce;

--inputBorder: #3f3f3f;
// input box bg
--inputBgColor: #88a;
// layout lines
--ghostButtonBorder: #dde;
//new posting edit box buttons
--ghostButtonBgHover: #779;
--btnInvertedBgColor: #fcdd16;
--btnInvertedTextColor: #333333;

// custom theme
--lightStandout: gold;

// scrollbar
--scrollBackColor: var(--inputBgColor);
--scrollHandleColor: #557;
--scrollWidth: 20px;

}


// scrollbar
/* Works on Firefox */
* {
scrollbar-width: var(--scrollWidth);
scrollbar-color: var(--scrollHandleColor) var(--scrollBackColor);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: var(--scrollWidth);
}

*::-webkit-scrollbar-track {
background: var(--scrollBackColor);
}

*::-webkit-scrollbar-thumb {
background-color: var(--scrollHandleColor);
border-radius: var(--scrollWidth);
border: 2px solid var(--lightStandout);
}




// zitat linker Rand Streifen
.bbCodeBlock {
border-left: 8px solid var(--lightStandout);
}

//quote colorfix text
.bbCodeBlock
span {
color:var(--text-color)!important;
}

// quote colorfix background (new posting)
.bbCodeBlock
{
background:var(--bgColor3);
}

// posting text
.bbWrapper {
font-weight: 400;
}

// username unter avatar
.username--staff,
.username--admin,
.username--moderator
{
color: #bbd!important;
text-shadow:1px 1px 2px #000;
}

.block-body
{
background-color: #225!important;
}

.fr-box p {
color: var(--textColor);
}
/*
// schräglage postings
article.message--post {
transform: skew(-.075rad);
}
article .message-cell--user {
background-color: #fff0!important;
transform: skew(.075rad)!important;
}
.message-cell--main {
margin-left:75px;
margin-right: 30px;
}


*/

// bilder in der Signatur
.message-signature img {
max-height: 75px;
}

// like stats bar link
a.reactionsBar-link {
padding-left:5px;
}



// right padding
.p-body-inner {
padding-right: 10px;
}

// max-width
@media (min-width: 1280px)
{
.p-body-inner {
width: 85%;
max-width: 85%;
}
}

examp.jpg


Da man sich bei Amino neuerdings dauernd einloggen muß, hier eine Alternativ Erweiterung:
Mit ALT+SHIFT+C öffnet man dabei den CSS Editor.

[data-theme="dark"]
{
// main bg
--bgColor: #225;
// posting bg
--bgColor2: #557;
// zitat bg
--bgColor3: #522;
// Ähnliche Themen
--bgHeader: #222;
// text content
--textColor: #fff;
// Link farbe
--textLinkColor: gold;

--articleInfo: #BFBFBF;
// input box formatting buttons --inputIconColorHover: #FFDC01;
--inputIconBgHover: #333333;
--inputIconColor: #cce;

--inputBorder: #3f3f3f;
// input box bg
--inputBgColor: #88a;
// layout lines
--ghostButtonBorder: #dde;
//new posting edit box buttons
--ghostButtonBgHover: #779;
--btnInvertedBgColor: #fcdd16;
--btnInvertedTextColor: #333333;

// custom theme
--lightStandout: gold;

// scrollbar
--scrollBackColor: var(--inputBgColor);
--scrollHandleColor: #557;
--scrollWidth: 20px;

}


// scrollbar
/* Works on Firefox */
* {
scrollbar-width: var(--scrollWidth);
scrollbar-color: var(--scrollHandleColor) var(--scrollBackColor);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: var(--scrollWidth);
}

*::-webkit-scrollbar-track {
background: var(--scrollBackColor);
}

*::-webkit-scrollbar-thumb {
background-color: var(--scrollHandleColor);
border-radius: var(--scrollWidth);
border: 2px solid var(--lightStandout);
}




// zitat linker Rand Streifen
.bbCodeBlock {
border-left: 8px solid var(--lightStandout);
}

//quote colorfix text
.bbCodeBlock
span {
color:var(--text-color)!important;
}

// quote colorfix background (new posting)
.bbCodeBlock
{
background:var(--bgColor3);
}

// posting text
.bbWrapper {
font-weight: 400;
}

// user info @ posting
[data-theme="dark"]
.message-cell.message-cell--user
{
background: #4a4a4a;
}
[data-theme="light"]
.message-cell.message-cell--user
{
background: #f3f3f3;
}

// username unter avatar
.username--staff,
.username--admin,
.username--moderator
{
color: #bbd!important;
text-shadow:1px 1px 2px #000;
}

.block-body
{
background-color: #225!important;
}

.fr-box p {
color: var(--textColor);
}
/*
// schräglage postings
article.message--post {
transform: skew(-.075rad);
}
article .message-cell--user {
background-color: #fff0!important;
transform: skew(.075rad)!important;
}
.message-cell--main {
margin-left:75px;
margin-right: 30px;
}


*/

// bilder in der Signatur
.message-signature img {
max-height: 75px;
}

// like stats bar link
a.reactionsBar-link {
padding-left:5px;
}



// right padding
.p-body-inner {
padding-right: 10px;
}

// max-width
@media (min-width: 1280px)
{
.p-body-inner {
width: 85%;
max-width: 85%;
}
}
 
Zuletzt bearbeitet:
... vllt. wären so Screenshots nicht verkehrt mit "vorher <> nachher" damit man die Auswirkung mal sieht. Ich hab damals einen ähnlichen "Hack" für das alte PCG-Forum genommen, nämlich dass die Breite komplett ausgenutzt wird.
 
... vllt. wären so Screenshots nicht verkehrt mit "vorher <> nachher" damit man die Auswirkung mal sieht. Ich hab damals einen ähnlichen "Hack" für das alte PCG-Forum genommen, nämlich dass die Breite komplett ausgenutzt wird.
Stimmt, ein Bild wollte ich auch noch einfügen ...

Und hier, für dich:

.p-body-inner {
padding-right: 10px;
}
 
Die Schriftart ändert man übrigens mit

.bbWrapper {
font-family:Times New Roman;
}
 
Thx für den Hinweis - bin leider mit Firefox unterwegs und dafür gibt es Amino leider nicht.

Wusste aber gar nicht, dass es generell solche Add-Ons gibt und habe dank deines Tipps jetzt den Font-Changer gefunden / installiert für FF. Kann man schön simpel einfach die Schrift ändern und muss auch keine Stylesheets schreiben dafür.:top:

edit .. hm .. doch nicht so optimal .. dauert immer, bis die Schrift gewechselt wird und das stört.
Na ja .. mal meine Augen offen halten, ob ich da vlt. noch was brauchbares finde.
 
Zuletzt bearbeitet:
Ultradark mode:

[data-theme="dark"]
{
// main bg
--bgColor: #000;
// posting bg
--bgColor2: #000;
// zitat bg
--bgColor3: #000;
// Ähnliche Themen
--bgHeader: #000;
// text content
--textColor: #fff;
// Link farbe
--textLinkColor: gold;

--articleInfo: #BFBFBF;
// input box formatting buttons --inputIconColorHover: #FFDC01;
--inputIconBgHover: #333333;
--inputIconColor: #cce;

--inputBorder: #000;
// input box bg
--inputBgColor: #000;
// layout lines
--ghostButtonBorder: #fff;
//new posting edit box buttons
--ghostButtonBgHover: #779;
--btnInvertedBgColor: #fcdd16;
--btnInvertedTextColor: #000;
}
 

Anhänge

  • ultradark.jpg
    ultradark.jpg
    47,6 KB · Aufrufe: 18
Inhaltbreite bei großen Auflösungen vergrößern:


// right padding
.p-body-inner {
padding-right: 10px;
}


// max-width
@media (min-width: 1280px)
{
.p-body-inner {
width: 85%;
max-width: 85%;
}
}
 
Da ist wohl jemand in die Welt der CSS Geschichte eingedrungen!
Oder hast du da schon länger Erfahrung mit, @Worrel ?
 
Anfänge vor ~20 Jahren mit "So ändert man also die Schriftart in allen <p>s auf der Seite" bis zu "Boah, man kann einen <div> ja auch fixieren, so daß der beim Scrollen stehen bleibt" bis hin zu beruflichem Layout fixing (Gott, was fabrizieren manche Entwickler für einen Murks) und als Hobby eben eigene Webseiten Formatierungen wie zB Darkmode für notalwaysright.com, bevor die den offiziell eingeführt hatten.

Und warum sowas dann nicht als Erfahrungswert mit der Community teilen? =)
 
Anfänge vor ~20 Jahren mit "So ändert man also die Schriftart in allen <p>s auf der Seite" bis zu "Boah, man kann einen <div> ja auch fixieren, so daß der beim Scrollen stehen bleibt" bis hin zu beruflichem Layout fixing
Öhm ja, das ist aber eher HTML und nicht CSS. CSS kam wesentlich später. :-D

Aber, da hast du recht, warum so einen Live Editor, ähnlich Fireworks oder Dreamweaver, wo man nur noch Klicki Bunti macht nicht allen mitteilen.
 
Öhm ja, das ist aber eher HTML und nicht CSS. CSS kam wesentlich später. :-D

Aber, da hast du recht, warum so einen Live Editor, ähnlich Fireworks oder Dreamweaver, wo man nur noch Klicki Bunti macht nicht allen mitteilen.
äh, what?

p
{
font-family: Verdana;
}


und

div
{
position: fixed;
}


ist pures CSS und kein einziges Bit HTML.
 
Scrollbar einfärben:


[data-theme="dark"]
{
// ...

// scrollbar
--scrollBackColor: #ddd;
--scrollHandleColor: #557;
--scrollWidth: 20px;

}


// scrollbar
/* Works on Firefox */
* {
scrollbar-width: var(--scrollWidth);
scrollbar-color: var(--scrollHandleColor) var(--scrollBackColor);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: var(--scrollWidth);
}

*::-webkit-scrollbar-track {
background: var(--scrollBackColor);
}

*::-webkit-scrollbar-thumb {
background-color: var(--scrollHandleColor);
border-radius: var(--scrollWidth);
border: 2px solid var(--lightStandout);
}
 
Zurück