1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP <5.0 Rand verkleinern

Dieses Thema im Forum "Design" wurde erstellt von iMacfux, 2. Dezember 2018.

  1. iMacfux

    iMacfux Well-Known Member

    Registriert seit:
    28. August 2008
    Beiträge:
    588
    Zustimmungen:
    3
    Hallo und schönen Nachmittag,

    wie kann ich den weissen Rand, siehe Pfeil, verkleinern?

    Es geht um www.fincanoel.com und twenty fifteen...

    und um die Startseite, die ich statisch angelegt habe. Danke. Walter Screenshot_1.png
     
    #1 iMacfux, 2. Dezember 2018
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Spiel doch mal mit diesen Werten...
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #2 Sailor56, 2. Dezember 2018
  3. iMacfux

    iMacfux Well-Known Member

    Registriert seit:
    28. August 2008
    Beiträge:
    588
    Zustimmungen:
    3
    Danke, wo soll ich das reinstellen?

    Gruß Walter
     
    #3 iMacfux, 3. Dezember 2018
  4. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Im Dashboard unter Design - Customizer in den Zusätzlichen CSS!
     
    #4 SEpp55, 3. Dezember 2018
  5. iMacfux

    iMacfux Well-Known Member

    Registriert seit:
    28. August 2008
    Beiträge:
    588
    Zustimmungen:
    3
    Danke euch beiden, das hat geklappt....
    Gruss aus Teneriffa
    Walter
     
    #5 iMacfux, 3. Dezember 2018
  6. iMacfux

    iMacfux Well-Known Member

    Registriert seit:
    28. August 2008
    Beiträge:
    588
    Zustimmungen:
    3
    Guten Abend,´

    das Foto auf der Startseite ist verkleinert worden, nun stimmen die seitlichen Abstände nicht mehr. Kann man den umher laufenden Rahmen an allen 4 Seiten gleich groß machen?
    Danke
    Screenshot_3.jpg
     
    #6 iMacfux, 7. Dezember 2018
  7. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Ich habe bei dem gezeigtem Bild mal verschiedene Container mit border versehen!
    Ich kann keine unstimmigen Seitenabstände (links/rechts) erkennen ;)

    upload_2018-12-8_11-6-58.png
     
    #7 SEpp55, 8. Dezember 2018
  8. iMacfux

    iMacfux Well-Known Member

    Registriert seit:
    28. August 2008
    Beiträge:
    588
    Zustimmungen:
    3
    danke, ich meinte den Abstand des linken und rechten Randes zum Abstand oben und unten....Das Foto ist quadratisch, der weisse Hintergrund aber nicht...
    Screenshot_33.jpg
     
    #8 iMacfux, 8. Dezember 2018
  9. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Also jetzt glaube ich zu wissen, was herauskommen soll.....

    upload_2018-12-8_15-10-14.png

    Einmal eine quick & dirty Lösung, bei der ich nicht kontrolliere was ggf. auf anderen Seiten (Beiträgen) mit den selben Classes dann nicht mehr so aussieht wie gewünscht!
    Wenns so aussehn soll - es ist machbar ;)
    Kleine Zusammenfassung meinerseits:
    Bei den meisten Themes werden, wie auch hier, diverse Breiten für erschiedene Bereiche in irgend einem prozentuellen Verhältnis zueinander gesetzt. Ebenfalls die Ränder (margin und padding), was bewirkt, dass für verschiedene Ausgabebreiten das Verhältnis zueinander gleich bleibt, bis das z.B. mit @mediaquery geändert wird.
    Dann kommt ein Bild mit 500xpx500px und der Rand um das Bild soll nicht prozentuell zum Gesamterscheinungsbild dargestellt werden.
    Da beginnt sich die Katze in den Schwanz zu beissen.
    Mein Ansatz, ich bin kein gelernter Informatiker - mein Motto learning by doing - daher kann auch ein Denkfehler in meiner Arbeit begraben sein ;)
    Daher back to the roots! Zurück zu #1!
    Dass heißt, den Container, der das Bild beinhaltet auf absolute Größe bringen (max-width, max-height je 540px).
    Alle möglichen prozentuellen Ränder in diesem Bereich deaktiviert. Einen Rand mit 20px eingefügt und das Bild mittig gesetzt.
    Die Feinarbeit, das Ganze nur auf die "post-31" zu begrenze, habe ich mir erspart.
    Weiters habe ich nicht beachtet, ob und wie sich die deaktivierten margins und paddings wirklich deaktiviert werden müssen und inwieweit sich das woanders auswirkt.
     
    #9 SEpp55, 8. Dezember 2018
  10. iMacfux

    iMacfux Well-Known Member

    Registriert seit:
    28. August 2008
    Beiträge:
    588
    Zustimmungen:
    3
    Hallo Sepp55,

    ganz herzlichen Dank für deine ausführliche Erklärung und für das Bild. Es ist genauso, wie ich mir das vorstelle. Den Rahmen im etwas dunkleren grau finde ich auch ganz chic. Die Seitenleiste sollte aber nicht in gelb sein...

    Leider verstehe ich davon nicht viel von dem, was du geschrieben hast: ...Was ist ein Container und wo ist der? Das Foto wird ja auf der Startseite gezeigt und ich habe mal auf den Code-Editor (WP 5) umgestellt und da wird das angezeigt:

    <img class="wp-image-118 size-full aligncenter" src="http://fincanoel.com/wp-content/uploads/2018/12/Finca-Noel-700.jpg" alt="" width="500" height="500">

    Mehr steht da nicht drin. Aber wahrscheinlich ist das nicht das, was du mit Container meinst...


    Gruss Walter
     
    #10 iMacfux, 8. Dezember 2018
  11. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Grundkurs ;) Container!! - siehe Farbrahmen #7
    oder
    upload_2018-12-9_9-46-44.png

    Die Farben, die ich verwendet habe sind ja auch nur zur besseren Erkennung der verschiedenen Bereiche und können nach eigenem Geschmack gestaltet werden ;)
     
    #11 SEpp55, 9. Dezember 2018
  12. iMacfux

    iMacfux Well-Known Member

    Registriert seit:
    28. August 2008
    Beiträge:
    588
    Zustimmungen:
    3
    Danke, aber ich glaube, um das zu verstehen braucht man umfangreichere Kenntnisse, die ich nicht habe. Da lasse ich die Finger von, weil ich bestimmt was kaputt machen würde...

    Ich muss also jemanden finden, der mir dabei hilft.

    Ich wünsche dir einen schönen Sonntag.

    Walter
     
    #12 iMacfux, 9. Dezember 2018
  13. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Wenns nicht dringend ist, sehe ich mir das noch einmal an ;)
     
    #13 SEpp55, 9. Dezember 2018
  14. iMacfux

    iMacfux Well-Known Member

    Registriert seit:
    28. August 2008
    Beiträge:
    588
    Zustimmungen:
    3
    gerne.....kommt auf ein paar Tage nicht an...

    Gruss
    Walter
     
    #14 iMacfux, 9. Dezember 2018
  15. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Vorläufiges Endergebnis ;)

    Die Anweisungen aus den Zusätzlichen CSS entfernen (ggf. mit Notepad++ speichern)
    .
    Da du ein NoelChild16 hast kannst du die style.css verwenden, um deine Style Änderungen dort zu speichern!
    Funktioniert aber auch in den Zusätzlichen CSS ;) und dort geht es online und ggf schneller.

    Wohin auch immer - nachfolgender Versuch das Quadrat ins Rechteck zu zu bekommen ;)
    Und wie auch immer, die Ränder auf allen 4 Seiten um das Bild müssen in irgend einer Ebene Rechteckig werden bei einer Landescape Ansicht.

    Aaaaah, wenn das Bild nun anstatt 500pxx500px um den Rahmen (20px) weniger px hat, kannst du das Bild um die gewünschte Rahmenstärke vergrößern.

    Wenn wo nachzubessern ist - melden
     
    #15 SEpp55, 9. Dezember 2018
  16. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Bei mir sieht es so aus:
    upload_2018-12-9_18-18-25.png

    Der Code wollte nicht gleich mit

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #16 SEpp55, 9. Dezember 2018
  17. iMacfux

    iMacfux Well-Known Member

    Registriert seit:
    28. August 2008
    Beiträge:
    588
    Zustimmungen:
    3
    @SEpp55 = das ist doch ein Super-Ergebnis. Ganz toll gemacht. So habe ich mir das vorgestellt.

    Ich habe die Farben etwas heller gemacht, weil das meinen Freunden so gefällt. Ganz herzlichen Dank.

    Noch eine Frage:
    bekommt man diese dünne Linie noch weg?

    Screenshot_8.png

    Falls du zufällig beim Bearbeiten gesehen hast, dass man das eine oder andere auf der Seite besser machen könnte, dann bin ich für Hinweise immer dankbar.

    Gruss
    Walter
     
    #17 iMacfux, 9. Dezember 2018
  18. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.142
    Zustimmungen:
    591
    Eine Altlast!

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #18 SEpp55, 10. Dezember 2018
  19. iMacfux

    iMacfux Well-Known Member

    Registriert seit:
    28. August 2008
    Beiträge:
    588
    Zustimmungen:
    3
    Du bist einfach nur klasse....Tausend Dank für deine Hilfe.

    Ich wünsche einen schönen Start in die Woche.


    Walter
     
    #19 iMacfux, 10. Dezember 2018
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden