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 %}

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *