By oscarwang on

Hello,

I've decided to create my own theme.

I threw together a really good layout in Photoshop.

Now, I already sliced the places that I want to edit as well as images that will change and saved it as an HTML.

I opened the file in Dreamweaver.

Now what do I do?

Whenever I enter a text field, it misaligns the entire page! White spots appear...

How do I create text freely on top of the layout? And how do i exactly insert drupal code?

Thanks

TRY NOT TO LINK ME TO TUTORIALS...I DON'T GET THEM AND I'VE READ THEM

THANKS =)

⋅ Categories: Drupal 5.x

Comments

webslinger23’s picture

webslinger23 commented

Since I'm not sure what trouble you're having with the tutorials, I'm going to assume that you need to be a bit more granular than they are. A good book for you to invest in is 'Pro Drupal Development'.

If you're just starting out, you might find it easier to start from a simple CSS based layout and work with only html text until you figure out how it all functions and avoid starting from Photoshop. If you do this, it would be a quick exercise and you'd learn more than if you wrestled with sliced images on your first go. You can find a straightforward layout here: http://www.neuroticweb.com/recursos/3-columns-layout/

If you install Drupal successfully, and open up the folder, you'll see a folder called 'sites'. Inside that is a folder called 'all'. Inside that, put a copy of a phptemplate theme that you've downloaded. Make a copy of that folder and rename it to your theme name. (The Zen theme by Jeff Robbins is good for this.)

Next, open up your theme and look at the page.tpl.php See those things that have dollar signs in front of them like $title? Those are php variables - which means they change depending on context. Through the magic of the template.php file, all of those variables are called into the page.tpl.php and filled with Drupal goodness. You want to copy those variables out of their current html and paste them into your page's html. Start copying the variables and make sure you grab the enclosing php tags where it says and end where it says . If you don't enclose them, the the page doesn't know what's a php variable and what's a price. Now rename your html page with the variables in it to 'page.tpl.php' and replace the page by the same name in your theme. Go into the theme settings page and enable your theme. Now go back and forth, changing things on the page.tpl.php file and reloading the Drupal page and seeing the results.

If you goof up, it's easy to fix. Just remove the folder and reload Drupal.

The next exercise is to take a nice CSS design that you like and do the same exercise. Once you've done those two things, you'll understand enough to do your own. To do both should take no more than a couple of hours.

I'm assuming that since you mentioned slices, you're working with table slices. Try not slicing as much and working with larger image chunks as background images to divs. (When you save your page, I believe you can specify a slice to be whitespace in Photoshop.) Theming is really a different kind of critter than static page design and requires different thinking. If you start out with slices, your learning curve will be longer because you'll be so frustrated with the slices breaking. Take the slices out of the equation and work with something that won't break like the simple layout I mentioned above. It will be more gratifying and you'll learn much more quickly. Make sure you check out the drupal dojo for continuing education.

I hope that this addresses some of your issues. Working with slices at this point is like trying to change the tire on your car with a screwdriver. Eventually you could get it to work, if you bent the screwdriver out of shape, but chances are you'd probably break it and get very frustrated. The idea behind these exercises is to focus on what makes a template page function without being distracted by a page that you're invested in.

Good luck and welcome!