Webseiten-Styles anpassen (Amino)

[Worrel]

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:

Amino: Live CSS Editor - Chrome Web Store

Customize any website with your own CSS and see your changes instantly with Amino!

chrome.google.com

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:

Spoiler

[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%;
}
}

Da man sich bei Amino neuerdings dauernd einloggen muß, hier eine Alternativ Erweiterung:

Live editor for CSS, Less & Sass - Magic CSS - Chrome Web Store

Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, Less/Sass to CSS, beautify, CSS reloader, lint, ...

chrome.google.com

Mit ALT+SHIFT+C öffnet man dabei den CSS Editor.

Spoiler: aktualisierter CSS Code

[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%;
}
}

 

[Rabowke]

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

 

[Worrel]

... 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;
}

 

[Worrel]

Die Schriftart ändert man übrigens mit

.bbWrapper {
font-family:Times New Roman;
}

 

[golani79]

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.

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.

 

[Worrel]

Ultradark mode:

Spoiler

[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;
}

 

[Wamboland]

Ultradark mode:

Ganz SO dunkel hab ich es nicht, aber vielen Dank für die Vorlage

 

[Zybba]

@Worrel Cooler Tipp, danke!

 

[Worrel]

Inhaltbreite bei großen Auflösungen vergrößern:

Spoiler

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


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

 

[Batze]

Da ist wohl jemand in die Welt der CSS Geschichte eingedrungen!
Oder hast du da schon länger Erfahrung mit, @Worrel ?

 

[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?

 

[Batze]

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.

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

 

[Worrel]

Öhm ja, das ist aber eher HTML und nicht CSS. CSS kam wesentlich später.

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.

 

[Worrel]

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);
}