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.
Related
index.html
I have changed {% static "/main/css/index.css" %} to {% static "main/css/index.css" %}
{% extends 'main/base.html' %}
{% load static %}
<link rel = 'stylesheet' type="text/css" href="{% static "/main/css/index.css" %}"/>
{% block title %}
{{title}}
{% endblock %}
{% block content %}
<body>
<div class="grid-wrapper">
<header class="grid-header">
<img class="circles" src="{% static "main/img/main8.jpg" %}" alt="main pic">
<p>hello</p>
</header>
</div>
</body>
{% endblock %}
index.css
.grid-wrapper {
display: grid;
grid-template-columns: 1 fr;
grid-template-rows: 1 fr;
grid-template-areas: 'header header';
}
.circles {
display: block;
margin-left: auto;
margin-right: auto;
}
header {
position: relative;
width: 100%;
}
p {
color: red;
text-align: center;
position: absolute;
width: 100%;
text-align: center;
top: 0;
}
settings.py
STATIC_URL = 'static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "main/static"),
]
I tried changing file names, changing locations, connecting in a different way, but all this does not work. I also changed the settings.
This is an example of my configurations:
settings.py
STATIC_DIR = os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR,
]
base.html
<!DOCTYPE html>
{%load static%}
<html lang="en">
<head>
My file structure is:
/Project
/App
/Project
/settings.py
/static
/styles.css
/templates
/base.html
You may need to share you directory structure to get further clarifications.
I want to try and overide the default bootstrap css files that I got with pinax, for example change the topnav background color and change the style of <p class="a12" >gggggggg</p> I created.
I saw that link in stakoverflow
How to change the pinax(0.9a2) template?
I added my custom css in mysite\static\css\my_custom_stuff.css
the css:
.a12{
background-color: red;
color: green;
}
.topbar-inner, .topbar .fill {
background-color: red;
background-image: -webkit-linear-gradient(top, #333, #FF4242);
background-image: -o-linear-gradient(top, #333, #FF4242);
background-image: linear-gradient(top, #333, #FF4242);
}
and added the folowing to the homepage.html
{% block extra_head %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/my_custom_stuff.css">
<p class="a12" >gggggggg</p>
{% endblock %}
Can someone please help me understand what am I doing wrong?
And how should I do it correct
Thanks in advance
it works fine when I addded
os.path.join(PROJECT_ROOT, "static"),
to the STATICFILES_DIRS
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