Deciphering CSS files
Video: Deciphering CSS filesOne of the most effective ways you can customize a Drupal site to make it distinctively yours without installing a new theme is to tweak the theme CSS. However, a theme CSS or Cascading Style Sheets are typically contained in several files in a complex hierarchy that can be hard to understand. We will show you how some of your options for changing themes appearance through CSS are done through the Firefox plug-in tool, Web Developer, which we downloaded previously. To make these changes we are going to go into Tools, Web Developer, CSS and Edit CSS. This is taking CSS directly from the website that we are looking at and the changes that we make would not be permanent until we save them by clicking on this disc icon.
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
Deciphering CSS files
One of the most effective ways you can customize a Drupal site to make it distinctively yours without installing a new theme is to tweak the theme CSS. However, a theme CSS or Cascading Style Sheets are typically contained in several files in a complex hierarchy that can be hard to understand. We will show you how some of your options for changing themes appearance through CSS are done through the Firefox plug-in tool, Web Developer, which we downloaded previously. To make these changes we are going to go into Tools, Web Developer, CSS and Edit CSS. This is taking CSS directly from the website that we are looking at and the changes that we make would not be permanent until we save them by clicking on this disc icon.
In addition if we decide we want to go back to the original appearance we can do so by clicking on this Reset All button. Finally the page will update automatically after a few seconds, but if it is not or would like it to do more quickly we can click on this little icon to apply them immediately. As you look at the Web Developer interface you will notice all of the CSS files that are affecting this page are listed in tabs. The main one is style.css. Whenever you revert this using this icon it will switch back to aggregator and make sure go back to style.css so that you can edit the correct file.
Now let us take a look at the file itself. The main part of any page is the Body tag, which you see here at the top of the CSS file. Things that you change within the Body tag will change pretty much the entire page. For example, let us change this font size from 76 to 90. Wait a second and you will see that all of the text on the page has changed. That is because the Body tag drools over most everything else on the page. Changing it will have some very severe repercussions. So let us change that back. Again I am hitting Command+Z or Ctrl+ Z on the Windows machine. Going down a little further let's be a little bit more specific. We are going to just change these links. You will notice right now there are certain colors and when you hover over them they become underlined. That is done through CSS. We are going to scroll down and here we have the A tag, one called a: link, one called a: visited and one called a: hover.
The a: hover one, if you look at the CSS, you can see that that is where the underline is coming from. Let us change it to blink. Now let us see what happens. We have given it a second to apply, we go up over a link and you can see when you hover over a link now it blinks. That is ugly; I am going to undo that by hitting Command+Z. Continuing further down the page you can see how CSS affects the way that blogs are actually laid out on the page. We will scroll down until we get to this Page layout blocks/IDs. Let us scroll a little bit further and see what we can change. There we go header background color. Let us see what that changes. We will change it to something very different. Let's say 333. And we can see immediately it changes this top area.
That is good to know because the color and dimensions of various layout parts of the page can have a big effect and differentiate your site from the original theme, but we are going to just change it back for now. I mentioned something about the dimensions of blocks and in fact that is something that CSS also controls. See this padding; let us take a look at what would happen if we were to change one of these to let us say, 6em instead of 1.2. Take a good close look and I will you give you a hint. This has to do with the Primary, Navigation links up here. We will change it to 6 and you see it changes the padding around those links. Of course we did not change it into anything more attractive so we will change it back. Finally I should mention something at the very bottom of the CSS sheet. We will scroll down. We have these Module specific styles. That is because Drupal comes with several modules built-in, as you know for example the Feed aggregator and the Blog module.
As a result everything theme designer can count on them being there and sometimes they will add there own styles so that those modules will match the rest of the site. However they can be over written as you can see with these other modules specific style sheets such as poll and aggregator.css. Let us say that we have made some of these changes and in fact let us go back to our style CSS scroll all the way up to the top and let us actually change our font size, let us say that we do not like it being quite that big through out the entire site. I am going to change the font size from 76 to let us say 70. It is a sudden change, but it allows you to put more content on your site.
Now I am going to save that out. Now here is something important. Do not save it to the same place as the original style.css file unless you have already backed it up. If you do so of course you are going to loose your original backup and I recommend that you backup your CSS file. So I am going to save it to the desktop in this case and then I am going to apply it by dragging it by into my Drupal folder. Click on the Finder, hide everything else. If you are working with a downloaded theme you probably put it inside of sites and then either in all or default.
I tend to put them in default and themes right here. In this case we are working with a theme that came by default with Drupal, so let us go back to our Drupal folder and just go into themes folder. Remember the ones by default are at the top-level themes folder. The ones you download should go into a subdirectory of your sites folder. Open up themes, open up our theme, which is bluemarine. I am going to make a backup remember. Call this one style-BACKUP. Then I will just drag this new style CSS in and let us see if that font size change occurred.
We are going to switch back to Firefox, we can this up if we like so we can see the whole page and now reload by clicking on the reload icon here. As we can see our font change took, but we are going to revert it back by simply going back to the Finder, Hide Others throwing away our new style sheet either by dragging it to the Trash in the Mac or right click delete in the PC. Change this back to style.css then go back to Firefox, reload one more time and we are back to normal. We have only touched a little bit of CSS. If you want to learn more Lynda.com offers much more information on both its technical side and on using CSS for design. Visit the Lynda.com site for several courses to continue your CSS studies. Besides the Wed Developer plug-in there are many other ways to work on CSS files.
Once you are good enough at understanding them you can use a plain text editor or you can edit them graphically in a general web developing tool such a Dreamweaver or Adobe GoLive or you can download a specialized tool such as Coda for the Mac. However you do it, until you become you CSS expert remember to respect its power and complexity. Keep your changes small and controlled and always make a backup first.
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.