Inhalt einer Seite kompakter gestalten

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.
  • Firefox-Version
    88
    Betriebssystem
    Win10 Home

    Seit einiger Zeit kann man unangemeldet Instagram Profile nicht mehr aufrufen zb. https://www.instagram.com/mozilla/ weil man direkt zu einer Login Seite weiter geleitet wird. Also habe ich mir eine andere Möglichkeit gesucht und gefunden

    https://smihub.com/v/mozilla/ das zeigt die Instagram Profile auch (und mehr brauch ich nicht).

    Auf meinem Arbeitsrechner mit größerem Bildschirm sind die einzelnen Beiträge/Posts auf dieser Seite leider sehr groß und untereinander.

    Verkleinere ich das Firefox Fenster sind es 3 Beiträge/Posts nebeneinander.

    Ich glaube (aber weiß es nicht genau) es liegt an dem Eintrag <meta content="width=device-width, initial-scale=1.0" name="viewport"> im Quelltext

    Nun meine Frage: kann ich da mit userContent.css irgend etwas ändern, damit die Seite bei mir auch mit größerem Bildschirm so angezeigt wird, dass 3 Posts nebeneinander angezeigt werden?

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • Oder auch so:


    CSS
    @-moz-document domain("smihub.com") {
    
    .content__img-wrap {
      max-width: 350px !important;
      padding: 8px !important;   
      height: 850px !important;
    }
    }

    Dann wären die 3 Beiträge immer auf gleicher Höhe nebeneinander.



    Je nach Größe/Höhe der Beiträge, bleibt unten ein leerer Bereich im Feld übrig.

    Den kannst du mit 850px anpassen, wie es bei dir eben besser aussieht.

  • Heute stelle ich fest, dass man bei https://www.instagram.com/mozilla/ nicht mehr zur Login Seite weiter geleitet wird. Die letzten Tage war das aber definitiv so. Müssen sie wohl wieder geändert haben :/

    EDIT: Und bei Neu laden der Seite doch wieder Weiterleitung der Login Seite. Die spinnen doch =O

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • ja, das könntest du vielleicht rechts oben bei dem Kreuz schließen und den Beitrag trotzdem sehen?

    Aber wie gesagt, gerade eben ging es kurz ohne Weiterleitung zum Login und paar Minuten später nicht mehr obwohl alles von der Webseite gelöscht wurde im Browser und Firefox sogar neu gestartet wurde.

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • okay, anscheinend sind sie am basteln. Ich werde diese Seite einfach nicht mehr aufrufen. Habe mit

    https://addons.mozilla.org/de/firefox/addon/redirector/ eine Weiterleitung für Instagram auf Smihub eingerichtet. Ist eh viel komfortabler, besonders bei Videos die man dann auch vor und zurück spulen kann (was auf Instagram bei vielen nicht geht)

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • sieht bei mir so aus

    Danke. Das funktioniert dann anscheinend auch für die einzelnen Beiträge. Ich meine mich nämlich zu erinnern, dass bei denen in Instagram noch ein /p/ wie Posting im Adresspfad erschien, während ich im obigen Beispiel Mozilla ein /c/ entdecke.



    Nachtrag einen Tag später: Ich bemerkte dann gestern selbst, dass meine Anfrage keine Rolle spielt, weil SmiHub nicht die originale Zeichenfolge aus der Adresse für die einzelnen Beiträge übernimmt, so dass man die Weiterleitung nur für Konten einrichten kann.

  • Zitronella , 2002Andreas
    Ich kam gestern endlich dazu, mir das mal selbst genauer anzuschauen. Aufbauend auf Andreas’ Code (Beitrag #3) hab ich das Ergebnis, denke ich, verbessert:

    CSS
    .content__item {
    	max-width: 350px;
    	padding: 5px;
    	height: 850px;
    	margin: 5px;
    	overflow: auto;
    }
    .content__item.ads { display: none }

    Statt overflow: auto könnte man auch overflow: hidden nehmen; das ist einfach eine Frage dessen, was man will. Die letzte Zeile ist natürlich optional. Bei mir mit aktivem uBlock blendet sie nur eine Linie aus, die vom Anzeigenblock übrig bleibt.

  • Danke, wobei ich keinen großen Unterschied sehe, hab ich mal deinen Code genommen.

    Unabhängig davon kann man sich jetzt wohl nur noch einen kürzeren Zeitraum in der Historie ansehen. Edit: jetzt gehts mit mehr History, lag wohl an der Seite selbst.

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

    Einmal editiert, zuletzt von Zitronella ()

  • Danke, wobei ich keinen großen Unterschied sehe, hab ich mal deinen Code genommen.

    Es ging vor allem um den Textüberlauf. So etwas fällt natürlich nur dann auf, wenn es viel Text gibt. Ich habe aber selbst bemerkt, dass meine Variante nicht der Weisheit letzter Schluss sein kann, denn der Balken, in dem steht, wie viele Leute einen Daumen hoch gegeben, wie viele kommentiert haben und wie alt das Beitrag ist, dieser Balken wanderte plötzlich beim Scrollen mit hoch und überdeckte Text. Deshalb meine geänderte aktuelle Version mit für mich passenden Werten (mit URL-Präfix statt Domain):

    Vor allem die Höhe muss man sich individuell anpassen. Letzte Zeile immer noch optional. Wenn jetzt aber die Vorschaubilder nicht gleich groß sind, dann hat man wieder versetzte Kacheln, gerade heute bei https://smihub.com/v/tagesspiegel/ zu beobachten.

    Ich hab mir auch die Seite mit den Postings angepasst:

    Code
    @-moz-document url-prefix("https://smihub.com/c/") {
    	.col-md-6, .col-sm-10 {
    		flex-basis: 75%;
    		max-width: 75%;
    	}
    	.offset-md-3, .offset-sm-1 {
    		margin-left: auto;
    		margin-right: auto;
    	}
    }

    Ich bin mir über die „richtigen“, für mich optimalen Werte selbst noch nicht sicher, ich hatte es auch schon noch bildschirmfüllender eingestellt. Statt der Prozente, die sich auf die Fensterbreite Containerbreite*) beziehen, kann man auch feste Angaben machen (Vorgabe für beide Eigenschaften ist übrigens nur 50%). Die col- und offset-Selektoren werden bei verschiedenen Fenstergrößen aktiv (@media-Regeln).


    *) Die maximale Containerbreite (Selektor .container) muss ich nicht einstellen. Es kann aber bei sehr großen Bildschirmen etwas sein, das man eventuell beeinflussen will.

    Edit: jetzt gehts mit mehr History, lag wohl an der Seite selbst.

    Ja, da hakt es offensichtlich immer wieder mal, auch beim Aufruf einzelner Beiträge. Es muss im Hintergrund ja immer bei Instagram angefragt werden.

  • Nochmal hierzu:

    Habe mit

    https://addons.mozilla.org/de/firefox/addon/redirector/ eine Weiterleitung für Instagram auf Smihub eingerichtet.

    Ich habe ein Userskript gefunden, das die Weiterleitung zu SmiHub auch für Links auf Postings durchführt (was mit dem Redirector nicht gelingen kann wegen der unterschiedlichen Pfade), und zwar vor allem auch für den häufigen Fall, dass sie eingebettet dargestellt werden!


    Das Skript findet man bei Greasy Fork unter Bypass Instagram Login Redirects.

  • Sehr gut, vielen Dank. ;) Ich komme wohl doch nicht um Tampermonkey drum rum, oder gibt es was anderes/besseres für Skripte?

    Auf jeden Fall funktioniert es sehr gut und ich habe den Redirector wieder entfernt.

    Hilfe auch im deutschsprachigen Matrix-Chat möglich oder im IRC-Chat
    Meine Anleitungstexte dürfen gerne "geklaut" und weiter verwendet/kopiert werden
    ;)

  • Ich komme wohl doch nicht um Tampermonkey drum rum, oder gibt es was anderes/besseres für Skripte?

    Auch ich nutze Violentmonkey, weil ich besser damit klar komme. Teste doch einfach mal beide. Im Detail gibt es durchaus Unterschiede zwischen den bekannten Monkey-Addons, was dazu führen kann, dass eines mit Tampermonkey funktioniert, mit den anderen aber nicht (oder umgekehrt). Bei Violentmonkey wird auf jeden Fall aktiv entwickelt und auch auf so etwas regiert (siehe Aktivität in GitHub). Ich habe kürzlich noch FireMonkey entdeckt, das ich aber wegen anderer Limitierungen nicht nutzen kann.

    Auf jeden Fall funktioniert es sehr gut und ich habe den Redirector wieder entfernt.

    Wenn Du Lesezeichen zu Instagram-Konten besitzt, solltest Du ihn wieder aktivieren. Ich habe bei mir jedenfalls festgestellt., dass dieses Skript dann nicht greift.