Changing the appearance on the website

We’ll start from an example to explain how it works.

On the Novius OS website, we personalised how the blog posts are displayed. Here’s how it looks like:

Default design of the ‘Blog’ application :

Default list of the 'Blog' application

Personalised design on the Novius OS.org website (our goal):

Personalised list of the 'Blog' application

Changing the view

1st solution: extending the view

Thanks to the cascading file system, we can copy the original noviusos_blognews::views/front/post/item.view.php file in our local directory: local::views/apps/noviusos_blognews/front/post/item.view.php

<div class="blognews_post blognews_post_item">
    <div class="blognews_primary_information">
        <?= \View::forge('noviusos_blognews::front/post/title', array('item' => $item)) ?>
        <?= \View::forge('noviusos_blognews::front/post/summary', array('item' => $item)) ?>
    </div>
    <div class="blognews_secondary_information">
        <?= \View::forge('noviusos_blognews::front/post/publication_date', array('item' => $item)) ?>
        <?= \View::forge('noviusos_blognews::front/post/tags', array('item' => $item)) ?>
    </div>
</div>

We deleted the thumbnail, author, categories and comment count from this view file.

2nd solution: extends the configuration

The blog application allows to disable some elements from its configuration. In our situation, it’s possible for every elements we don’t want to display, expect the thumbnail.

When using this blog configuration file, it acts on both the list and the full item view, which is not really what we want (so this solution is just shown as an example).

Thanks to the cascading file system, we can copy the original noviusos_blognews::config/config.php file in our local directory: local::config/apps/noviusos_blognews/config.php

<?php

// We only keep the keys we want to alter
return array(
    'categories' => array(
        'show' => false,
    ),
    'authors' => array(
        'show' => false,
    ),
    'comments' => array(
        'show' => false,
    ),
);

Adding the CSS

1st solution: extending the view

We create the local::views/apps/noviusos_blognews/front/post/list.view.php file:

<?php

// We add our custom CSS file
\Nos\Nos::main_controller::addCss('static/css/blog_custom.css');

// We include the original file (which displays the post list)
include APPPATH.'applications/noviusos_blognews/views/front/post/list.view.php';

Our altered view first include a CSS file (to be created in public/static/css/blog_custom.css), then calls the original view.

2nd solution: directly take action on the template

It’s also possible to include the CSS file with the front.start event, but in this case, it will be included on every pages of your website, not only on the blog page.

In the local/bootstrap.php file (create it if necessary):

<?php

// This event is triggered when loading a page of the website
Event::register('front.start', function() {
    \Nos\Nos::main_controller::addCss('css/blog_custom.css');
});

For the Novius OS website, we created our own templates, which are bundled with the appropriate CSS files to change how the blog is displayed.

Read the Docs v: latest
Versions
latest
dubrovka
chiba.2
chiba.1
0.2
0.1
Downloads
PDF
HTML
Epub
On Read the Docs
Project Home
Builds

Free document hosting provided by Read the Docs.