Changing your theme's graphics
Video: Changing your theme's graphicsDrupal's web based interface lets you change a few basic bits of your site's appearance through the theme administration page. But sometimes, you want to keep a theme's basic layout and typography, but just change a few of the graphics it came with. I found that's often the case when I download third-party themes. Note that you'll need right level access to your server folder where the Drupal installation is location. If you don't have that already, talk with your system administrator before going forward. The first thing that we're going to do is we're going to switch to another theme. We'll go up to Administer and Themes and the one we'll select is called Pushbutton.
Viewers: in countries Watching now:
Drupal is a free, open-source content management system (CMS) for a variety of platforms. It has a robust user community and easy-to-use administration features. Drupal Essential Training covers all the important aspects of installing, configuring, customizing, and maintaining a Drupal-powered website. Instructor Tom Geller explores blogs, discussion forums, member profiles, and other features while demonstrating the steps required to make Drupal perform. He also teaches fundamental concepts and skills along the way, including installation, backups, and updates; security and permissions; flexible page layouts and CSS; menu navigation; and performance monitoring and disaster recovery. He also discusses how to select and install the community-supported modules that further expand Drupal's capabilities, and gives experienced PHP programmers tips on customizing page templates. Example files accompany the course.
- Understanding the inner workings of Drupal
- Creating stories, pages, blogs, forums, and polls
- Managing users and comments
- Setting and customizing themes
- Exchanging content via RSS
- Stopping comment spam with a CAPTCHA
- Launching a site and joining the Drupal community
Changing your theme's graphics
Drupal's web based interface lets you change a few basic bits of your site's appearance through the theme administration page. But sometimes, you want to keep a theme's basic layout and typography, but just change a few of the graphics it came with. I found that's often the case when I download third-party themes. Note that you'll need right level access to your server folder where the Drupal installation is location. If you don't have that already, talk with your system administrator before going forward. The first thing that we're going to do is we're going to switch to another theme. We'll go up to Administer and Themes and the one we'll select is called Pushbutton.
We're going to use this one because I happened to know that it contains a lot of additional graphics including some that we can change. Go to Save configuration and there we are, this is the Pushbutton theme. You see at the beginning of every block, we have this little arrow up here and I want to replace that with something a little bit more colorful. So, that's what we're going to do. To do so, we have to go to the Drupal installation directory. I go over here, click on Finder and go down to hide others, so I can see my desktop. I already have my Drupal folder open here. For me, that's in the Sites directory, but for you, it will be wherever you first install Drupal. I also have opened the folder that contains the Exercise Files. This is the graphic that we're going to use in place of the one I just pointed out.
Let's go back to our Drupal installation directory and find all of the files that make up that theme. You'll find them in themes, Pushbutton. Then to make this a little bit easier to figure out, we'll sort by type of file, right up here. Make the window a little larger, so we can see everything. Since it's sorted by type of file, all of the cascading Style Sheets for example are in one place, all of the graphics are in one place and all of the PHP files that describe pages within this theme are in one place.
Looking around, I just graphically see, ah! That looks like the one that I want. Let's see if there's any other that looks like that. No, that appears to be the one I want. We could just do this by trial and error, by dragging this into its place. But I'm going to show you another way to figure out, if that's actually the graphic that you want. To do so, we go back to our Drupal administration. On the Mac, I'm doing that by hitting Command+Tab and going back to the web browser. We're going to look at this page in its source, we know that this graphic is right next to the word Admin which is right above the phrase My Account. We go up to View and View Source, wherever it is on your browser and then I'll just quickly do a find by hitting Command+F or Ctrl+F and search for that phrase, My Accounts.
Aha! Now we see here that admin is between some H3 tags, I'm going to guess that that's actually the tag that controls whether or not that little graphic appears. If you're good with CSS, you may want to dig further as it happens, I've researched this one already and I know that that's the place. We'll close that out and then go back to our Finder. Hide everything else and take a look at the CSS files that make up this theme. Scroll down until we find it, there they are at the bottom. In every theme, you'll have one main CSS file called style.css. In this particular theme, you also have style-rtl. That means right to left, for when people are using an alphabet that goes from right to left such as Hebrew. We'll open this up in a Text Editor and now I'm going to search for that H3 tag and see if that's where the graphic actually is.
I hit Command or Ctrl+F, type in H3 and find the next one. Well, we don't see any graphic showing here, so let's find the one after that. We don't see any graphics there, so we keep going. Aha ! Here we have a graphic showing up, icon-block.png. Is that the same one we identified before? Scrolling up to see it, yes it is. We throw that away either by dragging it to the trash or on the PC, right clicking and choosing Delete.
We then go down to the graphic we have and give it the name that we need, in this case icon-block.png. Very good, now let's go back to our site and see if that change actually took place. All we need to do is reload the page and Walla! We've changed the little graphic. The same is true for the other graphics on the site. It may take a little bit of detective work to figure out what the graphics are, but once you can do that, you can change pretty much anything you see in any theme on Drupal.
Before we finish, I'm going to go back and change our theme back to Bluemarine. We save the configuration and we're back where we started. The last step in the process is to play with the results until you like what you see. Ultimately, you might decide that you need a completely different base theme or a different configuration of the theme you have. But now you have all the tools that you need to change your theme and its graphics.
Find answers to the most frequently asked questions about Drupal 6 Essential Training .
Here are the FAQs that matched your search "" :
- Q: While following along to the installation instructions in the “Installing WAMP and Drupal on Windows” chapter in the Drupal Essential Training title, an error occurs when attempting to open the local host page. Nothing appears except for an error reading “WAMPSERVER server offline.” What is causing this?
- A: There is a known problem with some versions of WAMP that include a version of PHP (5.3) that some versions of Drupal is not compatible with. See http://tomgeller.com/content/tips-running-drupal-windows-using-wamp#comment-831 for more information.
If that is not causing the issue, reference the tips at http://tomgeller.com/content/tips-running-drupal-windows-using-wamp.
If you don't see the solution at either of those links, try using another AMP stack, such as XAMPP or the Acquia stack installer. See http://tomgeller.com/content/what-hells-wrong-drupal-wamp for discussion about these.
- Q: After installing XAMPP and running Drupal for the first time, the Administration menu does not appear. What is the reason for this?
- A: There are several possible problems. Here are some likely solutions. (These may also solve problems encountered with other AMP stacks.)
- Increase XAMPP's PHP allocation.
- Check to make sure all XAMPP's paths are correct and that permissions are correct. If the database information appears, but not Drupal's supporting files, and an included theme is being used, the supporting files will be in the /modules folder.
- Another solution is to not use WAMP or XAMPP. One option is to use Acquia's Drupal Stack Installer ("DAMP"), which can be found at http://www.acquia.com/downloads. However, that installs Acquia Drupal, which is a version of "normal" Drupal extended with additional modules. If only core Drupal is desired, see the instructions at http://acquia.com/blog/kieran/try-drupal-7-alpha-your-laptop-or-desktop. (The instructions are for Drupal 7, but will work for Drupal 6 as well.)
- Q: In the "Using the example files" movie, the method of importing information to the database is shown, using the backup in Chapter 10. When attempting to do this, the following error is shown: "No data was received to import. Either no file name was submitted, or the file size exceeded the maximum size permitted by your PHP configuration. See FAQ 1.16." The system is running the latest versions of Apache, PhP and MySQL, on Windows Vista. What could be causing the problem?
- A: This is probably caused because your AMP stack allocates too little memory to PHP.
That's especially true if you're using WAMP, which only gives PHP 2MB of memory, when it really needs at least 16MB.You'll see the issue if you go to the MySQL-controlling phpMyAdmin screen (probably at http://localhost/phpMyAdmin) and click "Import": The maximum file size allowed is 2,048K. That's only 2MB, and the databases for most Drupal sites are much larger than that. (The example site for Drupal Essential Training gets as big as 5MB.) The video "Installing WAMP and Drupal on Windows" shows (at around 3:30) where the php.ini file is, but here are some more-complete instructions to increase that memory limit.
- Click the WAMP icon in your system tray.
- Select "PHP". In the side menu, select "php.ini" to open a file containing PHP's configuration options.
- Search for the line, "upload_max_filesize = 2M".
- Change it to "upload_max_filesize = 32M" (or whatever you like).
- Save the file and restart WAMP. (Better yet, restart your computer entirely to be sure. I'm frankly not sure whether it makes a difference.)
- Now go back to that "Import" screen in phpMyAdmin: You should notice that the limit has changed.
- Q: I don't remember the default username and password used demonstrate Drupal.
- A: The default username used in the course is "admin"; the default password is "booth".
- Q: How can I change Drupal's administrative username and password?
- A: If for some reason the default exercise file username (admin) and password (booth) don't work, you can change them in the database itself using phpMyAdmin. (This technique is demonstrated in a video from Chapter 8, "Recovering from disasters".)
- Open your Drupal database with phpMyAdmin.
- Go to the "users" table. Click the Browse icon.
- For the row where uid = 1, click the Edit icon. (Note the value under the "Name" column: That's the administrator's username.)
- In the "pass" row, select "MD5" under the "Function" column
- In the same row, enter your new password under the "Value" column.
- At the bottom of the screen, click the "Go" button. You should now be able to log in with that username and new password.
- Q: In Windows Vista, the WAMP icon disappears from the system tray after a certain amount of time. How do I get it to reappear?
- A: To make the WAMP icon reappear (so that you can access localhost, phpmyadmin, php.ini, etc.), you have to activate the "start WAMP server" icon (from start menu, desktop or wherever). The system tray icon will reappear.
- Q: My .htaccess file disappeared. What caused this?
- A: A few times during the Drupal Essential Training video series, the instructor says to copy a Drupal installation by selecting all the files in the folder and then "dragging and dropping" them, either to a server or another location on your local computer. This is not the best way to do so, as the hidden file ".htaccess" will not be copied.
There are two ways to get around that problem:
Sorry for the error.
- When installing Drupal for the first time: Instead of copying files from the Drupal folder, move the entire folder to its target location and rename it. This is the easiest solution for those without experience with Unix.
- Use the command-line interface to copy the .htaccess file.
- Q: In the video, the instructor says the current version of Drupal is 6.3, but on the drupal.org site, the latest version is 6.17. Which is the newer version of Drupal?
- A: Drupal 6.17 is newer than version 6.3. For some reason, the the version numbers go 6.3, 6.4... 6.9, 6.10... 6.17. It’s counter-intuitive, but that’s the order.
- Q: My WAMP phpMyadmin will not allow me to upload the exercise files. It returns this message: "No data was received to import. Either no file name was submitted, or the file size exceeded the maximum size permitted by your PHP configuration. See FAQ 1.16." There was no previous database to drop, so what do I need to do to make this work?
- A: This is a common problem, caused not by Drupal, but by WAMP. WAMP only allows you to upload files of 2MB or smaller, which is much too small. The solution is detailed at http://tomgeller.com/cant-import-a-drupal-site-in-windows.
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.