Customize Skeleton Application Layout

Parent post: Online Book Catalog Application Tutorial

I installed a clean Zend Framework Skeleton Application as the Online Book Catalog project's start point.

As the first step, basic customization will be changing the logo image and text, page title and finally copyright notice repeated in every page in the application. These are simply located in the layout.phtml file that skeleton application provides as the default layout template for the views.


<?= $this->doctype() ?>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <?= $this->headTitle('Online Book Catalog')->setSeparator(' - ')->setAutoEscape(false) ?>

        <?= $this->headMeta()
            ->appendName('viewport', 'width=device-width, initial-scale=1.0')
            ->appendHttpEquiv('X-UA-Compatible', 'IE=edge')
        ?>

        <!-- Le styles -->
        <?= $this->headLink(['rel' => 'shortcut icon', 
                'type' => 'image/vnd.microsoft.icon', 
                'href' => $this->basePath() . '/img/favicon.ico'])
            ->prependStylesheet($this->basePath('css/style.css'))
            ->prependStylesheet($this->basePath('css/bootstrap-theme.min.css'))
            ->prependStylesheet($this->basePath('css/bootstrap.min.css'))
        ?>

        <!-- Scripts -->
        <?= $this->headScript()
            ->prependFile($this->basePath('js/bootstrap.min.js'))
            ->prependFile($this->basePath('js/jquery-3.1.0.min.js'))
        ?>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="<?= $this->url('home') ?>">
                        <img src="<?= $this->basePath('img/obc-logo.svg') ?>" height="28" alt="Online Book Catalog"/> Online Book Catalog
                    </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="<?= $this->url('home') ?>">Home</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <?= $this->content ?>
            <hr>
            <footer>
                <p>&copy; 2016 by Online Book Catalog. All rights reserved.</p>
            </footer>
        </div>
        <?= $this->inlineScript() ?>
    </body>
</html>

I changed the browser page title first.


<?= $this->headTitle('Online Book Catalog')->setSeparator(' - ')->setAutoEscape(false) ?>

Then I changed the logo - both image and title.


<a class="navbar-brand" href="<?= $this->url('home') ?>">
    <img src="<?= $this->basePath('img/obc-logo.svg') ?>" height="28" alt="Online Book Catalog"/> Online Book Catalog
</a>

Also changed navigation bar style by setting the navbar-default Bootstrap class.


<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

Finally, I changed the footer for the copyright notice.


<footer>
    <p>&copy; 2016 by Online Book Catalog. All rights reserved.</p>
</footer>

And also a quick change in skeleton application's entry page, index.phtml.


<div class="jumbotron">
    <h2>Welcome to <span class="zf-green">Online Book Catalog</span></h2>
    <p>
        Thanks to <a href="https://github.com/zendframework/ZendSkeletonApplication" target="_blank">ZF Skeleton Application</a>,
        serving as a simple starting point for me to begin building my application on ZF.
    </p>
</div>

Fig.1 shows how the Online Book Catalog application's index page looks.

Customized look of the Online Book Catalog. — Customized look of the Online Book Catalog