Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Ergebnis 1 bis 9 von 9
Like Tree2Likes
  • 1 Post By SirEctor
  • 1 Post By SEpp55

Thema: CSS Abstimmungen in Wordpress 2017 :: Verringern von Spalen u. Abstimmen des Centers

  1. #1
    lin
    lin ist offline
    PostRank: 6
    Registriert seit
    01.12.2013
    Beiträge
    659

    CSS Abstimmungen in Wordpress 2017 :: Verringern von Spalen u. Abstimmen des Centers

    hallo und guten Abend community,


    habe in einer WP 4.9.1 ein WP 2017er Theme aktiviert: alles ist noch komplett im BETA-BETA--Mode:
    Was aber auffällt ist dass die Seitenbreite (und der Content in Center) in WP 2017 Theme vergrößert werden sollte;

    Diesen untenstehenden Code hab ich in das Plugin simple

    habe schon mehrfahres ausprobiert:

    das Premium ist - ich muss den Abstand zwischen Center-Bereich u. dem (linken) Seitenblock reduzieren:

    (siehe screenshot - dort A genannt)

    b. Der Spalt des rechten Seitenblocks und dem rechten Rand der Seite überhaupt. Diesen Spalt (diese Distanz würde ich gerne reduzieren - B genannt)

    Das allerbeste wäre halt schon - wenn ich z.B.

    – die Weite des Spalts A in in % Werten kontrollieren u. abstimmen koennte.
    – die Weite des Spalts B in in % Werten kontrollieren u. abstimmen koennte.

    – c. Die Weite / Breite des Centerblocks in % Werten abstimmen kann.


    theme_2017_image.jpg


    Vgl. das eingefügte Bild - hier sind die wichtigen Daten / Bereiche alle benannt.


    Freue mich von Euch zu hoeren.

    vg lin

    https://www.mediafire.com/convkey/e3...7fb7rcgv4g.jpg


    http://www.mediafire.com/view/62jnif...2017_image.jpg
    Lin ;) :: super toolkits http://wpgear.org/


  2. #2
    PostRank: 10 Avatar von SirEctor
    Registriert seit
    28.10.2008
    Beiträge
    9.676
    Du bist doch schon länger hier im Forum unterwegs, oder? Sollen wir jetzt raten, was du gemacht hast, oder sollen wir uns das 2017er extra installieren?

    Schau dir einfach mal die Classes .has-sidebar:not(.error404) #primary und .has-sidebar #secondary an.
    SEpp55 likes this.
    Das Geheimnis des Könnens liegt im Wollen!

  3. #3
    PostRank: 5
    Registriert seit
    03.02.2016
    Beiträge
    365
    zusätzlich, oder davor wird die nutzbare Breite für Content und Sidebar so definiert:

    .wrap {
    max-width: 1000px;
    padding-left: 3em;
    padding-right: 3em;
    }

    Wenn du die max-width z.B. auf 100% änderst, hast du auf Maximalbreite umgestellt.
    Auch die pedding-Werte können ggf noch verringert werden - alles nach deinem Geschmack
    lin likes this.
    nothing is so easy as it looks

  4. #4
    lin
    lin ist offline
    PostRank: 6
    Registriert seit
    01.12.2013
    Beiträge
    659
    guten Abend SirEctor hallo sEpp55,


    vorweg vielen Dank für Eure Antwort.



    es ist die Seite: http://www.f-s-j.de/ - und diese befindet sich im absoluten BETA - BETA-Stadium


    Klar - das ist ein Fall bei dem man im Grunde auf jeden Fall weiterkommen muss. Denn wenn man - vor allen Dingen in der neuen WP 4.9.1 die Moeglichkeiten sieht, die die Abstimmung relativ leicht probeweise zu verändern. Habe mittlerweile schon mehrere Code-Versuche ausprobiert.

    Aber die Tücke dabei ist - dass die verschiedenen Bereich und Aufgaben gewissermaßen gegenläufig sich verhalten;

    M.a.W: die Anforderungen sind irgendwie gegenläufig

    - will ich den Centerbereich verbreitern dann geht das - aber ab einem bestimmten Punkt der Centerweite - verschwindet der rechte Seitenblock - dieser rutscht dann an den Fußbereich der Seite;

    - was dauerhaft schwierig ist - ist die Anordnung des rechten Seitenblocks solchermaßen auf der rechten Seite dass er dort ganz am rechten Rand ist.

    Darüber hinaus - die Abstände zwischen dem Centerbereich u. dem rechten Seitenblock - bzw. der Rand zwischen dem rechten Seitenblock u. dem generellen Rand der Seite - dieser Rand ist nicht zu reduzieren...: Egal was ich hier mache.... :


    ich habe diese Code-Stücke ausprobiert: und damit sehr viel ausprobiert:



    Code:
    .wrap {
    max-width: 1000px;
    padding-left: 3em;
    padding-right: 3em;
    }

    .... und auch dieser:

    Code:
    .pdb-list {
        max-width: none;
        padding: 0;
    }
    
    
    .home .panel-content .wrap {
        max-width: 88%;
    }
    und auch diesen hier....

    Code:
    .wrap { max-width: 1366px; }
    
    /*For Content*/
    .has-sidebar:not(.error404) #primary {
    width: 60%
    }
    
    /*For Sidebar*/
    .has-sidebar #secondary {
    width: 30%
    }
    
    /*Responsive*/
    @media(max-width:768px) {
    /*For Content*/
    .has-sidebar:not(.error404) #primary {
    width: 100%
    }
    
    /*For Sidebar*/
    .has-sidebar #secondary {
    width: 100%
    }
    }
    und ja - auch damit habe ich es probiert...


    Code:
    /*
    You can add your own CSS here.
    Click the help icon above to learn more.
    */
    div#primary {
    width: 70% !important;
    }
    
    To change right side sidebar width
    
    #secondary {
    width: 20% !important;
    }
    
    or
    
    to change whole site width
    
    .wrap {
    max-width: 100% !important;
    }

    - Werde jetzt mal noch einiges ausprobieren - ggf muss ich noch stärker auf die Zwischenräume sehen - und an diesen arbeiten.
    Geändert von lin (03.12.2017 um 22:13 Uhr)
    Lin ;) :: super toolkits http://wpgear.org/

  5. #5
    lin
    lin ist offline
    PostRank: 6
    Registriert seit
    01.12.2013
    Beiträge
    659
    hallo und guten Abend,


    hab nochmals weitere Versuche gestartet u. einiges ausprobiert;: Mit dem untenstehenden Code komme ich weiter.


    positive Aspekte;

    - Der rechte Seitenbblock lässt sich in der Weite verändern
    - er - der rechte Seitenblock - ist am rechten Rand ausgerichtet; Und das ist mir sehr sehr wichtig.
    - ich kann die zentralen Aspekte der Seite relativ gut kontrollieren - über die unten gezeigten Werte...



    Code:
    */
    
    .wrap { max-width: 1366px; }
    
    /*For Content*/
    .has-sidebar:not(.error404) #primary {
    width: 60%
    }
    
    /*For Sidebar*/
    .has-sidebar #secondary {
    width: 17%
    }
    
    /*Responsive*/
    @media(max-width:768px) {
    /*For Content*/
    .has-sidebar:not(.error404) #primary {
    width: 100%
    }
    
    /*For Sidebar*/
    .has-sidebar #secondary {
    width: 90%
    }
    }
    - also ich bin erstmal weitergekommen. SirEctor u. sEpp vielen Dank für Eure Beiträge

    vg lin
    Lin ;) :: super toolkits http://wpgear.org/

  6. #6
    PostRank: 5
    Registriert seit
    03.02.2016
    Beiträge
    365
    Der Contentbereich - primary - ist mit float: left an den linken Rand gebunden und die rechte Sidebar - secondary - ist mit float: right an den rechten Rand geschoben. Dazwischen ist noch Niemandsland

    Code:
    Darüber hinaus - die Abstände zwischen dem Centerbereich u. dem rechten  Seitenblock  - bzw. der Rand zwischen dem rechten Seitenblock u. dem  generellen Rand der Seite - dieser Rand ist nicht zu reduzieren...: Egal  was ich hier mache....
    .....
    Code:
    - Werde  jetzt mal noch einiges ausprobieren - ggf muss ich noch stärker auf die Zwischenräume sehen - und an diesen arbeiten.
    Du kannst als nächsten Schritt mit den Breiten für "primary" und "secondary" spielen. Zusammen kann max. 100% herauskommen. Das klappt in diesem Fall, da die beiden Elemente kein margin (Außenrand oder -abstand) haben.
    Damit kannst du den Abstand zwischen den beiden Bereichen verringern, bis zum direkten Nebeneinander.
    nothing is so easy as it looks

  7. #7
    lin
    lin ist offline
    PostRank: 6
    Registriert seit
    01.12.2013
    Beiträge
    659
    Hallo sEpp55

    vielen Dank für die Tipps u. Hinweise - Sehr gut; die Idee mit float: left u. float: right sind sehr wertvoll und treffen im Grunde genau das was ich noch brauche.

    Habe es ausprobiert:

    Code:
    */
    
    .div#primary {
    width: 70% !important;
     
    
    float: left}
    
    
    
    To change right side sidebar width
    
    
    
    #secondary {
    width: 20% !important;
     float: right}
    
    
    
    to change whole site width
    
    
    
    .wrap {
    max-width: 98% !important;
    }
    Leider ist es irgendwie ohne Effekt;


    Auch finde ich die Idee mit margin sehr gut. Damit könnte ich den Abstand zwischen Content "primary* u. Content *sidebar* noch abstimmen.

    Alles in Allem wär das eine sehr sehr gute und hochgradig abstimmbare Sache, wenn ich die beiden Elemente

    - float (left & right )
    - margin

    noch wirksam in den Code bringen würde. Ich probiere später am Tag noch einiges aus. Bis dato klappt das mit dem Float jedenfalls noch nicht.

    VG lin
    Lin ;) :: super toolkits http://wpgear.org/

  8. #8
    PostRank: 5
    Registriert seit
    03.02.2016
    Beiträge
    365
    Hallo lin,

    das float ist schon enthalten, das brauchst du nicht nochmals
    Deswegen ist ja die rechte Sidebar am rechten Rand!

    Zu margin (aussen -) und padding (innen Abstand) LINK

    Mit folgenden Änderungen klappt das in meiner Testumgebung mit Twenty Seventeen wunderbar.

    Code:
    /* nutzbare Breite */
    .wrap {
        max-width: 98%;
    }
    
    /* rechte Sidebar */
    .has-sidebar #secondary {
        float: right;
        width: 25%;
    }
    
    /* Content */
    .has-sidebar:not(.error404) #primary {
        width: 70%;
    }
    nothing is so easy as it looks

  9. #9
    lin
    lin ist offline
    PostRank: 6
    Registriert seit
    01.12.2013
    Beiträge
    659
    Hallo sEpp55,

    volltreffer - das ist es. Jetzt ist das floating auch ein echtes floating.

    Bei meinem heute Morgen geposteten Code war das imho gar nicht so - nicht richtig.

    Vielen herzlichen Dank!

    Viele Grüße
    Jetzt ist die Aufgabe geloest

    hoechstens - koennte ich ggf. noch ergänzen sozusagen - für die Zukunft vorbereiten (falls man das je mal braucht):


    • einen optionalen linken Seitenblock (rein probehalber - sozusagen als Platzhalter - den man prozentemaessig vorerst auf Null hält) noch
    • einem eingefügten Marigin - damit kann man wie du sagst die Abstände (paddings) die ggf noch auftauchen - also die Zwischenräume noch konfigurieren.



    Aber schon jetzt ist das mega super!!!
    Habe an dem Thema schon eine Weile rumprobiert - u. bin nicht sooo sehr gut weitergekommen.

    Vielen vielen lieben Dank!!

    Dir einen schoenen Abend...

    Lin
    Lin ;) :: super toolkits http://wpgear.org/

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •