Views is, without question, the most important Drupal module that is not in the core. It allows you to use a graphical interface to sort and organize all your nodes. It a powerful but also complex module and it can take a lot of time to learn all its features. This tutorial will only help you get your feet wet.
This particular tutorial was inspired by a site member who had the contact details of many employees stored as nodes. They wanted to make an alphabetical directory of all the staff members.
This tutorial will show you how to move a WordPress site from one folder to another.
In our example we're going to move the WP site from a folder called /blog/ and place it in the root of our site. That means that instead of accessing the site from http://example.com/blog/ we can now go directly to http://example.com.
One of our students was having problems finding why some images were visible on her site and others weren't. There's no one-size-fits-all answer to this problem, but here is one way to start closing in on the answer.
Then, with Firefox open, search Google for "webdeveloper toolbar".
Click "Add to Firefox" and you'll be able install the Web Developer toolbar. It will look like the image below.
Troubleshooting Your Site
The image above is a sample Drupal node. It is meant to have two images but one is missing. Here's how we'd start to look for the error:
Click "Images" and then "Find Broken Images". You'll see a result like the one below:
In this case the problem is obvious - I've written http://drul.org instead of http://drupal.org. However if your problem is more difficult, this technique will still tell you where Drupal is looking for the file and hopefully it will give you enough hints to fix the problem.
This tutorial will show you how to move your Drupal site from one server to another. This example uses two live servers, however the same principles also apply for moving to or from a local server.
Your Drupal Site
I'm going to move a straight-forward Drupal install to a new location. Each Drupal site has two halves - the files and the database. We're going to move one and then the other. Finally we'll make sure they can talk to each other.
Download the Files to Your Desktop
Step 1 is to download all of your Drupal site's files to your desktop.
Upload the Files to Your New Server
Step 2 is to upload them all your new server.
Export Your Old Database
For accesing the Drupal database I'm using phpMyAdmin which is commonly used by hosting companies and localhost setps. Find your site's database and click on "Export".
You'll need to export your database as SQL. I've chosen to also compress it using Gzip so that the process is a little quicker. Finally click Go.
Import to the New Database
I'm also using phpMyAdmin at the new site. Click "Import".
Choose the file that you just exported and click "Go" to import it into the new database.
Check to make sure that all the tables have imported sucessfully.
Finally we need to make sure that our files and database can talk to each other.
Login to your site's files and go to /sites/default/ and open settings.php. There are two things you'll need to change.
On line 92, chang the $db_url line to reflect the new database name, username and password.
On line 125, change $base_url to reflect the location of your new site.
That's it. Visit your Drupal site in it's new location and it should be live.
The purpose of this tutorial is to show you how to find and fix problems with your Drupal templates. We're going to focus on CSS issues such as fonts, colors and padding.
Download and Install Firefox
No question about it, Firefox is the best tool you can find for fixing problem on your website. Download from http://www.mozilla.com/firefox and install.
Install the Web Developer Plugin
Firefox is useful for the same reason as Joomla ... it has 1000s of amazing addons. The one we're going to use is called "Web Developer". Visit https://addons.mozilla.org/en-US/firefox/addon/60 in your Firefox browser and click "Add to Firefox".
Visit Your Joomla Site
We're going to use a default Drual install for this tutorial.
Diagonse Your Problem
In this example, our welcome message is too small. We'd like to have "Welcome to your new Drupal website!" in larger text.
Start the Webdeveloper toolbar
Click "CSS" in the toolbar and then click "View Style Information"
Click the item you want to edit
Hover your mouse over any part of the page and a red box will appear around it. Click on that area.
See the CSS Code at the bottom of the page
At the bottom of the page you'll get a lot of information about why that item on your site looks like it does. Here's what's controlling the "Welcome to the Frontpage" line:
1: The file with it's exact location
2: The exact line number inside that file
3: The code at that line number
In this case you can see that the font-size is 170%. We now know exactly which line in which file to edit.
This tutorial will show you how to find, install and activate free themes for your WordPress site.
Video on Installing WordPress Themes
Go to the Themes Area
In the admin area of your Wordpress website, click on the "Appearance" tab and then click on "Themes".
Go the the Install Themes Area
Click "Install Themes" in the top of the themes area.
Choose a Keyword or Set of Features
One way to search for a theme is to enter a keyword and click "Search".
Alternatively you can choose the features you'd like and click "Find Themes". Be careful not to check too many boxes or you'll end up with few results when you search.
Theme Search Results
WordPress will return all the themes that match your search. Click on either "Install" if you know you want the theme or click "Preview" to see what it will look like. We're going to click on "Install" next to "Desk Mess Mirrored"
Install the Theme
You'll see a screenshot of the theme and a few details. Click "Install Now" to complete the installation or "Cancel" to go back.
You'll hopefully get a message saying "Successfully installed the theme [THEME NAME]". Click on "Activate" to make the theme live.
You should now see your theme under the "Current Theme" heading. Voila! Your theme will now be live on your site.
Flutter is a Wordpress plugin that allows you to move beyond simple posts and pages in Wordpress. You can create different types of pages with different types of content. In this example we're going to emulate IMDB.com and list movies together with details about the movie.
Go to Plugins >> Add New and search for "Flutter". Click "Install" on the right hand side of the page, click "Install" again and then "Activate Plugin".
Browse to Flutter
Flutter adds two areas to your Wordpress admin screen. Under "Settings" you'll find "Flutter" which is the main configuration for the plugin. There will also be a whole new area called "Flutter" which is where you will add content.
Create a Write Panel
Click on "Write Panels" and then "Create Write Panel". You can choose different options for your panel. For example, to simplify things for your users you can unpublish custom fields, password, excerpt and other features that are confusing for beginners. Click "Finish" when you're done.
Add Fields to Your New Write Panel
If you'd like to you can group your fields into different areas. For Movies, you might have a group of fields called "People" and inside that fields called "Director", "Cinematographer" and so on. You might also have a group of fields called "Details" and inside that fields called "Release Date", "Genre" and so on. We're going to set that up and click on "Create a Group".
Name Your Group
Enter the Field Details
Flutter will offer you all sorts of options for the field. A "Textbox" is a simple one-line text field but you can also allow people to write in a larger area (Multiline textbox) multiple choices (Checkbox List, Radiobutton List) or even to upload files or images (useful in example to upload movies posters for example). Choose your options then click "Continue" and "Finish".
Add More Fields
See if you can go ahead and create extra fields and one extra group so that your "Movies" Write Panel looks like the image above.
Go and Start Writing
You'll see that Flutter has added a new option called "Movies" at the top left, underneath "Posts". Click "New" to start writing.
Enter Information Into Your Fields
The post page will look just as it does normally with just one exception ... your Flutter fields will show at the bottom of the page. View your post on the front of your site and your fields should be visible.
One of our students wanted to put a block position inside the red header bar. If you haven't done so already, download and install ShallowGrunge: http://drupal.org/project/shallowgrunge
The Current Blocks
Currently there is only a "content" and a "right sidebar" region.
Finding Where to Insert
I'm using the WebDeveloper toolbar for Firefox to help me identify the red header bar's area. I click on CSS >> View Style Information and then click on the area. The toolbar tells me that the area is called #menu
Opening the Files
In your site files, navigate to sites / all / themes / shallowgrunge / shallowgrunge.info and open that file
Add the Region Name
This file contains all the information Drupal needs to know about the theme. Now we're going to tell it about our new region. Currently only two regions are defined in this file. You'll need to add another using this line: regions[header] = Header
The file that controls the layout of our theme is page.tpl.php so let's open that up.
Add the Region Code
We scroll down in the file until we find the div called "menu" and we can insert our block code into there. The syntax is:
Check Your New Region
Check back in Administer >> Site building >> Blocks and your new "header" region should show.