ilch Forum » Ilch CMS 2.X » Design und Templates » Einfügen von Boxen

Geschlossen
  1. #1
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Da die nachfrage von "Einfügen von Boxen" groß ist, hab ich ein kleines Tut erstellet.

    Als erstes und das ist die erste Grundregel, immer ein Backup der Datei erstellen die bearbeitet werden soll.

    1. erstellen wir das Grundgerüßt für unsere Boxen, dabei ist es wichtig wo man diese plazieren möchte, in diesem Tut erstellen ich sie zwischen den Header und Main bereich.

    Als erstes müssen wir dafür sorgen das sich die Mutterbox an das Jetzige Layout anpasst und erstellen die class Container, gaming und Row.

    <div class="container">
     <div class="gaming">
      <div class="row">
      </div>
     </div>
    </div>


    2. Da bei Ilch 2.0 Bootstrap verwendet wurde, ist der nächste Schritt recht einfach. Ich könnte euch erklären was Boostrap ist aber ich denke jeder kann lesen und habe daher einen Link getbootstrap.com/docs/4.0/layout/grid/ .

    Da wir 2 Boxen erstellen erweitern wir den code mit der class col-lg-6

    <div class="container">
     <div class="gaming">
      <div class="row">
       <div class="col-lg-6">
       </div>
       <div class="col-lg-6">
       </div>
      </div>
     </div>
    </div>


    Der Vorteil bei col-lg-6 ist, da sich die boxen in der mobilen ansicht untereinander angezeigt werden.

    Jetzt haben wir die Boxen erstellt und füllen nun den Inhalt mit dem Befehl

    <?=$this->getBox('article', 'article'); ?>
    für Artikel und
    <?=$this->getBox('forum', 'forum'); ?>
    für das Forum

    <div class="container">
     <div class="gaming">
      <div class="row">
       <div class="col-lg-6">
        <?=$this->getBox('article', 'article'); ?>
       </div>
       <div class="col-lg-6">
       <?=$this->getBox('forum', 'forum'); ?>
       </div>
      </div>
     </div>
    </div>


    Nun werden uns die Last-Artikel und Last-Forum angezeigt.



    Jetzt müssen wir die Boxen stylen in dem wir diese an das Layout anpassen und erstellen uns weitere class.
    Dazu fügen wir die class panel panel-gaming und class panel-heading hinzu. class panel und panel-gaming sorgt dafür das der hindergrund und abstände zur Mutterbox zu den anderen Boxen im main Bereich anpassen und die class panel-heading ist für die überschrifft.

    <div class="container">
           <div class="gaming">
              <div class="row">
                <div class="col-lg-6">
                  <div class="panel panel-gaming">
                    <div class="panel-heading">
                      Artikel
                    </div>
                    <?=$this->getBox('article', 'article'); ?>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="panel panel-gaming">
                    <div class="panel-heading">
                      Forum
                    </div>
                    <?=$this->getBox('forum', 'forum'); ?>
                  </div>
                </div>
              </div>
             </div>
            </div>


    Fertig, jetzt haben wir Boxen eingefühgt die sich auch an das Layout anpassen





    Slipi
    1 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    Top das du Tutorials machst Jetzt kommt ein ABER wie du siehst ist der content der boxen jetzt ganz links sinnvoll wäre es gewesen die ausgabe nochmal in ein div zu packen und dann p-3 oder p-2 zu verwenden
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    1 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Stimmt, hab ich erst jetzt gesehen.
    Es gibt viele wege um ans Ziel zu kommen.

    Ich stehe auf der Leitung wegen p-2 oder p-3 (werde mir an denn Kopf fassen zwinker ).

    Habe die php ausgabe in einem div gepackt und eine class hinzugefügt.

    <div class="container">
              <div class="gaming">
                <div class="row">
                  <div class="col-lg-6">
                    <div class="panel panel-gaming">
                      <div class="panel-heading">
                        Artikel
                      </div>
                      <div class="box"><?=$this->getBox('article', 'article'); ?></div>
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="panel panel-gaming">
                      <div class="panel-heading">
                        Forum
                      </div>
                      <div class="box"><?=$this->getBox('forum', 'forum'); ?></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>


    und in der css einen abstand hinzugefühgt

    .col-lg-6 .box {padding:10px;}






    Zuletzt modifiziert von Slipi am 30.01.2019 - 16:52:47
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    p-1, p-2 und p-3 sind vorgefertigte padding klassen von bootstrap, warum das rad neu erfinden? Das Problem bei deiner Variante ist es kann zu Fehlern führen wie z.b

    <div class="test1">
        <div class="row">
            <div class="col-lg-6">
                <div class="gallery-container">
                    <div class="img-box">
                        <img src="test.jpg"/>
                        <div class="box"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    Was ist wenn jemand zufälligerweise "box" weiter im inneren aufruft? gerade weil col-lg-6 vorher definiert wurde werde automatisch die werte von box abgerufen. Die klasse box muss nicht zwingen direkt danach aufgerufen werden, es kann auch weiter hinten passieren, ich würde das col system nur anfassen um es zu erweitern auf 24/36/48 cols, ansonsten rate ich davon ab und würd lieber ganz neue klassen schaffen.


    Zuletzt modifiziert von Nex4T am 30.01.2019 - 19:26:22
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Stimmt, da ich das p-2 usw nicht gekannt habe, erstellte ich die class Box mit der ich nur die Abstände definiere.

    Nun gut, hoffe das ich es für andere verständlich erklärt habe (tut), ansonsten Fragen oder besser selbst zu einer Lösung kommen.

    Slipi
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    Die klasse box zu erstellen war auch an sich gar kein fehler, nur das ganze ins col system anzuhängen ist natürlich dann immer etwas gewagt^^
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    1 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    shouta1974 Mitglied
    Registriert seit
    11.09.2018
    Beiträge
    3
    Beitragswertungen
    0 Beitragspunkte
    Ist es eigentlich nicht viel einfacher ein neues Menü einzubinden? Man bearbeitet doch dann nur einmal die index.php und der Rest geht über die Menüsteuerung im Adminbereich.
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    ZitatZitat geschrieben von shouta1974
    Ist es eigentlich nicht viel einfacher ein neues Menü einzubinden? Man bearbeitet doch dann nur einmal die index.php und der Rest geht über die Menüsteuerung im Adminbereich.


    Wenn du den Inhalt immer änderst wäre es einfacher aber dann bräuchte man die boxen nicht, dafür ist der Main bereich.

    Noch dazu müsstest du für jede BOX ein eigenes Menü erstellen, irgendwann hast du 5 oder 6 Menüs im Admincenter was nicht Sinn macht, löscht du z.b. menü3 (aus versehen) ist die BOX leer. Arbeitsaufwand wäre die gleiche aber Sicherer ist die TUT Variante.

    Wenn man sich mit HTML/CSS befasst reicht auch nur ein menü für 3-4 Boxen dazu müsste man die HTML ein wenig verändern und die CSS.

    Es gibt sicher mehrere Vor und Nachteile, aber ich hab es lieber Organisierter und ich denke ander auch.

    Slipi
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Shibiyi Mitglied
    Registriert seit
    09.02.2018
    Beiträge
    52
    Beitragswertungen
    2 Beitragspunkte
    gesperrtes Bild



    Habe es mal ausprobiert aber, irgendwie ist die linke box kleiner
    Und es sieht auch unschön aus, besser wäre es wenn man dort das selbe wie in der Forenbox mit den read bildern machen könnte.

    dazu fehlen mir aber die kenntnisse ^^

    ansonsten hat alles funktioniert.

    hab die css klassen einfach kopiert und eine zahl hinten dran gehängt damit es ehm einzelnd läuft und mit den anderen boxen nichts zu tun hat, aber auch da ist glaub ein fehler in meinem Denken lachen

    vielleicht habt ihr ja eine Lösung dafür glücklich


    das hab ich in der css gemacht

    .col-lg-6 .box {padding:10px;
    }
    .panel-gaming2 > .panel-heading2 {
        color: #d00000;
        background-color: #4295C900;
        background-image: url("img");   <<< hier würde ich natürlich noch ein bild machen oder weglassen.
        background-repeat: no-repeat;
        margin-top: 0;
        line-height: 20px;
        margin-bottom: 0;
        padding: 10px;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        text-rendering: optimizelegibility;
        border-top-right-radius: 0 !important;
        border-top-left-radius: 0 !important;
    }
    .gaming2 {
        background-color: #F1F1F100;
        overflow: hidden;
    }
    .panel2 {
        margin-bottom: 10px;
        background-color: #000c;
        border: 0px solid transparent;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
    }



    Zuletzt modifiziert von Lord|Schirmer am 15.03.2019 - 09:04:35
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Warum erstellst du eine zusätzliche Gaming und panel class ? (Gaming2 .panel 2).
    Wegen anderen Background reicht es wenn du in der 2 Box im div Container der class panel zb. id="box2" oder class="box2" einfügst und in der CSS den Background definierst,
    Dadurch ersparrst du dir Codes.

    Die Boxen werden nie die gleiche Höhe haben, da die Modul-Boxen unterschiedliche Darstellung der Ausgabe haben, daher gebe die Boxen eine fixe Höhe zb. .box mit height 350px (Wert so anpassen bis es dir passt).

    Slipi
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    Shibiyi Mitglied
    Registriert seit
    09.02.2018
    Beiträge
    52
    Beitragswertungen
    2 Beitragspunkte
    Ich habe das neu gemacht, da das Bild jetzt nur für linke und rechte boxen ist, also würde das nicht gut aussehen daher, neue class dachte ich und dann das Bild noch machen dafür

    wie genau ist das gemeint ?

    Wegen anderen Background reicht es wenn du in der 2 Box im div Container der class panel zb. id="box2" oder class="box2" einfügst

    wo füge ich das bei deinem Code ein ?
    und was kommt in die css

    .box
    height: 350px; ?
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Ich sehe html und css ist für dich NEU-LAND.

    lt. deines Screen haben deine Boxen unterschiedliche images backgrounds (da von dir kein Link anbei ist, interpretiere ich es so).

    Du hast ja den oberen Code von meinem Beitrag in die index.php eingebunden, füge in beiden

    <div class="col-lg-6">


    die .box hinzu


    <div class="col-lg-6" box>


    und in der style.css füge dies ein

    .box .panel-gaming {height:200px;}


    somiet haben beide boxen die gleiche höhe und man braucht nicht mit padding oder margin tricksen, der Wert 200px dient nur als Beispiel daher passe den Wert für dich an.

    Tipp am rande, bitte gib das nächste mal einen Link zur HP an damit sich hier jeder leichter tut was gemeint ist.

    Slipi

    ps: 1000 Wege führen nach Rom, daher ist mein Beispiel eine Lösung von vielen.
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    Shibiyi Mitglied
    Registriert seit
    09.02.2018
    Beiträge
    52
    Beitragswertungen
    2 Beitragspunkte
    Da muss ich dich enttäuschen das im hintergrund ist ein BG und die boxen sind Transparent X)
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    M.vittel Mitglied
    Registriert seit
    16.11.2018
    Beiträge
    328
    Beitragswertungen
    24 Beitragspunkte
    Dann füge doch mal einen Link zur Website ein, wie Slipi bereits sagt, so kann man dir dann auch besser helfen.
    RealLife ... das ist doch das Game mit der geilen Grafik und der scheiss Story
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    ZitatZitat geschrieben von M.vittel
    Dann füge doch mal einen Link zur Website ein, wie Slipi bereits sagt, so kann man dir dann auch besser helfen.

    Die seite ist geheim lachenlachenlachen
    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    ZitatZitat geschrieben von Shibiyi
    Da muss ich dich enttäuschen das im hintergrund ist ein BG und die boxen sind Transparent X)


    Schwer zu sehen wenn kein Link dabei ist.

    Hat dies mit der Höhe funktioniert?
    0 Mitglieder finden den Beitrag gut.
  17. #17
    User Pic
    Shibiyi Mitglied
    Registriert seit
    09.02.2018
    Beiträge
    52
    Beitragswertungen
    2 Beitragspunkte
    Habe alles lösen können.

    Vielen Dank
    0 Mitglieder finden den Beitrag gut.
  18. #18
    User Pic
    M.vittel Mitglied
    Registriert seit
    16.11.2018
    Beiträge
    328
    Beitragswertungen
    24 Beitragspunkte
    Wenn du eine Lösung hast, dann teile deine Lösung mit für eventuelle Nachfolger die eine Solche frage wieder haben.

    (*Hust* gerne einen Link zu der Website mit eintragen)
    RealLife ... das ist doch das Game mit der geilen Grafik und der scheiss Story
    0 Mitglieder finden den Beitrag gut.
  19. #19
    User Pic
    Shibiyi Mitglied
    Registriert seit
    09.02.2018
    Beiträge
    52
    Beitragswertungen
    2 Beitragspunkte
    gesperrtes Bild



    Hab es nun einfach mit einem Unterstrich versehen, denn ohne konnte man es kaum auseinanderhalten.

    wie man sieht ist es nun zu 99% gleich.

    Es sei denn man geht mit einem Lineal dahin dann sind es vielleicht 0,1mm



    aber es geht auch mit diesem Code

    .col-lg-6 .box {
    padding:10px;
    height: 200px; kann natürlich abweichen
    }


    Zuletzt modifiziert von Shibiyi am 17.03.2019 - 07:29:53
    0 Mitglieder finden den Beitrag gut.
  20. #20
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    ZitatZitat geschrieben von M.vittel
    (*Hust* gerne einen Link zu der Website mit eintragen)

    externer LinkBier
    0 Mitglieder finden den Beitrag gut.
  21. #21
    User Pic
    Shibiyi Mitglied
    Registriert seit
    09.02.2018
    Beiträge
    52
    Beitragswertungen
    2 Beitragspunkte
    Ich hoffe du fühlst dich jetzt gut damit "Wiesenflieger"

    Wenn hier jemand seine Homepage nicht postet, haben also Menschen wie du das Recht dies zu tun ?

    Somit werde ich natürlich hier keine Fragen mehr posten, und mich an einer anderen Seite mit einem anderen CMS machen.


    Vielen Dank, das Menschen wie du einem die Entscheidungen leichter machen.

    Lg
    0 Mitglieder finden den Beitrag gut.
  22. #22
    User Pic
    M.vittel Mitglied
    Registriert seit
    16.11.2018
    Beiträge
    328
    Beitragswertungen
    24 Beitragspunkte
    Hmmmm… Kopf schüttel... also wie kann man sich so anstellen eine HP zu zeigen. Möchtest Hilfe, aber so tun als ob es sich bei dir um eine NSA Page handelt. Dann mal ein Fröhliches Löschen deiner HP und viel Spaß mit einem anderen Script. Vergiss nicht, stelle da dann mal besser keine Fragen.
    RealLife ... das ist doch das Game mit der geilen Grafik und der scheiss Story
    0 Mitglieder finden den Beitrag gut.
  23. #23
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    ZitatZitat geschrieben von Shibiyi
    Ich hoffe du fühlst dich jetzt gut damit "Wiesenflieger"

    Eigentlich fühle ich mich wie jeden Tag

    ZitatZitat geschrieben von Shibiyi
    Wenn hier jemand seine Homepage nicht postet, haben also Menschen wie du das Recht dies zu tun ?

    Nein aber die Möglichkeit, habe mir nichts schlimmes dabei gedacht.

    ZitatZitat geschrieben von Shibiyi
    Somit werde ich natürlich hier keine Fragen mehr posten, und mich an einer anderen Seite mit einem anderen CMS machen.


    Vielen Dank, das Menschen wie du einem die Entscheidungen leichter machen.

    Lg

    Schade weil deine seite sieht doch gut aus, verstehe nicht wiso du sie hier nicht verlinken möchtest. Du erwartest hier Hilfe bist aber nicht bereit etwas Preis zu geben, das finde ich aus meiner sicht nicht ok.
    0 Mitglieder finden den Beitrag gut.
  24. #24
    User Pic
    Hansa Mitglied
    Registriert seit
    07.05.2010
    Beiträge
    61
    Beitragswertungen
    2 Beitragspunkte
    Hallo,

    ich habe es nach dieser Anleitung getan, nur leider passt es irgendwie ncht...

    siehe
    www.codev3.de

    Außerdem hätte ich gerne nur 3 Titel. Wie geht das?

    Kann mir wer helfen???

    Danke


    Zuletzt modifiziert von Hansa am 22.03.2019 - 20:07:30
    0 Mitglieder finden den Beitrag gut.
  25. #25
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Für 3 Boxen verwende class="col-lg-4" .
    Bootstrap ist ein grid System, das bedeutet das die volle Länge eines Layout aus 12 grid besteht. Bei 2 Boxen einfach 12÷2=6, bei 3 Boxen 12÷3=4 daher col-lg-4.

    Wegen der Ausgabe, kann keinen Fehler erkennen (Handy, pc ab 22 Uhr on).


    Ediet, falsch gelesen.


    Slipi


    Zuletzt modifiziert von Slipi am 22.03.2019 - 21:56:54
    0 Mitglieder finden den Beitrag gut.
  26. #26
    User Pic
    wiesenflieger Mitglied
    Registriert seit
    03.12.2017
    Beiträge
    200
    Beitragswertungen
    12 Beitragspunkte
    ZitatZitat geschrieben von Hansa


    Außerdem hätte ich gerne nur 3 Titel. Wie geht das?

    Kann mir wer helfen???

    Danke

    Das wird in der jeweiligen Boxeinstellung im Admincenter gemacht
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten