Za Fra
Reputation: 13
My twig file which extends from the base is not getting styles
I have a base twig file and when it renders, it gets some styles I have in a public folder. But then I have another twig file which extends from the base that only changes the base's body block and is not getting the styles in the blocks they share (header and footer).
Thanks in advance if someone knows the answer.
My base (called maleteo.html.twig)
<!DOCTYPE html>
<html>
<head>
<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 %}Maleteo
{% endblock %}
</title>
{% block stylesheets %}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href="https://fonts.googleapis.com/css?family=Catamaran:400,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/styles/styles.css">
<script src="https://kit.fontawesome.com/d5a5c93a6c.js" crossorigin="anonymous"></script>
{% endblock %}
</head>
{% block header %}
<body>
<div class="wrapper">
<div class="container-fluid">
<header class="header row">
<img src="assets/img/logo.svg" alt="Maleteo" class="col-md-3">
<p class="logged-user col-md-offset-7 col-md-2"><span class="fas fa-user"></span> {{ app.user.username | default }}
{% if app.user == null %}<a href="{{ path('app_login') }}"> Login</a><span> / </span><a href="{{ path('register') }}"> Regístrate</a>{% endif %}
{% if app.user %}<a href="{{ path('app_logout') }}">Logout</a>{% endif %}
</p>
</header>
</div>
</div>
{% endblock %}
{% block body %}
<main>
<div class="jumbo">
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="jumbo__ww-title">
<div class="jumbo__w-title">
<h1 class="jumbo__title heading1">
Gana dinero guardando equipaje a viajeros como tú
</h1>
<ul class="jumbo__app-btns">
<li>
<a href="#">
<img src="assets/img/app-store.svg" alt="" class="jumbo__app-btn">
</a>
</li>
<li>
<a href="">
<img src="assets/img/google-play.svg" alt="" class="jumbo__app-btn">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="container-fluid">
<section class="howworks">
<h2 class="howworks__title heading2">
¿Cómo funciona?
</h2>
<ol class="howworks__steps row">
<li class="col-md-4">
<div class="howworks__step">
<div class="howworks__step-w-bola">
<div class="howworks__step-bola">
<span class="heading3">1</span>
</div>
</div>
<div class="howworks__step-w-txt">
<p class="howworks__step-title heading3">
Regístrate:
</p>
<p class="howworks__step-txt">
Para obtener todas las ventajas puedes registrarte
<a href="{{ path('register') }}">aquí</a>.
</p>
</div>
</div>
</li>
<li class="col-md-4">
<div class="howworks__step">
<div class="howworks__step-w-bola">
<div class="howworks__step-bola">
<span class="heading3">2</span>
</div>
</div>
<div class="howworks__step-w-txt">
<p class="howworks__step-title heading3">
Solicita/consulta las demos:
</p>
<p class="howworks__step-txt">
Puedes solicitar una demo en nuestro formulario o ver las solicitudes
<a href="{{ path('showDemos') }}">aquí</a>.
</p>
</div>
</div>
</li>
<li class="col-md-4">
<div class="howworks__step">
<div class="howworks__step-w-bola">
<div class="howworks__step-bola">
<span class="heading3">3</span>
</div>
</div>
<div class="howworks__step-w-txt">
<p class="howworks__step-title heading3">
Disfruta:
</p>
<p class="howworks__step-txt">
Empieza a disfrutar de todas las ventajas que ofrece maleteo.
</p>
</div>
</div>
</li>
</ol>
</section>
<section class="app-form">
<div class="row">
<div class="col-md-5">
<div class="app-form__w-app-img">
<img src="assets/img/iPhoneX.png" srcset="assets/img/[email protected] 2x, assets/img/iPhoneX.png 1x" alt="" class="app-form__app-img">
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<div class="the-form">
<form
action="{{ path('newDemo') }}" method="POST">
<p class="the-form__title heading3">
Solicita una demo
</p>
<div class="the-form__group">
<label for="nombre">
Nombre
</label>
<input type="text" id="inputName" class="the-form__input" placeholder="por ej. Vincent Chase" name="nombre">
</div>
<div class="the-form__group">
<label for="email">
Email
</label>
<input type="email" id="inputEmail" class="the-form__input" placeholder="por ej. [email protected]" name="email">
</div>
<div class="the-form__group">
<label for="ciudad">
Ciudad
</label>
<select id="inputCity" class="the-form__input the-form__select" name="ciudad">
<option value=''>Selecciona una Ciudad</option>
<option value=''>----------------</option>
<option value='Alava'>Álava</option>
<option value='Albacete'>Albacete</option>
<option value='Alicante'>Alicante</option>
<option value='Almeria'>Almería</option>
<option value='Asturias'>Asturias</option>
<option value='Avila'>Ávila</option>
<option value='Badajoz'>Badajoz</option>
<option value='Barcelona'>Barcelona</option>
<option value='Burgos'>Burgos</option>
<option value='Caceres'>Cáceres</option>
<option value='Cadiz'>Cádiz</option>
<option value='Cantabria'>Cantabria</option>
<option value='Castellon'>Castellón</option>
<option value='Ceuta'>Ceuta</option>
<option value='Ciudad Real'>Ciudad Real</option>
<option value='Cordoba'>Córdoba</option>
<option value='Cuenca'>Cuenca</option>
<option value='Girona'>Girona</option>
<option value='Las Palmas'>Las Palmas</option>
<option value='Granada'>Granada</option>
<option value='Guadalajara'>Guadalajara</option>
<option value='Guipuzcoa'>Guipúzcoa</option>
<option value='Huelva'>Huelva</option>
<option value='Huesca'>Huesca</option>
<option value='Illes Balears'>Illes Balears</option>
<option value='Jaen'>Jaén</option>
<option value='A Coruña'>A Coruña</option>
<option value='La Rioja'>La Rioja</option>
<option value='Leon'>León</option>
<option value='Lleida'>Lleida</option>
<option value='Lugo'>Lugo</option>
<option value='Madrid'>Madrid</option>
<option value='Malaga'>Málaga</option>
<option value='Melilla'>Melilla</option>
<option value='Murcia'>Murcia</option>
<option value='Navarra'>Navarra</option>
<option value='Ourense'>Ourense</option>
<option value='Palencia'>Palencia</option>
<option value='Pontevedra'>Pontevedra</option>
<option value='Salamanca'>Salamanca</option>
<option value='Segovia'>Segovia</option>
<option value='Sevilla'>Sevilla</option>
<option value='Soria'>Soria</option>
<option value='Tarragona'>Tarragona</option>
<option value='Tenerife'>Santa Cruz de Tenerife</option>
<option value='Teruel'>Teruel</option>
<option value='Toledo'>Toledo</option>
<option value='Valencia'>Valencia</option>
<option value='Valladolid'>Valladolid</option>
<option value='Vizcaya'>Vizcaya</option>
<option value='Zamora'>Zamora</option>
<option value='Zaragoza'>Zaragoza</option>
</select>
</div>
<div class="the-form__group the-form__group_checkbox">
<input type="checkbox" id="privacity">
<label for="privacity">
Acepto la
<a href="">política de privacidad</a>
</label>
</div>
<input type="submit" class="the-form__btn btn btn-lg btn-primary" value="Enviar">
</form>
</div>
</div>
</div>
</section>
<section class="opinions">
<h2 class="opinions__title heading2">
Opiniones de otros guardianes
</h2>
<p>Escriba su opinión
<a href="{{ path('showOpiniones') }}">aquí</a>
</p>
<ul class="row">
{% for opin in opiniones %}
{% if opin.id < 4 %}
<li class="col-md-4">
<div class="opinion">
<blockquote class="opinion__blq simple-bubble text-large">{{ opin.comentario }}</blockquote>
<p class="opinion__author text-large">{{ opin.autor }}</p>
<p class="opinion__author-address">{{ opin.ciudad }}</p>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</section>
</div>
</div>
</main>
{% endblock %}
{% block javascripts %}{% endblock %}
{% block footer %}
<footer class="footer">
<div class="wrapper">
<div class="container-fluid">
<img src="assets/img/logo.svg" alt="Maleteo" class="footer__logo">
<p class="footer__claim">
Hecho con ❤️ en Málaga.
</p>
</div>
</div>
</footer>
{% endblock %}
</body>
</html>
Then my file which extends from maleteo:
{% extends 'maleteo.html.twig' %}
{% block title %}Login
{% endblock %}
{% block body %}
<main>
<div class="jumbo">
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<form method="post">
{% if error %}
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}
{% if app.user %}
<div class="mb-3">
Has ingresado como:
{{ app.user.username }},
<a href="{{ path('app_logout') }}">Logout</a>
</div>
{% endif %}
<h1 class="h3 mb-3 font-weight-normal">Por favor, ingrese con su cuenta:</h1>
<label for="inputUsername">Username</label>
<input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control" required autofocus>
<label for="inputPassword">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" required>
<input
type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
{#
Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
See https://symfony.com/doc/current/security/remember_me.html
<div class="checkbox mb-3">
<label>
<input type="checkbox" name="_remember_me"> Remember me
</label>
</div>
#}
<button class="btn btn-lg btn-primary" type="submit" onclick {{ path('maleteo-home') }} ]>
Sign in
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
{% endblock %}
Upvotes: 0
Views: 768
Answers (2)
j4ck50n
Reputation: 89
Try to remove
{% block stylesheets %}{% endblock %}
definition from the base template (keeping styles), or to use
{% block stylesheets %} {{ parent() }} {% endblock %}
in child template between title and body blocks
Upvotes: 1
Michał G
Reputation: 2292
you need to use asset command in twig to load your local css
<link rel="stylesheet" href="{{asset('assets/styles/styles.css') }}">
Upvotes: 0
Related Questions
- add custom css to twig template, style not applying
- Extending stylesheet block
- Symfony/Twig: Extending stylesheet block from an extended bundle
- Twig template extend ignored
- Issue with Twig file paths and extending a template
- Unable to inherit from base.html.twig
- How to use base css file using twig
- Twig doesn't extend template
- Symfony2 Twig template - css not loading
- Add file to stylesheet tag in sub template