How to create a simple Drupal 7 theme from scratch Part Two

       So in the last iteration of theming Drupal 7 from scratch with a bare bones template we covered the page.tpl.php, the base.info file and a blank basesite.css file that did absolutely nothing for us.


    As you can tell the base site is very basic with no color other than the admin panel and everything is stacked on top of each other. We are going to concentrate on adding CSS to format the site in the way that we want it at a basic (still plain) level.

       I have my basesite folder setup with these files. The files I have added since the last tutorial were the logo.png and the screenshot.png. I was initially using JPEG images for my logo and screenshot but the images would not load on the site until I changed the file over to PNG. I prefer the png format overall so this works better for me but I do not know why the JPG images were not loading.

       The logo.png is the logo that will appear on your site and is required to be named logo or the php will not grab the image. Im sure that we could change the $logo to whatever else but logo is a definitive term that will help to keep larger sites organized. The same goes with the screenshot.png, this has to be labled screenshot or the admin console will not pull it up.

       This is the updated page.tpl.php file to wrap the components into div tags to organize the overall layout of the site. This updated file does nothing until the basesite.css file is updated. 
   

</br> <div class = "header"> <!-- the logo image has to be a PNG or it will not display on the site. --> <?php if ($logo): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo " <!-- this references the front or home page if you click on the header logo --> <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /> <!-- this is the PHP path to the logo --> </a> <?php endif; ?> </div> <div> <div class="leftsidebar"> <?php print render($page['sidebar_first']); ?> </div> <div class="contentstuff"> <?php print render($page['content']); ?> </div> </div> <div class="footer"> <?php if ($page['footer']): ?> <?php print render($page['footer']); ?> <?php endif; ?> </div>

       The basesite.css file hase evolved quite a bit. From the first site to get the content organized in a proper format that is easier on the eyes and more user intuitive.

      I like to organize my Css files the best I can as I am coding them to make sure that they flow well with the site and there are cases when the previous set of Css will overwrite the new Css code if you do not use an Important flag.

       The .header aligns the image to the center of the monitor and adds a 15 pixel border to the bottom of the header region.  Its not much Css but its effective.

.header { border-bottom: 15px solid ; text-align: center; }

The .contentstuff is for the main content and is setup as a float so that it will sit next to the .left sidebar. I addedd padding to get the main content to space it away from the footer region.

.contentstuff { display: inline; float: left; border:none; padding-bottom: 45px; }

       The .leftsidebar if for the sidebar that holds the navigation pane, login , and search. This region is setup under your  structure and then blocks. This is setup as a float so that it will sit to the far left. I addedd padding to get the sidebar  to space away from the header region.

.leftsidebar { width: 15%; overflow: hidden; display: inline; float: left; padding-top: 15px; }

       For the .footer I created a box to encapsulate the information that I have stored in the footer area like Who's online and what not. One thing that is really important for this region is the "clear: both;" that I added on the first line. This clears the floats from the leftsidbar and the contentstuff so that it appears in the bottom of the screen as intended.

.footer { clear: both; border-left: 15px solid; border-right: 15px solid; border-bottom: 15px solid; border-top: 15px solid; width: 15%; }

The entire Css file is below:

.footer { @charset "utf-8"; /* basetemplate CSS File */ .header { border-bottom: 15px solid ; text-align: center; } .contentstuff { display: inline; float: left; border:none; padding-bottom: 45px; } .leftsidebar { width: 15%; overflow: hidden; display: inline; float: left; padding-top: 15px; } .footer { clear: both; border-left: 15px solid; border-right: 15px solid; border-bottom: 15px solid; border-top: 15px solid; width: 15%; }

       The site now looks like the following image:

       The site is still basic but it is starting to take shape. I will try to get the next iteration of this tutorial out this upcoming week. Maybe we will add a repeating background, link click colors and things like that. Thanks for reading.

How to create a simple Drupal 7 theme from scratch

       So I have been working on a Drupal 7 website and decided that I wanted to build one from scratch without the use of a template to meet the need that I have. I have done a bit of HTML coding but PHP is a new game all together for me. It has been a learning experience that I have benefited from.

       I wanted to show other on how to configure a Drupal 7 website with mainly CSS and a little bit of PHP to format the site like you need to. I will break this up into multiple parts so that it is easier to read and follow along with. 

       For this tutorial the site needs to be placed into the "F:\wamp\www\drupal\themes" of your web server. I am using WAMP in this case but you could use Acquia, XAMMP, or whatever else you are comfortable with. 

      The .info file is what tells Drupal that you are using a custom theme and what features the theme will have. You will notice that the name is the same as the info file. This naming needs to match what you named the folder for your site. In this case I named my site basesite.

     You do not have to put a version but I did for fun, but you do have to put the core version. If you are making a site for previous releases of Drupal then this needs to go into the core line. 

     The Stylesheets line lets you specify what pages the style sheet can affect and what folder location the style sheet is located in. I just put mine in the same directory since this is going to be a test site for these blog post. 

     Regions are the areas where your features such as a header, search, login, main content, features or anything else will be places. From what I understand if you do not specify these options then it will default to the Drupal core defaults. 

basesite.info

name = basesite description = barebones site with no features version = VERSION 1 core = 7.x stylesheets[all][] = basesite.css regions[header] = Header regions[help] = Help regions[page_top] = Page top regions[page_bottom] = Page bottom regions[content] = Content regions[sidebar_first] = Sidebar first regions[sidebar_second] = Sidebar second regions[footer] = Footer

       The page.tpl.php file is kind of like your general HTML file with all of your markup, but instead of adding your general text, pictures, and content you will place the php required for Drupal to manage your content and images as specified in your configuration.

       The only PHP that i have in this page is the content, sidebar_first, and the footer. As noted in our info file we can add more regions but I wanted to keep this simple.

page.tpl.php

<div id="header"> </div> <div id="wrapper"> <?php print render($page['content']); ?> <?php if ($page['sidebar_first']): ?> <div id="sidebar"> <?php print render($page['sidebar_first']); ?> </div> <?php endif; ?> </div> <div id="footer"> <?php if ($page['footer']): ?> <?php print render($page['footer']); ?> <?php endif; ?> </div>

       I know the CSS file is blank but I am wanting to display a simplified version of some of the fantastic Drupal sites that we have seen out there. We will add more to this file later on in later blog post. 

CSS file

\* basetemplate CSS File */

       After you save these files to your themes folder and name them accordingly you should get the following version of a simplified site.

       This base template is a great template for one to start out with to play with different techniques prior to adding the content required for a fully functional site. 

       I had previous content from another site that I was working on and this is just test content from Microsoft about user accounts in Server 2008 R2. 

       Another thing that should be noted is that there is the options to "Demonstrate block region" to validate your regions are setup the way that they should be. You can access this in the admin menu under Structure and then click on blocks. You will notice that in the above screen shot I have no Footer, this is due to me not setting a footer for this page. It shows us the layout between the page.tpl.php and css files. Its a useful tool if you are having issues placing your regions. 

Getting Drupal 7.x to work with Dreamweaver

I was looking into getting a Drupal site to work with Dreamweaver CS 5.5 and found a few tutorials to get my site to load into Dreamweaver but could never get the Live View to display properly for some reason or I would get a page can not be displayed error message. I set up the server multiple times and found that even with full permissions in Apache it still made no difference.

I will cover the way I was able to get my Drupal site to work with Dreamweaver.

1. Click Site.

2. Click New Site... or Manage Sites... if you already have a site setup

3. Name your site in the Site Name field.

4. Select your Local Site Folder. (I was able to get mine to work by selecting the root folder of my theme)

5. Click Server.

6. Click the + to add a new server.

7. Name the Server.

8. In the Connect using drop down select Local/Network

9. Select the Drupal directory for the server folder.

10. Use the local host address for the Web URL + the Drupal folder.

11. Click Advanced.

12. Under Testing Server select PHP MySQL for the Server Model.

13. Click Save.

14. In the Site Setup for window take the check mark out of Remote and put a check mark in Testing.

15. Click Save.

After setting up the server You will find the new site in your FILES list on the lower right of the Dreamweaver window. Once selecting your page.tpl.php file you may see a Dynamically-related files message.

Click discover and you should not get any messages. If you do get an error message verify the configuration of your local web server. 

Another thing to make note is if you do not have your services running on the web server then you will get an unknown error message when trying to connect. 

If everything connects just fine then click the Live View button. More than likely you will get a Forbidden page error message stating that you do not have access to your page.tpl.php page. You are not trying to access that page and are really trying to access the Drupal site. 

In the Dreamweaver address bar take out the "page.tpl.php" in the address and press enter. If everything goes right you should be able to see your Drupal site in Dreamweaver using the Live View mode. 

This does not automate Drupal theming but it will help in getting everything setup in the way that you want it to be setup faster (my opinion) than if you were using a text editor. Notepad++ is also an excellent tool for editing Drupal themes if you do not have access to Dreamweaver.