Drupal 8 won't render my stylesheet. Any ideas why it won't render?
I've tried clearing the cache but that didn't help. below is my code:
fluffiness.info.yml
name: fluffiness
type: theme
description: "A cuddly theme that offers extra fluffiness"
core: 8.x
libraries:
-fluffiness/cuddly-slider
base them: classy
regions:
header: Header
content: Content
sidebar_first: 'Sidebar first'
footer: Footer
fluffiness.libraries.yml
cuddly-slider:
version: 1.x
css:
theme:
css/cuddly-slider.css: {}
js:
js/cuddly-slider.js: {}
dependencies:
- core/jquery
themes/custom/fluffiness/page--front.html.twig
{{ attach_library('fluffiness/cuddly-slider') }}
<header role="banner">
{{ page.header }}
</header>
<div class="layout-container">
<main role="main">
<a id="main-s" tabindex="-1"></a>{# link is in html.html.twig #}
<div class="layout-content">
{{ page.content }}
</div>{# /.layout-content #}
</main>
{% if page.footer %}
<footer role="contentinfo">
{{ page.footer }}
</footer>
{% endif %}
</div>
themes/custom/fluffiness/css/cuddly-slider.css
header {
background-color: black;
}
Related
I want to create a page in grav, where I have a content area and a sidebar area.
I want to use on modular.md root template in which I refer to a template that loops and displays both content and sidebar modules.
My problem is: how to distinguish between content and sidebar?
my template looks like this:
{% block body %}
{% block content %}
<section id="info">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8">
<div id="content" class="site-content bg">
<h2 class="heading">{{ page.title }}</h2>
{{ page.content }}
{% for module in page.collection() %}
{{ module.content }}
{% endfor %}
</div>
</div>
<div id="sidebar" class="col-sm-4 sidebar-inner">
{% for module in page.collection() %}
{{ module.content }}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% endblock %}
What I try to achieve is to use filters on both page.collections, so that in one case only "content" (taxonomy.tag was my guess here) and in the other case only sidebar is used.
I could live with naming conventions (sidebar modules have a fixed prefix), but I can't figure it out.
okay, I came along with a hack: I include 'sidebar' in the folder name of the module and filter on module.folder name. I am convinced there is a better solution, though!
<section id="info">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8">
{% if page.content %}
<div id="content" class="site-content bg">
<h2 class="heading">{{ page.title }}</h2>
{{ page.content }}
</div>
{% endif %}
{% for module in page.collection() %}
{% if 'sidebar' not in module.folder %}
{{ module.content }}
{% endif %}
{% endfor %}
</div>
<div id="sidebar" class="col-sm-4 sidebar-inner">
{% for module in page.collection() %}
{% if 'sidebar' in module.folder %}
{{ module.content }}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
What you can do (I think) is set a value in the fromtmatter of the module
sidebar: true
Then you can filter on that value in your collection like
{% for module in page.collection() %}
{% if page.header.sidebar %}
{{ module.content }}
{% endif %}
{% endfor %}
I am very new to web development and Django. I am following a tutorial called "Try Django 1.8".
In this code I am supposed to change the background-color of jumbotron to #155A1E.
If I press shift + refresh in google chrome, the color shows up then it changes back to gray. When I inspect the code in google chrome, I can see in the styles tab that the background-color in the .jumbotron{} has a strike-through. Also there is another verion of .jumbotron{} in the styles tab that has a background-color and has a check. If I uncheck the box, the color gets fixed.
How can I fix this in Django?
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block head_title %}Welcome | {{ block.super}}{% endblock %}
<style>
{% block style %}
.jumbotron {
background-color: #155A1E;
}
{% endblock %}
</style>
{% block jumbotron %}
<div class="jumbotron">
<div class='container'>
<div class="row">
<div class='col-sm-6'>
<h1>Try Django 1.8</h1>
<p>Some text here!!! This text should be long so that we can test the columns in the webpage. So here we go. We are trying to make this line as long as possible.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">Join us »</a>
</p>
</div>
<div class='col-sm-6' style="background-color:black;height:300px">
</div>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="row">
<div class="row">
</div>
<div class="col-xs-3 pull-right">
<p class='lead text-align-center'>{{ title}}</p>
<!--{{ user }}-->
<!--<!–{{ request.user }}–>-->
<!--abc is = {{ abc }}-->
<form method='POST' action=''>{% csrf_token %}
{{ form|crispy }}
<input class='btn btn-primary' type="submit" value="Signup" />
</form>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>Built with Django & Bootstrap</p>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>created for starters of all kinds.</p>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>Always open source.</p>
</div>
</div>
{% endblock %}
You can add do important to your css attribute.
Just like that:
.jumbotron {
background-color: #155A1E!important;
}
It will be taken instead of the default one
It may be very late to answer the question but could help someone who is doing the tutorial now as myself.
Problem is your style should come under the
{% block jumbotron %}
otherwise its never been executed.
Here it is
{% block jumbotron %}
<style>
{% block style %}
.jumbotron {
background-color : #1e78d2 !important;
}
{% endblock %}
</style>
<div class="jumbotron">
<div class="container">....... {% endblock %}
Hope it helps someone
Makesure source of bootstrap is before your style source, and example:
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" media="all">
<link href="{% static 'css/your_style.css' %}" rel="stylesheet" media="all">
I am currently trying to style a form that is generated by symfony form builder.
there is a bootstrap overlay on it but i want to move the time widgets so they align next to each other.
You can display each input of your form independently using
form_row(form.yourinputname)
form_row is the combination of the field's label, errors and widget.
You can see the doc about this
EDIT:
So if you want to display some widgets in one line you can do this (you have to use a loop to display each input of your form collection) :
<style type="text/css">
.myClass{
.inline{
display: inline-block;
}
}
</style>
<div class='myClass'>
{% for business in form.businesshours %}
<div class="inline">{{ form_row(business.day) }}</div>
<div class="inline">{{ form_row(business.openTime) }}</div>
<div class="inline">{{ form_row(business.breakStart) }}</div>
<div class="inline">{{ form_row(business.breakEnd) }}</div>
<div class="inline">{{ form_row(business.closeTime) }}</div>
{% endfor %}
</div>
http://symfony.com/doc/current/form/form_customization.html#how-to-customize-an-individual-field
In this section there is a part to override the display of a single row, if you were to try something similar and give the div a class of your own you would probably be able to use css to style it.
This seems to be the page to go to for form styling and customization though.
Hope it helps
{% form_theme form _self %}
{% block _datetime_row %}
<div class="your_class">
{{ form_label(form) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</div>
{% endblock %}
{{ form_row(form.name) }}
Add HTML to move each form row. (Same answer as #DOZ, but with bootstrap classes).
Remove {{ form_row(form.businessHours) }} and :
<div class="row">
<div class="col-xs-3">
{{ form_row(form.businessHours.Begin) }}
</div>
<div class="col-xs-3">
{{ form_row(form.businessHours.BeginPauze) }}
</div>
<div class="col-xs-3">
{{ form_row(form.businessHours.EindPauze) }}
</div>
<div class="col-xs-3">
{{ form_row(form.businessHours.Einde) }}
</div>
</div>
I have a collection of form in Symfony2. I need to style those forms with some specific div structure, something like this:
<div class="block" style="clear: both;">
{{ form_row(form.name) }}
{{ form_row(form.address) }}
</div>
<div class="block">
{{ form_row(form.website) }}
{{ form_row(form.email) }}
</div>
<div>
<div>
{{ form_row(form.text1) }}
</div>
</div>
As you can see, the structure is not regular and I don't have an idea how to style it in the {% for row in rows %} loop in {% block collection_widget %}. Any ideas how I can style/build form prototype so the form added with javascript will look exact as I want?
I've found the best way is to have separate twig template for the form and then pass the form/prototype into that like..
_form.html.twig
<div class="block" style="clear: both;">
{{ form_row(form.name) }}
{{ form_row(form.address) }}
</div>
<div class="block">
{{ form_row(form.website) }}
{{ form_row(form.email) }}
</div>
<div>
<div>
{{ form_row(form.text1) }}
</div>
</div>
update.html.twig
<ul data-prototype="{{ include('_form.html.twig',
{'form': form.items.vars.prototype })|e }}">
{% for item in form.items %}
<li>{{ include('_form.html.twig', {'form': item }) }}</li>
{% endfor %}
</ul>
This will allow you to pass in your form items prototype into the same template that you are using for your actual form items, meaning that you only have to update one template when things change.
You can do it with a simple for loop in twig, without extending the {% block collection_widget %}:
{% for counter in form.MyCollection %}
<div class="block" style="clear: both;">
{{ form_row(form.MyCollection[loop.index0].name) }}
{{ form_row(form.MyCollection[loop.index0].address) }}
</div>
<div class="block">
{{ form_row(form.MyCollection[loop.index0].website) }}
{{ form_row(form.MyCollection[loop.index0].email) }}
</div>
<div>
<div>
{{ form_row(form.MyCollection[loop.index0].text1) }}
</div>
</div>
{% endfor %}
I made an upgrade of my SF version (2.0.18 to 2.2) and i have trouble with render routing on a twig template.
Error message :
An exception has been thrown during the rendering of a template ("No route found for "GET Security:login"") in "OlrLoanBundle:Default:index.html.twig".
my layout :
<body>
<div id="main" class="container">
<div class="row-fluid">
<div class="span4">
<img src="{{ asset('img/logo.jpg') }}"/>
</div>
<div class="span8">
{% render "FOSUserBundle:Security:login" %}
<img src="{{ asset('img/pub.jpg') }}"/>
</div>
</div>
{% block content %}{% endblock %}
</div>
<div id="footer" class="left a-left">
{% block footer %}
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="{{ asset('js/bootstrap.min.js') }}"></script>
{% endblock %}
</div>
</body>
i have the same trouble on a template :
{% extends '::base.html.twig' %}
{% block content %}
<div class="row-fluid">
<div class="span7">
{% render "OlrLoanBundle:Demande:index" %}
{% render "OlrLoanBundle:Demande:tribu" %}
{% render "OlrLoanBundle:Objet:index" %}
</div>
</div>
<div class="span5">
<img src="{{ asset('img/pub-carre.jpg') }}"/>
{% render "OlrLoanBundle:Tribu:index" %}
</div>
</div>
{% endblock %}
Yeah, happened to me as well. This is, however, desired behavior as it is stated in official blog:
Since Symfony 2.0.20/2.1.5, the Twig render tag now takes an absolute
url instead of a controller logical path. This fixes an important
security issue (CVE-2012-6431) reported on the official blog. If your
application uses an older version of Symfony or still uses the
previous render tag syntax, you should upgrade as soon as possible.
Good luck fixing code ;)