Beiträge von Mira_Belle

Zitat von .DeJaVu

Was em angeht halte ich es für die falsche Skalierung, war das aussagekräftig genug?

Wenn sich das auf "meinen" Code zu Winfuture bezieht,

ist es nicht absolut egal, wenn die Änderung, die dadurch herbeigeführt wird, für mich OK ist,

oder?

Apropos Inspektor!

Den Eintrag #mainWrap kann ich finden, ist ja auch nicht schwer, links das "Auswahl-Werkzeug nutzen.

Nur was mach ich dann?

Im mittleren Fenster bekomme ich einen Haufen Code angezeigt, kann Werte und Anweisungen ändern

und deren Auswirkungen bestaunen.

Mit der "Stilbearbeitung" sehe ich dann CSS-Code. Toll.

Und Links habe ich ein weiteres Fenster, wo ich unter anderem das Box-Model anschauen und

verändern kann.

Nichts von alledem hat mich bis jetzt wirklich weiter gebracht!

Kurz, ich weiß bis jetzt, im gegen Satz zu den Browserwerkzeugen, was ich mit diesen Tool(s)

so richtig anfangen kann.

Auf https://wiki.selfhtml.org/wiki/CSS/Tutorials wird ja sehr schön CSS erklärt.

Es ist toll, dass mir dort gezeigt wird, wie man eine Seite gestaltet,

aber ich will ja einfach nur die Anzeigebreite von Seiten (Pages) verändern.

Mir sind Farbgebung, Schriften und Verschachtelungen so ziemlich egal.

(Nur weil ich in Frankreich etwas zu Essen bestellen will, oder in Spanien den Weg zum Klo erfragen,

muss ich doch keine Fremdsprache erlernen! ?)

Wenn Du also ein ganz Netter bist, erklärst Du mir, wie ich mit dem Inspektor umgehen muss,

damit ich auch in der Lage bin, andere Seiten in der Seitenbreitendarstellung zu beeinflussen.

An Winfuture und an Borns -Blog beiß ich mir nämlich gerade die Zähne aus.

Ist mir schon klar, dass nicht alle Pages gleich programmiert sind!

Ist wie mit einem Text, steht das Gleiche drin, nur sind es eben verschiedene Worte.

Mit .p-body-main, .#container { klappt es nicht.

Jedoch habe ich mit

@-moz-document domain("winfuture.de") {
    #container {
        width:1000px !important;
}
}

das Element in die Mitte bekommen.

Wobei ich gelesen habe, dass diese absolute Angabe in px nicht wirklich so dolle ist.

Wo war das doch nur gleich?

Hätt' ich Dummerchen doch bloß mal einen Link gesetzt.

Gefunden!

Irgendwo hier => https://wiki.selfhtml.org/wiki/CSS

@-moz-document domain("winfuture.de") {
    #container {
        max-width: 70em !important;
}
}

Viel besser!

Bin noch lernfähig.

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.

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?

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.

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.

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.

OH,

dann mach ich's mir wohl zu einfach.

Ok, ich warte da mal auf Tipps.

So, erster Versuch die Seit(en) von Dr. Windows anzupassen.

Funktioniert nur nicht so, wie ich es will!

@-moz-document domain(drwindows.de/news/) {
    section{
        padding:var(--content-padding) calc((100vw - var(--content-width)) / 8)!important;
    }
}

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

Wenn ich den letzten Wert, in diesem Fall die 8, original steht da eine 2, eingebe,

verändert sich die Breite.

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

Wo ist der Fehler?

Frage!

Könnten wir hier im Forum eine Codesammlung zu verschiedenen Pages aufmachen?

Bei vielen von mir besuchten "Seiten" bewirkt dieser Code nämlich leider nix.

Mh, ....

Welcher Tipp?

Aber es ist schön, dass Du Dein Problem gelöst bekommen hast.

Nur, mich würde es echt brennend interessieren, wie die Lösung ist!

Hi "Nightwalker"!

Wenn die Jungs Dir helfen "sollen", solltest Du auch Deinen Code der userChrome.css veröffentlichen.

Zitat von captain chaos

Mira_Belle

Dein Code hat bei mir keine Auswirkungen.

Das ist merkwürdig, denn egal welches Theme ich auch auswähle,

das "userChrome.css" legt die Veränderungen fest!

Es muss also an irgendetwas an Deiner Konfiguration liegen.

Zitat von Ulrich_2508

Hallo Mira,
ich bin im "userChrome.css" dort habe ich die Auswahl Boolean(ist markiert), Number und String.
Wie kann ich den Programmcodes erstellen?

Gruß Ulli

Was habe ich übersehen?

Sorry, ich verstehe Deinen Beitrag einfach nicht!

Die "userChrome.css" ist einfach eine "Textdatei"!

Hast Du überhaupt den verlinkten Beitrag von milupo gelesen?

Es wird da wirklich "Idiotensicher" erklärt, was zu tun ist.

Das habe sogar ich unartiges Mädchen verstanden.

Also, alles auf Anfang!

Und noch einmal von Vorn'.

Zitat von Ulrich_2508

Hallo und guten Morgen,
....
Gruß Ulrich

Moin Ulli.

Du musst Deinen Browser "vorbereiten"!

Zitat

Wer bislang noch keine Datei userContent.css oder userChrome.css nutzt, dies aber tun möchte,

muss über about:config zusätzlich den Schalter toolkit.legacyUserProfileCustomizations.stylesheets auf truesetzen.

Weiteres und genauer, wird hier beschrieben.

Thema

Anpassungen von Firefox-Oberfläche mittels userChrome.css und Webseiten mittels userContent.css

Neben den eingebauten Browser-Entwicklerwerkzeugen gibt es für Firefox eine weitere Möglichkeit, die Firefox-Oberfläche und die Gestaltung von Webseiten zu verändern. Dies geschieht mit Hilfe der Formatierungssprache CSS (Abkürzung für englisch Cascading Stylesheets) und den beiden Dateien userChrome.css für die Gestaltung der Firefox-Oberfläche und userContent.css für die Gestaltung von Webseiten nach den Wünschen der Firefox-Benutzer.

Bis zur Einführung der Webextensions durch Mozilla war es…

milupo

10. Februar 2019 um 13:19

Danach kannst Du in deine Datei (userChrome.css)

diesen Code von 2002Andreas schreiben.

/*Abstände der Einträge im Kontextmenü und Lesezeichen wieder schmaler*/

menupopup > menuitem,
menupopup > menu {
  padding-block: 0 !important;
}

Wenn es Probleme gibt, hier einfach noch einmal melden.

Gruß

Mira

00

.. ist für'n Hintern, wenn man/frau etwas los werden will.

Entschuldigt, wenn ich hier so reinplatze.

Aber ich nutze einen etwas anderen Code,

der mich vom verwendeten Theme unabhängig macht.

:root{ --lwt-toolbar-field-focus: rgb(43, 42, 51)!important }    /* Farbe Hintergrund (Dunkelgrau)*/

um DAS Feld einzufärben.

:root{ --lwt-toolbar-field-focus-color: rgb(225, 225, 225)!important }    /* Farbe Schrift (Hellgrau) */

um die Schriftfarbe einzustellen.

Und weil ich die Felder im Grundzustand transparent haben wollte

:root{ --lwt-toolbar-field-background-color: rgba( 0, 0, 0, 0)!important }    /* Farbe der Felder (transparent) */

    /* Farbe Url (Helles Orange)*/
    .urlbarView-url {
        overflow: hidden !important;
        color: rgba(255, 204, 0, 0.7)!important;
    }

um die Farbe der URL einzustellen (bei Euch war/ist sie ja blau)

und zu guter Letzt, damit im Suchfeld und im Adressfeld die Farben anpassbar sind

    /* Schriftzug " -- Mit "Google" suchen" & Hintergrund */
    .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, .urlbarView-row-inner[selected] {
        background-color: rgb(225, 225, 225)  !important;        /* Hellgrau */
        color: #e1e1e1 !important;        /* Hellgrau */
    }

Komplett sieht der Code für dieses "Projekt" also so aus:

/*---------------------------------------------------*/
/********** Anpassungen an der Adressleiste **********/
/*---------------------------------------------------*/
    :root{ --lwt-toolbar-field-focus: rgb(43, 42, 51)!important }    /* Farbe Hintergrund (Dunkelgrau)*/

    :root{ --lwt-toolbar-field-focus-color: rgb(225, 225, 225)!important }    /* Farbe Schrift (Hellgrau) */

    :root{ --lwt-toolbar-field-background-color: rgba( 0, 0, 0, 0)!important }    /* Farbe der Felder (transparent) */

    /* Farbe Url (Helles Orange)*/
    .urlbarView-url {
        overflow: hidden !important;
        color: rgba(255, 204, 0, 0.7)!important;
    }
    
    /* Schriftzug " -- Mit "Google" suchen" & Hintergrund */
    .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, .urlbarView-row-inner[selected] {
        background-color: rgb(225, 225, 225)  !important;        /* Hellgrau */
        color: #e1e1e1 !important;        /* Hellgrau */
    }

Ist nur eine Idee.

Ich möchte als Anfängerin hier, an dieser Stelle mal reingrätschen!

Bevor ich auf dieses Board aufmerksamm wurde, bin ich schon auf Aris Sammlung gestoßen.

Habe etwas damit herumgespielt, aber nichts verstanden.

Dann kam ich hier her, bekam geholfen, ein Codeschnipsel, eine kleine Anpassung

und ich habe "Blut" geleckt!

Erst Code kopiert, aus Beiträgen, die von anderen erstellt wurden,

dann selber mein Glück versucht, über die Tuts über die Browserwerkzeuge gestolpert

und angefangen selber Anpassungen vorzunehmen.

Ich denke, wäre ich hier nicht gelandet und hätte nur die Sammlung von Aris gehabt,

ich hätte längst aufgegeben und hätte FF genutzt, wie mir vorgeworfen.

Danke an Andi, milupo und all die Anderen, die mir halfen "meine" CSS, so anzupassen,

wie sie jetzt so ist und wie mir "mein" FF gefällt.

Jetzt wo ich etwas besser verstehe, was in den Sammlungen für Code so steckt,

schau ich mir diesen auch mal an, denn erst jetzt sind es keine böhmischen Dörfer

mit komischen Bahnhöfen mehr, auch wenn ich immer noch nicht alles Verstehe.

Zitat von 2002Andreas

Danke für die Rückmeldung. 👍

Schön dass dein Problem gelöst ist.

Sollte doch selbstverständlich sein!

Möchte doch auch in Zukunft Unterstützung

bei Problemen mit FF von Euch.

Oder hier und/oder da, den einen oder anderen Tipp.

Zitat von milupo

Du kannst ja in den Windows-Einstellungen unter Anpassen --> Farben eine Akzentfarbe auswählen und dann ein Häkchen in „Titelleisten und Fensterrahmen“ einfügen. Seit Fx 89 verwendet übrigens Firefox für die Menüleiste nicht mehr die Windows-Farbe, dafür muss man einen entsprechenden CSS-Code angeben. Nur so nebenbei. Aber du hast ja ein Theme, das sich darum kümmert.

Ja und?

Habe ich doch! Ich habe Dunkelgrau gewählt und das inaktive Fenster, bzw. dessen Titelleiste wird weis.

Ist im übrigen egal welche Farbe ich auswähle.

Dennoch Danke.