Layer 4 copy
doc
tut
blog
forum
doc
tut
blog
forum
home

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


 

Please wait - we are now uploading and converting your file...

 

Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

An Expanding Theme Example for Drupal

A lot of people have been asking how to make the borders or the design of the page expand along with the Drupal content when designing a Drupal Theme. There's an old example for regular HTML/CSS pages in the video tutorials (http://psd2cssonline.com/node/64), but I decided to make another example that is Drupal specific as well.

Here is the example site:
http://drupalexpand.psd2cssonline.com/

Here is the PSD file used to make that theme:
http://psd2cssonline.com/tutorials/drupal/DrupalGrow.psd.

I converted it to the code for a working Drupal Theme by uploading it to psd2css Online. Then, to make the 'expanding' part work, I edited the psd2css.css file that was generated. I removed the CSS 'top' attribute for the bottom_drupal layer, removed the CSS 'height' attribute for the mid_bkgnd_relative layer, and changed the CSS 'height' attribute for the content_drupal_relative layer to a 'min-height' attribute. I also removed the 'overflow: auto;' line for the content_drupal layer. That's it. I just installed the theme into a Acquia Drupal install and it worked!

In fact in that example, not only does the theme expand with the content, but a custom Drupal Region was added to the bottom section by just drawing it into the design in Photoshop. A standard Drupal search module was added to the Region.

A tip: While experimenting and iterating over different things in your design, converting, and installing to Drupal, but sure to hit your refresh button often. CSS can get cached in your browser (which is usally a good thing) but can make things look funny when you are changing things often. Also, while developing your theme make sure you have your 'caching mode' set to disabled in the Admin -> Performance page for the same reason.

copyright (c) 2009 psd2css Online, Inc.

 

 

User login

Become a Fan of our Facebook Page

Need help or have a question?
support@psd2cssonline.com

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content