# Webseiten-Styles anpassen (Amino)



## Worrel (9. Februar 2021)

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
					

Live-CSS-Editor. Schreiben Sie benutzerdefiniertes CSS für jede Website und sehen Sie Ihre Änderungen in Echtzeit.




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






			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.
        




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








						Live editor for CSS, Less & Sass - Magic CSS
					

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 (9. Februar 2021)

... 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 (9. Februar 2021)

Rabowke schrieb:


> ... 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 (10. Februar 2021)

Die Schriftart ändert man übrigens mit

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


----------



## golani79 (10. Februar 2021)

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 (10. Februar 2021)

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 (11. Februar 2021)

Worrel schrieb:


> Ultradark mode:


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




			Dieser Inhalt steht nur eingeloggten Mitgliedern zur Verfügung.


----------



## Zybba (12. Februar 2021)

@Worrel Cooler Tipp, danke!


----------



## Worrel (12. Februar 2021)

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 (12. Februar 2021)

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


----------



## Worrel (12. Februar 2021)

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 (13. Februar 2021)

Worrel schrieb:


> 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 (13. Februar 2021)

Batze schrieb:


> Ö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 (23. Februar 2021)

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


----------

