In django easy to generate an iterated list of titles from context received by template:
{% for instance in object_list %}
<li>{{instance.international_title}} </li>
{% endfor %}
And in css easy to create a popup overlay:
#overlay
{
height:300px;
width:300px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
border:5px solid #cccccc;
border-radius:10px;
}
<div align="center">
Click Title for Detail
</div>
<div id="overlay">
<p> Here is the text giving more detail<p>
</div>
Would like to be able to associate a unique text with each unique title {{instance.international_short_description}} for the purposes of the overlay popup. However do not see how to do this. Is it necessary to somehow create a series of css classes: #overlay1, #overlay2 with custom href to each one? Is it possible to use a single class, pass a variable to it and then select the correct text? Have not been able to find examples.
You can alter the id, for example by adding the primary key of the instance, like:
{% for instance in object_list %}
<div align="center">
{{ instance.international_title }}
</div>
<div id="overlay{{ instance.pk }}">
<p>{{ instance.international_short_description }}<p>
</div>
{% endfor %}
I'm currently designing a new website and I added a dropdown which works perfectly fine when clicked. I basically want it to show that dropdown when hovered.
What I tried was:
{% include 'currency-picker' %}
<style>
.currency-picker {
background-color: transparent;
font-size: 12pt;
font:Montserrat;
letter-spacing: 2px;
color: black;
}
.currency-picker:hover {
display: block;
}
.currency-picker:hover {
background-color: white;
This is the dropdown itself:
<label class="currency-picker__wrapper">
<span class="currency-picker__label"></span>
<select class="currency-picker" name="currencies" style="display: inline; width: auto; vertical-align: inherit;">
{% assign codes = 'USD,EUR,GBP,CAD,ARS,AUD,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,ILS,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK' | split: ',' %}
{% assign supported_codes = settings.supported_currencies | split: ' ' %}
<option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>
{% for code in supported_codes %}
{% if code != shop.currency and codes contains code %}
<option value="{{ code }}">{{ code }}</option>
{% endif %}
{% endfor %}
</select>
</label>
The strange thing is, that the .currency-picker:hover {
background-color: white; works and it does indeed show the white background when hovered.
Is there anyone knowing a solutions of my problem?
Have a nice day and best regards,
Ismael
After looking at your code, is there any reason why you don't just use the same markup as the other dropdowns? Consistency is always key.
What you are trying to do does not work or is not allowed in the browser. Instead of using an actual "select" box, I would use the actual markup they are using on the other dropdowns which give you the exact functionality that you are looking for.
This code (taken from your site) should give you a clue on how to handle this. Also You ave an extra starting script tag on your page where you dropped that new test code..
Please note I changed the below code a bit to give you better reference. If you were to drop this code into your site, it would work, but you need to refactor it to make it dynamic.
<li class="site-nav__item site-nav__expanded-item site-nav--has-dropdown" aria-haspopup="true">
USD <span class="icon icon-arrow-down" aria-hidden="true"></span>
<ul class="site-nav__dropdown text-left">
<li>
EUR
</li>
<li>
CHF
</li>
</ul>
After my change...
While creating forms for my app I had to make a custom checkbox (I am terrible with css so this was not easy). I got it to work and it looks like this when I create the form manually:
The manual html is
<div class="checkbox icheck-primary">
{{ form.active }}
<label for="id_active">Active</label>
</div>
But when using the wrapper_class attribute on a crispy forms Field it displays as standard:
And the crispy forms code:
self.helper.layout = Layout(
Fieldset(
'Add Contact',
'first_name',
Field('active', wrapper_class='icheck-primary', css_class='icheck-primary')
))
I tried using a custom Div template but I couldn't get it to work. In the docs all I could find was the wrapper_class.
Am I missing something simple or could someone point me in the right direction?
[Edit]
HTML output from crispy_forms:
<div id="div_id_active" class="checkbox icheck-primary">
<label for="id_active" class="">
<input name="active" class="checkboxinput" id="id_active" checked="" type="checkbox">
Active
</label>
</div>
And here is my manual/forms generated html
<div class="checkbox icheck-primary">
<input name="stay_logged_in" class="checkbox icheck-primary" id="id_stay_logged_in" type="checkbox">
<label for="id_stay_logged_in">Remember me</label>
</div>
[Edit 2] This is a sample of the css selectors
.radio > input[type="radio"]:first-child:checked + label::before,
.checkbox > input[type="checkbox"]:first-child:checked + label::before,
.radio > input[type="radio"]:first-child:checked + input[type="hidden"] + label::before,
.checkbox > input[type="checkbox"]:first-child:checked + input[type="hidden"] + label::before {
content: "\e013";
display: inline-block;
font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 10px;
color: #b4aba1;
position: absolute;
width: 22px;
height: 22px;
line-height: 20px;
border: 2px solid #b4aba1;
border-radius: 0 !important;
background-color: #0060a1 !important;
text-align: center;
margin-left: -29px;
vertical-align: text-top;
}
After some help in the comments from #dirn I went back and made a custom template.
Since all of my checkboxes should look this same I created a checkboxinput_template based on the existing crispy_forms templates:
{% load crispy_forms_field %}
<div id="div_{{ field.auto_id }}" class="checkbox icheck-primary {% if form_show_errors and field.errors %} error{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
{{ field }}
<label class="control-label {{ label_class }}" for="id_{{ field.html_name }}">{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}</label>
<div class="controls {{ field_class }}">
{% include 'bootstrap3/layout/help_text.html' %}
</div>
</div>
I added the icheck-primary class to the surrounding div and moved the field itself out of the label tag. This allowed the selectors to work properly.
I think this could also be done by overriding the fields.html but for the moment this solves my problem.
This is probably not the best solution and I'd appreciate it if anyone could share a better one.
I have no experience with django-crispy-forms, but use django-widget-tweaks for adding css to django forms. You only need to adjust templates, no python code. Makes it a lot easier and you keep styling separate from code.
I'm a newbie in TWIG. But I have to resolve some trouble with the page numbering.
I have the follow TWIG template
{% extends 'agreement/report_base_template.html.twig' %}
{% block title %}Personal card{% endblock %}
{% block content %}
{% for Person in AllPersons %}
{% set pageNum = 1 %}
<div id="content" class="page">
<!-- generate the frist page as a table //-->
<div style="page-break-after:always;"></div>
</div>
{% set pageNum = pageNum + 1 %}
<div id="content" class="page">
<!-- generate the second page as a table //-->
<div style="page-break-after:always;"></div>
</div>
<!-- other pages generated the same way //-->
{% endfor %}
{% endblock %}
That template generates the multi-page documents for each Person.
UPD: added after 20 mins
There is the need to insert the number into the bottom right of each page as it's shown below.
And for each document, the number of the first page must be 1.
UPD: added after 7 hours
The use of JavaScript is also possible.
I'm not completely sure what do you mean by page numbering, but if I have to guess from your code snippet you want to replace the pageNum variable and if you read the twig documentation carefully you'll find The loop variable
here's an example:
{% for Person in AllPersons %}
Person #{% loop.index %}
{% endfor %}
this will print:
Person #1
Person #2
and so on for each iteration
UPD: Added on May 5th
I've finished my work with the next solving which was compiled from some other answers:
Print page numbers
Relative position into the parent element
Now, I can see the numbers on the each page.
IMPORTANT
This solution doesn't show the total number of pages.
See at the end of this post how to display the total number of the pages.
I changed the TWIG template
{% for Person in AllPersons %}
{% set pageNum = 1 %}
<div class="page">
<div class="content">
<!-- there is some the content of the first page //-->
</div>
<div class="break">{{pageNum}}</div>
</div>
{% set pageNum = pageNum + 1 %}
<div class="page">
<div class="content">
<!-- there is some the content of the second page //-->
</div>
<div class="break">{{pageNum}}</div>
</div>
<!-- other pages generated the same way //-->
{% endfor %}
and CSS
.page {
background: white;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
width: 21cm;
height: 29.7cm;
position: relative;
}
.content {
padding: 0.5cm 1cm 0.5cm 2cm;
}
.break{
page-break-after: always;
position: absolute;
bottom: 5mm;
right: 5mm;
}
.break:before{
white-space: nowrap;
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
UPD: Added after 4 hours
To display the total number of the pages, I used the next script
$( document ).ready(function() {
$(".person").each( function(){
var totalNumber = $(this).children(".page").length;
$(this).children(".page").each( function (index){
$(this).children(".break").append("page "+(index+1)+" of "+ totalNumber);
})
})
});
And a little bit, I changed the TWIG template
{% for Person in AllPersons %}
{% set pageNum = 1 %}
<div class="person"> <!-- This tag was addaed //-->
<div class="page">
I am trying to add a caption to a flexslider on Shopify.
This is my code on theme.liquid
{% for i in (1..10) %}
{% capture display_slideshow %}display_slideshow_{{ i }}{% endcapture %}
{% capture slide %}slideshow_{{ i }}.jpg{% endcapture %}
{% capture link %}image_{{ i }}_link{% endcapture %}
{% capture alt %}image_{{ i }}_alt{% endcapture %}
{% capture caption %}image_{{ i }}_caption{% endcapture %} {% comment %} <-- I am adding this one {% endcomment %}
{% if settings[display_slideshow] %}
<li class="slide">
<img src="{{ slide | asset_url }}" data-url="{{ settings[link] }}" class="slide-img" alt="{{ settings[alt] }}" />
<p class="flex-caption">{{ settings[caption] }}</p> {% comment %} <-- I am adding this one {% endcomment %}
</li>
{% endif %}
{% endfor %}
My shop.css.liquid
I am adding
{% if settings.caption %}
.flex-caption
{
position:absolute;
right:0;
bottom:20px;
z-index:1;
background:rgba(0, 0, 0,0.6);
padding:20px 0 10px 10px;
height:33px;
width:500px;
color:#FFF;
}
{% endif %}
It is still showing the background even when a caption is not applied.
I would try to add a caption textbox for each slides then check if settings.caption != "" (not empty string).
It may be an easier option to simply not output the caption element for slides that has none rather than messing with the css class.
Read more here http://docs.shopify.com/themes/theme-templates/settings#settings-object-in-liquid
Hope this helps.