How can I set background from database in my case?
obj = UserBackground.objects.get(user=request.user)
bg = obj.image
return render_to_response('template.html', {'bg':bg}....)
template.html:
<div class="wrapper wrapper--home" style="background: url("{{MEDIA_URL}}{{bg}}") no-repeat center top;">
</div>
style.css:
.wrapper--home {
height: 439px;
margin: 0 auto !important;
}
You can add a new rule in your templates, based on your bg variable:
{% if bg %}
<style>
.wrapper--home { background:url('{{ MEDIA_URL }}{{ bg }}') no-repeat center top; }
</style>
{% endif %}
Make sure {{ bg }} is a valid image path, and this is your game killer snippet!
The if statement is helpful if, for some reason, you don't have a {{ bg }} variable set up. With this, you won't overwrite your default rule (the one you defined in your css file) and still have a background if you don't load it dynamically.
You can place that snippet of code in your page's head. You can also compress it with all the other css upon serving.
Related
I am trying to override the class generated by page-down app and the django-crispy-forms . But the indentation that is expected through overrideing class is not working.
base.html(initially)
...
<link rel='stylesheet' href='{% static "css/base.css" %}'>
<style>
{% block style %}{% endblock style %}
</style>
{% block head_extra %}{% endblock head_extra %}
...
base.css
h1 {
color: #777777;
}
post_forms.html
{%extends "base.html" %}
{% load crispy_forms_tags %}
{% block head_extra %}
{{form.media}}
{% endblock head_extra %}
...
By using the inspect feature in chrome I can spot the class that causes the indentation
<div class="wmd-panel">
</div>
The code CSS given below is automatically generated one
.wmd-panel {
margin-left: 25%;
margin-right: 25%;
width: 50%;
min-width: 500px;
}
But after making changes to css/base.css , there is no class named wmd-panel from the file base.css in the styles tab of the chrome. And the changes made are not reflected in the webpage.
base.css
h1 {
color: #777777;
}
.wmd-panel{
margin-right: 0px !important;
margin-left: 0px !important;
}
This is what expected in chrome inspect styles tab
.wmd-panel {
margin-left: 0%;
margin-right: 0%;
}
This above class is from basic.css
You should clean the chrome cache and check again. Sometimes it just does not update the code and you are just viewing the old CSS even you have made changes to it.
Settings>Advanced>ClearBrowsingData>
and delete all Cached images and files
Do you have {% load static %}? Sometimes you just forget that. And often you miss STATIC_URL = '/static/' in your settings.
i am new to django, and i put the image in my admin header, but the name is blocking it, so i was wondering how to move the name a bit to the middle of the page. Simply adding the spaces in front of the name doesnt work, because for some reason it ignores all the extra spaces.
{% block extrastyle %}
<style type='text/css'>
#header {
background-color: #0c407a;
}
#branding {
height:94px;
background-color: #0c407a;
background: white url('/static/logo2.jpg') no-repeat ;
}
</style>
{% endblock %}
{% block branding %}
<h1 id="myid">{{ _(' MyName') }}</h1>
{% endblock %}
maybe you can try with adding some CSS code:
#myid{
margin-left: 30px;
}
I'm trying to set up a ModelForm in Django that will use the django-chosen ChosenSelect widget for one of the fields. I have installed django-chosen and this is the code I have:
class TestForm(ModelForm):
class Meta:
model = Test
widgets = {
'field': chosenwidgets.ChosenSelect(),
}
However, the specifying the widgets has no effect and the form is outputted the same regardless of whether I define it. Any suggestions?
Are you including the form media in your template?
The example template below assumes that your base template has blocks extrastyle and extrahead where you include CSS and scripts respectively, and that you have included jquery 1.4+ in your base template.
# my_template.html
{% extends "base.html" %}
{% block extrastyle %}
{{ block.super }}
{{ form.media.css }}
{% endblock %}
{% block extrahead %}
{{ block.super }}
{{ form.media.js }}
{% endblock %}
{% block content %}
<form action="." method="post">
<table>
{{ form }}
</table>
<p><input type="submit" value="Update" />
</form>
{% endblock %}
Here is my solution with using chosen.js directly. I installed it with bower and then included it in my admin class Media:
class MyModelAdmin(LockableAdmin, admin.ModelAdmin):
form = MyModelForm # has phase_id field
class Media:
js = ('components/chosen_v1.1.0/chosen.jquery.min.js', 'admin_tools/js/chosen_admin.js')
css = {'all': ('components/chosen_v1.1.0/chosen.min.css', 'admin_tools/css/chosen_admin.css')}
The additional chosen_admin.js and chosen_admin.css files contain my init script and css for making the select look more like django admin. Here are the contents:
chosen_admin.js:
/* Create own jquery namespace */
var django = {
"jQuery": django.jQuery.noConflict(true)
};
var jQuery = django.jQuery;
var $=jQuery;
$( document ).ready(function() {
$('#id_phase_id').chosen();
});
chosen_admin.css (optional):
a.chosen-single {
box-shadow: none;
border-radius: 0px;
background: white;
background-image: none;
}
a.chosen-single span{
line-height: 18px !important;
}
.vTextField{
width: 24em;
}
a.chosen-single, .chosen-container.chosen-container-single, .chosen-container-single.chosen-single{
position: absolute;
box-shadow: none !important;
border-radius: 0px !important;
background: white !important;
background-image: none !important;
font-size: 11px !important;
height: 18px !important;
padding-left: 2px !important;
}
.chosen-container-single .chosen-single div b {
background-position: 0px 0px;
}
I got some insights here and made corrections as needed. Also see chosen.js. Hope this helps :)
Just cloned the basic_project and trying to customize by following this - http://pinaxproject.com/docs/0.7/tabs/#ref-tabs
Created a new app "myapp", added the new tab to the right_nav and edited the "site_tabs.css" as well.
However when I click on the tab, although the page does change to myapp, the background color of the tab doesn't change.
This line in the documentation - Create a myapps/base.html template that all pages under that tab will extend. Make sure it defines a block body_class with content myapp is confusing me.
What is that "body_class" with content myapp ?, is it some "div" with the class having "{% block body_class%}" ?
My code of the myapp page is pretty simple right now -
{% extends "site_base.html" %}
{% load i18n %}
{% load ifsetting_tag %}
{% block head_title %}
{% trans "Custom App page" %}
{% endblock %}
< div class="myapp">
< h1 >
{% trans "Custom App page" %}</h1>
{% if user.is_authenticated %}
< p >You are signed in !!</p>
{% else %}
< p >You are NOT signed in !!</p>
{% endif %}
< /div >
The site_base.css is as follows -
body.profile #tab_profile a,
body.myapp #tab_myapp a,
body.notices #tab_notices a
{
color: #000; /* selected tab text colour */
}
body.profile #tab_profile,
body.myapp #tab_myapp,
body.notices #tab_notices
{
margin: 0; /* to compensate for border */
padding: 5px 0 5px;
background-color: #DEF; /* selected tab colour */
border-left: 1px solid #000; /* tab border */
border-top: 1px solid #000; /* tab border */
border-right: 1px solid #000; /* tab border */
}
Any pointers would be great. Thanks.
Just define a block named body_class inside your site_base.html with the content myapp like this:
{% block body_class %}myapp{% endblock %}
This will override the block defined in base.html.
<body class="{% block body_class %}{% endblock %}">
It is probably used to by CSS to make your tab active. See the example at the bottom of the documentation.
body.profile #tab_profile a,
body.blogs #tab_blogs a,
body.bookmarks #tab_bookmarks a
{
color: #000; /* selected tab text colour */
}
Now, if you're opening pages that use your template, the body tag looks like this:
<body class="myapp">
Therefore the CSS selector above can match for your tab.
body.myapp #tab_myapp a { // active
I am using a form which is generated for me by django. I'm using this as a comment form after a post in my blog.
Currently it renders fine but it's not nicely aligned.
This is what I have.
This is what I'd like.
Thanks
edit: This is the result when I user {{ form.as_table }}
I know it's a little late, but for everybody else you can try this
<table>
{{ form.as_table }}
</table>
It fixes the annoying formatting problem, and looks decent.
Posting my solution hoping it'll help someone else oneday.
I knew that you'd style the fields with css but wasn't sure how to assign the classes to each item. But if you take a look at the default template provided you'll notice that the error class is assigned to a field using an if statement within a foreach loop that automatically generates each field within your form.
i.e.
{% for field in form %}
< p{% if field.errors %}
class="error"
{% endif %}
{{ field.label_tag }}<'/' p>
{% endfor %}
So I added onto this functionality.
< p{% if field.errors %}
class="error"
{% endif %}
{% ifequal field.name "honeypot" %}
id="hide"
{% else %}
id="left"
{% endifequal %}>
{{ field.label_tag }}<'/' p>
my css being
#hide{
display:none;
}
#left{
width: 200px;
text-align: left;
}
#right{
width: 300px;
text-align: left;
}
Now that you can set your classes you can easily setup your classes or id within your css file. This is for the comments.
If you're using a {{ form.as_p }} or {{ form.as_table }} to generate your form then you just set a general form class within your css to style it.
i.e.
form {
width: 350px;
padding: 20px;
border: 1px solid #270644;
}
Have a look at Customizing the form template. This is one possible solution.
Maybe you can simply use CSS to style your form and render the form as you like. (i.e as_table()).
Using the default {% render_comment_form for app.model %} will generate:
<p>
<label for="id_name">Name</label>
<input id="id_name" type="text" name="name" maxlength="50">
</p>
<p>
<label for="id_email">Email address</label>
<input type="text" name="email" id="id_email">
</p>
... etc
Therefore, you can target label in your CSS stylesheet using:
label {
width: 15%;
}
There are multiple approaches as detailed in this post, however, I found that sometimes widget attributes may not work the way you wanted.
Still, the best and easy way is to use CSS:
Render your page that contains the form fields and do some inspection (right click>inspect or F12 on Chrome for example) to know what html tags your form generates when rendered. Then you can write your CSS easily.
You have input and textarea fields in your form so your CSS will be:
input, textarea{
width:350px;
}
Don't forget to call for your CSS file at the top of your html template:
<link rel="stylesheet" type="text/css" href="{% static 'styles/form.css' %}">
Here is a snapshot of what I have for my own form: