Support » Themes » Lovecraft Logo Linksu nd Rechts vom Sitename

  • Gelöst mikrohh

    (@mikrohh)


    Hallo,

    im Theme Lovecraft kann ich nur Logo oder den Seitennamen setzen, aber nicht beides.
    Habt ihr eine Idee wie ich rechts und links vom Seitennamen ein Logo eingebaut bekomme?

    Danke fürs Feedback.
    Gruß Mirko

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

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Hallo @mikrohh und willkommen im Forum,

    wenn das Theme dafür (aus nachvollziehbaren Gründen) keine Option anbietet, kannst du dir nur mit eigenen, zusätzlichen CSS-Regel oder einem Child Theme weiterhelfen.

    Die Überschrift ist in einem `<div class=“section-inner“> platziert. Du könntest ein Hintergrundbild mit den Logos (Breite 1140px, Höhe 80px) in der Mediathek hochladen, den Link zu diesem Hintergrundbild kopieren und dann unter Design > Customizer > Zusätzliches CSS folgende CSS-Regel nutzen:

    .section-inner { 
      background-image: url("https://example.com/wp-content/uploads/2018/07/hintergrund.jpg"); 
      background-size: cover;
    }

    Wenn das nicht ausreicht, musst du ein Child Theme erstellen und das Header-Template (header.php) nach deinen Wünschen ergänzen. Voraussetzung sind Grundkenntnisse in PHP und CSS.

    Thread-Starter mikrohh

    (@mikrohh)

    Hallo Bego Mario,
    danke für die Antwort und die Info’s.
    Liebe Grüße
    mikrohh

    Thread-Starter mikrohh

    (@mikrohh)

    Hallo Bego Mario,

    mit dem .Section-inner klappt das schon fast gut.
    Es wiederholt sich dadrunter noch ein zweites Mal.
    Hast Du da ne Idee wie ich das eventuell dort nur einfach hinbekomme?

    Ich habe ein Bild in der Größe 1140 x 80 erstellt in weiss und rechts und links einfach das Logo reingestellt.

    Danach dann unter zusätzliches CSS mit Deinem Befehl:

    .section-inner {background-image: url(„http://xxxx/wp-content/uploads/2018/08/BSV-Header-2.jpg&#8220;);
    background-size: cover;}

    eingefügt.

    • Diese Antwort wurde geändert vor 5 Jahren, 8 Monaten von mikrohh.

    Bei der Größenangabe hatte ich mich anscheinend vertan, sorry. Du könntest mal versuchen, das Bild größer anzulegen (1710 x 232px), dann sieht es auch in Retina-Displays besser aus. Um Wiederholungen zu vermeiden, kannst du no-repeat eingeben:

    .section-inner { 
      background-image: url("http://xxxx/wp-content/uploads/2018/08/BSV-Header-2.jpg") no-repeat; 
      background-size: cover;
    }
    Thread-Starter mikrohh

    (@mikrohh)

    Danke,
    ich habe einfach das Logo mit Schrift und Bild als Logo erstellt.
    VG mikrohh

    • Diese Antwort wurde geändert vor 5 Jahren, 8 Monaten von mikrohh.

    … und dich damit für die schlechteste Lösung entschieden. Schade.

    Thread-Starter mikrohh

    (@mikrohh)

    Hallo Bego Mario,
    ich hatte die Antwort übersehen, das probiere ich aber jetzt nochmal.
    DANKE!

    Gruß mikrohh

    Thread-Starter mikrohh

    (@mikrohh)

    Wenn ich das nutze:
    .section-inner {background-image: url(„http://xxxe/wp-content/uploads/2018/08/BSV_Logo_Final.jpg&#8220;) no-repeat;
    background-size: cover;}

    Expected End of value but found „no-repeat“

    Hrm … 

    Probier doch bitte mal

    .header .section-inner {background-image: url("http://xxxe/wp-content/uploads/2018/08/BSV_Logo_Final.jpg"); background-size: cover;}

    Nachtrag: die Klasse .section-inner wird doppelt verwendet, deshalb auch die Wiederholung. Mit vorangestellten .header wird es nur für die Überschrift verwendet.

    • Diese Antwort wurde geändert vor 5 Jahren, 8 Monaten von Bego Mario Garde. Grund: Nachtrag

    Vermutlich sieht es hübscher aus, wenn du die Logos in zwei getrennte Grafiken aufteilst und dann mit :before und :after arbeitest:

    .blog-title::before {
    
        content: url(https://www.debian.org/Pics/hotlink/openlogo-25.png);
        left: -50px;
        position: relative;
    
    }
    .blog-title::after {
    
        content: url(https://www.debian.org/Pics/hotlink/openlogo-25.png);
        left: 50px;
        position: relative;
    
    }
    Thread-Starter mikrohh

    (@mikrohh)

    Super, Du hast Recht, zwar wird mein Logo noch abgeschnitten, weil vielleicht die Größe noch nicht so ganz passt, aber dann mache ich es kleiner.
    Du kannst es hier sehen. http://judobsv.de/
    Das ist sicher nichts großes mehr.
    Lieben Dank für die Hilfe!

    Kann ich Dir ne Limo drauf spendieren?
    VG Mirko

    Dafür enthielten meine Antworten diesmal zu viele Fehler. Zeigt aber wieder sehr schön, dass „eben mal“ meistens nicht klappt und Dinge häufig komplizierter sind, als sie aussehen. Selbst bei der zuletzt genannten Alternative müsstest du noch Media Queries hinzufügen, damit die Logos erst ab einer bestimmten Bildschirmbreite angezeigt werden.

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Das Thema „Lovecraft Logo Linksu nd Rechts vom Sitename“ ist für neue Antworten geschlossen.