Webseiten-Styles anpassen (Amino)

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
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
 
Zuletzt bearbeitet:

Rabowke

Klugscheißer
Teammitglied
Mitglied seit
09.12.2003
Beiträge
26.891
Reaktionspunkte
6.056
... 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.
 
TE
Worrel

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
... 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;
}
 
TE
Worrel

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
Die Schriftart ändert man übrigens mit

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

golani79

Bekanntes Gesicht
Mitglied seit
07.09.2001
Beiträge
10.445
Reaktionspunkte
2.510
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:
TE
Worrel

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
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: 10
TE
Worrel

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
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%;
}
}
 

Batze

Bekanntes Gesicht
Mitglied seit
03.09.2001
Beiträge
15.405
Reaktionspunkte
4.127
Da ist wohl jemand in die Welt der CSS Geschichte eingedrungen!
Oder hast du da schon länger Erfahrung mit, @Worrel ?
 
TE
Worrel

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
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

Bekanntes Gesicht
Mitglied seit
03.09.2001
Beiträge
15.405
Reaktionspunkte
4.127
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.
 
TE
Worrel

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
Ö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.
 
TE
Worrel

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
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);
}
 
Oben Unten