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 %}
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
Refer to official documentation :
How to override templates : http://symfony.com/doc/master/bundles/FOSUserBundle/overriding_templates.html
How to override FormType : http://symfony.com/doc/master/bundles/FOSUserBundle/overriding_forms.html
Related
I have a page where css isn't applied. i have a folder inside templates called animal and it contains 2 files adopt.html.twig and index.html.twig and the base.html.twig. Why css isn't applied to adopt.html.twig?.
My code is:
adopt.html.twig
{% extends 'base.html.twig' %}
{% block title %}Adopt an animal!{% endblock %}
{% block body %}
<ul>
<li class="articleItem">
<img src="/dog.png" alt="article icon">
<h4>Thanks ! </h4>
<p>{{ animal.name }} is your new Compagnon </p>
<button class="button">Go back</button>
<button class="button">See adoptions</button>
</li>
</ul>
{% endblock %}
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</head>
<body>
{% block head %}
{% include 'partials/header.html.twig' %}
{% endblock %}
{% block body %}{% endblock %}
{% block footer %}
{% include 'partials/footer.html.twig' %}
{% endblock %}
</body>
</html>
</html>
Your css/style.css is linked relative to current URL. So it works on mainpage but not for any subpage URL (In Symfony this means any controller with #Route other than /).
So if You open https://your.domain.tld/, browser would read style.css from https://your.domain.tld/css/style.css. But if You open https://your.domain.tld/adopt/, browser try to read style.css from https://your.domain.tld/adopt/css/style.css.
In Symfony this could be fixed by using
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
instead of:
<link href="css/styles.css" rel="stylesheet">
Please, read Creating and Using Templates: Linking to Assets
I'm working on a Symfony site, v 2.8.3. I have controllers and twig files all set up.
Every page I go to I get the default welcome screen.
The Symfony profiler shows the correct twig file but doesn't render it.
Any suggestions?
In DefaultController.php
/**
* #Route("/")
* #Template()
*/
public function indexAction()
{
}
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
index.html.twig
{% extends '::base.html.twig' %}
{% block body_container_main_content %}
You don't have body_container_main_content block in base template
Add it to body block
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}
{% block body_container_main_content %}{% endblock %}
{% endblock %}
{% block javascripts %}{% endblock %}
</body>
7.6 i want to load a javascript file included from my child view after the javsscripts loaded from base.html.twig
for example, here is my base.html.twig
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Benerite | {% block page_title %}{% endblock %}</title>
{% stylesheets
'assets/bower_components/jquery-ui/themes/cupertino/jquery-ui.min.css'
'assets/gentelella-master/css/bootstrap.min.css'
filter='cssrewrite' output='css/compiled/app.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- 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 class="nav-md">
<div class="container body">
<div class="main_container">
{{ include('::_navigation.html.twig') }}
{{ include('::_topnav.html.twig') }}
<!-- page content -->
<div class="right_col" role="main">{% block body %}{% endblock %}</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="">
<p class="pull-right">
<span class="lead"> <i class="fa fa-database"></i> Benerite</span>
</p>
</div>
</footer>
<!-- /footer content -->
</div>
</div>
<div id="custom_notifications" class="custom-notifications dsp_none">
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group"></ul>
<div class="clearfix"></div>
<div id="notif-group" class="tabbed_notifications"></div>
</div>
{% javascripts
'assets/bower_components/jquery/dist/jquery.min.js'
'assets/bower_components/jquery-ui/jquery-ui.min.js'
output='js/compiled/main.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
</body>
</html>
Here is my child form in which i have included a js file at the end
{% extends '::base.html.twig' %}
{% block body -%}
<h1>Privilege edit</h1>
{{ form(edit_form) }}
<ul class="record_actions">
<li>
<a href="{{ path('privilege') }}">
Back to the list
</a>
</li>
<li>{{ form(delete_form) }}</li>
</ul>
<script src="{{my_custom_js file}}"></script>
{% endblock %}
When I load the page, I want the js file render after the js file included from the base.html.twig
Is there any solution for my issue?? please help me
In base template you have two blocks, base and javascripts.
Create one more, somthing like that childs_javascripts after javascripts block.
And in childe template just use childs_javascripts like you use block body
{% block childs_javascripts %}
<script src="{{my_custom_js file}}"></script>
{% endblock %}
Override the block and call parent block with parent() twig function.
base.html.twig
<html>
<head>
...
{% block stylesheets %}
{% stylesheets ... %}...{% endstylesheets %}
{% endblock %}
...
</head>
<body>
...
{% block body %}{% endblock %}
{% block javascripts %}
{% javascripts ... %}...{% endjavascripts %}
{% endblock %}
</body>
</html>
page.html.twig
{% extends 'base.html.twig' %}
{% block body %}
inner content
{% endblock %}
{% block stylesheets %}
{{ parent() }}
{% stylesheets additional styles %}...{% endstylesheets %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% javascripts additional scripts %}...{% endjavascripts %}
{% endblock %}
You would like to use the Bootstrap in Symfony2.
However, in the rental server that I owe, less command can not be used.
So from http://getbootstrap.com/, was placed css you have downloaded, font, etc..
However, glyphicon does not appear.
Will're something wrong way of setting?
MyBudle
+ Resources
+ Public
+ Css
+ Fonts
+ Js
page.html.twig
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% block stylesheets %}
{% stylesheets '#LouteBundle/Resources/public/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
{% block javascripts %}
{% javascripts '#LouteBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.eot'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.eot'
%}
{% endstylesheets %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.svg'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.svg'
%}
{% endstylesheets %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.ttf'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.ttf'
%}
{% endstylesheets %}
{% stylesheets
output='fonts/glyphicons-halflings-regular.woff'
'#LouteBundle/Resources/public/fonts/glyphicons-halflings-regular.woff'
%}
{% endstylesheets %}
</head>
use glyphicon
<body>
<nav class="navbar navbar-inverse" role="navigation" id="top">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<span class="glyphicon glyphicon-home"></span>
</a>
I'm working on my own octopress theme i so i want to modify the header so it
can use 100% of the width in the browser. I added this to the "_styles.scss":
header[role="banner"] {
background-image: url(/images/header-bg.png);
background-repeat: repeat;
position:relative;
width: 100%;
}
But all i get is this result:
This are the entries in the default.html which is the default layout.
{% capture root_url %}{{ site.root | strip_slash }}{% endcapture %}
{% include head.html %}
<body {% if page.body_id %} id="{{ page.body_id }}" {% endif %} {% if page.sidebar == false %} class="no-sidebar" {% endif %} {% if page.sidebar == 'collapse' or site.sidebar == 'collapse' %} class="collapse-sidebar sidebar-footer" {% endif %}>
<header role="banner">{% include header.html %}</header>
<nav role="navigation">{% include navigation.html %}</nav>
<div id="main">
<div id="content">
{{ content | expand_urls: root_url }}
</div>
</div>
<footer role="contentinfo">{% include footer.html %}</footer>
{% include after_footer.html %}
</body>
</html>
head.html:
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>{% if page.title %}{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %} - {% endif %}{{ site.title }}</title>
<meta name="author" content="{{ site.author }}">
{% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %}
<meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">
{% if page.keywords %}<meta name="keywords" content="{{ page.keywords }}">{% endif %}
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %}
<link rel="canonical" href="{{ canonical }}">
<link href="{{ root_url }}/favicon.png" rel="icon">
<link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />
<link href="{{ site.subscribe_rss }}" rel="alternate" title="{{site.title}}" type="application/atom+xml">
<script src="{{ root_url }}/javascripts/modernizr-2.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="./javascripts/libs/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="{{ root_url }}/javascripts/octopress.js" type="text/javascript"></script>
{% include custom/head.html %}
{% include google_analytics.html %}
</head>
custom/header.html:
<hgroup>
<h1>{{ site.title }}</h1>
{% if site.subtitle %}
<h2>{{ site.subtitle }}</h2>
{% endif %}
</hgroup>
Does somebody know how i could solve this problem?
Best Regards
I had a similar problem when I wanted to color the background of only certain sections. You need to make sure your the header is in a different div as the body. You can try putting the hgroup in your custom/head.html and make sure that head has a full width.