Beiträge von Mira_Belle

Zitat von 2002Andreas

Sieht dann so aus auf der Startseite:

Und so auf einer Unterseite:

Ach so!! Wieder was gelernt.

Danke 2002Andreas.

Danke 2002Andreas,

aber es hat mir keine Ruhe gelassen und ich habe eine Lösung gefunden.

UND, der Code ist auch noch geschrumpft und jetzt viel übersichtlicher.

@-moz-document domain("winfuture.de") {
    #mainWrap {
        width: 95% !important;
        margin-left: 35px !important;
    }
    .headerR {
        width:71% !important;
        margin-left: -6px !important;
    }
    #topnavi {
        width:98% !important;
    }

    #header .navigation {
        border-bottom: 1px solid lightblue !important;
        opacity: .7 !important;  
    }

    #centerLeftWrap {
    padding-right: 120px !important;
    }
    #centerRightWrap {
    padding-right: 120px !important;
    }
}

Zitat von 2002Andreas

Zitat von Mira_Belle

Kann man denn, für jene Unterseiten" eigene CSS anlegen?

Ja, jeweils mit anderer Bezeichnung.

Beispiel unser Forum:

...

Der Unterschied ist:

Domain

url

url-prefix

Alles anzeigen

Und wenn die Startseite schon wie hier "winfuture.de" ist?

Super, klasse.

.DeJaVu Du bist ja doch nicht so ein Brummbär!

Danke.

Könntest Du mir noch bei einer unschönen Sache helfen?

Winfuture!

Da ist mein Code zu einem Roman mutiert,

aber er funktioniert,

solange man nicht auf bestimmte Unterseiten kommt.

Grrr.

Also, die Startseite, aber auch die Artikel selber,

werden so angezeigt, wie von mir gewünscht.

Klicke ich aber auf Download und dann z.B. auf

https://winfuture.de/downloadvorschalt,3040.html,

oh graus!

Hier der Code, der Roman

@-moz-document domain("winfuture.de") {
    #mainWrap {
        width: 95% !important;
        margin-left: 35px !important;
    }
    .headerR {
        width:71% !important;
        margin-left: -6px !important;
    }
    #topnavi {
        width:98% !important;
    }
    .header_login a.logout, .header_login a.register {
        margin-right: 80px !important;
    }
    #centerWrap {
        margin-left: -295px !important;
        width: 950px !important;
    }
    .primary_content {
        margin-left: 1px !important;
        width: 700px !important;
    }
    #header .navigation {
        border-bottom: 1px solid lightblue !important;
        opacity: .7 !important;  
    }
    .content_wrap {
          width: 850px !important;
    }
    .primary_content {
        margin-left: 55px !important;
        width: 860px !important;
  }      
}

Kann man denn, für jene Uunterseiten" eigene CSS anlegen?

Zitat von .DeJaVu

CSS

@-moz-document domain("computerbase.de") {
.wrapper
{
    width: 80em !important;
}

.row-main
{
    width: calc(100% - 340px) !important;
}

}

Alles anzeigen

Danke .DeJaVu.

Es ändert sich .... nix am Verhalten. Leider.

Weiß der Kuckuck woran es liegt.

Zitat von milupo

Ganz am Ende fehlt noch eine schließende geschweifte Klammer (für golem.de).

Danke, ist korrigiert.

Ändert aber nichts am Verhalten beim Aufrufen von "computerbase.de".

Ich gehe genau so, wie von Dir beschrieben, vor!

Zitat von 2002Andreas

Wie testest du denn deine veränderten Codes?

Ich gehe genau so, wie von Dir beschrieben, vor!

Und genau deshalb verstehe ich nicht, warum ausgerechnet "nur" der Code

für "computerbase.de" nicht gleich und richtig verarbeitet wird.

::selection {
  color: white !important; 
  background: #ff8000 !important;
}

@-moz-document domain("computerbase.de") {
    #content {
        margin-left: 100px !important;
        width: 80em !important;
    }
    .wrapper  {
        width: 70em !important;
    }
    .row-main {
        width: 45em !important;
    }        
}


@-moz-document domain("chip.de") {
    .Portal {
        --topbanner-height-min: 0 !important;
    }
    :root {
        --breakpoint-desktop: 80vw !important;
    }
    #widget-entry-filter {
        display: none !important;
    } 
    #G32 {	margin-left: 120px !important;    }
}

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

@-moz-document domain("www.supernature-forum.de") {
    .p-body-inner {
        max-width:100% !important;
    }
}

@-moz-document domain("heise.de") {
    .a-layout {
        max-width: 75rem !important;
    }
}

@-moz-document domain("borncity.com") {
    #site-description {
        width: 100% !important;
    }
    #wrapper {
        width: 78% !important;
    }
    #access {
        padding-left: 120px !important; 
        width: 90% !important;
    }        
    #main {
        padding-top: 0px !important; 
        padding-right: 200px !important;
    }
    #primary {
        margin-right: -185px !important;
        width: 250px !important;
    }
    #content {
        width: 790px !important;
    }
}

@-moz-document domain("winfuture.de") {
    #mainWrap {
        width: 95% !important;
        margin-left: 35px !important;
    }
    .headerR {
        width:71% !important;
        margin-left: -6px !important;
    }
    #topnavi {
        width:98% !important;
    }
    .header_login a.logout, .header_login a.register {
        margin-right: 80px !important;
    }
    #centerWrap {
        margin-left: -295px !important;
        width: 950px !important;
    }
    .primary_content {
        margin-left: 1px !important;
        width: 700px !important;
    }
    #header .navigation {
        border-bottom: 1px solid lightblue !important;
        opacity: .7 !important;  
    }
    .content_wrap {
          width: 850px !important;
    }
    .primary_content {
        margin-left: 55px !important;
        width: 860px !important;
  }      
}

@-moz-document domain("golem.de") {
    #header {
        width: 1200px !important; 
    }
    #gservices {
        width: 1200px !important; 
    }
    #screen {
        width: 1200px !important; 
    }
    #iqadtile3 {
        display: none !important; 
    }
    #iqadtile5 {
        display: none !important; 
    }
    .li-hb-academy {
        display: none !important; 
    }
    .li-hb-phits {
        display: none !important; 
    }

    .g2 {
        margin-left: 80px !important; 
    }
    .g4 {
    width: 760px !important; 
    
    }
    #grandwrapper {
        width: 1150px !important; 
    }
    .li-reset {
    display: none !important; 
    }

Das ist die komplette von mir verwendete userContent.css.

Danke Sören Hentzschel

So einfach kann es doch sein,

wenn man weiß, was man macht.

Mit Deinem Hinweis ist nun dies herausgekommen.

@-moz-document domain("computerbase.de") {
    #content {
        margin-left: 100px !important;
        width: 80em !important;
    }
    .wrapper  {
        width: 70em !important;

    }
    .row-main {
        width: 45em !important;
    }        
}

Kompakt und für mich perfekt.

Danke.

Nachtrag!

Und wird oft nur nach einem Reload geladen. Grrrrr.

Warum?

Nachtrag.

Kann bitte nochmal jemand über den Code für ComputerBase schauen?

@-moz-document domain("computerbase.de") {
    #content {
        margin-left: 100px !important;
        width: 80em !important;
    }
    .wrapper  {
        margin-left: 100px !important;

    }
    .row-main {
        width: 35em !important;
    }
    .homepage-link {
        margin-left: 100px !important;
    }
    .headermeta {
        left: 870px !important;
        right: -150px !important;
    }        
}

Dürfte in der Mitte etwas breiter und mittiger sein.

Ich bekomme es einfach nicht hin.

Mit diesem Code wird die Seite im übrigen IMMER wie "gewünscht" angezeigt.

Bisher hatte ich immer den Fehler, dass erst der Code ignoriert oder "falsch" interpretiert wurde

und erst nach einem Reload der Code (richtig) verarbeitet wurde.

Und hier das Bildchen dafür.

Danke, vielen lieben Dank .DeJaVu.

Ich habe Deinen Code, mit dem was ich rausgefunden hab mal kombiniert!

Mir war "es" zu breit.

Auch habe ich diese blöde Werbung, mit den Elektrofahrzeugen ausgeblendet

und die etwas schmalere Seite etwas mehr in die Mitte geschoben.

@-moz-document domain("chip.de") {
    .Portal {
        --topbanner-height-min: 0 !important;
    }
    :root {
        --breakpoint-desktop: 80vw !important;
    }
    #widget-entry-filter {
        display: none !important;
    }
    #G32 {
        margin-left: 120px !important;
    }

    .fb {
        margin-left: -40px!important;
        padding-left: 20px!important;
    }
    .fb-col-lg-4 {
        width: 380px !important;
        left: 35px !important;
    }    
}

Es gibt zwar teilw. Lücken ohne Inhalt zwischen den einzelnen Beiträgen,

aber dafür auch kein Blinkiblinki und doofe Werbung.

Nachtrag.

Kann bitte nochmal jemand über den Code für ComputerBase schauen?

@-moz-document domain("computerbase.de") {
    #content {
        margin-left: 100px !important;
        width: 80em !important;
    }
    .wrapper  {
        margin-left: 100px !important;

    }
    .row-main {
        width: 35em !important;
    }
    .homepage-link {
        margin-left: 100px !important;
    }
    .headermeta {
        left: 870px !important;
        right: -150px !important;
    }        
}

Dürfte in der Mitte etwas breiter und mittiger sein.

Ich bekomme es einfach nicht hin.

Mit diesem Code wird die Seite im übrigen IMMER wie "gewünscht" angezeigt.

Bisher hatte ich immer den Fehler, dass erst der Code ignoriert oder "falsch" interpretiert wurde

und erst nach einem Reload der Code (richtig) verarbeitet wurde.

Zitat von Sören Hentzschel

// Für chip.de empfehle ich eher folgendes CSS:

CSS

body {
    display: none !important;
}

Das "fixt" dann gleich auch die qualitative Ebene. Ganz ehrlich, chip.de hat nichts mit seriösem Journalismus zu tun, wie ich bereits vor ein paar Jahren beispielhaft zeigte. Daran hat sich im Jahr 2021 nichts geändert. Da geht es ausschließlich um Klickgenerierung und das um jeden Preis.

Gibt es diesen Code auch für das ganze Internett?

Denn der ist wirklich sehr gut und filtert wirklich alles!

Aufgabe!

Komme bei Chip.de einfach nicht wirklich weiter!

Glaube ich das richtige Element gefunden zu haben,

zerhaut mir die nächste "Änderung" wieder alles.

Ich habe so das Gefühl, ich komme zwei, drei Schritte

nach vorne und dann, klatscht, fünf, sechs zurück!

@-moz-document domain("chip.de") {
    .Portal {
    --topbanner-height-min: 1px !important;
    }
}

Minimalistisch, die gähnende Leere am Anfang der Seite ist weg,

und hier ist Schluss, wenn mir keiner auf die Sprünge hilft.

Denn ich Glaube mit "try and error" komme ich nicht wirklich weiter.

Mir fehlt dann doch entweder genügend Erfahrung und/oder auch "Wissen".

Auch mit dem Code für "computerbase.de" läuft es nicht so, wie gedacht!

So sieht die Seite aus, beim ersten Aufruf!

Und so, nach einem Reload!!

Der Code dazu, ein Roman:

@-moz-document domain("computerbase.de") {
        .p-body-main, .wrapper {
        width: 95% !important;
}
    #content {
        margin-left: 150px !important;
    }

.homepage-link {
        margin-left: 100px;
}
.headermeta {
        left: 1020px;
        right: -150px;
}
.wrapper  {
   margin-left: 80px;
}
.row-main {
    width: 42em;
}
}

Auch hier bräuchte ich mal eine Überarbeitung von einem Profi!

Hi Ihr lieben.

Ich bin gerade an Chip drann,

doch da beiß ich mir gerade die Zähne aus.

Im Grunde sieht die Seite ganz einfach aus,

doch irgendwie macht "mein" Code nicht was ich will!

Im "Stilbearbeitungsfenster" eingegeben, schaut die Seite

dann doch etwas anders aus, als wenn die userContent.css geladen wird.

Jedoch ist das jetzt erst einmal nicht schlimm!

Was mich stört, sind die Lücken! Die bekomme einfach nicht weg.

Und dann sind da eben die Elemente, die Eingerückt sind und nicht

die gewünschte Breite haben.

Im "Stilbearbeitungsfenster" den Code eingegeben, sind diese

Elemente wenigstens alle Linksbündig.

Ich denke, ich bin falsch vorgegangen und habe einen Denkfehler!

Kann mir jemand helfen?

@-moz-document domain("chip.de") {
    #G32 {
        margin-top: -270px;
    }
    #M1 {
        margin-right: -150px;
    }
    #widget-entry-filter {
        display: none;
    }
    .fb-col-lg-4 {
        left: 25px;
    }
    .fb .wrapper-safe {
        margin-left: -20px;
    }
}

Es ließ mir einfach keine Ruh'!

Musste Borns-Blog noch mal überarbeiten.

Resulat s.u.

@-moz-document domain("borncity.com") {
    #site-description {
        width: 100% !important;
    }
    #main, #wrapper {
        width: 78% !important;
    }
    #access {
        padding-left: 120px !important; 
        width: 90% !important;
    }        
    #main {
        padding-top: 0px !important; 
        padding-right: 200px !important;
    }
    #primary {
        margin-right: -185px !important;
        width: 250px !important;
    }
    #content {
        width: 790px !important;
    }
}

Auch war ich mit Winfuture nicht so ganz zufrieden.

Daraus ist dann fast ein Roman geworden.

@-moz-document domain("winfuture.de") {
    #mainWrap {
        width: 95% !important;
        margin-left: 35px !important;
    }
    .headerR {
        width:71% !important;
        margin-left: -6px !important;
    }
    #topnavi {
        width:98% !important;
    }
    .header_login a.logout, .header_login a.register {
        margin-right: 80px !important;
    }
    #centerWrap {
        margin-left: -295px !important;
        width: 950px !important;
    }
    .primary_content {
        margin-left: 1px !important;
        width: 700px !important;
    }
    #header .navigation {
        border-bottom: 1px solid lightblue !important;
        opacity: .7 !important;  
    }
    .content_wrap {
          width: 850px !important;
    }
    .primary_content {
        margin-left: 55px !important;
        width: 860px !important;
  }      
}

Aber ich bin jetzt zufrieden

und möchte mich mal ganz besonders bei 2002Andreas bedanken.

Danke 2002Andreas

Aus Deiner Codevorlage ist nun dies geworden

    #mainWrap {
        width: 100% !important;
        margin-left: -2px !important;
    }
    .headerR {
        width:73% !important;
        margin-left: -2px !important;
    }
    #topnavi {
        width:99% !important;
    }

    .header_login a.logout, .header_login a.register {
        margin-right: 80px !important;
    }

    #centerWrap {
        margin-left: -295px !important;
        width: 950px !important;
    }

    .primary_content {
        margin-left: 1px !important;
        width: 700px !important;
}
    #header .navigation {
        border-bottom: 1px solid lightblue !important;
        opacity: .7 !important;  
    }

Hier das Resutat

Mir gefällt noch nicht der Abstand zwischen dem linken Newsblock und dem rechten Block mit "Allerlei".

Da muss noch "werkeln".

Nachtrag!

Habe noch etwas gebastelt!

    .content_wrap {
        margin-left: -1px !important;
        width: 800px !important;
    }
    .primary_content {
        margin-left: 1px !important;
        width: 800px !important;
    } 

Am Ende noch hizugefügt und ....

Nur bei den ersten New bekomme ich es nicht hin.

Ach und Danke auch an Dich .DeJaVu,

der Hinweis mit der Matroschka,

Verschachtelung, war Gold wert.

Nachtrag 2

Es ist schon spät, aber mir ist gerade Aufgefallen,

dass die Werte für .content_wrap & .primary_content

gleich sind.

Muss das so sein?

Nunja, werde ich am Wochenende überprüfen.

So habe etwas Experimentiert!

Winfuture sieht z.Z. bei mir so aus!

So ganz zufrieden bin ich noch nicht!

Ich komme einfach nicht dahinter,

wie gewisse grafische "Elemente" angepasst werden können.

Habe mal eine Grafik angehängt.

Da ist die "Linie" zwischen Reistrieren und der "Suche", die gehört doch ans Ende!

Bei den Sublinks hört die Linie nach unten einfach auf

und am Ende ist diese Leiste auch nicht bündig.

Weiter bin ich noch nicht gekommen,

aber ich merke, dass diese Seite ziemlich blöd designt wurde.

Man hätte es auch noch komplizierter machen können.

Da sind so viel statische Werte, ne ne ne.

Moin 2002Andreas

Ich danke Dir.

Nun verrate mir doch mal jemand, wie man/frau auf diese "Elemente" kommt.

#site-description, #access, #main, #wrapper

Ich habe Deinen Code mal auseinandergenommen und mit den Werten experimentiert!

Raus gekommen ist, TADA

@-moz-document domain("borncity.com") {
#site-description {
    width: 100% !important;
}
#main, #wrapper {
    width: 90% !important;
}
#access {
    padding-left: 200px !important; 
    width: 85% !important;
}
}

Und das schaut dann so aus =>

War aber trotz Vorlage gar nicht so einfach.

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?