I need to dynamically change image background-image css from home page in django cms, but is imposible.
home
CSS CODE
The css has the welcome-image-area class the user needs to change the image url in the cms.
.welcome-area {
height: 100%;
}
.welcome-image-area {
position: relative;
height: 100%;
background-image: url(../images/bg/bg.jpg);
background-size: cover;
z-index: 1;
}
.welcome-image-area:after {
position: absolute;
background: rgba(0, 0, 0, .7);
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}
HTML CODE
base.html
<div id="welcome-image-area" class="welcome-image-area" data-stellar-background-ratio="0.6" >
<div class="display-table">
<div class="display-table-cell">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header-text">
<h2>{% static_placeholder 'mensaje bienvenida' %}</h2>
<p>{% static_placeholder 'sub mensaje bienvenida' %}</p>
<a class="smoth-scroll hire-us-slide-btn" href="#service">Servicios <i class="fa fa-hand-pointer-o btn-hire-us" aria-hidden="true"></i></a>
<a class="slide-btn smoth-scroll" href="#contact">Contactanos <i class="fa fa-hand-pointer-o btn-contact-us" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In those cases I would recommend to utilize the "style" attribute as following:
<div class="welcome-image-area" style="background-image: url({{ instance.image.url }})"></div>
Related
I want to develop image gallery. I want to present each image and its description under it and when I click on an image or text or white space got "modal"
I wrote this for an element in gallery
<div class="m-4 img99">
<a href="#ml">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="simg " alt="..." data-toggle="modal" data-target="#ml">
<div class="">
<h5 class="">test</h5>
<p>test</p>
</div>
</a>
</div>
The modal part is
<div class="modal fade" id="ml">
<div class="modal-dialog modal-dialog-centered modal-xl ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body ">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
<p>
test
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
and CSS part
.simg {
width: auto;
height: 60px;
}
.img99 {
margin-right: auto !important;
margin-left: auto !important;
width: max-content;
height: max-content;
border: 1px solid rgba(0, 0, 0, 0.15);
}
My problem is when I click on a text or white space the model didn't work. "when I click on image :the model work normally"
https://codepen.io/ahof920/pen/MWYGRYp?editors=1100
What is the problem?
Replace your HTML with this:
Reason why its not working :
Modal are triggered by following tag's in bootstrap data-toggle="modal" data-target="#ml" and you added those inside <img> tag that's the reason modal is opened when clicked on image. So add data-toggle="modal" data-target="#ml" to <a>.
.simg {
width: auto;
height: 60px;
}
.img99 {
margin-right: auto !important;
margin-left: auto !important;
width: max-content;
height: max-content;
border: 1px solid rgba(0, 0, 0, 0.15);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="shadow2 m-4 img99">
<a href="#ml" data-toggle="modal" data-target="#ml">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="simg " alt="...">
<div class="">
<h5 class="">test</h5>
<p>test</p>
</div>
</a>
</div>
<div class="modal fade" id="ml">
<div class="modal-dialog modal-dialog-centered modal-xl ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body ">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
<p>
test
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
I've seen a few of these on Stack Overflow, but the questions that have been asked don't lead to an answer which solves my issue. Please take the time to look over my code before marking it down or flagging it as a duplicate.
I'm working through a book called "Beginning django CMS". I'm finding that a few parts are out of date, and that might be the issue here. It's tough for me to say because I'm new to web design.
The footer isn't in a <div>, and I've gone over the padding to see if that helps. Those are the kinds of issues that come up as answers to questions that have previously been posted on Stack Overflow.
I'm being left with a footer which begins about an inch in from the left of the screen and seems to be in line with the blog title. Does anyone know what might be causing this?
I've checked this in Chrome and Edge so far, both come up with the indent.
Here's the HTML:
{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv"X-UA-Compatible" Content = "IE=Edge">
<meta name = "viewport" content="width=device-width", initial-scale=1>
<link rel="icon" href="favicon.ico">
<title>{% block title %}MyBlog Title{% endblock title %}</title>
<link href="https://cdnjs.cloudfare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<!-- MyBlog custom styles -->
<link href="{% static "myblog.css" %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% render_block "css" %}
</head>
<body>
{% cms_toolbar %}
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="{% static "" %}"/>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% show_menu 0 1 0 100 "menu.html" %}
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">Patch's Soapbox</h1>
<p class="lead blog-description">The political system is broken; it could do with a Patch</p>
</div>
{% block content %}{% endblock content %}
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">{% block footer %}My Blog©2015{%endblock footer%}</p>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bu -->
<script src="{% static "ie10-viewport-bug-workaround.js" %}"></script>
{% render_block "js" %}
</body>
And the CSS:
html {
position : relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
font-family : Georgia, "Times New Roman", Times, serif;
color #555;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serfi;
font-weight: normal;
color: #333;
}
.footer {
position: absolute;
margin-left : 0px
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 28px;
font-weight: normal;
}
.blog-description{
font-size: 20px;
color: #999;
}
.sidebar-module{
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child{
margin-bottom: 0;
}
.pager {
margin-bottom: 60px;
text-align: left
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
.blog-post{
margin-bottom: 60px;
}
.blog-post-title{
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color : #999;
}
body > container {
padding: 0px 0px 0;
}
.container .text-muted {
margin: 20px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 0;
}
.row {
margin-right: 0px!important;
}
I found the issue. I needed to use the "container-fluid" class, rather than the "container" class.
This increased the width of the container in-line with the device.
I then had to remove bootstrap's default padding using:
.container-fluid{margin:0 auto}
I have the following problem.
<div class="variable">
<ul class="1">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul class="2">
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
<ul class="3">
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
<ul class="4">
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
</ul>
<ul class="5">
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
</ul>
</div>
I need that when "variable" is for example "1" list only shows "1".
Is possible?
I need to display a list depending on the class of the DIV. The DIV class is variable, generates my system, but no problem, since the set as ordinary HTML.
Regards
UPGRADE
I'm use web in Django.
I have get a list of the ID of the category. I wanted to put that DIV ID in order to display only the list match that number.
As you comment that I can not use numbers, I have to use the name, the problem is that a category called "LOGITECH MICE" and the class does not allow me to put a space, any solution?
My Django template is:
{% load i18n %}
{% load thumbnail %}
{% load modules %}
{% module {category_decription|catalog.right} id="sidebar" class="block" %}
<div style="float:right; width: 700px; margin-right: 10px; margin-bottom: 10px;" id="slider">
<div><img border="0" src="/../../static/banners_productos/{{ query.id }}/01.jpg" ></img></div>
</div>
<style>
ul.marcas{
display: none;
}
div.SMARTPHONES ul{
display: none;
color: green;
}
div.SMARTPHONES ul.SMARTPHONES{
display: block;
}
div.FAX ul{
display: none;
color: green;
}
div.FAX ul.FAX{
display: block;
}
.fabricante { display: inline; }
</style>
<div style="background-color:#fff;" id="content">
<div id="catalog-category" class="block clearfix">
<!--div class="catalog-head"-->
<div class="toolbar toolbar-top">
<span style=" float: left;" class="view-mode">Productos : {{ values|length }}/{{ total }}</span>
<div class="items-pager">
<span class="items-drop"><select onchange="setLocation('paginator',this.value)">{% for item in paginator_items %}<option value="{{ item }}"{% if paginator_option == item %} selected="selected"{% endif %}>{{ item }}</option>{% endfor %}</select> Mostrar</span>
</div>
<!--div style="float: left; margin-left: 25px;"><span class="view-mode">Stock </span><a style="color:#1D9107;" href="?available=1">OK</a><a style="color:#f00;" href="?available=0">NO</a></div-->
<div class="items-sort">
<span class="sort-drop">Ordenar por
<select onchange="setLocation('order',this.value)">{% for order in catalog_orders %}<option value="{{ order }}"{% if order_option == order %} selected="selected"{% endif %}>{% trans order %}</option>{% endfor %}</select>
{% if order_by_option = 'desc' %}<a style="color:#fff; margin-left: 15px;" href="#" onclick="setLocation('order_by','asc')">Descendente<img style="height: 22px; float: right; margin-left: 4px; margin-right: 15px;" border="0" src="/../../static/asce.png" ></img></a>{% else %}<a style="color: #FFF !important; margin-left: 15px;" href="#" onclick="setLocation('order_by','desc')">Ascendente<img style="height: 22px; float: right; margin-left: 4px; margin-right: 15px; " src="/../../static/des.png" ></img></a>{% endif %}</span>
</div>
</div>
{% if values|length == 0 %}<p class="note-msg">{% trans "No existen productos en esta categoria." %}</p>{% endif %}
<!--/div-->
<!--div class="catalog-body"-->
<div style="height: 40px; margin-top: -10px; padding: 10px; height: 30px;" class="{{ query.name }}">
<ul class="marcas FAX">
<li class="fabricante">BROTHER</li>
</ul>
<ul class="marcas IMPRESORAS">
<li class="fabricante">HP</li>
<li class="fabricante">BROTHER</li>
<li class="fabricante">EPSON</li>
</ul>
<ul class="marcas SMARTPHONES">
<li class="fabricante">TP LINK</li>
<li class="fabricante">TENDA</li>
<li class="fabricante">{{ query.id }}</li>
</ul>
</div>
{% if mode_option == 'list' %}
<ul id="catalog-list">{% for value in values %}
<li id="product-{{value.product.id}}" class="product-item block clearfix">
<div class="product-detail">
<div>
<img src="{% thumbnail value.base_image.url 150x150 product_zoook.png %}" title="{{value.name}}" />
</div>
<div style="width: 420px; float: left; height: 15px; overflow: hidden;"><h2>{{value.name}}</h2></div>
<div style="width: 365px; float:left;">
<div style="height: 35px; float:left;"></div>
<div style="width: 50%; float: left; height: 15px; font-size: 10px;">Ref: {{value.code}}</h2></div>
<div style="width: 50%; float: left; height: 15px; font-size: 10px;">Part Number: {{value.variants}}</h2></div>
<div style="width: 50%; float: left; height: 15px; font-size: 10px;">Categoria: {{ query.name }}</h2></div>
<div style="width: 110px; float: left;font-size: 10px;">
<img style="height: 22px; float: left; margin-top: 7px;" src="../../../../static/images/info_ico.png" />
</div>
</div>
<div style="width: 150px; float: right;">
{% if value.status %}
{% if value.product.available %}
<img style="height: 15px; margin-top: -16px; margin-left: 79px; margin-bottom: 14px;" src="../../../../static/images/ok.jpg" />
{% else %}
<img style="height: 15px; margin-top: -16px; margin-left: 79px; margin-bottom: 14px;" src="../../../../static/images/ok.jpg" />
{% endif %}
{% else %}
</div>
<div class="out-service ico border3b"><h3>{% trans "This product is out of service" %}</h3></div>
{% endif %}
{% if user.is_authenticated %}
<div id="product-price-{{value.product.id}}" class="price-box">
<span class="regular-price">
<span class="price3">
{% if currency_position == 'before' %}{{ currency }} {{value.price}}{% else %}{{value.price}} {{ currency }}{% endif %}
</span>
</span>
</div>
</div>
{% else %}
<a style="margin-right: 12px; width: 90px; float: right; height: 16px; padding: 5px; margin-top: 5px; background-image: url('/static/images/menu_pequeño/reg.jpg');" class="boton5" href="http://www.broadband-technologies.es/es/partner/login"><span style="padding-left: 20px;"></span></a>
{% endif %}
</li>{% endfor %}
</ul>
{% endif %}
<!--/div--></div>
{% if product_products.paginator.num_pages > 1 %}
<div id="paginator" class="pagination toolbar-bottom">
<span class="step-links">
{% if product_products.has_previous %}
{% trans "Previous" %}
{% endif %}
<span class="current">
{% trans "Page" %} {{ product_products.number }} DE {{ product_products.paginator.num_pages }}
</span>
{% if product_products.has_next %}
{% trans "Next" %}
{% endif %}
</span>
</div>{% endif %}
</div>
<!--/div-->
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.zproduct.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.fancybox-1.3.4.pack.js"></script>
{% if update_price and user.is_authenticated and values|length > 0 %}<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.zupdateprice.js"></script>{% endif %}
You may get a list of the categories? Easier ... to display only manufacturers that contain a category?
My main problem is this (that's why I ask the code).:
- I have a page in Django
- I products, categories and manufacturers.
- I want to take, when you are in a category, a list of manufacturers who have products in that category.
Best Regards
First of all - CSS class shouldn't be a pure integer. So I use letters in my answer since numbers doesn't work. Normally it should be something more descriptive though.
Define CSS rules like:
div.a ul{
display: none;
color: green;
}
div.a ul.a{
display: block;
}
div.c ul{
display: none;
color: red;
}
div.c ul.c{
display: block;
}
Here is the fiddle - http://jsfiddle.net/FC6vF/
The color rule is just to mark the difference in the fiddle and you can omit this.
For Django template - put this code:
{% for css_class in fancy_css_classes %}
div.{{ css_class }} ul{
display: none;
color: red;
}
div.{{ css_class }} ul.{{ css_class }}{
display: block;
}
{% endfor %}
inside <style>...</style> tag and pass the list of classes as a context variable fancy_css_classes from your view.
Hi I'm trying to customize my django form and add the file upload widget from Jasny Bootstrap. However, it doesn't seem to be working..
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">{{ wizard.form.main_image }}</span><span class="fileupload-exists">Change</span><input type="file" /></span>
Remove
</div>
</div>
Any ideas what I am doing wrong? Have I put {{ wizard.form.main_image }} in the wrong place?
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select an Image</span><span class="fileupload-exists">Change</span>
{{ wizard.form.main_image }}</span>
Remove
</div>
</div>
I have included Jasny fileupload component on an existing form part of a wizard.
Everything is working well on the form itself. The trouble is that when navigating to the next form of the wizard, then going back the file uploaded by the user disappeared.
The problem is therefore that if the user is going backwards in the form, he has to reload each time the file that have been uploaded.
Am I doing anything wrong ? The part of the template storing the file is provided below :
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 100px; height: 100px;"><img src="http://www.placehold.it/100x100/EFEFEF/AAAAAA" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 100px; height: 100px;"></div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span>
{{ form.file_img1 }}
Remove
</div>
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 100px; height: 100px;"><img src="http://www.placehold.it/100x100/EFEFEF/AAAAAA" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="width: 100px; height: 100px;"></div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span>
{{ form.file_img2 }}
Remove
</div>