Install or change html themes in symfony

Symfony

Posted on 28 Dec 17 by Vickey
  280



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
assetic:
    debug:          '%kernel.debug%'
    use_controller: '%kernel.debug%'
    filters:
        cssrewrite: 

Set your template engine

# app/config/config.yml
framework:
    templating:
        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 :)
www.000webhost.com