In this tutorial we create a simple "To Do" list with the help of Flag module.
SUMMARY
1. Get necessary modules and enable them
2. Add the Todo content type
3. Create the flag
4. Add Todos view block
5. Create some content and assign a block to a region
6. Style it with CSS
1. Get the necessary files
Download Tutorial files
extract module directories in
sites/all/modules
OR
download newer versions from here:
Views module : http://drupal.org/project/views
Chaos tool suite : http://drupal.org/project/ctools (For Views UI)
Flag module : http://drupal.org/project/flag
extract them in
sites/all/modules
and enable these components:
2. Add the Todo content type
Go to
/#overlay=admin/structure/types/add
Name your content type
Hit Save content type
3. Create the flag
Go to
/#overlay=admin/structure/flags/add
Add title, messages and select content type
Hit Submit
4. Add Todos view block
/#overlay=admin/structure/views/add
Hit Continue & edit
Add a RELATIONSHIP
Add a FIELD
I also changed the Display name, Title and Block name
SAVE the VIEW
5. Create some content and assign a block to a region
/#overlay=node/add/todo
Put your Todos view block in the Sidebar first
And you have similar to this
6. Style it with CSS
First change the FORMAT to Table (default settings) in
/#overlay=admin/structure/views/view/todos
Copy flagged.png and not-flagged.png in
themes/bartik/images
Edit
themes/bartik/css/style.css
Paste these lines in it
/* OWN */ .view-todos .flag-throbber { display:none;} /* Hide the loading animation */ .view-todos .unflag-action { background: url(../images/flagged.png) no-repeat top; } .view-todos .flag-action { background: url(../images/not-flagged.png) no-repeat top; } .view-todos .unflag-action, .view-todos .flag-action { float: left; margin: 0 0 0 7px; width: 25px; height: 25px; text-indent: -999px; /* Hide the text */ overflow: hidden; outline: none; /* Hide outlines around link when clicked */ }
And there you have it:
You might also be interested in the myTinyTodo module.
