You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This doesn't add any files to your project. It just points to files that exist on the internet.
26
27
Just go ahead, open your website and refresh the page. Here it is!
@@ -29,12 +30,14 @@ Just go ahead, open your website and refresh the page. Here it is!
29
30
30
31
Looking nicer already!
31
32
33
+
32
34
## Static files in Django
33
35
34
36
Another thing you will learn about today is called __static files__. Static files are all your CSS and images -- files that are not dynamic, so their content doesn't depend on request context and will be the same for every user.
35
37
36
38
CSS is a static file, so in order to customize CSS, we need to first configure static files in Django. You'll only need to do it once. Let's start:
37
39
40
+
38
41
### Configure static files in Django
39
42
40
43
First, we need to create a directory to store our static files in. Go ahead and create a directory called `static` inside your `djangogirls` directory.
@@ -45,12 +48,15 @@ First, we need to create a directory to store our static files in. Go ahead and
45
48
46
49
Open up the `mysite/settings.py` file, scroll to the bottom of it and add the following lines:
47
50
48
-
STATICFILES_DIRS = (
49
-
os.path.join(BASE_DIR, "static"),
50
-
)
51
+
```python
52
+
STATICFILES_DIRS= (
53
+
os.path.join(BASE_DIR, "static"),
54
+
)
55
+
```
51
56
52
57
This way Django will know where to find your static files.
53
58
59
+
54
60
## Your first CSS file!
55
61
56
62
Let's create a CSS file now, to add your own style to your web-page. Create a new directory called `css` inside your `static` directory. Then create a new file called `blog.css` inside this `css` directory. Ready?
@@ -67,79 +73,95 @@ But let's do at least a little. Maybe we could change the color of our header? T
67
73
68
74
In your `static/css/blog.css` file you should add the following code:
69
75
70
-
h1 a {
71
-
color: #FCA205;
72
-
}
76
+
```css
77
+
h1a {
78
+
color: #FCA205;
79
+
}
80
+
```
73
81
74
82
`h1 a` is a CSS Selector. This means we're applying our styles to any `a` element inside of an `h1` element (e.g. when we have in code something like: `<h1><a href="">link</a></h1>`). In this case, we're telling it to change its color to `#FCA205`, which is orange. Of course, you can put your own color here!
75
83
76
84
In a CSS file we determine styles for elements in the HTML file. The elements are identified by the element name (i.e. `a`, `h1`, `body`), the attribute `class` or the attribute `id`. Class and id are names you give the element by yourself. Classes define groups of elements, and ids point to specific elements. For example, the following tag may be identified by CSS using the tag name `a`, the class `external_link`, or the id `link_to_wiki_page`:
Read about [CSS Selectors in w3schools](http://www.w3schools.com/cssref/css_selectors.asp).
81
91
82
92
Then, we need to also tell our HTML template that we added some CSS. Open the `blog/templates/blog/post_list.html` file and add this line at the very beginning of it:
83
93
84
-
{% load staticfiles %}
94
+
```html
95
+
{% load staticfiles %}
96
+
```
85
97
86
98
We're just loading static files here :). Then, between the `<head>` and `</head>`, after the links to the Bootstrap CSS files (the browser reads the files in the order they're given, so code in our file may override code in Bootstrap files), add this line:
This line will import a font called *Lobster* from Google Fonts (https://www.google.com/fonts).
136
156
137
157
Now add the line `font-family: 'Lobster';` in the CSS file `static/css/blog.css` inside the `h1 a` declaration block (the code between the braces `{` and `}`) and refresh the page:
138
158
139
-
h1 a {
140
-
color: #FCA205;
141
-
font-family: 'Lobster';
142
-
}
159
+
```css
160
+
h1a {
161
+
color: #FCA205;
162
+
font-family: 'Lobster';
163
+
}
164
+
```
143
165
144
166
145
167
@@ -150,95 +172,105 @@ As mentioned above, CSS has a concept of classes, which basically allows you to
150
172
151
173
Go ahead and name some parts of the HTML code. Add a class called `page-header` to your `div` that contains your header, like this:
152
174
153
-
<div class="page-header">
154
-
<h1><a href="/">Django Girls Blog</a></h1>
155
-
</div>
175
+
```html
176
+
<divclass="page-header">
177
+
<h1><ahref="/">Django Girls Blog</a></h1>
178
+
</div>
179
+
```
156
180
157
181
And now add a class `post` to your `div` containing a blog post.
158
182
159
-
<div class="post">
160
-
<p>published: {{ post.published_date }}</p>
161
-
<h1><a href="">{{ post.title }}</a></h1>
162
-
<p>{{ post.text|linebreaks }}</p>
163
-
</div>
183
+
```html
184
+
<divclass="post">
185
+
<p>published: {{ post.published_date }}</p>
186
+
<h1><ahref="">{{ post.title }}</a></h1>
187
+
<p>{{ post.text|linebreaks }}</p>
188
+
</div>
189
+
```
164
190
165
191
We will now add declaration blocks to different selectors. Selectors starting with `.` relate to classes. There are many great tutorials and explanations about CSS on the Web to help you understand the following code. For now, just copy and paste it into your `djangogirls/static/css/blog.css` file:
Copy file name to clipboardExpand all lines: en/django_admin/README.md
+5-3Lines changed: 5 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,10 +4,12 @@ To add, edit and delete posts we've just modeled, we will use Django admin.
4
4
5
5
Let's open the `blog/admin.py` file and replace its content with this:
6
6
7
-
from django.contrib import admin
8
-
from .models import Post
7
+
```python
8
+
from django.contrib import admin
9
+
from .models import Post
9
10
10
-
admin.site.register(Post)
11
+
admin.site.register(Post)
12
+
```
11
13
12
14
As you can see, we import (include) the Post model defined in the previous chapter. To make our model visible on the admin page, we need to register the model with `admin.site.register(Post)`.
0 commit comments