Hi I want to put the login form in the login.html which created by 'bootstrap/wtf.html. But the form of username password et al aligned left as the following image. I want to put the form in the center.
The code is following:
{% extends "common/base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}
{#{% import "macros/_patination.html" as page_macros %}#}
{#<link rel="stylesheet" href="/static/style.css" type="text/css">#}
{% block content %}
<div class = "main-login">
<h1>{{ _('Sign In') }}</h1>
<div class="main-form">
<div class="col-md-4">
{{ wtf.quick_form(form) }}
</div>
</div>
<br>
<p>{{ _('New User?') }} {{ _('Click to Register!') }}</p>
<p>
{{ _('Forgot Your Password?') }}
{{ _('Click to Reset It') }}
</p>
</div>
and css style code:
.main-login{
padding-top: 100px;
text-align: center;
}
.main-form{
/*padding-top: 100px;*/
text-align: center;
/*display: inline-block;*/
}
All you have to do is change the section of code:
<div class="col-md-4">
{{ wtf.quick_form(form) }}
</div>
to
<div class="col-md-4 col-lg-offset-4">
{{ wtf.quick_form(form) }}
</div>
And you should be good.
Related
this is my code i want to give different colors to comments
like grey(#eee) to odd and blue (#e6f9ff) to even
here this line is giving me error
background-color: {{ bg_color }}
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} Comments {% endblock %}</h1>
<div style="width: 50%; margin: auto">
{% for comment in comments %}
{% if loop.index % 2 == 0 %}
{% set bg_color = '#e6f9ff' %}
{% else %}
{% set bg_color = '#eee' %}
{% endif %}
<div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
<p>#{{ loop.index }}</p>
<p style="font-size: 24px">{{ comment }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
I think jinja version is updated and my course which Im following is old
so anyone who knows to answer me
You should note the scope for the variables. If you define a variable within an if-else block, it is only valid there.
<div style="width: 50%; margin: auto">
{% for comment in comments -%}
{% set bg_color = '#e6f9ff' if loop.index % 2 == 0 else '#eee' %}
<div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
<p>#{{ loop.index }}</p>
<p style="font-size: 24px">{{ comment }}</p>
</div>
{% endfor -%}
</div>
Instead of using jinja you can also use css to assign a different background color to every other line.
<div class="comments">
{% for comment in comments -%}
<div>
<p>#{{ loop.index }}</p>
<p class="text">{{ comment }}</p>
</div>
{% endfor -%}
</div>
<style type="text/css">
.comments {
width: 50%;
margin: auto;
}
.comments div {
padding: 10px;
background-color: #e6f9ff;
margin: 20px
}
.comments div:nth-child(odd) {
background-color: #eee;
}
.comments .text {
font-size: 24px
}
</style>
I am using the code in my index.html file.
{% for post in blog_posts.items %}
<div class="col-sm-6">
<div class="card" >
<div class="card-body">
<h2><a class="card-title" href=" {{ url_for('blog_posts.blog_post', blog_post_id=post.id) }}">{{ post.title }}</a></h2>
Written By: {{ post.author.username }}
<p>Published on: {{ post.date.strftime('%Y-%m-%d') }}</p>
<p class="card-text">{{ post.text[:100] }}...</p>
Read Blog Post
</div>
</div>
</div>
{% endfor %}
My understanding from bootstrap is that it would create a 6 column grid, however it is just stacking one card below the next. I am sure it is something I am missing. Thank you for your help.
You probably need to use a card deck or card group to achieve this:
I'd lose this div:
<div class="col-sm-6">
Then put the for loop within a card-group div:
<div class='card-group'>
{% for post in blog_posts.items %}
<div class="card" >
<div class="card-body">
...
</div>
</div>
{% endfor %}
</div>
If you want some spacing between the cards, you can change the class of the outer div to card-deck.
See the Card docs for more options.
.col-sm-6{ display: flex } add this css property to the parent that contains all cards.
alternatively you can use floats .col-sm-6 > .card{ float: left}
my problem is that the hight of the content isn't recognised which causes the body to be smaller than the content which leads to a lot more problems.
HTML:
<section id="contentbox">
{% for post in site.posts %}
<article>
<h2>
<a href="{{ post.url }}">
{{ post.title }}
</a>
</h2>
<time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date_to_long_string }}</time>
<p>
{{ post.caption }}
</p>
</article>
{% endfor %}
</section>
CSS:
#contentbox {
height: 100%;
}
article {
width: 45%;
float: left;
height: 120px;
padding: 2px 0 0 2px;
}
I have a bunch of articles listed but the section stays height:0
Put a clear fix element after your floating elements.
E.g.: <div style="clear: both;"></div>
It's a very common issue.
So I want to implement a for loop in Jekyll with a variable to the _data file, kinda like
{% for person in site.data.{{ page.base }}.persons %}
{{ person.name }}
{% endfor %}
In this case {{ page.base }} is set to build, I also need it to be set to program, manage, and web. And all these variables are defined in my build.md or program.md and so on.
I have my for loop in the _layouts folder. I've tried using the [page.base] method but it's not working. Here is my code:
---
layout: default
---
<div class="column-wrapper">
<div class="grid-x">
<div class="large-6 shrink cell">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
<div class="no-image-column-wrapper">
<p class="indent">{{ page.description }}</p>
</div>
</header>
</div>
<div class="large-6 shrink cell">
{% include slideshow.html %}
</div>
{% for person in site.data.build.persons %}
<div class="large-6 shrink cell">
<div class="team-image">
<img src="/images/{{ page.base }}/{{ person.name }}.jpg">
</div>
<style type="text/css">
.team-image {
margin-bottom: 4.5rem;
margin-top: 2rem;
max-height: 1rem;
max-width: 16rem;
margin-right: 10rem;
margin-left: 10rem;
padding-bottom: 5rem;
}
</style>
</div>
<div class="large-6 shrink cell">
<div class="no-image-column-wrapper">
<div class="team-bio">
<h3>{{ person.name }}</h3>
<br>
<p>What grade are you in? <strong>{{ person.grade }}</strong></p>
<p>What is your role in robotics? <strong>{{ person.role }}</strong></p>
<p>What is your favorite ice cream? <strong>{{ person.fav }}</strong></p>
<p>What would you like to major in? <strong>{{ person.major }}</strong></p>
<p>What is your biggest pet peeve? <strong>{{ person.pp }}</strong></p>
<p>What is your spirit animal? <strong>{{ person.sa }}</strong></p>
<p>Why are you intrested in robotics? <strong>{{ person.intrest }}</strong></p>
<style type="text/css">
.team-bio {
padding-bottom: 5rem;
}
</style>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
This is my build.md YAML, (I think it's YAML).
---
title: Build Team
layout: team
permalink: /teams/build/
base: build
path: images/build/pic
description: The build team is dedicated to building the robot.
---
This can be simpler. This could be your persons.yml:
- name: Tom
teams:
- build
- program
- name: Violet
teams:
- program
This could be your Liquid:
{% for person in site.data.persons %}
{% if person.teams contains page.base %}
{{ person.name }}
{% endif %}
{% endfor %}
I have the following HTML structure with CSS formatting.
What I want is the outer div using flex but the inner div not using flex but float style (by the reasons of the sortable drag-drop widget does not work under display as flex).
Specifically, the structure is as below:
<div id="a" style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;">
<div id="b" align="left" style="padding: 10px">
<div id="multi" style="display: NOT flex;"></div>
<div id="p" style=" float:left;"></div>
<div id="q" style=" float:left;"></div>
</div>
</div>
</div>
So, to be precise, I want flex for a. Particularly for div multi, p and q. I don't want flex, so that they can be side-by-side in the layout. Could anyone suggest how to do that? Many thanks.
The following is my working example run by Django on Python 3.5 for Michael_B's advice:
The template listing the RubaXa Sortable's widget for category ranking. What I want to do specifically is to list the blocks and Group A/B side by side, however, the Group A and B can be dragged to the block side for sorting/grouping:
{% extends "admin_content.html" %}
{% load static %}
{% block header_extra%}
<link rel="stylesheet" href="{% static 'django_tables2/themes/paleblue/css/screen.css' %}" />
{% include "fancybox/fancybox_css.html" %}
<!-- AngularJS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- Sortable.js -->
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<!-- ng-sortable.js -->
<script src="http://rubaxa.github.io/Sortable/ng-sortable.js"></script>
<!-- app.js -->
<script src="http://rubaxa.github.io/Sortable/st/app.js"></script>
<link href="/static/app.css" rel="stylesheet" type="text/css">
{% endblock %}
{% block admin_right%}
<div id="multi" >
<div class="tile__list" style="float:left; min-height:100%; min-width=1200px">
{% for field in table %}
<p style="background-color:#C6DDF4; margin: 5px; padding: 10px 15px; cursor: move;"><font size="2px">{{ field.NewsPaper }}, {{ field.Section}}, {{field.Title}}</font></p>
{% endfor %}
</div>
<div class="layer tile" >
<div class="tile__name" style=" float:left;">Group A</div>
<div class="tile__list">
</div>
</div>
<div class="layer tile" >
<div class="tile__name" style=" float:left;">Group B</div>
<div class="tile__list">
</div>
</div>
</div>
</div>
<script id="jsbin-javascript">
angular.module('demo', ['ng-sortable'])
.controller('DemoController', ['$scope', function ($scope) {
$scope.firstList = ['foo 1', 'foo 2', 'foo 3'];
$scope.secondList = ['bar 1', 'bar 2'];
$scope.sortableOptions = {
group: 'ng',
animation: 200
}
}]);
var el = document.getElementById('multi');
var sortable = Sortable.create(el, {
animation: 150,
handle: ".tile__name",
draggable: ".tile"
});
[].forEach.call(document.getElementById('multi').getElementsByClassName('tile__list'), function (el){
Sortable.create(el, {
group: 'blocks',
animation: 150
});
});
</script>
{#{% load django_tables2 %}#}
{#{% render_table table %}#}
{% endblock %}
And this template is further extend to another template of "admin_content.html" which use display flex in div:
{% extends "main.html" %}
{% load static %}
{% block header_extra%}{% endblock %}
{% block content_main%}
<div style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;">
<nav class="w3-sidenav w3-border" style="width:15%;padding:0px;background:transparent;">
<a class="w3-border-bottom" href="#">Function A</a>
<a class="w3-border-bottom" href="#">Function B</a>
<a class="w3-border-bottom" href="#">Function C</a>
<a class="w3-border-bottom" href="#">Function D</a>
<a class="w3-border-bottom" href="#">Function E</a>
</nav>
<div align="left" style="display:flex; padding: 10px;">
{% block admin_right%}{% endblock %}
</div>
</div>
{% endblock %}