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 %} Login<span> / </span> Regístrate{% endif %}
{% if app.user %}Logout{% 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
aquí.
</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
aquí.
</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/iPhoneX#2x.png 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. vincent#mga.com" 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
política de privacidad
</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
aquí
</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 }},
Logout
</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 %}
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
you need to use asset command in twig to load your local css
<link rel="stylesheet" href="{{asset('assets/styles/styles.css') }}">
Related
Here's the radio buttons:
account_type = forms.ChoiceField(
choices=enumerate(('Choice 1', 'Choice 2')),
widget=forms.RadioSelect(
{'class': 'form-check form-check-inline', 'style': 'margin-left: 20px'}
),
label='',
)
I'm using bootstrap-nightshade for styling which possibly contains something that prevents inlining the buttons. So far I tried:
display: inline
and
display: inline-block;
and
class="radio-inline"
Nothing works. Here's the template of the form
{% extends 'index.html' %}
{% load bootstrap5 %}
{% block content %}
<section class="h-100">
<div class="container h-100">
<div class="row justify-content-sm-center h-100">
<div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
<div class="card shadow-lg">
<div class="card-body p-5">
<h4>{{ form_title }}</h4>
<form method="post">
{% csrf_token %}
{% bootstrap_form form %}
<button class="btn btn-success">{{ form_title }}</button>
{% if form_title == 'Sign in' %}
<a style="margin-left: 15px" href={% url 'reset-password' %}>Forgot password?</a>
{% endif %}
</form>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
and here's how they are rendered:
<div class="mb-3">
<div class="form-check form-check-inline" id="id_choices">
<div>
<label for="id_choices_0"><input class="form-check form-check-inline" id="id_choices_0"
name="choices" required="" style="margin-left: 20px" title=""
type="radio" value="0">
Choice 1</label>
</div>
<div>
<label for="id_choices_1"><input class="form-check form-check-inline" id="id_choices_1"
name="choices" required="" style="margin-left: 20px" title=""
type="radio" value="1">
Choice 2</label>
</div>
</div>
</div>
I use MopaBootstrap in the twig and other places, but I want to know where it is defined.
{% extends "#MopaBootstrap/layout.html.twig" %}
{% from '#MopaBootstrap/flash.html.twig' import session_flash %}
{% block headline %}Choice Widgets{% endblock headline %}
{% block content %}
<div class="col-lg-6">
<form action="#" class="form-horizontal" method="post" >
{{ form_widget(form) }}
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
</div>
<div class="col-lg-6">
<h3>Choice form widgets</h3>
<p>Here we try to show all possible choice form widgets</p>
<hr>
<p>And there is a lot to do</p>
</div>
{% endblock content %}
I'm new to Twig and recently started a project. In this I use a Star Rating Display very often, which needs also some values, e.g the rating to display or the size.
Currently, I always use
<div class="ratingarea">
{% include 'Artist:rating.html.twig'
with {'rating': artist.rating, 'size': 'medium' } %}
</div>
everywhere, which does the job, but I was wondering, if there's the option to reduce this to a function that only takes the parameters and returns the desired template, something like this:
<div class="ratingarea"> {% rating(2.8, 'medium') %} </div>
Is this possible? Or another way to improve this?
This is the template:
<span>
<div class="review-rating">
<div class="rating {{size}}-rating">
<div class="stars stars-fontawesome-o top-art">
<select class="list-rating fontawesome-o "
data-current-rating="{{rating}}">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
</span>
You can rely on macro's,
macro.twig
{% macro rating(rating, size) %}
<span>
<div class="review-rating">
<div class="rating {{size}}-rating">
<div class="stars stars-fontawesome-o top-art">
<select class="list-rating fontawesome-o " data-current-rating="{{rating}}">
{% for i in 1..5 %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</span>
{% endmacro %}
template.twig
{# import the macro's in the file "macro.twig" as the namespace `macro` #}
{% import "macro.twig" as macro %}
{{ macro.rating(2.5, 'medium') }}
twigfiddle
I got a problem is overriding template. Here is my simple code
In commonHeader.html.twig
{% block topsearch %}
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 col-search">
<form action="" method="post" class="navbar-form navbar-left form-inline nav-form-search">
<div class="form-group col-md-12 form-search">
<label class="sr-only" for="search">Search</label>
<div class="input-group search-input-group col-md-12">
<input type="text" class="form-control input-search" id="search" placeholder="find...">
<div class="input-group-addon btn-search-addon">
<button type="submit" name="search" class="btn btn-icon-search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
<button type="submit" name="search" class="btn btn-text-search">SEARCH</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}
In file commonPage.html.twig I do like this:
{% block header %}
{{ include('::commonHeader.html.twig') }}
{% endblock %}
{% block content %}{% endblock %}
And I have many layouts that extended from commonPage.html.twig.
And on each layout, search have difference action url, so I need to override it.
Ex. in myLayout.html.twig I want to like this
{% extends "::commonPage.html.twig" %}
<!-- start overriding search here -->
{% block topsearch %}
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 col-search">
<form action="mynewactionurl" method="post" class="navbar-form navbar-left form-inline nav-form-search">
<div class="form-group col-md-12 form-search">
<label class="sr-only" for="search">Search</label>
<div class="input-group search-input-group col-md-12">
<input type="text" class="form-control input-search" id="search" placeholder="find...">
<div class="input-group-addon btn-search-addon">
<button type="submit" name="search" class="btn btn-icon-search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
<button type="submit" name="search" class="btn btn-text-search">SEARCH</button>
</div>
</div>
</div>
</form>
</div>
{% endblock %}
{% block navigationleft %}
{% endblock %}
The problem is that I can't override search block in myLayout.html.twig?
Thanks for your helping!
Then you just need to fix the layout accordingly, i think its because you need to define your blocks in the main twig , i am not sure how the twig engine renders the includes but define your block in the main twig then include what you need, do not include blocks and then trying to override them. thats how our base.html.twig is defined. all our blocks are inside then we override them.
Is it possible to target only the first level of the class .row?
http://jsfiddle.net/czdagd3k/2/
<h2>{{ 'PERSONALDETAILS'|trans }} {# ({{ 'PRIVACY'|trans }}) #}</h2>
<span class="tiny-text">* {{ 'DENOTESREQUIRED'|trans }}</span>
<div class="row">
<div class="large-4 columns">
<input class="" name="firstName" tabindex="19" type="text" value="{{ data.user.firstName }}" placeholder="{{ 'FIRSTNAME'|trans }} *" autocomplete="off" required/>
</div>
<div class="large-4 columns">
<input class="" name="lastName" tabindex="20" type="text" value="{{ data.user.lastName }}" placeholder="{{ 'LASTNAME'|trans }} *" autocomplete="off" required/>
</div>
<div class="large-4 columns">
<input class="" name="emailAddress" tabindex="21" type="email" value="{{ data.user.email }}" placeholder="{{ 'EMAIL'|trans }} *" autocomplete="off" id="email" required/>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<input class="email" name="confirmEmail" tabindex="22" type="email" value="" placeholder="{{ 'CONFIRMEMAIL'|trans }} *" autocomplete="off" data-equalto="email" required/>
</div>
<div class="large-4 columns select-nationality">
<select class="sel-box" required tabindex="23" id="nationality" name="nationality" data-highlight-code="2034, 2037">
{% if data.user.nationality.name is not defined %}
<option value="" selected="selected">{{ 'SELECTNATIONALITY'|trans }} *</option>
{% endif %}
{% for nationality in data.nationalities %}
{% if data.user.nationality.name == nationality.name %}
<option value="{{ nationality.name }}" selected="selected">{{ data.user.nationality.name }}</option>
{% else %}
<option value="{{ nationality.name }}">{{ nationality.name }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="large-4 columns select-arrival-time">
<select class="sel-box" required tabindex="24" id="arrivalTime" name="arrivalTime" data-highlight-code="2063, 2025">
<option value="" selected="selected">{{ 'ARRIVALTIME'|trans }} *</option>
{% for time in data.property.checkIn.startsAt .. data.property.checkIn.endsAt %}
<option value="{{ time }}">{{ time }}:00</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<div class="large-4 columns telephone">
<input class="digits" name="phoneNumber" tabindex="25" type="text" value="" placeholder="{{ 'TELEPHONENUMBER'|trans }}"autocomplete="off" />
</div>
<div class="large-4 columns select-gender">
<select class="sel-box" required tabindex="26" id="gender" name="gender" data-highlight-code="2023">
<option value="" selected="selected">{{ 'SELECTGENDER'|trans }} *</option>
{% for gender in data.genderList %}
{% if gender.value == data.user.gender.id %}
<option value="{{ gender.value }}" selected="selected">{{ gender.label }}</option>
{% else %}
<option value="{{ gender.value }}">{{ gender.label }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="large-4 columns male-female-wrapper">
{% if data.reservation.property.ymca %}
<div class="row">
<div class="large-4 columns selection">
<p>{{ 'NOOFPEOPLE'|trans }}:</p>
</div>
<div class="small-8 columns male-female-select">
<div class="row">
<div class="small-6 columns male-select">
<label>{{ 'MALE'|trans }}</label>
<select class="sel-box" tabindex="27" data-abide-validator="checkMaleFemale" name="numberOfMales">
{% for i in 0..data.numberOfGuests %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
<div class="small-6 columns female-select">
<label>{{ 'FEMALE'|trans }}</label>
<select class="sel-box" tabindex="28" data-abide-validator="checkMaleFemale" name="numberOfFemales">
{% for i in 0..data.numberOfGuests %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<p class="tiny-text">{{ 'TOTALNUMBEROFDESC'|trans }}</p>
</div>
{% endif %}
</div>
The last block has nested rows:
<div class="large-4 columns male-female-wrapper">
{% if data.reservation.property.ymca %}
<div class="row">
<div class="large-4 columns selection">
<p>{{ 'NOOFPEOPLE'|trans }}:</p>
</div>
<div class="small-8 columns male-female-select">
<div class="row">
<div class="small-6 columns male-select">
<label>{{ 'MALE'|trans }}</label>
<select class="sel-box" tabindex="27" data-abide-validator="checkMaleFemale" name="numberOfMales">
{% for i in 0..data.numberOfGuests %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
<div class="small-6 columns female-select">
<label>{{ 'FEMALE'|trans }}</label>
<select class="sel-box" tabindex="28" data-abide-validator="checkMaleFemale" name="numberOfFemales">
{% for i in 0..data.numberOfGuests %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<p class="tiny-text">{{ 'TOTALNUMBEROFDESC'|trans }}</p>
</div>
{% endif %}
</div>
I only need to target the first level of the class ".row"
I have tried this but it doesn't work:
.personal-details > .row{
.columns:first-child{
padding-left:0;
}
.columns:last-child{
padding-right: 0;
}
}
Your code compiles to the following two selectors:
.personal-details > .row .columns:first-child
.personal-details > .row .columns:last-child
You are correctly targeting the first level of .row elements, but because the nested .columns elements are descendants of their own .row parent and the first-level .row parent, those are matched as well.
So you need to add more > combinators:
.personal-details > .row{
> .columns:first-child{
padding-left:0;
}
> .columns:last-child{
padding-right: 0;
}
}
This will produce the following selectors which will match just the top-level .columns elements:
.personal-details > .row > .columns:first-child
.personal-details > .row > .columns:last-child