• Aktualisierte Forenregeln

    Keine Angst, niemand kauft eine Waschmaschine! Und im Grunde sind keine großen Neuerungen dazu gekommen, sondern nur Sachen ergänzt worden, an die sich die Moderation sowieso laut internen Absprachen hält. Die Forenregeln sind an den betreffenden Punkten nur etwas klarer formuliert. Änderung gab es unter dem Punkt 1.2 Meinungsfreiheit und 4.6 Spam und neu dazu gekommen ist 1.3 Verhaltensregeln, wo es im Grunde nur darum geht, höflich zu bleiben.

    Forenregeln

    Das bezieht sich nach wie vor nicht auf Neckereien und soll vor allem verhindern, dass Diskussionen zum Schauplatz von Streitigkeiten werden.
    Vielen Dank

Webseiten-Styles anpassen (Amino)

Worrel

Mitglied
Mitglied seit
22.03.2001
Beiträge
23.322
Reaktionspunkte
9.247
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:

Rabowke

Klugscheißer
Teammitglied
Mitglied seit
09.12.2003
Beiträge
27.348
Reaktionspunkte
6.434
... 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

Mitglied
Mitglied seit
22.03.2001
Beiträge
23.322
Reaktionspunkte
9.247
... 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

Mitglied
Mitglied seit
22.03.2001
Beiträge
23.322
Reaktionspunkte
9.247
Die Schriftart ändert man übrigens mit

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

golani79

Mitglied
Mitglied seit
07.09.2001
Beiträge
10.755
Reaktionspunkte
2.706
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

Mitglied
Mitglied seit
22.03.2001
Beiträge
23.322
Reaktionspunkte
9.247
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: 13
TE
Worrel

Worrel

Mitglied
Mitglied seit
22.03.2001
Beiträge
23.322
Reaktionspunkte
9.247
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

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

Worrel

Mitglied
Mitglied seit
22.03.2001
Beiträge
23.322
Reaktionspunkte
9.247
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

Registrierter Benutzer
Mitglied seit
03.09.2001
Beiträge
17.073
Reaktionspunkte
4.734
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

Mitglied
Mitglied seit
22.03.2001
Beiträge
23.322
Reaktionspunkte
9.247
Ö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

Mitglied
Mitglied seit
22.03.2001
Beiträge
23.322
Reaktionspunkte
9.247
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