Back to [[step_4_-_create_a_ministries_view |previous page]]

Edit ''controller/SiteController.php''
<code php>
use app\models\MainSearch;
use app\models\MinistriesSearch;
use app\models\TopboxSearch;
use app\models\UpcomingSearch;
</code>
<code php>
    public function actionIndex()
    {
        $searchModel  = new TopboxSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
        $topbox = array($dataProvider->models[0]);
        $searchModel  = new MinistriesSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
        $ministries = array($dataProvider->models);
        $searchModel  = new UpcomingSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
        $upcoming = array($dataProvider->models);
        $searchModel = new MainSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
            'topbox' => $topbox,
            'ministries' => $ministries,
            'upcoming' => $upcoming,
        ]);
    }
</code>

TopBox and Main only use one row in their respective databases whereas Ministries and Upcoming use multiple rows, hence the differences in the data search.


In ''config/web.php'' in the ''config'' section, change
<code php>
    'id' => 'WMCK',
    'name' => 'WMCK',
</code>
In ''views/site/index.php'' this will set the the title vars\\
<code php>
$this->title = $dataProvider->models[0]['abbr'];
</code>

plus in the same file under ''jumbotron''
<code html>
        <h1><span class="hidden-xs hidden-sm"><img src="images/trac.png"></span> <?= $dataProvider->models[0]['bannertitle']; ?> </h1>
        <p class="dimmed"><small><?= $dataProvider->models[0]['vision']; ?></small></p>
        <span class="text-muted"><i>Email us at </i><b><?= $dataProvider->models[0]['email']; ?></b></span>
</code>

The title will have an image ''trac.png'' in the ''web/images'' folder.\\

Lets choose a nice Google font like ''Anton'' for the main Wesley title.\\

In ''view/layout/main.php'' we put in the ''head section''
<code html>
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
</code>
and in ''web/css/site.css''
<code css>
.jumbotron h1 { font-family: 'Anton', sans-serif; }
.dimmed { color:#888; }

.topbox {
    padding: 10px 16px;
    padding-top: 10px;
    padding-right: 16px;
    padding-bottom: 10px;
    padding-left: 16px;
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
    background-color:#ddd;
    border-color: #aaa;
    -webkit-box-shadow: 2px 2px #aaa;
    box-shadow: 2px 2px #aaa;
}
.ministries {
        font-size: 18px;
        background-color: #eee;
        border-radius: 6px 6px 0 0;
        font-weight: bold;
}

.img-banner {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 1px;
}

.highlight {
    font-size: 1.7em;
    color: #DF9346;
    text-shadow: 1px 1px 2px #666;
    /* Tetrdic colors to this is #39FF33 #FF9333 #339FFF #F933FF */
    /* Tones are #FF9333 #EF963D #DF9346 #CF8F50 #BF8C59 #AF8963 #9F866C #8F8376 */
}

.slogan {
    background: linear-gradient(to right, lightgray , white);
    color: #555;
    font-family: Verdana, Geneva, cursive, sans-serif;
}

.infoheader {
    font-weight: bold;
    font-size: 120%;
    line-height: 2em;
    margin: 1.5em 0 0 0;
}

ul.none {
    list-style-type: none;
    margin-top: 10px;
}

.mono {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 1.1em;
}

.eventhighlight {
    background: #f2f4f4;
    padding-top :3px;
    padding-bottom: 3px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    line-height: 2em;
}
</code>
and under ''jumbotron''
<code css>
    background: linear-gradient(#ddd, #fff, #ddd);
</code>


Below which the vision statement could be put
<code html>
<p class="dimmed"><small><?= $dataProvider->models[0]['vision']; ?></small></p>

<span class="text-muted"><i>Email us at </i><b><?= $dataProvider->models[0]['email']; ?></b></span>
</code>


Remove the button

Now put in the three **top boxes** in to the main body div
<code html>
    <div class="body-content">

        <div class="row">
            <div class="col-sm-4">
                <div class="topbox"><?= $topbox[0]['box1title'] ?></div>

                <p><?= $topbox[0]['box1content'] ?></p>

            </div>
            <div class="col-sm-4">
                <div class="topbox"><?= $topbox[0]['box2title'] ?></div>

                <p><?= $topbox[0]['box2content'] ?></p>
            </div>
            <div class="col-sm-4">
                <div class="topbox"><?= $topbox[0]['box3title'] ?></div>

                <p><?= $topbox[0]['box3content'] ?></p>
            </div>
        </div>
        <hr />
</code>

\\

I put this above the last div in development to show the vars from table ''Main''. Remove in final
<code php>
    <?php var_dump($dataProvider->models); echo '<br />'; ?>
</code>


Go to the [[step_6_-_change_the_main_index_part_2|next step]]

Back to [[yii|Yii Main Index]]