Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Drupal makes extensive use of Cascading Style Sheets or CSS to control such matters as type style, bulleted list, graphic placement and column width. We will show how a small style sheet change can have a big affect on your site's appearance, because CSS is so powerful we recommend you tread lightly when playing when playing with CSS files and always keep a backup copy so you can return to where you started if you make a mistake. CSS is a big subject and lynda.com offers much more information on both its technical side and using CSS for design. Visit the lynda.com site for several courses to continue your CSS studies. For this video we are going to be using the Firefox browser because we are going to be looking at a tool that only installs into Firefox and isn't yet available for safari at the time that we are making this video.
The tool that we are going to be using is called Web Developer and you can get it chrispederick.com/work/web- developer. Once there, you would click to download and install it as you would any other add-on for Firefox. There is one other tool that is similar to Web Developer called Firebug, which also runs on Firefox. We won't be looking at it, but if you would like to check it out, it's at getfirebug.com. Okay, so let's take a look at our theme. We will close out this window and go back to our drupal folder. This will be in the same place as where you installed Drupal in the first place. For us, that's in our sites folder and we already have it open. The theme that we are going to be working on is the Bluemarine theme, which was installed with Drupal. So it will be in the themes folder as opposed to in one of the sites folders. We will open it up and open up bluemarine.
The actual file we will be looking at is called style.css. In Drupal style.css is the main CSS file. However, it may call many others and you will see that when we look at this file in Web Developer. In this case style-rtl means right to left. Drupal supports many languages including those that read from right to left and often there will be separate style sheet for those languages. Generally speaking they will be labeled -rtl. Since we are going to be playing around with this style, we want to back it up. I am going to highlight it and press Command+C or Ctrl+C on the PC and then just paste it on our Desktop by hitting Command+V or Ctrl+V.
Great! Now we can play around with this style sheet. To do so we are going to switch back to our interface here and turn on Web Developer by going up to Tools, Web Developer and CSS. There are two particular options here that I have found very useful. The first is View Style Information. With that turned on, when you point at any part of your website, you will see that it highlights the structure of the website and above in this little bar it tells you a little bit about the CSS that affects that part of the website.
When something is highlighted and you click, Firefox opens a little window in the bottom, which is resizable. Inside that window, you will see information about the CSS that controls the part that you clicked. That's very helpful in figuring out exactly what you want to change, in order to change a specific part of your site. But there is another tool in Web Developer that will help you even more. Let's close this out first, go back up to Web Developer toolbar, turn off View Style Information and go down instead to Edit CSS. Again that opens up a little window at the bottom, which lists all of the CSS files that affect this page.
Now you remember I mentioned style.css, but there are all of these other CSS files that helped to build this page. Some of them are called in by modules. For example, the forum module calls in forum.css and the styles that are listed in here only affect the forums. Going back to style.css, I am going to make this window just a little bit bigger so we can see some more. Here we can actually change specific CSS on this side. Now we are not making permanent changes. These are just temporary changes to show us what's going to happen if we make changes permanently.
So for example, let's change background color. Instead of #fff, we will change it to #ooo. Wait a second and you will see that this is the part that would be changed. Another way that you can bring up that information quickly is let's say that it is not refreshing quickly enough for your taste. Type it in and then click on this little button here Apply and that will very quickly bring it up. To return your CSS files to normal, just click on this Reset All. Finally, once you have made the changes that you like, you can go up to this disk icon and say Save. Now make sure that you have the correct style sheet selected, it will tell you up here the name of the style sheet you are editing.
Sometimes Web Developer will switch from tab to tab, especially when you do a Reset All. CSS switch to Aggregator, you will have to go back to style.css. We are going to save this style.css file as style-NEW.css, just so that we can keep it distinct from the old one and then click on Save. We will go back to our Desktop and hide everything else. Now let's say we want to apply this new style into our actual site. Well, to replace the style sheet, we would throw away the one that's in our theme folder. Remember, we did save a backup.
I will drag that to the Trash. Of course on the PC you would use right-click and Delete. Drag this into the folder, rename it as the old one, style.css and there. We have been able to play around with style sheets and see exactly what in the CSS file affects the page and then installed a new style sheet. This video only touched on the very tip of the iceberg that is CSS, by changing one small attribute and in fact we have changed it back. So by replacing the file we didn't make any changes. But the truth is style sheets can affect Drupal theme appears much more profoundly than just about any other facet of Drupal development. For a Drupal webmaster, time learning CSS is time well spent.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.