Support » Allgemeine Fragen » Design Anpassung

  • Hallo zusammen

    Ich habe ein WordPress Design, welches ich gerne Farblich etwas anpassen möchte.
    Ich möchte gerne folgendes ändern:
    Kopf: beim Menü (Home, News,uswe) um dort die Hintergrundfarbe und Das kleine Viereck eine andere Farbe zu geben. Auch die Hintergrundfarbe beim darüberfahren möchte ich ändern.

    Die Rubrik Meta möchte ich entfernen
    Die Schriftfarbe bei den News soll in Schwez sein, bei den anderen Menüs soll der Text in rot sein.

    Ich habe versucht über den Browser Quelltext heraus zu finden wie die Bereiche heissen, damit ich dies in der CSS, usw anpassen kann. Habe schon versucht das eine oder andere in WordPress CSS Template anzupassen, aber nichts gefunden.

    Der Browser Quelltext finde ich sehr unübersichtlich.
    Habe Ihr ev. eine Idee wie ich dies herausfinde. Oder ev. ein Tool, wo der Quelltext des Browsers besser darstellt?

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 11 Antworten - 1 bis 11 (von insgesamt 11)
  • Hallo,
    also bei deinen ganzen Fragen muss ich erstmal durchsehen.

    Bevor ich jetzt dir die ganzen CSS Zeilen ansage, werde ich dir lieber mal anders helfen.

    1. Deine kleinen Vierecke im Menü sind ein Fehler. Normal wären da Icons mit Pfeil nach unten. Auch bei der Suche fehlt das Icon. Scheinbar lädt dein Template den Font Awesome nicht. Dateipfad falsch?

    2. Die Rubrik META kannst du im Backend entfernen. Dazu einfach auf Design gehen und Widget auswählen. Dort findest du die Seitenleiste mit den aktivierten Widget. Momentan sind es bei dir Suche, Archiv und Meta. Einfach auf Meta klicken und löschen. Auch kannst du dort andere Widget hinzufügen per Click and Drop.

    3. Dein Template lädt teilweise Bilder über http statt https. Dafür gibt es Plugins die das überschreiben können, ist einfacher und schneller.

    4. Deine Farben kannst du evtl. schon durch den Customizer bei Colors und Typography ändern. Wenn nicht, dann meld dich nochmal.

    • Diese Antwort wurde geändert vor 4 Jahren, 7 Monaten von namenlos.
    • Diese Antwort wurde geändert vor 4 Jahren, 7 Monaten von namenlos.

    @helpmypw

    Grundsätzlich solltest du zuerst ein paar Vorgaben notieren, wie deine Website aussehen soll und schauen, ob es ein Theme gibt, dass diesen Vorgaben möglichst weitgehend entspricht.

    Bei den Themes unterscheiden wir Themes mit wenig Einstellungsoptionen, bei denen der Theme-Entwickler sich bereits für ein bestimmtes Design entschieden hat und wenig Änderungen vorgegeben sind (du beauftragst wahrscheinlich auch nicht einen Architekten und malst ihm mit krakeligen Strichen auf eine Serviette, wie ein Haus aussehen soll) und Themes mit besonders viel Einstellungsoptionen, bei denen sich der Webseitenbetreiber aus einer Vielzahl an Modulen eine individuelle Website erstellen kann; diese Themes können dann für viele verschiedene Zwecke eingesetzt werden, die englische Bezeichnung lautet Multipurpose-Theme.

    Wenn du mit deinem Theme grundsätzlich zufrieden bist (falls nicht, hast du eine falsche Auswahl getroffen und solltest den vorherigen Schritt erneut angehen) aber noch geringfügige Anpassungen vornehmen möchtest, kannst du dir mit den Web-Entwicklertools deines Browsers anschauen, was dein Theme für CSS-Regeln enthält. Die Entwickler-Tools öffnest du mit Rechtsklick auf ein zu änderndes Element deiner Webseite und Klick auf „Element untersuchen“ im Kontextmenü. In den Web-Entwicklertools gibt es verschiedene Abschnitte mit unterschiedlichen Funktionen. Als erstes wird der Inspektor geöffnet, der den HTML-Code unkomprimiert in einer linken Spalte und die zum gerade selektierten HTML-Element zugehörigen CSS-Regel in der Spalte rechts daneben anzeigt. In dieses CSS-Regeln kannst du auch gleich Änderungen vornehmen, um ein „Was wäre wenn“ durchzuspielen. Natürlich haben diese Änderungen keinen Bestand, sie gehen verloren sobald du eine andere Webseite aufrufst oder die angezeigte neu lädst. Immerhin kannst du die CSS-Regeln aber kopieren und dann in WordPress in Design > Customizer > Zusätzliches CSS einfügen. Das Ergebnis wird dir direkt im Customizer angezeigt. Ist das nicht, was du wolltest, kannst du die gerade eingefügte Regel wieder löschen und eine andere, verbesserte Fassung eintragen bis es dann irgendwann so aussieht, wie du möchtest. Dann reicht ein Klick auf „Veröffentlichen“ und deine Änderung wird übernommen.

    Hier im Support-Forum bieten wir dir bei Anwendungsproblemen mit WordPress und frei erhältlichen Themes und Plugins Hilfe zur Selbsthilfe, setzen aber nicht auf Zuruf deine Änderungswünsche um. (Tatsächlich verdienen einige Teilnehmende hier ihren Lebensunterhalt, in dem sie solche Änderungen für zahlende Kunden umsetzen.)

    Die Startseite deiner Website lädt extrem langsam. Werden Webseiten nicht innerhalb von 3 Sekunden übertragen, springen nach verschiedenen Studien bereits die Hälfte aller Besucher genervt ab und suchen nach anderen Angeboten im Web. Die Ladezeiten dürften bei deiner Website vor allem mit den völlig überdimensionierten Bild-Dateien zusammenhängen. Hier werden 25 Bilder mit 9 Megabyte Datenvolumen übertragen. Du solltest die Bilder in einem Bildbearbeitungsprogramm auf maximal Full-HD (1920 x 1080px) verkleinern und mit einem Tools wie tinyjpg.com optimieren oder du installierst ein Plugin wie Imsanity, mit dem du auch bereits hochgeladenen Bilder optimieren kannst.

    @namenlos
    Dein Template lädt teilweise Bilder über http statt https. Dafür gibt es Plugins die das überschreiben können, ist einfacher und schneller.
    Wieso mit einem dauerhaft installierten Plugin (Really Simple SSL?) das URL-Schema überschreiben, wenn du es auch einfach in der Datenbank (z.B. mit Better Search Replace) ersetzen kannst?
    Die anderen Tipps kann man so umsetzen, sie beantworten aber kaum die ursprüngliche Frage.

    Thread-Starter helpmypw

    (@helpmypw)

    Mein Problem ist, dass im Browser Quelltext anzeige nicht wirklich toll dargestellt ist. Gibt es ein Tool, wo man dies besser darstellen kann, dann finde ich ev. auch eher heraus wie was benannt ist um dies dann im CSS oder so anpassen kann.
    @namenlos
    – Kleinen Vierecke im Menü: Wo im Quelltext steht, welches Bild nicht angezeigt wird?
    – Rubrik META: Konnte ich ausblenden, danke für den Tipp.
    – http statt https: Nach was für ein PlugIn müsste ich suchen.
    – Customizer bei Colors und Typography: Dort habe ich nur die Möglichkeit Hintergrundfarbe(weiss) und Header-Farbe (grau) anzupassen.

    @pixolin
    – Das Design wurde von meiner Kundin gewünscht, da es Optisch gut aussieht.
    – Sie möchte nur die Text-Farbe bei den News anpassen und beim Header die Hintergrundfarbe. Der rest gefällt ihr.

    Wie du den Quellcode deiner Webseite schön formatiert mit Syntaxhervorhebung und korespondierenden CSS-Regeln angezeigt bekommst, habe ich doch bereits beschrieben:

    Die Entwickler-Tools öffnest du mit Rechtsklick auf ein zu änderndes Element deiner Webseite und Klick auf „Element untersuchen“ im Kontextmenü. …

    Deine andere an mich gerichtete Frage (?) habe ich dir auch sehr ausführlich beantwortet: Entweder bietet dir das Theme eine Einstellungsmöglichkeit oder du musst eine eigene CSS-Regel hinzufügen. Wie du das machst, habe ich ebenfalls beschrieben.

    Ob das Theme optisch gut aussieht, möchte ich hier lieber nicht kommentieren. Teile meiner Antwort könnten dich verunsichern. 😉

    Thread-Starter helpmypw

    (@helpmypw)

    Habe mir das EntwicklerTool im Google Chrome angeschaut.
    ABer ich finde nirgens wo zb. der Header definiert wird. Auch das Viereck neben dem Word zb. Lebenslauf habe ich nirgends gefunden, wo dies steht im Quellcode.

    ABer ich finde nirgens wo zb. der Header definiert wird.

    Was meinst du damit?

    Der Quellcode einer Website entspricht der Ausgabe eines PHP-Scripts, sagt dir aber nicht, wie das Script programmiert ist oder was es enthält. Für Änderungen am Stylesheet (CSS) ist das aber auch unerheblich.

    Nehmen wir an, du hast im Header den Titel deiner Webseite stehen. Der Titel wird in schwarzer Schrift ausgegeben, du möchtest ihn aber gerne in Pink.
    Nun machst du einen Rechtsklick auf den Titel, gehst auf „Element untersuchen“ und bekommst in Firefox diese Anzeige im Browser:

    Screenshot Webseite mit Developer-Tools

    In Chrome sieht das ähnlich aus.

    Der grüne Pfeil zeigt dir, wie das HTML …

    <div class="site-branding">
      <h1 class="site-title">
        <a href="https://wp.local/" rel="home">wp 5.2</a>
      </h1>
      <p class="site-description">
    	Eine weitere WordPress-Website
      </p>
    </div><!-- .site-branding -->

    … in eine Überschrift auf der Webseite umgesetzt wird.

    Der rote Pfeil zeigt dir das korrespondierende CSS, mit dem der Titel („wp 5.2“) schwarz ausgegeben wird:

    .site-title a:link, .site-title a:visited {
        color: #111;
    }

    (rechts daneben steht sogar, wo diese Anweisung herkommt: Datei style.css, Zeile 3811).

    Wenn du das jetzt pink haben möchtest, kannst du direkt in den Entwickler-Tools den Farbwert #111 durch pink (oder einen entsprechenden Farbwert) ändern:

    Screenshot Developer-Tools nach Änderung.

    Gefällt dir die Änderung, kopierst du die CSS-Regel

    .site-title a:link, .site-title a:visited {
        color: pink;
    }

    und fügst sie im Customizer unter Zusätzliches CSS ein:
    Screenshot Customizer

    Ist das so für dich verständlicher?

    Thread-Starter helpmypw

    (@helpmypw)

    Ja das weiss ich, wie man die einzelnen Seiten erstellt/pflegen kann.
    Aber es geht hier um den Header (Navigation/Menü) wo ich anpassen möchte.

    @helpmypw

    1. Das https ändern mit Plugin gibt es viele Möglichkeiten. Empfehlung

    2. Deine fehlenden Icons liegt sicher am falschen Pfad. Aber da ich kein Zugriff auf deinen Speicher habe, kann ich dir hierbei nicht helfen.

    3. Beim Menü ändern hat Mario sich richtig viel Mühe gegeben und dir eigentlich alles dazu erklärt. Scheinbar fehlt dir noch die Erfahrung mit der Erstellung von individuellen Webseiten und daher glaube ich nicht dir hierbei helfen zu können.

    .main-navigation .menu-item-has-children > a::after {
        content: '\#ffffff'; ← das muss weg 
        font-family: FontAwesome; ← dieser Font wird falsch aufgerufen
        position: absolute;
        right: 1.125em;
        top: 0.8125em;
    }

    @pixolin Habe mich ja auch nicht auf ein bestimmtes Plugin bzw. vorgehensweise festgelegt 😉 Aber jetzt tue ich es und ja, hier würde ich Really Simple SSL empfehlen. Sicher ist das auch über die Datenbank möglich, aber hier würde ich ganz sicher davon abraten.

    @namenlos
    … und ich würde von Really Simple SSL aus Gründen* eher abraten. ¯\_(ツ)_/¯

    (* Die Verwendung eines zusätzlichen Plugins ist unnötig, wenn die URL-Einstellungen korrekt gesetzt und in der Datenbank vorhandene Links ersetzt werden. Das Plugin kann nach meiner Erfahrung zu nicht funktionierenden Links zu externen Adressen führen.)

    @helpmypw
    Was möchtest du denn konkret ändern?
    Du hast eine URL zu einer Website angegeben, in der gar kein Navigations-Menü vorkommt, fragst wie man den Header ändern kann und schreibst jetzt, es ginge um das Navigationsmenü?

    @pixolin,

    Just hooking into this conversation, as you were mentioning Really Simple SSL 🙂
    Of course a user can do the conversion manually, but have one remark to make: Really Simple SSL won’t change external URL’s. For hyperlinks, only an exact match with the website’s own domain is replaced, which pretty much excludes external domains.

    For manual conversion, I recommend to use a search and replace plugin like the Better Search and Replace plugin. The steps to do then are:
    – change home and site url to https (only if you have a valid SSL certificate)
    – run search and replace on your database (backup first!)
    – add .htaccess redirect for fast redirection to https
    But personally, I prefer using the plugin of course 🙂 Saves some time.

    (Deutsche Übersetzung weiter unten – German translation underneath)

    @rogierlankhorst
    Hello Rogier, thanks for joining the conversation.

    I don’t know if that has been fixed in between, but referred to issues a user reported in a WordPress Meetup, where links without a scheme (no http: provided) were translated into https-URLs. As the target-URL didn’t use https, the link was broken.

    As you confirmed, a manual conversion is possible and after that, no additonal plugin is needed. The mentioned plugin for replacement of URLs in the database can also be removed after the conversion.

    As a member of the support team I try to explain users backgrounds and not only offer convenient solutions which on one hand may perfectly solve a problem but on the other leave the user clueless what actually happens on their website.

    I may emphasize, your plugin is well written and besides the just mentioned reason certainly nothing speaks against using it.

    Im seinem Kommentar schrieb @rogierlankhorst

    Ich beteilige mich an diesem Thread, weil ihr Really Simple SSL erwähnt habt 🙂.
    Natürlich kann ein Benutzer eine Konvertierung manuell durchführen, muss aber eine Bemerkung machen: Really Simple SSL ändert keine externen URL’s. Bei Hyperlinks wird nur eine genaue Übereinstimmung mit der eigenen Domain der Website ersetzt, was externe Domains weitgehend ausschließt.

    Für die manuelle Konvertierung empfehle ich, ein Search and Replace Plugin wie das Better Search and Replace Plugin zu verwenden. Die Schritte, die dann zu tun sind:
    – Home- und Site-URL auf https ändern (nur wenn du ein gültiges SSL-Zertifikat hast)
    – Suche starten und in der Datenbank ersetzen (zuerst Backup!)
    – .htaccess Redirect für schnelle Umleitung zu https hinzufügen
    Aber persönlich bevorzuge ich natürlich, das Plugin zu verwenden 🙂
    Spart etwas Zeit.

    (Übersetzt mit http://www.DeepL.com/Translator)

    Meine Antwort dazu:

    Hallo Rogier, danke, dass du dich an dem Gespräch beteiligst.

    Ich weiß nicht, ob es zwischenzeitlich behoben wurde, bezog mich aber auf Probleme, die ein Benutzer in einem WordPress-Meeting gemeldet hat, wo Links ohne Schema (kein http: vorangesetzt) in https-URLs übersetzt wurden. Da die Ziel-URL keine https verwendete, war der Link defekt.

    Wie du bestätigt hast, ist eine manuelle Konvertierung möglich und danach kein zusätzliches Plugin erforderlich. Das genannte Plugin zum Ersetzen von URLs in der Datenbank kann nach der Konvertierung ebenfalls entfernt werden.

    Als Mitglied des Support-Teams versuche ich, AnwenderInnen die Hintergründe zu erklären und nicht nur komfortable Lösungen anzubieten, mit denen sich Problem zwar perfekt lösen lassen, bei denen Anwender aber nicht erfahren, was tatsächlich auf ihrer Website passiert.

    Allerdings möchte ich betonen, dass dein Plugin sauber programmiert ist und neben dem gerade genannten Grund sicherlich nichts dagegen spricht, es zu verwenden.

Ansicht von 11 Antworten - 1 bis 11 (von insgesamt 11)
  • Das Thema „Design Anpassung“ ist für neue Antworten geschlossen.