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. So go ahead, open your website and refresh the page. Here it is!
@@ -68,7 +67,7 @@ djangogirls
68
67
69
68
Time to write some CSS! Open up the `blog/static/css/blog.css` file in your code editor.
70
69
71
-
We won't be going too deep into customizing and learning about CSS here. There is a recommendation for a free CSS course at the end of this page if you would like to learn more.
70
+
We won't be going too deep into customizing and learning about CSS here. There is a recommendation for a free CSS course at the end of this page if you would like to learn more.
72
71
73
72
But let's do at least a little. Maybe we could change the color of our headers?
74
73
To understand colors, computers use special codes. These codes start with `#` followed by 6 letters (A–F) and numbers (0–9). For example, the code for blue is `#0000FF`. You can find the color codes for many colors here: http://www.colorpicker.com/. You may also use [predefined colors](http://www.w3schools.com/colors/colors_names.asp), such as `red` and `green`.
@@ -78,7 +77,7 @@ In your `blog/static/css/blog.css` file you should add the following code:
As mentioned above, CSS has a concept of classes. These allow you to name a part of the HTML code and apply styles only to this part, without affecting other parts. This can be super helpful! Maybe you have two divs that are doing something different (like your header and your post). A class can help you make them look different.
184
183
185
-
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:
184
+
Go ahead and name some parts of the HTML code. Replace the `header` that contains your header with the following:
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 that can help you understand the following code. For now, copy and paste it into your `blog/static/css/blog.css` file:
@@ -209,20 +210,23 @@ We will now add declaration blocks to different selectors. Selectors starting wi
@@ -300,4 +325,3 @@ Don't be afraid to tinker with this CSS a little bit and try to change some thin
300
325
We really recommend taking the free online courses "Basic HTML & HTML5" and "Basic CSS" on [freeCodeCamp](https://learn.freecodecamp.org/). They can help you learn all about making your websites prettier with HTML and CSS.
Copy file name to clipboardExpand all lines: en/django_forms/README.md
+56-26Lines changed: 56 additions & 26 deletions
Original file line number
Diff line number
Diff line change
@@ -44,41 +44,53 @@ So once again we will create a link to the page, a URL, a view and a template.
44
44
45
45
## Link to a page with the form
46
46
47
-
It's time to open `blog/templates/blog/base.html` in the code editor. In the `div` named `page-header`, we will add a link:
47
+
Before we add the link, we need some icons to use as buttons for the link. For this tutorial, download [file-earmark-plus.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) and save it in the folder `blog/templates/blog/icons/`
48
+
49
+
> Note: To download the SVG image, open the context menu on the link (usually by right-clicking on it) and select "Save link as". In the dialog asking you where to save the file, navigate to the `djangogirls` directory of your Django project, and within that to subdirectory `blog/templates/blog/icons/`, and save the file there.
50
+
51
+
It's time to open `blog/templates/blog/base.html` in the code editor. Now we can use this icon file inside the base template as follow. In the `div` tag inside `header` section, we will add a link before `h1` tag:
Note that we want to call our new view `post_new`. The class `"glyphicon glyphicon-plus"` is provided by the bootstrap theme we are using, and will display a plus sign for us.
60
+
Note that we want to call our new view `post_new`. The [SVG icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) is provided by the [Bootstrap Icons](https://icons.getbootstrap.com/) and it will display a page icon with plus sign. We use a Django template directive called `include`. This will inject the file's content into the Django template. The web browser knows how to handle this type of content without any further processing.
61
+
62
+
> You can download all the Bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip). Unzip the file and copy all the SVG image files into a new folder inside `blog/templates/blog/` called `icons`. That way you can access an icon like `pencil-fill.svg` using the file path `blog/templates/blog/icons/pencil-fill.svg`
55
63
56
-
After adding the line, your HTML file should now look like this:
64
+
After editing the line, your HTML file should now look like this:
@@ -98,7 +110,7 @@ And the final code will look like this:
98
110
99
111
{% filename %}blog/urls.py{% endfilename %}
100
112
```python
101
-
from django.urls import path
113
+
from django.urls import path
102
114
from . import views
103
115
104
116
urlpatterns = [
@@ -271,11 +283,17 @@ Django is taking care to validate that all the fields in our form are correct. I
271
283
272
284
Now we know how to add a new post. But what if we want to edit an existing one? This is very similar to what we just did. Let's create some important things quickly. (If you don't understand something, you should ask your coach or look at the previous chapters, since we covered all these steps already.)
273
285
274
-
Open `blog/templates/blog/post_detail.html` in the code editor and add the line
286
+
First, let's save the icon which represents the edit button. Download [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) and save it to the location `blog/templates/blog/icons/`.
287
+
288
+
Open `blog/templates/blog/post_detail.html` in the code editor and add the following code inside `article` tag:
@@ -358,19 +380,23 @@ If you need more information about Django forms, you should read the documentati
358
380
359
381
Being able to create new posts by clicking a link is awesome! But right now, anyone who visits your site will be able to make a new blog post, and that's probably not something you want. Let's make it so the button shows up for you but not for anyone else.
360
382
361
-
Open `blog/templates/blog/base.html` in the code editor, find our `page-header``div` and the anchor tag you put in there earlier. It should look like this:
383
+
Open `blog/templates/blog/base.html` in the code editor, find our `div` inside `header` and the anchor tag you put in there earlier. It should look like this:
We're going to add another `{% if %}` tag to this, which will make the link show up only for users who are logged into the admin. Right now, that's just you! Change the `<a>` tag to look like this:
0 commit comments