Customize FosUserTemplate

Question

I'm trying to override FOSUser Template and add some html items to my pages, I got this error :

Unexpected token "end of template" of value "" ("end of statement block" expected).

here is the base.html.twig page:

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other 
  head content must come *after* these tags -->
 <meta name="description" content="">
 <meta name="author" content="">
 <link rel="icon" href="favicon.ico">
 {% block stylesheets %}{% endblock %}
 <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
{% stylesheets
"css/myStyle.css"
%}
<link rel="stylesheets" href="{{ asset_url }}">

<title>{% block title %}Hello!{% endblock %}</title>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<![endif]-->    </head>
 <body>
{% block topnav %}
{% include '::topnav.html.twig' %}
{% endblock %}
<div class="container">
{% block content %}{% endblock %}    </div>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

{% block javascripts %}{% endblock %}

this is the layout.html.twig page :

{% extends '::base.html.twig' %}

{% block content %}

<div>
    {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
        {{ 'layout.logged_in_as'|trans({'%username%': 
 app.user.username}, 'FOSUserBundle') }} |
        <a href="{{ path('fos_user_security_logout') }}">
            {{ 'layout.logout'|trans({}, 'FOSUserBundle') }}
        </a>
    {% else %}
        <a href="{{ path('fos_user_security_login') }}">{{ 
       'layout.login'|trans({}, 'FOSUserBundle') }}</a>
    {% endif %}
</div>

{% if app.request.hasPreviousSession %}
    {% for type, messages in app.session.flashbag.all() %}
        {% for message in messages %}
            <div class="flash-{{ type }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endfor %}
{% endif %}

<div>
    {% block fos_user_content %}
    {% endblock fos_user_content %}
</div>

{% endblock %}

Are you sure these are the correct content of the files you specified? You should get an error with {% stylesheets "css/myStyle.css" %}! — Alvin Bunk

mduvernon mduvernon · Accepted Answer · 2017-05-14T15:55:03

Your style sheet must be declared as follow

    {% stylesheets
        'path/to/style.css' %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}

your endstylesheets is missing

Have a look there https://symfony.com/doc/current/assetic/asset_management.html#including-css-stylesheets

Customize FosUserTemplate

2 Answers