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
).
Zitat geschrieben von shouta1974
