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
Related
I ham trying to hide the notification count when it's 0 in django-notifications-hq
I have tried the below method but it is not updating regularly and displaying the number correctly.
{% live_notify_badge as nc %}
{% if nc > 0|add:0 %}
<span class="badge-notifications badge badge-pill badge-danger" style="float:right;margin-bottom:-3px;margin-top: -2px !important; margin-left: 10px !important; font-size: 0.6rem;">
{% live_notify_badge %}</span>
{% endif %}
nc is not the number of notifications. It generates some HTML that will make Javascript calls to fetch the number of notifications.
You can obtain the number of unread notifications in the template with:
{{ user.notifications.unread.count }}
So we can check if an unread notification exists, and use this to render the {% live_notify_badge %}:
{% if user.notifications.unread.exists %}
<span class="badge-notifications badge badge-pill badge-danger" style="float:right;margin-bottom:-3px;margin-top: -2px !important; margin-left:10px !important; font-size: 0.6rem;">
{% live_notify_badge %}
</span>
{% endif %}
Note however that this will be rendered at server side, so that means that when the user fetches the page, and there are no notifications, it will not display the badge. If however later there are notifictions these will not be rendered.
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;
}
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.
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 :)