Install or change html themes in symfony


Posted on 28 Dec 17 by Vickey

Hey guys! in this post we will implement new html themes in symfony. First of all we will install 'assetic-bundle' for manage web assets.

composer require symfony/assetic-bundle

Register this bundle in 'appAppKernel'

# app/appAppKernel.php

class AppKernel extends Kernel
    public function registerBundles()
        $bundles = array(
            new Symfony\Bundle\AsseticBundle\AsseticBundle(),

Now put your css and js files in 'symfony/src/AppBundle/Resources/public/' and run command

php bin/console a:i

it will copy all css and js files and folders under 'symfony/web/bundles/app/' where app is the bundle name.Now add cssrewrite option in config file for rewrite images path  in your css files. for example it will rewrite background-image: url("../img/body-bg.jpg") to background-image: url("url("../../bundles/app/img/body-bg.jpg")")

# app/config/config.yml
    debug:          '%kernel.debug%'
    use_controller: '%kernel.debug%'

Set your template engine

# app/config/config.yml
        engines: ['twig']

In 'app/Resources/views/base.html.twig' Load your css files

 {% block stylesheets %}

 	{% stylesheets 'bundles/app/css/style.css' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
	{% endstylesheets %}

 {% endblock %}

Load your js files

{% block javascripts %}

        {% javascripts 'bundles/app/js/jquery.js' %}
            <script src="{{ asset_url }}"></script>
        {% endjavascripts %}

{% endblock %}

Now in your views file extent base.html.twig

# index.html.twig
{% extends 'base.html.twig' %}
{% block body %}
	page html
{% endblock %}

Now refesh your page and you will see changes

If this post help you reduce time to develop, you can help me to maintain this website :)