I'm using Flask-Bootstrap
$ pip show flask_bootstrap
Name: Flask-Bootstrap
Version: 3.3.7.1
I use utils.icon to get glyphs:
{% extends "base.html" %}
{% import "bootstrap/utils.html" as utils %}
{% block content %}
{{ utils.icon("pencil") }}
{% endblock %}
Following documentation I don't succeed to increase the glyphs size
icon() macro takes another parameter named extra_classes so you specify your css class for the size of icon:
{{ utils.icon("pencil", ["large"]) }}
<style type="text/css">
.large { font-size: 50px; }
</style>
Related
Hi so I'm working on writing a custom jinja template that inherits from Pandas base template.
My default template looks as
{% extends "html.tpl" %}
{% block table %}
<style type="text/css" >
{% block default_table_styles %}
#T_{{uuid}} th {
font-size: 100%;
text-align: center;
background-color: blue;
color: white;
border: black solid thin;
} #T_{{uuid}} td {
font-size: 100%;
text-align: center;
background-color: white;
color: black;
border: black solid thin;
} #T_{{uuid}} th:empty {
border-width: 0;
}
{% endblock default_table_styles %}
</style>
{{ super() }}
{% endblock table %}
Now I create a mock dataframe and try to render using my custom template but the effects do not take place.
My mock code for a dataframe
import numpy as np
import pandas as pd
from pandas.io.formats.style import Styler
from IPython.display import HTML
from bs4 import BeautifulSoup as bs
# make complex dataframe
def mklbl(prefix, n):
return ["%s%s" % (prefix, i) for i in range(n)]
micolumns = pd.MultiIndex.from_tuples([('a', 'foo'), ('a', 'bar'),
('b', 'foo'), ('b', 'bah')],
names=['lvl0', 'lvl1'])
miindex = pd.MultiIndex.from_product([mklbl('A', 4),
mklbl('B', 2),
mklbl('C', 4),
mklbl('D', 2)], names=['lvl2','lvl3','lvl4','lvl5'])
df = pd.DataFrame(np.arange(len(miindex) * len(micolumns))
.reshape((len(miindex), len(micolumns))),
index=miindex,
columns=micolumns).sort_index().sort_index(axis=1)
df
Making my custom subclass Styler object using Pandas subclass factory function.
EasyStyler = Styler.from_custom_template("path_to_new_tpl_file", "default.tpl")
Now I render
EasyStyler(df)
That should work according my research but it doesn't appear to.
I tried pretty printing the html and it doesn't look like my style block is there at all.
print(bs(EasyStyler(df).render()).prettify())
What I want is for users to be able override the properties of my default template if they so choose. My thinking was that if I include my style block before any of their code then if the user decides to override some style attributes then those will take precedence over mine as they come later.
Edit:
So I was able to get what I want by moving the style container inside of table block. However, I cannot override these settings now.
s = EasyStyler(df)
s.set_table_styles(dict(selector="th", props=[('background-color','red'),('color','white')]))
I was hoping the above would change the background color in the th header but its not. I would love to know how to get this working.
Edit2:
So it seems to be that the parent templates style container gets placed before the childs, causing the child's to overwrite the parents. Is there way to force them the other way perhaps?
So after a lot of reading I discovered the problem.
Two things I learned, as I never worked with css/html before let alone jinja2 templates.
If you look at the template that Pandas provides you'll see they have empty blocks such as before_style and before_table if you call those in your child template that inherits from it, the code you put in those blocks gets executed in that place.
The second mistake I was making was that when I was trying to apply the css to the table. I didn't realize that because the table is the most element I only needed the table id and not the actual word table.
Those two adjustments got me what I wanted completely and the template is still completely overridable from the pandas.io.formats.style.Style subclass.
{% extends "html.tpl" %}
{%- block before_style -%}
<style type="text/css">
#T_{{uuid}} th {
font-size: 100%;
text-align: center;
background-color: blue;
color: white;
border: black solid thin;
} #T_{{uuid}} td {
font-size: 100%;
text-align: center;
background-color: white;
color: black;
border: black solid thin;
} #T_{{uuid}} th:empty {
border-width: 0;
}
</style>
{%- endblock before_style -%}
{%- block before_table -%}
<style>
#T_{{uuid}} {
border: black solid thin;
}
</style>
{%- endblock before_table -%}
{% block table %}
{{ super() }}
{% endblock table %}
A client wants me to make an image overlay over the selected radio button, so when Size Small, for example, is selected, instead of a highlighted button, and image will show up in its place. See image below. Let me know!! been trying to figure this out for like 5 days!! Thanks.
enter image description here
This looks like something that would just need a little bit of clever HTML/CSS structure.
For example:
.product-option{
position: relative;
display: inline-block;
}
.product-option__input{
display: none;
}
.product-option__label{
padding: 0.25em 1.5em;
display: inline-block;
cursor: pointer;
border: 1px solid black;
border-radius: 4px;
}
.product-option__input:checked ~ .product-option__label{
/* Some nice styles to highlight the selected option? */
background-image: url('/some-nice-background.png');
color: transparent; /* If you want to make the text go away for some reason? */
border-color: darkgreen;
/* Etc. */
}
.product-option__input:checked ~ .product-option__label:after{
/* Maybe we want something that we can position independently? */
position: absolute;
content: '';
border: 2px solid green;
border-radius: 50%;
width: 2.5em;
height: 2.5em;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background: linear-gradient(-0.125turn, green, lightgreen);
}
<!--
In Liquid, this HTML would be generated with a forloop similar to the following:
{% for option in product.options_with_values %}
<div class="product-option-wrapper">
{% for value in option.values %}
{% assign unique_option_id = 'option_' | append: product.id | append: '-' | append: option.position | append: '-' | append: forloop.index %}
<div class="product-option>
<input class="product-option__input" id="{{ unique_option_id }}" name="{{ option.name }}" value="{{ value | escape }}" {% if value == option.selectd_value %}checked{% endif %} />
<label class="product-option__label" for="{{ unique_option_id }}">
<span class="product-option__text">{{ value }}</span>
</label>
</div>
{% endfor %}
</div>
{% endfor %}
-->
<div class="product-option">
<input class="product-option__input" id="option1-small" type="radio" name="option1" value="small"/>
<label class="product-option__label" for="option1-small">
<span class="product-option__text">Small</span>
</label>
</div>
<div class="product-option">
<input class="product-option__input" id="option1-med" type="radio" name="option1" value="med"/>
<label class="product-option__label" for="option1-med">
<span class="product-option__text">Med</span>
</label>
</div>
<div class="product-option">
<input class="product-option__input" id="option1-lg" type="radio" name="option1" value="lg"/>
<label class="product-option__label" for="option1-lg">
<span class="product-option__text">Large</span>
</label>
</div>
<!-- etc -->
This should hopefully be enough to get you started and let your imagination run wild with all the cool things you can do with just some simple HTML/CSS running together :)
I'm currently working on a Shopify project and I need to add color swatches on the product pages. I already did it in other projects using the product variants. But in this case the colors are different products. I found some examples on shopify:
Fashion Nova.
doyoueven.
In those examples when you click on a color you want, it changes the page. In the code it's a simple html link to the other products.
These brands are maybe using an app but I'm not sure.
Thanks.
I did that with an App for a swim suit company. Due to the way their navigation worked, it was clear they had a product per color. Not a color per variant. The App I provided them was for curated links. So they could connect all the same products with the different colors, and easily provide clickable links to each, making for a super easy way to manage inventory.
I did some test and I came up with an idea. I still need to work on it but I think maybe it could be a solution.
I am using tags to linked the products together. I need to test with more product how it's working but it could be a good start.
<div class="swatches">
<label>Colors</label>
<br />
<div class="related-colors">
{% for relatedProduct in collections.all.products %}
{% if product.tags contains relatedProduct.handle %}
{% for tag in relatedProduct.tags %}
{% if tag contains 'color-' %}
{% assign color = tag | replace: 'color-', '' %}
<a href="{{ relatedProduct.url }}">
<div class="color-swatches" style="background-color: {{color}}"></div>
</a>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
<style>
.swatches{
width:100%;
padding-left:5px;
}
.color-swatches
{
margin-top:10px;
display: inline-block;
margin-right: 0px;
margin-bottom: 10px;
width: 30px;
height: 30px;
border: 1px solid #dedede;
border-radius: 30px;
}
</style>
With Symfony 3, I'm using Assetic filters to process my .less files, and I simply want to know how to move them outside the /web directory, for example from /web/css to /app/Resources/less.
Indeed, in twig templates I don't know how to give the right location.
I'm using a basic Assetic config:
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
less:
node: /usr/bin/node
node_paths: ['/usr/local/bin/node_modules']
Let's say I have this simple Less file, currently located at /web/css/test.less:
#color : orange;
body {
background-color : #color;
}
Then, if I want to generate the link to the processed stylesheet, I'm doing like this in an HTML template:
<!doctype html>
<html>
<head>
[ ... ]
{% stylesheets 'css/test.less' filter="less" output='css/test.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
</head>
<body> </body>
</html>
So, if I move /web/css/test.less to /app/Resources/less/test.less, what should I give instead the ##### below ?
{% stylesheets '#####' filter="less" output='css/test.css' %}
Have you tried this (2nd edit):
{% stylesheets '#Resources/*' filter="less" output='less/test.less' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Then place your files under Resources like this:
Resources/less/test.less
Where Resources is the path 'src/AppBundle/Resources'.
I have a problem with displaying a collection of products with a help of snippet product-loop.liquid in Shopify. The code is basically the following.
{% capture collection_handle %}{{ product-loop | handleize }}{% endcapture %}
{% capture url %}{% if collection_handle != "" %}/collections/{{ product-loop }}{{ product.url }}{% else %}{{ product.url }}{% endif %}{% endcapture %}
<div class="product span3 {% if template == 'collection' %}adaptive-grid{% endif %}">
</div>
{% unless template contains 'collection' %}
{% cycle 'clear-product-loop': '', '', '', '<div style="clear:both;"></div>' %}
{% endunless %}
The result is one row is 2 items or 3 items or 4 items (depending on screen resolution) and the next row is always 1 item and this pattern is repeating all the time. What is wrong?
EDIT: Some related CSS
.row { margin: 0 0 30px 0; }
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { display: block; float: left; margin: 0 15px; }
.inner-left { margin-left: 0px !important; }
.inner-right { margin-right: 0px !important; }
.span1 { width: 53px; }
.span2 { width: 136px; }
.span3 { width: 219px; }
.span4 { width: 302px; }
.span3.adaptive-grid {width: 219px;}
.span3.adaptive-grid:nth-child(6n+7) {clear: none;}
.span3.adaptive-grid:nth-child(4n+5) {clear: both;}
Finally I resolved my problem by removing lines like
.span3.adaptive-grid:nth-child(6n+7) {clear: none;}
.span3.adaptive-grid:nth-child(4n+5) {clear: both;}
from Shopify styles file (Minimal theme). Now the grid of products is displayed ok for different resolutions without breaking the lines.