Beiträge von Sailor56

    Dazu müssen die bereits in den Styledefinitionen vorhandenen Werte für height, max-height, width und max-width überschrieben werden. Das geht am besten, in dem du im 'Zusätzlichen CSS' (aus dem Dashboard -> Design -> Customizer -> Zusätzliches CSS) folgendes einträgst.


    Die Werte sind nach deinen Bedürfnissen anpassbar, aber bitte beachte, dass das Bild ein Breiten-/ Höhenverhältnis von ~ 1,78 / 1 hat. Die eingetragene Breite sollte also 1,78 mal größer als die Höhe sein... sonst verzerrt das Bild.

    Die Angaben in der Media Query sind für große Bildschirme (größer 1025px)

    Sieht ein bisschen blöde aus diese width/ max-width/ height/ max-height Kombination - so macht man das eigentlich auch nicht - aber anders bekomme ich in diesem Fall die vorhandenen Formatierungen nicht überschrieben.

    Irgend etwas läuft bei dir falsch! Das Custom CSS wird bei WP immer im Quellcode in einem <style>... CODE...</style> Bereich eingefügt. Damit ist sicher gestellt, dass dieses CSS als letztes vom Browser gelesen wird und damit alle vorherigen Formate (die nicht mit !important gekennzeichnet sind) überschreibt.
    In deinem Quellcode ist aber kein Custom CSS Style eingefügt!
    Bitte prüfe mal genau, was dafür die Ursache sein kann.
    Wenn dann das Custom CSS im Quellcode steht und trotzdem einzelne Formate nicht übernommen werden, dann hilft in aller Regel, dieses nicht übernommene Format mit '!important' auszuzeichnen.
    Das sollte aber nur in Ausnahmefällen gemacht werden, wenn gar nichts anderes mehr geht!

    Frage 1: Teste mal folgendes ... eintragen in 'Zusätzliches CSS' ... Dashboard -> Design -> Customizer -> Zusätzliches CSS

    .site-content .entry-header {
    padding: 20px 10px 10px 20px;
    }

    Mit den Padding-Werten kannst du die Abstände des (Text)Inhaltes vom Rand des weißen Kastens bestimmen. Reihenfolge oben, rechts, unten, links.

    Frage 2: Der Abstand des weißen Kastens zur darüber liegenden Linie sollte sich mit dem Padding Wert

    .list-view .site-content .hentry {
    padding-top: 27px;
    }

    einstellen lassen!

    In der Simulation mit FireFox sehen die Änderungen so aus!

    Ohne die Seite neu zu laden, wird wohl nur mit JavaScript gehen. Die unterschiedlichen Inhalte jeweils in eigene <div>'s unterbringen, den <div>'s eine ID geben und dann im Menü per 'onclick' das gewünschte <div> mit einer JS Funktion von display: none; auf display: block; umschalten.
    Alternativ... aber nicht empfehlenswert... käme auch eine Lösung mittels IFrames in Betracht.

    Uhhh... da hast du dir was vorgenommen. Ich kann eigentlich nur davon abraten, hier am grundlegenden Layout der Seite mit CSS zu arbeiten. Die Seite (das Theme) ist responsive und passt sich dadurch an unterschiedliche Bildschirmgrößen an. Selbst wenn du es schaffen solltest hier für zB die Anzeige auf einem normalen Desktop ohne die Seitenleiste hin zu bekommen, wird das für alle anderen Bildschirmgrößen nicht mehr passen - eine Baustelle ohne Ende.
    Du solltest lieber versuchen im Theme die Stelle zu finden, wo man ggf diese Seitenleiste deaktivieren kann - oder vielleicht kennt sich hier im Forum jemand mit dem 'Twenty Fourteen' gut aus und weiß wie es geht.

    Die Größe des Seitentitels wird auf deiner Seite von dem Hyperlink bestimmt, der im Seitentitel eingebettet ist... mit

    HTML
    .styles #page .site-title a {
      font-size: deine Größe;
    }


    solltest du in der Lage sein, diese nach deinen Vorstellungen einzustellen.
    Du solltest deine Änderungen allerdings nicht in der 'styles.css' des Themes einfügen - bei einem evtl Update, werden alle diese Änderungen wieder vom 'Original' überschrieben. Du solltest - sofern du es noch nicht gemacht hast - dir ein Child Theme anlegen, dieses aktivieren und dann alle deine Änderung nur im Child Theme vornehmen.
    Alternativ, zumindest was Änderungen am CSS betrifft, kannst du auch im Custom CSS (aufrufen aus dem Dashboard -> Design -> Customizer -> Zusätzliches CSS) deine Änderungen durchführen.
    Und was das Finden von 'Regeln' in den Stylesheets anbetrifft - FireFox zeigt dir eigentlich immer dem Namen des Stylesheets und ggf auch eine Zeilennummer an. Du solltest aber bedenken, es kann durchaus mehrere Dateien geben, die den Namen 'styles.css' haben.

    Versuche mal, den folgenden CSS Code in dein 'Zusätzliches CSS' zu schreiben / vom Dashboard -> Design -> Customizer -> Zusätzliches CSS

    :).. ist klar, CSS ist eben kein PHP.
    Dann ist es eventuell doch mein Fehler - in Beitrag #10 hatte ich geschrieben

    Zitat


    Füge folgenden Code in das 'zusätzliche CSS' (im Dashboard unter 'Design' -> 'Custumizer') ein


    War vielleicht nicht deutlich genug! Ansonsten ist das, was SEpp55 geschrieben hat, absolut korrekt! Fummel niemals an den Origanldateien herum, es sei denn es gibt dafür einen guten Grund und du weißt, was du machst.
    Aber das löst jetzt natürlich dein Problem nicht. Leider kann ich das auch nicht nachvollziehen und deswegen keine weitere Hilfe anbieten, bei meiner lokal installierten Testversion deines Themes läuft das (mit exakt dem CSS... eingefügt unter Dashboard -> Design -> Customiser -> zusätzliches CSS) fehlerfrei für alle Bildschirmgrößen (von 280px bis 1600px). Ich kann auch keine Media query im CSS finden und eine JavaScript Funktion, die dort was ändert sehe ich auch nicht.
    Möglich wäre allerdings, dass auf dem SmartPhone unterschiedliche Betriebssysteme (Android, Apple, Windows) unterschiedlich reagieren - oder auch der verwendete Browser auf dem SmartPhone dort Probleme macht.
    Da hilft nur ausprobieren, bis man den Fehler besser lokalisieren kann, um dann vielleicht gezielter vorgehen zu können.

    In welche (entsprechende) Datei hast du den Code denn eingefügt? Ein CSS Code kann dir zwar dein Design zerschießen - aber die komplette Webseite crashen lassen? Und wenn es so wäre und es läge an dem Code, den ich gepostet habe, dann täte es mir wirklich leid :(! Aber an dem Code ist nichts geheimnisvolles und schon gar nichts gefährliches.

    In Sachen Anzeige auf einem Smartphon... ja, da wird noch irgendwo eine Media query in deinem CSS sein, die die Formate für kleine Displays anpasst und dann kann es sein, dass der zusätzliche CSS Code wieder 'überschrieben' wird.

    Ja genau... der Sinn dieses Menüs, zumindest in dieser Ausführung, wie ich es in diesem Tehme (aktuell, da heute morgen erst runtergeladen und installiert) erschließt sich mir nicht!
    Wenn es denn schon als Social Media Menü im Theme integriert ist, dann würde ich erwarten, dass mir beim Einrichten und Bearbeiten dieses Menüs die gängigen Sachen, wie Facebook, Twitter, Instagramm und Co in irgendeiner Form zur Auswahl angeboten werden - oder zumindest eine Hilfefunktion angeboten wird, die mir sagt, wie es geht.
    Stattdessen bekomme ich, wie bei anderen Menüs auch, die Auswahl dort Seiten, Beiträge.... und individuelle Links als Menüpunkt hinzuzufügen. Aber anscheinend funktioniert keine der Optionen, weil immer nur dieses 1x1 Pixel screen-reader-text span eingefügt wird - oder will der Entwickler des Themes tatsächlich was für die Weiterbildung der Nutzer tun und sie dazu bringen, sich in den Tiefe der styles.css die richtigen Zeilen auszusuchen um dort einen einfachen Link zu Münster.de einzubauen - ok, da mit Umlaut würde das auch nicht funktionieren.
    Letztlich ist es wohl aber auch nicht dafür gedacht individuelle Links darzustellen... eben Social-Media... aber dann ist es nicht benutzerfreundlich gemacht.

    Ja... das ist wirklich etwas seltsam! Habe mir dieses Theme 'Oria' gerade mal testhalber installiert und es ist so, wie du es beschreibst... der Linktext, der eigentlich angezeigt werden sollte, verschwindet in diesem <span> und wird dadurch nicht angezeigt. Oder habe ich nur den geheimnisvollen Button, mit dem man die noch geheimnisvolleren 'erweiterten Einstellungen' nicht gefunden.
    Aber eine Lösung könnte ich trotzdem anbieten:
    Füge folgenden Code in das 'zusätzliche CSS' (im Dashboard unter 'Design' -> 'Custumizer') ein

    HTML
    #masthead .top-bar .social-navigation span.screen-reader-text {
    clip: initial;
    position: relative !important;
    width: 100%;
    height: auto;
    color: #fff;
    font-size: 1.5em;
    }

    Aber bitte schau dir deine Seite danach gut an, und prüfe, ob dadurch nicht ungewollt noch weitere <span>'s sichtbar werden.

    Vielleicht kennt sich ja hier auch jemand mit Oria und dessen Social Media Menü besser aus und kann dir sagen, welches Häksken man sonst noch wegklicken muss.

    Genau das solltest du nicht tun! Denn in deinem Quellcode sind mehrere Elemente mit der Klasse 'screen-reader-text'. Alle diese Element werden dann auch 'vergößert' und die Texte werden dann überall sichtbar. Das hat schon so seinen Sinn... nicht umsonst heißt es screen-reader-text.
    Du solltest deine Linktexte überhaupt nicht in einen Span packen, wenn es nicht unbedingt nötig ist. Sondern füge sie einfach zwischen die <a.....>dein Text</a> ein. Den Span mit dem 1x1 Pixel kannst du da auch ruhig stehen lassen, der dient der Barrierefreiheit!