userContent.CSS | Seitenbreite von Webseiten & Domains immer auf 100% (Monitorbreite) strecken

OH,

dann mach ich's mir wohl zu einfach.

Ok, ich warte da mal auf Tipps.

Zitat von .DeJaVu

Warum max-width:none und nicht unset?

Das wäre je nach Situation entweder kontraproduktiv oder egal, aber hätte auf keinen Fall einen Vorteil. unset setzt eine CSS-Eigenschaft auf ihren geerbten Wert zurück, was dann immer noch eine Einschränkung der Breite beinhalten kann, oder, falls es keinen Wert zum Erben gibt, auf seinen Standardwert. Und für max-width ist der Standardwert none.

Zitat von Mira_Belle

Wenn ich diese Zeilen dann in "meine" userContent.css eintrage, passiert nix!

Das dürfte an deinen @-Regeln liegen. Du verwendest @-moz-document domain, was dann in Klammern steht, sind aber keine Domain-Angaben. Eine Domain hat keinen Pfad, eine Domain endet immer mit der Domainendung. Du solltest dir, wenn du das auf einen bestimmten Pfad einer Domain beschränken möchtest, @-moz-document url, @-moz-document url-prefix oder @-moz-document regexp ansehen.

Danke Sören,

jedoch bewirkt eine Änderung auf egal was, nichts.

Leider.

Von @-moz-document domain(drwindows.de/news/)

auf @-moz-document url(drwindows.de/news/) geänder.

@-moz-document url-prefix(drwindows.de/news/) ausprobiert

und auch @-moz-document regexp(drwindows.de/news/)

Nichts hat eine Auswirkung auf das Erscheinungsbild der Page

Dabei würde es mir reichen, wenn auf Browserfensterbreite angepasst werden würde.

Du hast auch das Protokoll vergessen, das bei einer URL zwingend dabei stehen muss. Und dein letztes Beispiel hat mit einem regulären Ausdruck ("RegExp") ja auch nichts zu tun. Deswegen schrieb ich: Du sollst dir diese Optionen ansehen, sprich nachsehen, wie man diese verwendet.

Hier die entsprechende Seite aus dem MDN:

MDN

Zitat von Mira_Belle

Dabei würde es mir reichen,

Teste bitte mal:

@-moz-document domain("drwindows.de") {

main .p-body-inner {
   padding:0 calc((100vw - var(--content-width)) / 8)!important;
}
}

Zitat von Mira_Belle

http://drwindows.de/news/

Dazu muss man wissen, dass die News als auch die Download-Sektion nicht mit dem Foren-Code zusammenhängen, das sind zweierlei.

Für das Forum ist das hier wichtig (padding)

main .p-body-inner
{
    padding: 0 50px;
}

Und wie ich bereits schrieb, funktioniert das nicht allein. weil Anzeigen (Werbung) drüber liegen, also muss hinzu:

.anzeige.links-der-seite,
.anzeige.rechts-der-seite
{
    display: none;
}

Und das sollte für das Forum reichen, hylo

Für die News+Download-Sektion eine Ergänzung zu oben, insgesamt dann:

main .p-body-inner,
section.artikel-übersicht
{
    padding: 0 50px;
}

.anzeige.links-der-seite,
.anzeige.rechts-der-seite
{
    display: none;
}

Und alles mit dem Inspector, Kinderspiel, wenn man sich damit beschäftigt.

PS Da ich mit Stylus arbeite, ist es ein leichtes, CSS anzuwenden und zu überprüfen, für die userContent muss noch das folgende drum rum:

@-moz-document domain("drwindows.de") {

}

Zitat von ^L^

Von welchem ''Inspector''

Dann sieh dir das bitte mal an:

Thema

Anleitung zur Nutzung des Inspektors und der Stilbearbeitung aus den Entwicklerwerkzeugen

Firefox enthält eine ganze Reihe von Entwicklerwerkzeugen (englisch: developer tools), mit denen man HTML, CSS, JavaScript auf Webseiten und der Firefox-Benutzeroberfläche untersuchen, bearbeiten und nach Fehlern durchsuchen kann und in erster Linie für Webentwickler gedacht sind. Es gibt folgende Entwicklerwerkzeuge:

- Inspektor

- Konsole

- Debugger

- Netzwerkanalyse

- Stilbearbeitung

- Laufzeitanalyse (nur für Webseiten)

- Speicher

- Web-Speicher

- Barrierefreiheit

Dieser Beitrag beschränkt sich…

milupo

15. Februar 2020 um 15:48

Super 2002Andreas

mit

@-moz-document domain("drwindows.de") {
    main .p-body-inner {
        padding:0 calc((100vw - var(--content-width)) / 8)!important;
    }
}

ist das Forum (drwindows.de) wie gewünscht auf Fenster breite.

Auch wenn ich angemeldet bin!!

Mit Stylus habe ich Heise.de erträglich hinbekommen.

Dann müsstest du bei meinem css das !important anfügen, denn es macht bei ein und demselben Tag keinen Unterschied, ob man angemeldet ist ider nicht. Lediglich bekommt man weniger bis gar keine Werbung bei mit.

Zitat

FRAGE: Lässt sich das ändern? Bspw. mit einer Umschaltoption von derzeit ''Schmalspur'' Smartphone (?) auf PC-Monitor-Breite?

Wie müsste der Code für's Dr. Windows Forum aussehen?

Die kennen sowas nicht, allerdings hat xenforo für smartphones eigene Definitionen mit Breitenangabe. @media der Kram.

Du müsstest genauer schildern, was du hast und was sein soll

Stylus wieder deinstalliert.

Komme da nicht mit zurecht

und nur wegen einer Page, die nicht mal ich angepasst habe, ...

Kann jemand, der sich gut mit den Webentwicklertools in FF aus kennt,

mal ein kleines Tut schreiben?

An einem konkreten Beispiel?

Supernature-Forum.de

oder

Die Newsseite von Dr. Window, die ist,

so glaube ich etwas herausfordernder.

computerbase.de

winfuture.de

oder

http://borncity.com/blog/

Egal, nur eine, Schritt für Schritt. Bitte.

Und Danke Sören Hentzschel

@document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("https:.*")
{
  /* CSS Regeln hier werden angewandt auf:
     - Die Seite "http://www.w3.org/".
     - Jede Seite, deren URL mit "http://www.w3.org/Style/" beginnt
     - Jede Seite, deren URLs Host "mozilla.org" ist oder mit ".mozilla.org" endet
     - Jede Seite, deren URL mit "https:" beginnt */

  /* macht die oben erwähnten Seiten wirklich hässlich */
  body {
    color: purple;
    background: yellow;
  }
}

Ist ja sehr gut erklärt, die Unterschiede.

Zitat von Mira_Belle

Supernature-Forum.de

Rechtsklick in den mittleren Teil: Untersuchen ergibt:

Dann unter Stilbearbeitung diesen Code eingeben:

.p-body-inner {
  max-width:100% !important;
}

Ergibt:

Für die userContent.css wäre das dann:

@-moz-document domain("www.supernature-forum.de") {

.p-body-inner {
  max-width:100% !important;
}
}

Herrje, Doppelanzeige.

Es gibt doch Anleitungen

How To Theme Any Website With Stylus (For Firefox And Chrome)

A lot of modern websites come with integrated dark themes but there's still tons that don't so that's where custom css theming becomes important to me. Maybe...

m.youtube.com

User-Styles: Ich mache mir das Netz wie es mir gefällt… – rosenblut

Zwar nur grob, aber das sollte reichen.

Danke 2002Andreas

Ich konnte Deine Anleitung auf "Supernature-Forum.de" gut nachvollziehen,

habe mich dann gleich an

computerbase.de

winfuture.de

und

http://borncity.com/blog/

versucht.

Heul, die Seiten sind allesamt irgendwie anders aufgebaut.

Wenn ich dich richtig verstanden habe, muss da in dem rechten Feld [Inspektor]

in etwa sowas wie div class=" blabla.p-body-inner { stehen.

Also bei "Supernature-Forum.de" steht da .p-body-inner {

bei drwindows.de main .p-body-inner {, wobei dies sich nur auf das Forum auswirkt!

Die Startseite ist davon nicht betroffen.

Dort kann ich nur section.artikel-übersicht > ul finden

mit dem Eintrag display: grid;

Sieht so aus=>

section.artikel-übersicht > ul {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--grid-gap);

}

überschreibe ich alles mit diesem Code

    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
        margin-top: 0px;
        margin-bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 20px;

habe ich zwar rausgefunden, wo was geändert werden kann,

aber immer noch nicht, wie ich das dann umsetzen kann.

Auch habe ich dann immer noch nicht die Breite anpassen können.

Ich blicks einfach nicht.

@.DeJaVu

alles schön und gut, wenn es Vorlagen zu einer Page gibt.

Nur wenn ich das auf der Page verwendete Leyout, bzw. dessen Code im

Inspektor nicht verstehe, nutzt mir Sylus auch nicht viel.

Damit kann ich mir doch die "Arbeit" nur erleichtern,

weniger Tipparbeit, mehr aber doch auch nicht, oder?

Zitat von Mira_Belle

computerbase.de

Teste bitte wieder:

@-moz-document domain("computerbase.de") {

.p-body-main, .wrapper {
   width: 100% !important;
}
}

Supernatur müsste inzwischen auch xenforo haben.Stylus hat den Vorteil, dass es dir Fehler sofort anzeigt und das Css sofort wirksam ist. Ich arbeite vor im Inspector und wenn es passt copy&paste nach Stylus.

Zitat von Mira_Belle

Ich blicks einfach nicht.

Nicht verzagen, aller Anfang ist schwer wie man so sagt

Es ist etwas fummelig, aber mit der Zeit schaffst du das auch, davon bin ich überzeugt.

Vielen lieben Dank 2002Andreas

Das computerbase.de funktioniert erst einmal so.

Mir ist nur nicht klar, wie Du auf .p-body-main, .wrapper { gekommen bist.

Mir macht das Layout auf Seiten die auf Gitter setzen enorm zu schaffen, bzw. ich verstehe es einfach nicht.

Winfuture macht es wieder anders, sind es bei zb. computerbase.de noch div class=,

ist es bei Winfuture div id= und

Borns Blog nutzt auch div id=.

Also bei computerbase.de ist der richtige Eintrag div class="wrapper"

Dann sollte der richtige Eintrag bei Winfuture div class="container" sein

und bei Borns Block ...?

OK, funktioniert nicht.