I have some pages in my Symfony project that needs some specific css, in general I have a general css file for font and such, but on every page I have a table that needs different formatting.
I know I can use classes for this, but it is more convenient that I just use a different css file for these pages.
Now I am using this in my twig template file:
{%block stylesheets %}
{%endblock%}
But is there a way to include a css file? I have this in my main template file:
<head>
<meta charset="utf-8">
<title>Sign in · Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="{{asset('bundles/loginlogin/css/socproGame.css')}}" rel="stylesheet">
{%block stylesheets %}
{%endblock%}
</head>
And if I do it like this it won't work:
{%block stylesheets %}
<link href="{{asset('bundles/loginlogin/css/specificPage.css')}}" rel="stylesheet">
{%endblock%}
Your main template should look like this
{% block stylesheets %}
{% stylesheets
'bundles/loginlogin/css/socproGame.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
And your twig which extends the main:
{% block stylesheets %}
{{ parent() }}
{% stylesheets
'bundles/loginlogin/css/specificPage.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Related
I am using templates to separate my logic and views. I am using multiple includes to separate the different parts of the base template. I have the previous version of the templates available here(https://github.com/ookma-kyi/ookma-kyi-core/tree/master/App/Views). The issue is The index page "index.html" has this bit of code:
{% extends "base_generic.html" %}
{% block title %}Index Page{% endblock %}
{% block body %}
<h1>Welcome</h1>
<p>Welcome Martial Artist. Do you think you are the best of the best? Well why not find out!</p>
{% endblock %}
It is included from base_header.html:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %}Untitled{% endblock %}</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
Which is included from base_generic.html:
<!DOCTYPE html>
<html lang="en">
<head>
{% include "base_header.html" %}
</head>
<body>
{% include "base_navbar.html" %}
{% block body %}
{% endblock %}
{% include "base_footer.html" %}
{% include "base_scripts.html" %}
</body>
</html>
It defaults to Untitled inside base_generic.html instead of the one in Home/index.html. I have tried everything and still can't figure out the issue. Please help!
I'm trying to edit my app.scss on my Symfony 4 project.
But the background-color doesn't work.
body {
background-color: #ccccff;
}
On my base.html.twig, I've this :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
{% block title %}Welcome!
{% endblock %}
</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/app.scss" rel="stylesheet">
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" rel="stylesheet"> {% block stylesheets %}{% endblock %}
</head>
<body>
{% include "components/sidebar/sidebarHeader.html.twig" %}
<div class="col-md-12"> {% block body %}{% endblock %}
</div>
{% include "components/sidebar/sidebarFooter.html.twig" %}
{# TODO: Trouver un moyen d'insérer <script src="/js/jquery.min.js"></script> au lieu du footer sidebar #}
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
{% block javascripts %}{% endblock %}
</body>
</html>
The only solution that is working is to edit directly the bootstrap.min.css.
However, if I edit my app.scss, if it is after my bootstrap.min.css on the base.html.twig, why it doesn't work ?
Thanks for your help !
You have this in your code example...
<link href="/css/app.scss" rel="stylesheet">
However, a browser doesn't know what to do with it, since it's pre-compiled css. You need to replace that line with:
<link href="/css/app.css" rel="stylesheet">
And actually compile the scss file using Sass. Make sure the compiled css file is in the same location as the Sass file, or you'll need to change the path.
On my symfony 3.2 project I am using the FOSUserBundle for User Registration and authentication. What I am trying to do is to apply a custom theme to the registration form.
Therefore I have made the app/Resources/views/base.html.twig that is my application's base template:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/bootstrap/css/bootstrap.css')}}" ></link>
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/adminlte.css')}}" ></link>
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/adminlte/skin-blue.css')}}" ></link>
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
{% block javascriptsHeader %}
{% endblock %}
</head>
<body class="{{ classes }}">
{% block body %}
{% endblock body %}
{% block javascriptsFooter %}
{% endblock javascriptsFooter %}
</body>
</html>
I have also changed Resources/FOSUSerBundle/views/layout.html.twig with the following content:
{% extends AppBundle::base.html.twig %}
{% body %}
{% block fos_user_content %}
{% endblock fos_user_content %}
{% endblock body %}
As seen on:
* Symfony2: How to extend a Bundle?
* http://symfony.com/doc/current/bundles/FOSUserBundle/overriding_templates.html
But I get the following error:
Unexpected token "punctuation" of value ":" ("end of statement block" expected).
Do you have any idea how to use my default template as registration from template?
You have the wrong string in extends. Change
{% extends AppBundle::base.html.twig %}
to
{% extends '::base.html.twig' %}
and it should work.
NOTE: Using ::base.html means that the template engine will look for base.html in app/Resources/views/base.html.twig. Setting AppBundle::base.html.twig is wrong. If the template was located in a bundle (i.e. AppBundle - src/AppBundle), then the path would look something like
#AppBundle/base.html.twig.
I have a Symfony2 app that must serve different themes. These themes are essentially directories containing CSS files (eventually other files and minified into a single one).
In Phalcon, I could dynamically set the asset location of my assets in the controller. In Symfony, assets are explicitly defined. My current solution is as follows, but it doesn't look great. This is the HTML of my base.html.twig. I have a property theme in my entity and I define the theme object in my controller.
Basically I'm looking for the proper way to do this in Symfony. Otherwise, I'll just do it like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
{% if theme is defined %}
{% for asset in theme.css %}
<link rel="stylesheet" href="{{ asset.url }}"/>
{% endfor %}
{% endif %}
</head>
<body>
{% block page %}
Welcome to the default page!
{% endblock %}
{% block javascripts %}
{% if theme is defined %}
{% for asset in theme.js %}
<script src="{{ asset.url }}"></script>
{% endfor %}
{% endif %}
{% endblock %}
</body>
</html>
I think the most elegant way is to define a default theme, and put the diffrent themes into a root folder, just like this:
themes/
default/
css|js|images...
blue/
css|js|images...
yellow/
css|js|images...
then in Twig template engine, you can use it like this way:
<link rel="stylesheet" href="themes/{{ theme_name|default("default") }}/css/app.css"/>
<script src="themes/{{ theme_name|default("default") }}/js/app.js">
I am working with symfony 2.5 and while including the css and js files although they seem to work but when i check the source in browser i see multiple css and js files being included where as i only included them once. This is what my header.html.twig looks like
{% block head %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | Flat Theme</title>
{% block stylesheets %}
{% stylesheets '#DefaultBundle/Resources/public/css/*' %}
<link rel="stylesheet" href="{{ asset('bundles/default/css/bootstrap.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/font-awesome.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/prettyPhoto.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/animate.css') }}/">
<link rel="stylesheet" href="{{ asset('bundles/default/css/main.css') }}"/>
{% endstylesheets %}
{% endblock %}
{% block topjavascripts %}
{% javascripts '#DefaultBundle/Resources/public/js/*' %}
<script src="{{ asset('bundles/default/js/html5shiv.js') }}"></script>
<script src="{{ asset('bundles/default/js/respond.min.js') }}"></script>
{% endjavascripts %}
{% endblock %}
</head>
{% endblock %}
<body>
Here is the source i see in browser and you will notice each css and js file has been mentioned over 5 times.
I tried removing the #DefaultBundle/Resources/public/css/* from {% stylesheets '#DefaultBundle/Resources/public/css/*' %} but doing that removes all the style
What am i doing wrong?
Try this:
{% block head %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | Flat Theme</title>
<link rel="stylesheet" href="{{ asset('bundles/default/css/bootstrap.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/font-awesome.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/prettyPhoto.css') }}"/>
<link rel="stylesheet" href="{{ asset('bundles/default/css/animate.css') }}/">
<link rel="stylesheet" href="{{ asset('bundles/default/css/main.css') }}"/>
<script src="{{ asset('bundles/default/js/html5shiv.js') }}"></script>
<script src="{{ asset('bundles/default/js/respond.min.js') }}"></script>
</head>
{% endblock %}
<body>
Or, if you don't want to call each file explicitly, try this:
{% block head %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | Flat Theme</title>
{% block stylesheets %}
{% stylesheets 'bundles/default/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
{% block topjavascripts %}
{% javascripts '#DefaultBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
</head>
{% endblock %}
<body>
this is pretty funny
{% stylesheets '#DefaultBundle/Resources/public/css/*' %}
using that you're telling the template engine to iterate all the css in the assets directory, and adding all the <link/> to them, that's why they repeat times the assets
As per documentation:
(http://symfony.com/doc/current/book/templating.html#including-stylesheets-and-javascripts-in-twig)
You can also include assets located in your bundles' Resources/public folder. You will need to run the php app/console assets:install target [--symlink] command, which moves (or symlinks) files into the correct location. (target is by default "web").
http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-javascript-files
To include JavaScript files, use the javascripts tag in any template:
{% javascripts '#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
Including CSS Stylesheets:
{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Notice that in the original example that included JavaScript files, you referred to the files using a path like #AppBundle/Resources/public/file.js, but that in this example, you referred to the CSS files using their actual, publicly-accessible path: bundles/app/css. You can use either, except that there is a known issue that causes the cssrewrite filter to fail when using the #AppBundle syntax for CSS Stylesheets.