By theworldawaits on

Hey everyone,

I am absolutely new to Drupal and content management systems. Please bear with me. :)

I'm developing a site for a child protection organization here in Kenya. The website is already designed and approved.. and I've put together a rough template using CSS. You can view it here.

http://www.anppcan.org/refresh/

The internet connection here is challenging to say the least. I have recently installed MAMP on my Mac and I've also downloaded Drupal 5.6 and installed it on my local server. I have also downloaded the 'Getting Started' guide and am doing my best to familiarize myself with these tools and applications.

That being said... I'm not really sure what to do next. I want to integrate my design into Drupal... and from what I can tell... the best way to go about that is to download a theme that is similar to my design... and muck around with the PHP. I'm not familiar with PHP at all so I hope this doesn't present too big of a challenge. I'm assuming the only other option (aside from editing an existing template) is to create all the PHP myself. Is there another way to get my simple HTML/CSS site integrated into Drupal?

I'm also finding it agonizingly slow (given my internet connection) to search through the templates for a satisfactory match. My layout is very simple.... after taking a quick glance.. does anybody know offhand a template that would match it well?

Also wondering if there's anything else I should take into consideration. Right now I'm just hoping to get the general layout implemented and the navigation working. I've never done this before.... and I'm doing it all locally (through MAMP) so I'm just hoping it will all work when I transfer everything to the server when it's completed. Any advice would be most appreciated.

Thanks very much... look forward to hearing what you think.

Cheers,

⋅ Categories: Drupal 5.x

Comments

jdevries’s picture

jdevries commented

You can use the design you currently have, as it is already close to being correctly validated. Converting a static mockup to a Drupal site can be done. A starting point could be http://www.blkmtn.org/Quick-and-dirty-OSWD-theme-to-Drupal. Your mockup site seems relatively plain and simple, so you should be able to start your way from here. The most elementary PHP that is required can simply be copied and pasted.

If you're going to create more complex sites, the transition between static mockup to dynamic Drupal site becomes much, much more complicated. Something I know from experience, as I am currently porting such a site myself.

coreyp_1’s picture

coreyp_1 commented

Nice design.

Your design wouldn't be too difficult to translate to Drupal, just keep a few things in mind:

  1. Drupal has more things available than your design implements. There are breadcrumbs, tabs, etc. If you don't want them, you *could* leave them out, but it might make certain parts difficult to navigate.
  2. Drupal expects to find your template in the sites/all/themes/your_theme_name directory.
  3. Re-name your style sheet to style.css, & Drupal will include it automatically if you use the $styles variable.
    • If you use the $styles variable (discussed in a moment), then be aware that modules may include their own CSS files. You can override the styles, of course, but you need to be aware that it happens. Personally, I do not view this as a problem.
    • Style sheets are a sticky subject. Some people elect to hard code theirs into Drupal, and ignore module-included style sheets. This is all well and good, if you don't mind declaring how *everything* will be displayed.
  4. Create a page.tpl.phpfile. You can start by re-naming your mock-up to page.tpl.php, and replacing the hard-coded parts with variables. If you want a list of all the available variables (as well as an example of how they are included in a page), look here.

Creating a Drupal theme makes you re-evaluate how you approach your design. Your footer no longer has to be hard-coded, but can use the $footer variable. The advantage is that by using the variable, the site administrator can change the footer without ever touching the template files.

Your Navigation will have to be set up in Drupal using the menu system. That means that the individual menus will be printed out in blocks, which means that that entire section of html can be reduced to a single variable, $sidebar_left.

The default markup may not match your template file. You can either change your CSS to match, or change the template. More information on overriding default templates can be found here.

Good luck!

- Corey

theworldawaits’s picture

theworldawaits commented

Thank you for the great responses. It appears I have a lot of learning and researching to do.

I'm sure I will be back... but thanks for the links/info... and the great head start!

Peace and blessings..

theworldawaits’s picture

theworldawaits commented

theworldawaits’s picture

theworldawaits commented

Hey..

I have the template working (sort of)... still tons to tweak but it looks more or less like my site design..

i'm wondering about the image header.. i can't seem to get it to appear. the logo appears because i used the $logo variable... but as for the image headers... is there a way to do that through a variable? ideally i'd like to have a unique image header for each "page" that the user navigates to. at the moment... i can't even get the header to show at all.

any direction would be most appreciated. thanks!

coreyp_1’s picture

coreyp_1 commented

It all depends on how you set up your template.

If you are hard-coding the possible image headers into the page.tpl.php, then you need to make sure that you have a correct path to the theme. Use the $directory variable, perhaps like this: <img src="<?php print $directory ?>/image_1.png" />. Of I didn't test it, but it should work. Of course, you can always uses php to decide which image to show.

An alternative would be to have your image header as an empty <div id="image-front">, and change the ID dynamically using PHP. Then, just set the div's background using css.

Both of these approaches have their strengths as well as weaknesses, it really just depends on what you are trying to do and how you want your site to function.

Does this answer your question?

- Corey

theworldawaits’s picture

theworldawaits commented

Thanks so much Corey.

The $directory variable worked like magic... and after doing some searching... I found an excellent solution that utilized that same variable. It has allowed me to have each individual node display a unique header. The link is here.. http://drupal.org/node/104601

This whole Drupal experience is proving to be a little less hectic than I had anticipated. There are still some significant hurdles ahead... but so far it's been very encouraging. Thank you so much for taking the time to help me along the way.

Peace and blessings..

- Jason