By talyia on

Hi all,
Can you tell me if you think it wouldn't be too difficult to convert this website into Drupal? http://www.lee-magazine.com.
We really want to try to keep the same look, and also make some slight additions. If you go to http://www.lee-magazine.com/playground/indexplayground2.html the only difference you will see is an additional column on either side (the pictures there are only placeholders, put there in a jiffy!). We may want to use these columns for placing ads from the magazine, or some other function.

We want to keep it as similar (if not identical) as we possibly can. The thing is that each section has a slightly different look... just the banner and background of the main content are different. There is a different look for: articles, columns, contact us, about us, cover story, archives, e-edition. We would prolly keep the e-edition archives the way they are now and just link to it from Drupal.

Please can you give me advice about what you think would be the best/easiest way to accomplish this?

FYI, My experience up to now has been playing around with my own website (for the purpose of displaying my portfolio... I am a graphic artist) and creating a custom theme. I am still very much a newbie tho'.

Thanks a lot in advance for your help... very much appreciated!

Best regards,
Christine

⋅ Categories: Drupal 6.x

Comments

dnewkerk’s picture

dnewkerk commented

It wouldn't be too difficult, I'd say. It can remain looking pretty much precisely the way it does now. You can take your current XHTML/CSS overall template and convert it into a Drupal theme as simply as just naming your primary CSS file "style.css" and your main layout file page.tpl.php (and you place these in a folder such as sites/all/themes/yoursitename). I'd suggest downloading a good "base" theme like Zen as well and looking at how it's put together. Once your layout is put into the files needed for a theme, you can just drop in a few standard PHP snippets that you can extract from Zen or another theme to make the dynamic content fall into the right places. There will be a little more detail work on some areas needed to get Drupal to render precisely how you want it to. See some links/references in my post here: http://drupal.org/node/277144#comment-904522

The main tools you'll need are the Views module, CCK module, Node queue module (used to manually set the order of a listing of featured content for instance, or select a particular page to use as your "cover story"). You should grab Devel module as well as it has a very useful theming helper tool. Views will be the basis of many aspects of the site, and the Views Theming Wizard helps you generate the template files you need for each instance. Images for the most part should be handled with Imagefield and Imagecache modules. For inline images (within the text of articles) there are several options such as Asset module, IMCE, ImageAssist, etc.

Some of these modules are not yet available for Drupal 6, so you might consider using Drupal 5 at first if you are on a tight schedule, which so long as you check for a pending upgrade path on any modules you choose to use, is a safe bet. Though I don't know the timelines, I'm reasonably sure every module I've mentioned will be upgraded - just do some research on other modules you may be interested in before committing to them.

Regarding your different looks for different sections, this is pretty simple with the right PHP snippet pasted in :)

Here is, from one of my sites, code to paste "in place" of the tag in page.tpl.php (only tested in Drupal 5 - there is probably better/cleaner code you can just drop in your template.php instead - if I can find the original source or any updates I will let you know):

// Creates a <body> id for each site section.

$uri_path = trim($_SERVER['REQUEST_URI'], '/');
$uri_parts = explode('/', $uri_path);

// If the first part is empty, label the id 'main'.
if ($uri_parts[0] == '') {
    $body_id = 'main';
}
else {
    // Construct the ID name from the first part of the URI only.
    $body_id = $uri_parts[0];
}

$body_id = 'section-'.$body_id;
print "<body id=\"$body_id\"";
print theme('onload_attribute');
print ">";

Now with a unique Body ID, it's easy to use CSS to apply different background images to known sections. The other part of the ID is generated by the section's URL path, which can be set manually with Path module in core, or automatically (recommended) using Pathauto module:

#section-current-events #headerimg {
	background: #e7e7e7 url(images/header-img.jpg) no-repeat top left;
}
#section-getting-involved #headerimg {
	background: #e7e7e7 url(images/header-getting-involved.jpg) no-repeat top left;
}

Hope this is helpful :) Here's a collection of Drupal learning resources I've written up as well.

-- David
absolutecross.com

talyia’s picture

talyia commented

David,
I really appreciate this!
Another question... do you think the sections module would be useful for any of this?

Christine

dnewkerk’s picture

dnewkerk commented

Hello Christine -

You can give Sections module a try if you'd like (I tested it and it's simple to use)... however, to reproduce what you have on the current site, I think going beyond a simple Body ID + CSS solution would be a bit overkill (Sections module appears to permit you to have individual complete Drupal themes per section, however I think this will add both more work for you in the long run maintaining separate full themes - there's also an extra database query added by Sections, though a quick test with Devel module shows it is likely negligible performance impact). Though in my own site I only change the header for various sections, you could as easily tie additional background images to the Body IDs as well (e.g. the background that appears to the left on your pages). You have to set the background images in CSS anyhow either way, so might as well streamline it and use the Cascade to your benefit :)

Hope this helps.

-- David
absolutecross.com

talyia’s picture

talyia commented

David,
Just a few more questions and then I will try my very best to work out the rest on my own... I just need answers to these so that I can go in the right direction. Please bear w me... I know these may sound like very dumb questions but I am brand new at this and stumbling thru it right now. Answers to these will help me more than you know...

I have pasted below my page.tpl.php as it is so far in case you need to take a look at it (I just started working on it yesterday). Here are my questions:

1. The front page is going to be slightly different from the rest of the pages...needs to look like the front page on http://www.lee-magazine.com with the teasers, etc. Do I need to go ahead and make a separate template (I think I read somewhere that all one needs to do is create a template called frontpage.tpl.php or something to that effect... I cannot remember, need to go back & look it up)
OR
Would the front page module be better to use for this? http://drupal.org/project/front

2. Where exactly do I place that code you said to paste "in place", in my page.tpl.php?

3. Which of the modules you referred to are going be responsible for creating an "articles section" or "columns section" per se...so that when I publish columns, they will land up in the "columns section"?
Is "Views" mainly responsible for this? I found some more info about Views at: http://web.asu.edu/community/book/export/html/534 about a third of the way down, where it talks about creating "Page View of Nodes by Term ID". It goes into it in quite a bit of detail. Is this what I need to do?

4. I have pretty much been ignoring template.php up until now. What would I use this for exactly? I came across another post that also suggested using template.php to switch templates (similar to what you suggested) and here is the code they used (of course this is still like greek to me alas:( I so wish I understood it all:(

function _phptemplate_variables($hook, $vars) {
/***********************************
* HOOK NODE
* - override node layout/content + set additional variables depending on page
*/  
  if ($hook == 'node') {
    
    /**
      * override node layout + content depending on page
      */    
    if ($vars['is_front']) {
      // check for the template file
      $complete_path = $vars['directory'].'/templates/frontnode.tpl.php';
      // see php.net for problems with file_exists and user rights
      if (file_exists($complete_path)) { 
        $vars['template_file'] = 'templates/frontnode';
      }
    }
  }
}

.

Thanks a lot once again:)

Christine

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php print $head_title ?></title>
<link rel="stylesheet" href="style.css" type="text/css" />
<?php print $styles ?>
</head>

<body class="leemag">

<div id="containerouter">

<?php if ($containerleft): ?>
  <div id="containerleft">
  <?php print $containerleft; ?>
    </div><!--end #containerleft-->
    <?php endif; ?>

<?php if ($containerright): ?>    
  <div id="containerright">
  <?php print $containerright; ?>
  </div><!--end #containerright-->
  <?php endif; ?>
  
  <div id="container">
  <div id="header">
      <!-- end #header --></div>
      
 <?php if ($sidebar_right): ?>
 <div id="sidebar_right">
 	<?php print $sidebar_right ?>
  
  <!-- end #sidebar_right --></div>
  <?php endif; ?>
  
    <div id="mainContent">
    
    <div id="mainContent_02">
	
		
	<?php if ($content_top): ?>
	<div id="mainContent_02-top">
	<?php print $content_top; ?>
        </div> <!-- /#mainContent_02-top -->
        <?php endif; ?>

    <?php if ($breadcrumb or $title or $tabs or $help or $messages): ?>
          <div id="content-header">
            <?php print $breadcrumb; ?>
            <?php if ($title): ?>
              <h1 class="title"><?php print $title; ?></h1>
            <?php endif; ?>
            <?php print $messages; ?>
            <?php if ($tabs): ?>
              <div class="tabs"><?php print $tabs; ?></div>
            <?php endif; ?>
            <?php print $help; ?>
          </div> <!-- /#content-header -->
        <?php endif; ?>

        <div id="content-area">
          <?php print $content; ?>
        </div><!-- /#content-area -->

	
	        <span class="navigation_footer"><a href="index.html">HOME</a> • <a href="leemag_articles.html">ARTICLES</a> • <a href="leemag_cover.html">COVER STORY</a> • <a href="leemag_columns.html">COLUMNS</a> • <a href="leemag_e-edition.html">E-EDITION</a> <br />
• <a href="leemag_archives.html">ARCHIVES</a> • 
      <a href="leemag_about.html">ABOUT US</a> • <a href="leemag_contact.html">CONTACT US</a></span>
    <!--end #mainContent_02--></div>
  <!-- end #mainContent --></div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  
  <div id="footer">
  	<?php print $footer_message ?>
    
  <!-- end #footer --></div>
   
  </div><!-- end #container -->
   <br class="clearfloat" />
</div><!-- end #containerouter -->


</body>
</html>
talyia’s picture

talyia commented

To create a custom page template for the front page of your site, simply create a template file named
page-front.tpl.php.

dnewkerk’s picture

dnewkerk commented

Hi Christine -

I got on a roll writing (a ton - I think I'll later adapt it into a full general tutorial for the Drupal docs), and ran out of time (have to go for a few hours). I'll post whatever I've got tonight, might have to answer 1-2 questions tomorrow.

- David

talyia’s picture

talyia commented

You have no idea how much I appreciate it!

Christine

dnewkerk’s picture

dnewkerk commented

The front page can be done in a variety of ways depending on your needs/preferences. The most simple way to make an advanced/dynamic front page is to use the Panels 2 module. In Drupal, you can set any path to become the front page (such as a certain node, a view, a panel layout, etc), and you make this setting at: admin/settings/site-information. (so say you made a Panel page with the path yoursite.com/home - when you change "node" to "home" in the site-information settings, Drupal will use yoursite.com/home as the front page (without needing /home). Speaking of which, to ensure Drupal's paths stay SEO friendly and avoid duplicate content penalties, use the Global Redirect module, so yoursite.com/home (if someone or google happened to get to that address) would 301 redirect to yoursite.com.

While it's true you can use page-front.tpl.php like you mentioned, this does have a drawback of forcing you to maintain/synchronize changes to multiple versions of your main template (if possible, I recommend using page.tpl.php only for the main template, and using the more granular templates to customize the sub-elements that appear inside that... e.g. different versions of node.tpl.php for different content types, Views templates, block.tpl.php, etc). Using page-front.tpl.php would be good if you had a substantially different theme between the front and inner pages, so you'd have two templates anyhow - but in your case the overall XHTML template is consistent throughout the site, so best to keep only one copy of it for you to have to worry about.

 

How I might proceed with your front page, if it were me:

 

Content Types (CCK)

The very first thing is to define and set up your CCK content types (which doesn't quite have to do with your front page, but since they're the data that your front page essentially consists of, best to cover this first). Though Drupal comes with Story, Page, etc by default, using CCK you can create various content types to be used for specific types of content throughout the site (each one with the specific fields needed). Though you know your content better of course, to me offhand it looks like you really just need one custom CCK type to begin with, called "Article" (edit: just noticed "Column"... you could make another CCK type for this or use Blog module).

It should have custom fields added such as:

  • issue_date (for the month/year of the article/issue - rather than the date Drupal published the page)
  • sub_title
  • author_name (as this is probably a different name than the admin account publishing the content)
  • photographer_name (you could also include fields for author/photographer to link to their email address or website)
  • teaser_image (imagefield - you'll want to upload the exact pre-made image for this since you have those fancy teaser images)
  • primary_image (imagefield - this will be the image at the top of the article and also could be used to create thumbnails to display in other contexts on the site).

Also include fields to use for the teaser... you could just continue as you are, preparing the full text/image teasers, though in the long run I'd recommend switching them over to use actual text and CSS, plus the image and background (e.g a transparent png paired with a pngfix script so it will work in IE)... CSS can even swap the background image and text colors on rollover. It would take a little work to set up, but would save a lot of time in the future (not to mention load faster)... you could even use z-index and CSS positioning to put the black "cover story" bar in place for whatever article is at the top of the list. At the very least I recommend switching from Javascript rollovers to CSS rollovers for the images - and make the teaser image include both rollover states in the same image (the CSS way simply reveals the image from alternate coordinates, bringing the other "version" of the image into view). This way you can upload a single image into an imagefield (which contains both the on/off rollover states), thus letting you retain your rollover effect (keeping the javascript method working with Drupal would be challenging).

If you do choose to switch them from images to text + images..... since you appear to sometimes use a bit different article title between the teaser view and the actual article, you might also include a field called teaser_title. You can restrain the max text length on teaser related fields, so you'll know they will always fit.

When this content type is fully completed, your editor/staff will just need to click Create Content -> Article, and be presented with exactly all of the fields they need to fill out and images to upload to completely and correctly produce an article (with no coding - other than maybe light HTML for the article formatting itself unless you give them a WYSIWYG editor). I take it your cover story is just a featured article, so you don't need a separate type for that.

Setting Up a Node Queue

I'm assuming you want to be able to select various articles/pages from the site to feature in the middle row of the home page, in a specific order (the top one being the Cover Story). The way to do that is to create a View that has its order controlled by a Node Queue. To make your Node Queue, go to admin/content/nodequeue/add/nodequeue . Enter a title (e.g. home_articles_queue), Queue size of 4, and for Type choose Article (assuming you've made the CCK type). You might also like to check "Reverse in admin view", as this will cause queue items to drop from the bottom of the list rather than the top as new items are added, which may or may not make better sense to you (if you do this, you'll also probably want to adjust the NodeQueue: Queue Position sort criteria option to "Descending" in the View you'll make in the step below). Node Queue also adds a new tab to pages of the content type you selected in the previous step (Article), and you can click that tab from any page and add the page into the queue. You can then reorder the queue as you like by going to admin/content/nodequeue and clicking on the View option of the queue you want to adjust (and you can also use the search field to add additional content directly to the Node Queue).

Making a View, sorted by Node Queue

Next comes the View that is ordered according to the Node Queue. You can make your own View and add the Node Queue "Filter" and "Sorting" options, or you can use the default nodequeue View that is generated for each nodequeue as a starting template to customize. Go to admin/build/views and look down in the "Default Views" area for a View called "nodequeue_1". Click the Add link to the far right and you'll call up a Views page containing the default options for that View. Change the name some something else (e.g. home_articles), uncheck Provide Page View. Scroll down to the Block options - ensure List View is selected, remove the title, set the # to 4, and uncheck More link. Next add the needed fields from your Article content type (e.g. at least the teaser-image, or other fields if you decide to make those as text/images/css). For Filters, add Node: Published (set to yes), and Node: Type (set to Article). When you're finished, save the View.

Adding the View to Panels module

To add a View to Panels you first need to specifically tell Panels which Views you want to make available for it to use. To do this, go to: admin/panels/views, choose the name of the View you just created above from the selection menu, and press Create panel view. Copy and paste the View's name into the Panel view title field - you can leave all the other settings as default - scroll down and submit the page.

Pulling everything together for your home page with Panels

  • With Panels 2 module installed, go to admin/panels/panel-page/add and click on "Flexible". In your case you "could" just use the Single column layout, but the Flexible layout is ideal since you'll be able to easily change and adapt the layout in the future if you need to.
  • Type home for both the Panel name and Path, and press Save and Proceed.
  • If you prefer your XHTML to be as lean as possible, you should make use of Panels' ability to stack multiple content items inside a single Pane of the panel (this is especially simple in a single column layout like you have). When you have a more complex layout this may not be possible, but in your case it is. So if you'd like, go with Option 1 below for that, or else Option 2 for separate rows (more divs).
  • Option 1: Set the Rows option to 1. Change the column title for Row 1 to Home Articles. Ignore Rows 2 and 3 (setting the Rows option above to 1 will cause these extra rows to be deleted when you save this page). Click Save and Proceed.
  • Option 2: Leave Row 1 as is. For Row 2 set: 100, 1, empty, empty ... and change the name to just Middle. Leave Row 3 as is (you'll now have a layout with 3 rows in a single column). Click Save and Proceed.
  • Nothing needed in the next two screens right now, so press Save and Proceed twice to get to the Content page.
  • Note: for the following steps of adding content to the Panel, I suggest that for each you add a custom CSS ID when given the option (e.g. home-top, home-middle, home-bottom). This will make it easy as pie to style each Panel pane with easily recognizable names in your CSS.
  • Depending on your choice of Option 1 or 2 above, you now see 1 row (Option1) or 3 rows (Option 2) where you can add content using the + icon. In the Top row, choose to make New Custom Content (which is just basic content added directly into the Panel as opposed to using other preexisting data from the site), and paste in the welcome text and HTML for the home page in the Body.
  • In the Middle row, this is where to add the Nodequeue-controlled-View mentioned earlier. It should be listed when you click the Add content + button, since we made it available to Panels module earlier.
  • The bottom pane could just be another New Custom Content item if you like, with the image/link HTML pasted in... or you could get more fancy and have another CCK type to hold this image and the correct link to the latest, plus a single item View that always will show the latest item. Another alternative is to embed a node in a Panel, which you might do if you want simple HTML/image but need someone to be able to edit it without allowing them access to Panels module - make a single Page node (or other CCK type), add the content to it, and drop the node into Panels following the steps on the above-referenced link (now a person can update the content of that node and not need to use Panels to do it).
  • If you haven't yet, go to admin/settings/site-information and set the front page to home - pointing Drupal now to the Panel you've made to use for the home page.

Alternative to Panels

Alternately if you choose not to use Panels module you can do things with relatively simple code in your page.tpl.php file ... with this if Drupal sees that the front page is currently being viewed ($is_front = true), it will display the contained code - otherwise it will not:

<?php if ($is_front) : ?>
... everything that's for the front page including hard coded HTML and text and/or addition Drupal regions you could define in template.php (such as a new region called "home" and assign any Views blocks you make for use on the home page to this region at admin/build/block) ...
<?php endif; ?>

You can even embed a View directly in the template file here if you'd like.

Front Page module

For your site, I'd say Front Page module is not necessary. For your needs I don't think it has any real benefit (plus I always recommend that you store all templates as real files, not in the database where they could be more easily damaged/lost).

Paste in-place question

Locate the <body> tag in your page.tpl.php file. The code should replace the body tag (and its end result will be a custom ID printed out within the body tag when the page is rendered).

Whew that was fun :D I didn't get to all your questions yet, but I hope this has been helpful (to you and others). Later I'll adapt some of this into a general tutorial for Drupal's documentation or to augment other existing lessons (go Docs team!).

-- David
absolutecross.com

talyia’s picture

talyia commented

I cannot believe how much you wrote!
Thank you SO MUCH David!:)

I am going to start sifting through all of this now.
I REALLY appreciate all of this...all the time you put into doing this:)

I will be reporting back regularly to let you know how it is coming along:)

Christine

dnewkerk’s picture

dnewkerk commented

No prob :)

I'm at work right now so can't finish answering the other questions yet. I just realized though why it was unclear in my earlier post about pasting the code "in place"... I must have wrote the "<body> tag" and forgot to put <code> tags around it the body tag, so it just ignored it (Drupal's input filter ignores HTML tags that aren't approved).

-- David
absolutecross.com

talyia’s picture

talyia commented

David,
I am about to plunge in w all of this that you have so kindly shared w me. I thought it was necessary I get a lot(if not most) of the styles and look done before I proceeded ... I thought it would be worse if I left it for later on. I know this is NOT the place to ask this, but I just thought maybe you would know...

Take a look at http://www.crissi.com/leemag
See the columns on either side? They are both floated. I am REALLY battling trying to get these to extend to the bottom (need them to extend 100%). Is there any way at all I can fix this without reverting to a table? (All because of that double border we want in there, which looks funny when the end of the column is reached, otherwise we wouldn't have to worry about it.)

Christine

dnewkerk’s picture

dnewkerk commented

Hi Christine -

Sure... looks like what you need for this is the CSS Faux Columns technique. There's a ton of info out there on it so you may be able to find better / more up-to-date lessons on google than the link I've included. It's needed due to one of the limitations of the current CSS version, but I believe is fixed in the newer one (which of course we can't actually "use" for years haha).

Here's a quick example from one of my sites of a "faux column" background image:
http://www.aguaviva.com/sites/all/themes/aguaviva/images/main-bg.png

Hope this helps :)

-- David
absolutecross.com

talyia’s picture

talyia commented

than I was expecting:)
This helps a LOT!:) Looks like this is exactly what I needed...wonderful! That is a great looking site by the way:)
Okay...here is one VERY LAST question that is not related to the original question in this thread (and then I sincerely promise I will not veer off the main topic again, no matter what)... your png image made me think about it. Pls. just answer this at your convenience.
What have you used to fix the PNGs not showing up properly in IE? I have used the IEpngfix with my static websites but cannot get it to work in Drupal.

Thanks again David:)

Christine

dnewkerk’s picture

dnewkerk commented

Hi Christine -

What I used was http://jquery.andreaseberhard.de/pngFix/ (mine is version 1.0).

I included this .js file (which was saved in my theme's directory) into my theme using this code in my template.php (this is the proper way to manually add additional JS files to Drupal):

drupal_add_js(drupal_get_path('theme', 'aguaviva') . '/jquery.pngFix.js', 'theme');

It was unusual, but in the case of this site I also had problems with the PNG colors displaying differently between various browsers. I actually forgot to fix a couple images, so you can probably see what I mean here in the header. What ended up helping me correct it was a windows utility called TweakPNG which let me set the Gamma value (you probably won't need it, but ya never know)... I need to correct the other header images sometime soon :P Fortunately I had a copy of Windows on my Mac so I could run the utility :D

Anyhow, I'm writing up some help for your remaining question about Views and taxonomy for categorizing your content. I haven't got the whole best solution fleshed out yet, so will post it when I do. No worries by the way, it's good practice for me and I like solving Drupal puzzles haha

-- David
absolutecross.com

talyia’s picture

talyia commented

Thank you SO much! :)) (Altho' I initially had some probs creating it via Illustrator which was a pain:( Normally I don't have issues...prolly bcos the lines were so fine. Finished it up in Photoshop. I am SO happy to have that sorted out... it was really perplexing me:)

talyia’s picture

talyia commented

I am just ranting:( I cannot understand what made this happen:( Something I did during the course of the day. I feel like crying. IE has made me feel like this many times before alas:( I'm going to bed now and will continue tomorrow...

Thanks again for your help today David! Much appreciated!:)

dnewkerk’s picture

dnewkerk commented

To be honest, I long ago stopped supporting IE 5.5. Unless this is for a client/boss who is requiring it to work that far back (and in which case I hope they are paying a good amount haha), then I'd skip on support for IE 5.5. I can't speak for every industry, but from all the stats I've seen on my sites and my client's sites, IE 5.x is all but gone - just over 1/20th of 1%, even on client sites with non-technical audiences (and those visitors still using it are unlikely the ideal customers, or even likely old unmaintained computers in schools or libraries... if your client or boss is demanding support for such an old browser, then perhaps put the real traffic stats for the site in front of them and ask them to consider whether that number of visitors is worth the increased cost and confusion of development in exchange for the return on investment, as well as the trade-offs supporting old browsers can sometimes have against your actual target audience... if it's just a personal goal to get it working - haha yeah I know how it can be... we sometimes have a vendetta to whip IE into shape at any cost haha - then I'd suggest retiring this particular browser from the goal haha). The lowest version of IE I support is 6 (which is still roughly 20-35% of IE users in my case depending on the site, unfortunately haha)... if a client asked me for support further back, I would inform them they'd be paying as much as it takes to get it working (a lot), and that it would potentially increase development/testing time significantly.

I had a little looksie at your html/css, and wanted to suggest that if you're running into a wall with the current way, to feel free to look at the source of aguaviva.com and use whatever code you like. For my 2 column layout I used a left float for the sidebar and a right float for the main content, and nudged things into place with padding. The only centering I do is for the initial outermost container. For 3 columns, you could float all 3 columns left (simple example)... this other one's not necessarily appropriate in this case (liquid), but I found this while looking up the above link - looks nice, I'm going to play with it on a future project: http://matthewjamestaylor.com/blog/perfect-3-column.htm

Anyhow, good luck :D

-- David
absolutecross.com

talyia’s picture

talyia commented

David,
I agree w you 100% about dropping support for IE 5.5. Yes, it was a silly personal goal to get it working because I thought there was a lot more support for it needed out there than the specs you gave me! To be completely honest, I only really started web development at the beginning of this year. (Had a really antique old mini personal website but I am not even counting that one!) On top of it all, I work on a Mac.... so hadn't initially (unfortunately) paid much attention to all the Windows users out there, and thus, the nightmarish IE (which the majority of the world uses!:) I remember a couple of nights before my first website launched earlier this year, Lee Magazine, I asked my sister to take a look at it on her PC laptop that she had brought over and.... to my dismay... I saw a terrible mess and was broken-hearted!! (She had been using IE 5.5 or 6, I am not sure) In a rush of trying to figure out what to do, I installed Virtual PC and have been checking everything I do in IE ever since. I had thought the site I am currently working on was fine until I took another look at it last night before turning in and saw how everything was out of place and ... where was that punching bag I wanted to buy the last time this happened... I really needed it!! ;)

Anyway, thanks again for your help! Your solution was wonderful...and I floated the main container as well and now all is working (had to use some absolute positioning too for the middle column...the container). Of course, then I battled after that for a while trying to get all the columns to extend downwards as much as I wanted.... had a battle getting them to look as good as it could get across the browsers. I think I am almost there now so I can sleep happy tonight. This has REALLY been a tremendous learning experience I tell you:)
So, thank you AGAIN for your help... VERY much appreciated!
And now, I think I can fiiiiinally plunge into the rest of doing what I initially wanted to do....and start working with everything that you so generously wrote...

More to come!:)

Have a wonderful evening!

Best regards once again,
Christine

BTW, this page http://www.killersites.com/blog/2006/matching-div-heigths/ is quite interesting about using a piece of javascript to match the column heights. Unfortunately I couldn't get it to work on my side, but thought I would share it w you just in case you may find it useful at all:)

dman’s picture

dman commented

Would you care to post it over at http://drupal.org/handbook/site-recipes ? Perhaps witha screenshot or two. It really deserves saving. :-)

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

dnewkerk’s picture

dnewkerk commented

Hey Dan -

Certainly... I plan to clean it up and make it a little more generic for the average user, and probably use a standard Drupal theme to produce some screenshots (so people can follow along on their own install). I have a few other mega-long-posts I need to convert into actual docs pages as well. I'm planning to make a guide also on the common question about making the typical "title, custom teaser text field, thumbnail image floated to the side, read more link, etc" kind of Views listing from start to finish (like the News & Updates block on the home page of the site I mentioned).

-- David
absolutecross.com

dnewkerk’s picture

dnewkerk commented

Yikes... we need to get a more usable taxonomy browsing tool for the Docs section that can handle such a huge hierarchy (I've been sifting through the massive thousands-and-thousands of options drop down menu for "Parent" on creating a new Book page, and it's nearly impossible to find the spot I'm looking for). I think that may be an improvement that would help more people contribute documentation... it's a good thing I'm very determined to find the right category to post this in haha). I'm gonna check the docs team discussion list and see if they've already discussed it, or if I should bring it up :)

Edit: woo hoo! Found it.

-- David
absolutecross.com

dnewkerk’s picture

dnewkerk commented

I'm about half done so far with my "revision" into a general HowTo :) Coming along nicely, and discovering and expanding on some additional things as well as I've been digging into the topic more deeply to check my facts and look up references. I'm looking forward to the comments that will show up on the HowTo to get even more ideas, clarify things, etc.

I'm including a section that briefly covers and refers to all of the other home page making methods as well.
I'd love to make this into the "go to" guide when people ask on the forum or IRC how to make a custom home page in Drupal :D

-- David
absolutecross.com

talyia’s picture

talyia commented

David,
You said you liked solving Drupal issues... so a quick question just in case you would know the answer...
The actual website for Lee Magazine is going to be at http://74.220.215.68/~leemagaz/
Normally I am able to get clean urls to work but cannot with this new site (I already have Paths mod enabled). The above address is a temporary address and will be as such until I am finished building the site and we can then point the domain over here from the location it is currently at. When I run the clean URL test, this is the message I get: "Too many redirects occurred trying to open “http://74.220.215.68/~leemagaz/admin/settings/clean-urls”. This might occur if you open a page that is redirected to open another page which then is redirected to open the original page."

Would you know if this because of the current temporary address that is being used?
It is best that I have clean URLs enabled before I launch into everything else (regarding the different sections, etc.) isn't it?

Thanks a lot,
Christine

(I will post this in the main section in case you are not able to get around to it....I really don't want to bug you with too many other thing other than what I had initially asked about. Please do not worry about this is you don't have the time!:) Have a wonderful Sunday!

talyia’s picture

talyia commented

After making some modifications to the last few lines in the htaccess file as per someone's recommendations here, it worked:) Yahoo!

Christine

talyia’s picture

talyia commented

I would just like to bookmark it as well:)
Thanks a lot David!

Christine

talyia’s picture

talyia commented

Hi David,
I am sure you will know how to help me w this, or at least point me in the right direction.
I have followed most of your instructions, except for the node queue and panels...

As you know, I have different sections for my site and wanted each section front (& section page) & some static pages to have their own slightly different look (I have assigned a different slightly modified template to each one.)
The static pages work just perfectly but the "Views page" (the page that has been brought together w the views module) is not pulling in the correct template, although once you click through to each individual node from the "Views page", each node pulls up the correct template.

Here is the code I am using so that the proper templates are called per section page:

function phptemplate_preprocess_page(&$vars) {
  if (module_exists('path')) {
    $alias = drupal_get_path_alias(str_replace('/edit','',$_GET['q']));
    if ($alias != $_GET['q']) {
      $suggestions = array();
      $template_filename = 'page';
      foreach (explode('/', $alias) as $path_part) {
        $template_filename = $template_filename . '-' . $path_part;
        $suggestions[] = $template_filename;
      }
    }
    if (drupal_is_front_page()) {
      $suggestions[] = 'page-front';
    }
    $vars['template_files'] = $suggestions;
  }

}

So far I have the following (on my local server):

page-about.tpl.php template for an "About Us" static page that I created (via Create Content>Page)
The URL for this page is at "http://www.mysite.com/about"
When I go to that page it pulls in the proper template

page-articles.tpl.php template for an "articles" page that is brought together using Views
The URL for this page is at "http://www.mysite.com/articles"
When I go to that URL, the page-articles.tpl.php is not being pulled in....the regular page.tpl.php is being used instead.
Whereas, if I create a static page thru create content>page with the URL of "http://www.mysite.com/articles" then the correct page-articles.tpl.php is pulled in.

Do you think that Pathauto may be causing the problem or is there anything else you can recommend?
Or that if I used nodequeue it will work correctly?

This is really bugging me to no end:(((

Thanks a lot,
Christine

dnewkerk’s picture

dnewkerk commented

Hi Christine -

I see you decided to go with multiple versions of page.tpl.php - were you not able to accomplish the differences in layout using the <body id="section-something"> method I mentioned? What exactly are you trying to do differently with the layout for the different pages/sections? Is it different than what you have right now on lee-magazine.com? If not, like I mentioned CSS can completely recreate the current lee-magazine.com layouts for the sub-sections with no changes to the HTML and irrespective of what type of Drupal page/path is involved (I would be glad to help you accomplish this if you'd like).

Did you go with Drupal 5 or Drupal 6? I'm assuming 6 due to the PHP you posted and since you didn't use Panels and Nodequeue.

I haven't had a chance to test it thoroughly yet, but from a quick look into Views 2 theming, it looks like Views may be controlling the page layout in the case of your View. I added your code to my template.php, made page-mypath.tpl.php files, and only the standard Drupal pages adhere to my page-mypath.tpl.php files, while the View ignores the file (so I believe this is the same behavior you are getting). So the path code affects node output, but Views is doing its own thing that does not get affected by that code. There may be adjustments or alternate code to get it to apply to Views, but I haven't found it yet.

You can have a look at Views' many available templates though to see if they suit your needs. Go to your View, click on the Display in the left that you want to theme, then click on the link for "Theme: Information" under Basic Settings. Inside you will see a list of possible templates, starting from the broadest, drilling down to the most specific (I haven't played with this much, but it looks like you can make mini template files now for even individual fields). For this I think "Display output" is what you're after though. Notice that from left to right the template file names you can choose increase the specificity (e.g. the leftmost name would theme all Views... the farthest right one would only affect one specific Display of one specific View).

It appears this template is not as high-level as page.tpl.php... it is more like a node.tpl.php template, and is using page.tpl.php around it.

Anyhow if this will work for you, select the template name you want to use (e.g. the one farthest right), create a new file in your code editor and save it with that name. Then click the "Display output" link... select the code, copy/paste it into the new file, make a small change to the file (e.g. write test) so you'll be able to see that it is affecting the page, and save. Go back to the Views admin page where you were and press the "Rescan template files" button so that it will see your new template file in your theme directory. Save the View and then go have a look at the output, which should now have your "test" text on it.

At this point I do not know how to get your path-based page-articles.tpl.php to be used in conjunction with Views 2. As I mentioned earlier, I really recommend you stick with Drupal 5 until everything is ironed out for 6 (and thus you'd be able to make use of Panels, Nodequeue, etc), but that's just my 2 cents :D It looks to me like it will still be 1+ more months before I'd consider building a site with Drupal 6 (depending on the site's needs). I'll ask around if I get a chance tonight to see how to do that override, or if you find out I'm curious to know as well :)

-- David
absolutecross.com

talyia’s picture

talyia commented

It's wonderful to see you here:))) Thank you for replying:)

Here is another thread I was busy with (so you can see where I am at)... http://drupal.org/node/285416

(I am trying to cut down on my postings... I cross-posted earlier (duplicated posts) because I was writing things in a rush while I was at work earlier and I really hadn't intended to do that so am going to try to do a bit better so as not to make things more difficult for other users:)

I just updated/recreated the issues on the live site... if you go to http://74.220.215.68/~leemagaz/article you will see where I am at.

I am going to be answering your post and trying out the things you mentioned tomorrow and explaining more why I went in the direction that I did...
I had vowed to be in bed an hour ago (due to my bout of VERY bad recent late-night-owl activities .... hanging around here even after the clock has struck midnight) so I had better make like a tree and leave;) (for now)

This issue is REALLY plaguing me and I am eager to work through it (somehow) by hook or by crook:)

More tomorrow....

Best regards & have a wonderful evening,
Christine

talyia’s picture

talyia commented

David,
I was JUST about to launch into the explanation of why I am not using the <body id="section-something"> and then something clicked into place and I think I ....errr....koff koff....heard the coin drop.
(I was going to explain that my headers were different on the templates and that I had more differing elements other than just the body background images..there were different widths used, etc. but NOW I think I am starting to understand. Again, please bear with me. 4 months ago, I knew nothing about web development, did not know CSS at all and had basic html knowledge. I suddenly launched into all of this overnight...learnt CSS (actually even thought I had it down pat up until now!), built the first website at Lee Magazine, one thing led to another and here I am...completely addicted and hungry to learn more. I am just letting you know this, so that you understand when some(most) of my questions may seem extremely basic.)

Before I go any further, here is the code from one of my templates:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php print $head_title ?></title>
<link rel="stylesheet" href="style.css" type="text/css" />
<?php print $styles ?>
</head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php print $head_title ?></title>
<link rel="stylesheet" href="style.css" type="text/css" />
<?php print $styles ?>
</head>

<body>

<div id="containerouter">

<?php if ($containerleft): ?>
  <div id="containerleft">
  <?php print $containerleft; ?>
  </div><!--end #containerleft-->
    <?php endif; ?>

<?php if ($containerright): ?>    
  <div id="containerright">
  <?php print $containerright; ?>
   </div><!--end #containerright-->
  <?php endif; ?>
  
  <div id="container">
  <div id="header_general">
      <!-- end #header --></div>
      
 <?php if ($sidebar_right): ?>
 <div id="sidebar_right">
 	<?php print $sidebar_right ?>
  
  <!-- end #sidebar_right --></div>
  <?php endif; ?>
  
    <div id="mainContent_general">
    
    <div id="mainContent_02_general">
	
	<div class="prespace">
	</div><!-- /#prespace -->
	

	<?php if ($content_top): ?>
	<div id="mainContent_02-top">
	<?php print $content_top; ?>
        </div> <!-- /#mainContent_02-top -->
        <?php endif; ?>

    <?php if ($breadcrumb or $title or $tabs or $help or $messages): ?>
          <div id="content-header">
            <?php print $breadcrumb; ?>
            <?php if ($title): ?>
              <h1 class="title"><?php print $title; ?></h1>
            <?php endif; ?>
            <?php print $messages; ?>
            <?php if ($tabs): ?>
              <div class="tabs"><?php print $tabs; ?></div>
            <?php endif; ?>
            <?php print $help; ?>
          </div> <!-- /#content-header -->
        <?php endif; ?>

        <div id="content-area">
          <?php print $content; ?>
        </div><!-- /#content-area -->

   <!--end #mainContent_02--></div>
  <!-- end #mainContent --></div>
	<br class="clearfloat" />
  
  <div id="footer">
  	<?php print $footer_message ?>
    
  <!-- end #footer --></div>
   
  </div><!-- end #container -->
   <br class="clearfloat" />
</div><!-- end #containerouter -->
<br class="clearfloat" />

</body>
</html>

And here is the corresponding CSS:
(I KNOW this is prolly WAY more than you need, but I am showing you anyway, just so we can both be on the same level from square one.)

@charset "UTF-8";
/* CSS Document */

#containerouter {
	position: relative;
	width: 1128px;
	min-height: 1080px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -10px;
	background-color: #FFF;
	background-image: url(images/universal/fauxcolumnsbg.png);
	background-repeat: repeat-y;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: double;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #FFFFFF;
	border-left-color: #000000;
} 

#containerleft {
	float: left;
	width: 156px;
	min-height: 1080px;
	padding-top: 25px;
	padding-left: 9px;
	padding-right: 9px;
	padding-bottom: 25px;
	background-image: url(images/universal/navdivider_top.png);
	background-position: top;
	background-repeat: no-repeat;
	border-top: double #FFF;
} 

#containerright {
	float: right;
	width: 156px;
	min-height: 1080px;
	padding-top: 25px;
	padding-left: 9px;
	padding-right: 9px;
	padding-bottom: 25px;
	background-image: url(images/universal/navdivider_top.png);
	background-position: top;
	background-repeat: no-repeat;
	border-top: double #FFF;
}

#container {
	width: 780px;
	min-height: 1080px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #000000;
	background-color:#FFFFFF;
	float: left;
	position: absolute; top: 5px; left: 173px;
} 

#header2 { 
	background: #DDDDDD; 
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 

#header {
	width: 780px;
	height: 224px;
	background-image: url(images/universal/femmeheader_main.jpg);
	background-repeat: no-repeat;
}

#header_about {
	width: 780px;
	height: 224px;
	background-image: url(images/universal/femmeheader_about.jpg);
	background-repeat: no-repeat;
}

#header_archives {
	width: 780px;
	height: 224px;
	background-image: url(images/universal/femmeheader_archives.jpg);
	background-repeat: no-repeat;
}

#header_articles {
	width: 780px;
	height: 224px;
	background-image: url(images/universal/femmeheader_articles.jpg);
	background-repeat: no-repeat;
}

#header_columns {
	width: 780px;
	height: 224px;
	background-image: url(images/universal/femmeheader_columns.jpg);
	background-repeat: no-repeat;
}

#header_contactus {
	width: 780px;
	height: 224px;
	background-image: url(images/universal/femmeheader_contact.jpg);
	background-repeat: no-repeat;
}

#header_e-edition {
	width: 780px;
	height: 224px;
	background-image: url(images/universal/femmeheader_e-edition.jpg);
	background-repeat: no-repeat;
}

#header_general {
	width: 780px;
	height: 224px;
	background-image: url(images/universal/femmeheader_general.jpg);
	background-repeat: no-repeat;
}

#mainContent {
	background-image: url(images/universal/femmebody_main.jpg);
	background-repeat: no-repeat;
	float: left;
	width: 672px;
	min-height: 1700px;
	padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background-color: #FFFFFF;
} 

#mainContent_about {
	background-image: url(images/universal/femmebody_about.jpg);
	background-repeat: no-repeat;
	float: left;
	width: 672px;
	min-height: 1700px;
	padding-top: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background-color: #FFFFFF;
}

#mainContent_articles {
	background-image: url(images/universal/femmebody_articles.jpg);
	background-repeat: no-repeat;
	float: left;
	width: 672px;
	min-height: 1700px;
	padding-top: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background-color: #FFFFFF;
} 

#mainContent_columns {
	background-image: url(images/universal/femmebody_columns.jpg);
	background-repeat: no-repeat;
	float: left;
	width: 672px;
	min-height: 1700px;
	padding-top: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background-color: #FFFFFF;
}

#mainContent_contactus {
	background-image: url(images/universal/femmebody_contact.jpg);
	background-repeat: no-repeat;
	float: left;
	width: 672px;
	min-height: 1700px;
	padding-top: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background-color: #FFFFFF;
}

#mainContent_general {
	background-image: url(images/universal/femmebody_general.jpg);
	background-repeat: no-repeat;
	float: left;
	width: 672px;
	min-height: 1700px;
	padding-top: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background-color: #FFFFFF;
} 



#mainContent_02 {
	width: 351px;
	min-height: 1700px;
	margin-left: 285px;
	margin-right: 33px;
	padding-bottom: 50px;
} 
	
#mainContent_02_articles {
	width: 411px;
	min-height: 1700px;
	margin-left: 215px;
	margin-right: 33px;
	padding-bottom: 50px;
	padding-top: 75px;
	} 
	
#mainContent_02_columns {
	width: 411px;
	min-height: 1700px;
	margin-left: 215px;
	margin-right: 33px;
	padding-bottom: 50px;
	padding-top: 75px;
	} 	
	
#mainContent_02_contactus {
	width: 411px;
	min-height: 1700px;
	margin-left: 215px;
	margin-right: 33px;
	padding-bottom: 50px;
	padding-top: 75px;
} 

#mainContent_02_general {
	width: 411px;
	min-height: 1700px;
	margin-left: 215px;
	margin-right: 33px;
	padding-bottom: 50px;
	padding-top: 75px;
} 

#mainContent_02_about {
	width: 411px;
	min-height: 1700px;
	margin-left: 215px;
	margin-right: 33px;
	padding-bottom: 50px;
	padding-top: 75px;
} 
	

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

img {
	border: 0;
}

So, you are saying that ALL I would need to change would be to replace the <body> tag in the page.tpl.php with this code that you first mentioned:

<?php
// Creates a <body> id for each site section.

$uri_path = trim($_SERVER['REQUEST_URI'], '/');
$uri_parts = explode('/', $uri_path);

// If the first part is empty, label the id 'main'.
if ($uri_parts[0] == '') {
    $body_id = 'main';
}
else {
    // Construct the ID name from the first part of the URI only.
    $body_id = $uri_parts[0];
}

$body_id = 'section-'.$body_id;
print "<body id=\"$body_id\"";
print theme('onload_attribute');
print ">";
?>

Okay...this is the part where I get a little confused.
Do I need to rename the the CSS rules to accommodate for the respective section names...renaming each ID, so that it would read, for example:
.article #header (for the article section for example)
.article #mainContent
.article #mainContent_02

I really hope that makes sense!

Anyway, if I can get this to work, I would MUCH prefer your method of just changing just the CSS!
(Altho' there would still be a minimum no. of templates in total if I stuck w the template method. I can see you are definitely a stickler for using only one template though...and I trust your judgement on this:) All in all, believe it or not, I am still happy that we finally got it to work with the different templates and the template.php code as it's great to have this as a backup method and it feels even MORE wonderful just knowing that we were able to solve the puzzle after all.... you have NO idea how much it was plaguing me trying to solve it:)

As for the Drupal versions, I would rather just build it in the latest version from the ground up. I don't have a strict deadline for this but do want to finish building it so that I can eventually hand the "content updating" of the website back over to the magazine staff....the whole reason I am converting it over to Drupal to begin with. (The other reason I am converting the static site over to Drupal is just because I am absolutely determined to try and do it anyway;)

As for your other questions ... I do want to use Nodequeue and have in fact installed the latest development build to try out, but haven't gotten around to playing w it much yet.
I had started going through your set of initial instructions but then kept sidetracking because getting the look of these sections working was so important.

Also, I do plan to use CSS for the teaser images on the front page instead of javascript, as you had suggested... I agree it will be a much better choice:)

Thanks a lot David....
Pls. answer this at your convenience, I know you are at work now so I don't want to bog you down:)
Have a wonderful day and thank you so much for your help:)
Best regards,

Christine

P.S. I have been using Dreamweaver, & a general text editor for everything (& dashcode editor in Leopard) so far for everything. I am going to try setting up DW for Drupal using some of the plugins referred to around here on the Drupal site to see how that works. I am also going to look into those editors you mentioned... perhaps there is a version (or something similar) for the Mac.

dnewkerk’s picture

dnewkerk commented

Drumroll please :D

Here is everything you need. It may take a few tweaks to get working on your end for some cases (e.g. some sections with paths I'm not yet certain of like e-edition), but this should be what you need. With this technique you need only one single page.tpl.php file, the HTML of which has been properly prepared in a general/overall manner that receives its per-section customizations based on the ID in the Body tag, rather than by changing anything in the HTML itself. The power of CSS at work haha :D

Here is a copy of your articles page HTML, with my customizations... I have added notes prefixed with my name, David, so you can easily find them. You "cannot" use this as-is, since it's just the web output of your actual Drupal templates - I've also done search and replace to add in absolute URLs to all the paths so they would work on my local system (so best bet would be to just locate my comments and you'll see the surrounding code you need to replace into your own file). I also customized style.css, so I made a direct link to that:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lee Magazine</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/modules/aggregator/aggregator.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/modules/node/node.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/modules/poll/poll.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/modules/system/defaults.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/modules/system/system.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/modules/system/system-menus.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/modules/user/user.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/sites/all/modules/cck/theme/content.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/sites/all/modules/cck/modules/fieldgroup/fieldgroup.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/sites/all/modules/img_assist/img_assist.css?x" />

<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/sites/all/modules/lightbox2/css/lightbox.css?x" />
<!-- David: Making local path for the style.css for my customized file -->
<link type="text/css" rel="stylesheet" media="all" href="style.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/sites/all/themes/leemag/navigation.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/sites/all/themes/leemag/html-elements.css?x" />
<link type="text/css" rel="stylesheet" media="all" href="http://74.220.215.68/~leemagaz/sites/all/themes/leemag/general.css?x" />
</head>

<!-- David: added the ID section_articles manually here... on the real site this will be dynamically named based on the URL path -->
<body class="leemag" id="section_articles">

<div id="containerouter">

  <div id="containerleft">
  <div id="block-search-0" class="block block-search">

  <div class="content">

    <form action="http://74.220.215.68/~leemagaz/article"  accept-charset="UTF-8" method="post" id="search-block-form">
<div><div class="container-inline">
  <div class="form-item" id="edit-search-block-form-1-wrapper">
 <label for="edit-search-block-form-1">Search this site: </label>
 <input type="text" maxlength="128" name="search_block_form" id="edit-search-block-form-1" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Search"  class="form-submit" />
<input type="hidden" name="form_build_id" id="form-e9a01d5025768d35469b9da278266341" value="form-e9a01d5025768d35469b9da278266341"  />
<input type="hidden" name="form_id" id="edit-search-block-form" value="search_block_form"  />
</div>

</div></form>

  </div>
</div>
<div id="block-user-0" class="block block-user">

  <div class="content">
    <form action="http://74.220.215.68/~leemagaz/article?destination=article"  accept-charset="UTF-8" method="post" id="user-login-form">
<div><div class="form-item" id="edit-name-wrapper">
 <label for="edit-name">Username: <span class="form-required" title="This field is required.">*</span></label>
 <input type="text" maxlength="60" name="name" id="edit-name" size="15" value="" class="form-text required" />
</div>

<div class="form-item" id="edit-pass-wrapper">
 <label for="edit-pass">Password: <span class="form-required" title="This field is required.">*</span></label>
 <input type="password" name="pass" id="edit-pass"  maxlength="60"  size="15"  class="form-text required" />
</div>
<input type="submit" name="op" id="edit-submit-1" value="Log in"  class="form-submit" />
<div class="item-list"><ul><li class="first"><a href="http://74.220.215.68/~leemagaz/user/register" title="Create a new user account.">Create new account</a></li>
<li class="last"><a href="http://74.220.215.68/~leemagaz/user/password" title="Request new password via e-mail.">Request new password</a></li>
</ul></div><input type="hidden" name="form_build_id" id="form-ea058b6fb9a097d07d94873fdca7a029" value="form-ea058b6fb9a097d07d94873fdca7a029"  />
<input type="hidden" name="form_id" id="edit-user-login-block" value="user_login_block"  />

</div></form>

  </div>
</div>
<div id="block-user-3" class="block block-user">
  <h2>Who's online</h2>

  <div class="content">
    There are currently <em>0 users</em> and <em>0 guests</em> online.  </div>

</div>
<div id="block-user-2" class="block block-user">
  <h2>Who's new</h2>

  <div class="content">
    <div class="item-list"><ul><li class="first">talyia</li>
<li class="last">talyiana</li>
</ul></div>  </div>
</div>
  </div><!--end #containerleft-->

    
    
  <div id="containerright">
  <div id="block-block-1" class="block block-block">
  <h2>Advertisments</h2>

  <div class="content">
    <div align="center">
<img src="http://www.crissi.com/leemag/sites/all/themes/leemag/images/ads/ad3.jpg" alt="ad" class="noborder" width="138px" /><br />
<br/><br />
<img src="http://www.crissi.com/leemag/sites/all/themes/leemag/images/ads/ad4.jpg" alt="ad" class="noborder" width="138px" /><br />
<br/><br />
<img src="http://www.crissi.com/leemag/sites/all/themes/leemag/images/ads/ad5.jpg" alt="ad" class="noborder" width="138px" /><br />

<br/><br />
<img src="http://www.crissi.com/leemag/sites/all/themes/leemag/images/ads/ad1.jpg" alt="ad" class="noborder" width="138px" /><br />
<br/><br />
<img src="http://www.crissi.com/leemag/sites/all/themes/leemag/images/ads/ad2.jpg" alt="ad" class="noborder" width="138px" />
</br/></br/></br/></br/></div>
  </div>
</div>
   </div><!--end #containerright-->
    
  <div id="container">
  <!-- David: changing the ID here to the general #header_image ... this is the same on every page, whereas the ID in the body is what customizes the background in this div -->
  <div id="header_image">
      <!-- end #header --></div>
      
  <div id="sidebar_right">

 	<div id="block-menu-primary-links" class="block block-menu">

  <div class="content">
    <ul class="menu"><li class="leaf first"><a href="http://74.220.215.68/http://74.220.215.68/~leemagaz/" title="HOME">HOME</a></li>
<li class="leaf"><a href="http://74.220.215.68/http://74.220.215.68/~leemagaz/article" title="ARTICLES">ARTICLES</a></li>
<li class="leaf"><a href="http://74.220.215.68/http://74.220.215.68/~leemagaz/" title="COVER STORY">COVER STORY</a></li>
<li class="leaf"><a href="http://74.220.215.68/http://74.220.215.68/~leemagaz/" title="COLUMNS">COLUMNS</a></li>
<li class="leaf"><a href="http://74.220.215.68/http://74.220.215.68/~leemagaz/" title="E-EDITION">E-EDITION</a></li>
<li class="leaf"><a href="http://74.220.215.68/http://74.220.215.68/~leemagaz/" title="ARCHIVES">ARCHIVES</a></li>

<li class="leaf"><a href="http://74.220.215.68/http://74.220.215.68/~leemagaz/" title="ABOUT US">ABOUT US</a></li>
<li class="leaf last"><a href="http://74.220.215.68/http://74.220.215.68/~leemagaz/" title="CONTACT US">CONTACT US</a></li>
</ul>  </div>
</div>
  
  <!-- end #sidebar_right --></div>
    <!-- David: again, changing this to a general ID of #mainContent here ... the specific Body ID will be responsible for customizing it -->
    <div id="mainContent">
    
    <div id="mainContent_02_articles">
	
	<div class="prespace">
	</div><!-- /#prespace -->

	

	
              <div id="content-header">
            <div class="breadcrumb"><a href="http://74.220.215.68/~leemagaz/">Home</a></div>                                                          </div> <!-- /#content-header -->
        
        <div id="content-area">
          <div class="view view-articles view-id-articles view-display-id-page_1">
    
  
  
      <div class="view-content">
      <div class="item-list">
    <ul>

          <li><div id="node-3" class="node clear-block">


  <h2><a href="http://74.220.215.68/~leemagaz/article/test-article-articles-page" title="This is a test article for the articles page!">This is a test article for the articles page!</a></h2>

  <div class="meta">
      <span class="submitted">Submitted by talyia on Mon, 07/21/2008 - 20:41</span>
  
    </div>

  <div class="content">

    <p>This is a test for the articles page and setting this up took waaaaay longer than I had initially anticipated due to some unforeseen events:) Let's see how this works now...(keeping fingers crossed)</p>
  </div>

  </div></li>
      </ul>
</div>    </div>
  
  
  
  
  
  
</div>         </div><!-- /#content-area -->

   <!--end #mainContent_02--></div>

  <!-- end #mainContent --></div>
	<br class="clearfloat" />
  
  <div id="footer">
  	    
  <!-- end #footer --></div>
   
  </div><!-- end #container -->
   <br class="clearfloat" />
</div><!-- end #containerouter -->
<br class="clearfloat" />

</body>
</html>

And now the CSS. I search-and-replaced these image URLs back to your original paths (I think)... I've commented next to my changes so you can easily extract them - no other areas are changed):

@charset "UTF-8";
/* CSS Document */

#containerouter {
	position: relative;
	width: 1128px;
	min-height: 1080px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -10px;
	background-color: #FFF;
	background-image: url(images/universal/fauxcolumnsbg.png);
	background-repeat: repeat-y;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: double;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #FFFFFF;
	border-left-color: #000000;
} 

#containerleft {
	float: left;
	width: 156px;
	min-height: 1080px;
	padding-top: 25px;
	padding-left: 9px;
	padding-right: 9px;
	padding-bottom: 25px;
	background-image: url(images/universal/navdivider_top.png);
	background-position: top;
	background-repeat: no-repeat;
	border-top: double #FFF;
} 

#containerright {
	float: right;
	width: 156px;
	min-height: 1080px;
	padding-top: 25px;
	padding-left: 9px;
	padding-right: 9px;
	padding-bottom: 25px;
	background-image: url(images/universal/navdivider_top.png);
	background-position: top;
	background-repeat: no-repeat;
	border-top: double #FFF;
}

#container {
	width: 780px;
	min-height: 1080px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #000000;
	background-color:#FFFFFF;
	float: left;
	position: absolute; top: 5px; left: 173px;
} 

#header2 { 
	background: #DDDDDD; 
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */

} 

/* David: beginning changes here... */

/* David: Here we set up the "default" #header_image, which will be used as-is whenever there is not a body ID specified to override the background image (you'll always set up a default like this for any element you're planning to customize differently in other sections). This will also set all the other elements such as the width/height for the area which the other customized versions will automatically inherit, so no need to respecify them over and over. Also combining the background rules into  single-line and more efficient equivalent */

#header_image {
	width: 780px;
	height: 224px;
	background: url(images/universal/femmeheader_general.jpg) no-repeat;
}

/* David: When a body ID of #section_somesection is found on the page, the background rule that was specified in the default #header_image will be overridden, since this added rule is "more specific" so it takes over in this case (all the other rules though have not been overridden, so they still apply). A few of these ID names will need to be adjusted here to match the "actual" path names used on the site... for instance double check things like contactus and e-edition */

/* David: This first one is for the home page. The Body PHP code sees that there is no path after the domain, so it adds the word "main" */

#section_main #header_image {
	background: url(images/universal/femmeheader_main.jpg) no-repeat;
}

#section_about #header_image {
	background: url(images/universal/femmeheader_about.jpg) no-repeat;
}

#section_archives #header_image {
	background: url(images/universal/femmeheader_archives.jpg) no-repeat;
}

#section_articles #header_image {
	background: url(images/universal/femmeheader_articles.jpg) no-repeat;
}

#section_columns #header_image {
	background: url(images/universal/femmeheader_columns.jpg) no-repeat;
}

#section_contactus #header_image {
	background: url(images/universal/femmeheader_contact.jpg) no-repeat;
}

#section_e-edition #header_image {
	background: url(images/universal/femmeheader_e-edition.jpg) no-repeat;
}

/* David: Here we make use of the exact same technique to change "additional" background images based on whatever ID is specified in the page Body tag - or even literally anything on the page can be changed in this way. I've also fixed a little error in your padding-top code (only specify 0px, not 0 0px) */

#mainContent {
	background: #FFF url(images/universal/femmebody_general.jpg) no-repeat;
	float: left;
	width: 672px;
	min-height: 1700px;
	padding-top: 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}

#section_main #mainContent {
	background: #FFF url(images/universal/femmebody_main.jpg) no-repeat;
}

#section_about #mainContent {
	background: #FFF url(images/universal/femmebody_about.jpg) no-repeat;
}

#section_articles #mainContent {
	background: #FFF url(images/universal/femmebody_articles.jpg) no-repeat;
}

#section_columns #mainContent {
	background: #FFF url(images/universal/femmebody_columns.jpg) no-repeat;
}

#section_contactus #mainContent {
	background: #FFF url(images/universal/femmebody_contact.jpg) no-repeat;
}

/* David: end of changes here */



#mainContent_02 {
	width: 351px;
	min-height: 1700px;
	margin-left: 285px;
	margin-right: 33px;
	padding-bottom: 50px;
} 
	
#mainContent_02_articles {
	width: 411px;
	min-height: 1700px;
	margin-left: 215px;
	margin-right: 33px;
	padding-bottom: 50px;
	padding-top: 75px;
	} 
	
#mainContent_02_columns {
	width: 411px;
	min-height: 1700px;
	margin-left: 215px;
	margin-right: 33px;
	padding-bottom: 50px;
	padding-top: 75px;
	} 	
	
#mainContent_02_contactus {
	width: 411px;
	min-height: 1700px;
	margin-left: 215px;
	margin-right: 33px;
	padding-bottom: 50px;
	padding-top: 75px;
} 

#mainContent_02_general {
	width: 411px;
	min-height: 1700px;
	margin-left: 215px;
	margin-right: 33px;
	padding-bottom: 50px;
	padding-top: 75px;
} 

#mainContent_02_about {
	width: 411px;
	min-height: 1700px;
	margin-left: 215px;
	margin-right: 33px;
	padding-bottom: 50px;
	padding-top: 75px;
} 
	


.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

img {
	border: 0;
}

To keep your use of underscores in CSS IDs consistent, here's a tiny adjusted version of the Body PHP code, that uses the _ instead of the - character after the word section:

<?php
// Creates a <body> id for each site section.

$uri_path = trim($_SERVER['REQUEST_URI'], '/');
$uri_parts = explode('/', $uri_path);

// If the first part is empty, label the id 'main'.
if ($uri_parts[0] == '') {
    $body_id = 'main';
}
else {
    // Construct the ID name from the first part of the URI only.
    $body_id = $uri_parts[0];
}

$body_id = 'section_'.$body_id;
print "<body id=\"$body_id\"";
print theme('onload_attribute');
print ">";
?>

Regarding the code editor... I use a Mac as well, so definitely Komodo Edit is a great choice. It's free also (there's a paid version called Komodo IDE that includes massive additional features, but unneeded for basic stuff). I do like the code editor in Dreamweaver, since a long time ago it was upgraded by having Homesite integrated into it (which I loved about 10 years ago)... however I don't know if it has any more-modern features, such as code syntax checking, code/tag completion, or error checking (e.g. Komodo will inform you that you've forgotten a semi-colon or a " or some other character, or otherwise wrote any code that it knows ahead of time will break your page). Komodo now also has multi-line search and replace (my favorite feature from Homesite) so it's just amazing in my opinion :)

Hope this helps!

-- David
absolutecross.com

talyia’s picture

talyia commented

(That drumroll sounded so wonderful!!! Here are some virtual flowers as a BIG thank you:))

David,
Thank you SO much for all of this wonderful information!:) I just read through everything twice and it all seems crystal clear...thank you again for putting all the time into it that you have, you have NO idea how much I appreciate all of this that you have put together! This has been a tremendous learning experience for me and I am copying this entire, and very valuable, thread and keeping it in my "library":)

I just have ONE more (easy/mini) question.
The only other thing that may be changing among the "section fronts" is the width of "mainContent_02". Is it possible for me to have varying widths or do they all need to be exactly the same? On the front page it needs to be narrower, for example, and the columns page and archives page have it wider as well. (Although this is not specified in the CSS I sent you ...the widths appeared to be the same because I hadn't finished setting it up as I was troubleshooting). Based on everything you have, it looks like the mainContent_02 divs all need to be the same width. I can prolly fudge it so that they all end up being the same but I really don't want to change the front page, if possible. (Mebbe if worst comes to worst then just have a separate temp for the front page ONLY? eeech...I can hear you grinding your teeth at the thought of this...;)

I downloaded Komodo Edit and took a look at it.... it looks really great ...thank you:))

Christine

talyia’s picture

talyia commented

helped answer my own question:)

Gosh, again...what a WONDERFUL easy method this is! Wow! I am so happy to know exactly how it works now!!
(Sounds of cheers & celebration can be heard coming from Alcatraz (my office here at work)....!:)

And now I have to wait ever so patiently before putting it into action (rant moan groan) :((
A lightning storm took out my modem at home the night before last night and I am awaiting the replacement...

Have a wonderful Wednesday!

Christine

talyia’s picture

talyia commented

Hi David,
I finally got my internet up and running (what a looooong saga there!!)
I started playing with this and adjusting everything this evening...
when things didn't work as expected once I had reworked the styles & HTML, I looked at the source code in the browser, and of course it is specifying <body id="section_~leemagaz">. This is because of the temporary URL address (until I transfer the "lee-magazine.com" domain over of course). So it is looking at the second part of the URL address which is obviously "~leemagaz" for every section:)
What do I need to change in the php code so that it (temporarily) looks at the third/section part of the URL address? (This is happening on my test server too as I have a similar setup)
Once the domain is transferred over, then I can revert the code back to the way it is now of course:)

Thanks a lot yet again,
Christine

talyia’s picture

talyia commented

David,
I just changed $body_id = $uri_parts[0]; to read $body_id = $uri_parts[1]; to make it work....it's great that those explanations are there in the code... helps a lot!:)
The only thing that is not working correctly is the front page... when I view source on the front page, it is calling up the section as <body id="section_"> instead of <body id="section_main">, and so it is using the "default" style instead of the "main" for the front page (if this makes sense:) What do I still need to do to get this to work?

(I know I can start playing around again with a separate front page template to get this to work but then it defeats the whole point of what we are trying to do here:)

****UPDATE LATER IN THE DAY****
NEVER MIND about the front page issue! I fixed it. (I feel like a dumb blonde here...yikes ;p) All I had to do was change these lines in the php code in the body tag from 

if ($uri_parts[0] == '') {
    $body_id = 'main';
}

to

if ($uri_parts[1] == '') {
    $body_id = 'main';
}

Once again, I will revert the '1' back to '0' once the domain is transferred over and I don't have this weird URL address:)

Gosh, I cannot tell you enough just how much I LOVE this method of doing things!! I am SO glad you pushed the issue with my learning how to do this:))

Well... then there is just this last question that I have:

Is it possible for me to get the class="leemag" back in there somehow by tweaking the php code so that the source will read <body id="section_xx" class="leemag"> so that I can get the body text sorted out? I have a general "leemag" style that I had been using to plug some general styling into the body tag.
If not, I can just do some workarounds for the styles but I like being able to include some "default" styling here in the body tag with a class:)

Christine

Thanks David:)
Christine

dnewkerk’s picture

dnewkerk commented

Ok think I've got something.

I've combined several PHP snippets for template.php to enable the following:
1. Custom page-view-name.tpl.php files for any view. This gives you a custom page layout for your View.
2. Custom page-node-type.tpl.php files for any content type. This lets you have a different page layout for your articles content type.

For template.php... this is the original Garland code for phptemplate_preprocess_page, with the additional code added. Note that I'm copying out beginning from the comment that precedes the function, and also including the comment/label of the following function so you can see exactly the context of the code I'm replacing. Make sure to remove the extra comment from the bottom of my code:

/**
 * Override or insert PHPTemplate variables into the templates.
 */
function phptemplate_preprocess_page(&$vars) {
  $vars['tabs2'] = menu_secondary_local_tasks();

  // Hook into color.module
  if (module_exists('color')) {
    _color_page_alter($vars);
  }

    //the path module is required and must be activated
    if(module_exists('path'))
    {
        //gets the "clean" URL of the current page
        $alias = drupal_get_path_alias($_GET['q']);
      
        $suggestions = array();
        $template_filename = 'page';
        foreach(explode('/', $alias) as $path_part)
        {
            $template_filename = $template_filename.'-'.$path_part;
            $suggestions[] = $template_filename;
        }
      
        $vars['template_files'] = $suggestions;
    }

  // $vars['node'] is available when the page is focused on a node. i.e., example.com/node/123
  if (isset($vars['node'])) {
    // Add template naming suggestion. It should alway use hyphens.
    // If node type is "custom_news", it will pickup "page-custom-news.tpl.php".
    $vars['template_files'][] = 'page-'. str_replace('_', '-', $vars['node']->type);
  }
}

/**
 * Returns the rendered local tasks. The default implementation renders
 * them as tabs. Overridden to split the secondary tasks.
 *
 * @ingroup themeable
 */

In case Garland's extra code causes any confusion, here's the code you could paste into template.php if your theme didn't already have a phptemplate_preprocess_page function:

/**
 * Override or insert PHPTemplate variables into the templates.
 */
function phptemplate_preprocess_page(&$vars) {
    //code block from the Drupal handbook
          
    //the path module is required and must be activated
    if(module_exists('path'))
    {
        //gets the "clean" URL of the current page
        $alias = drupal_get_path_alias($_GET['q']);
      
        $suggestions = array();
        $template_filename = 'page';
        foreach(explode('/', $alias) as $path_part)
        {
            $template_filename = $template_filename.'-'.$path_part;
            $suggestions[] = $template_filename;
        }
      
        $vars['template_files'] = $suggestions;
    }

  // $vars['node'] is available when the page is focused on a node. i.e., example.com/node/123
  if (isset($vars['node'])) {
    // Add template naming suggestion. It should alway use hyphens.
    // If node type is "custom_news", it will pickup "page-custom-news.tpl.php".
    $vars['template_files'][] = 'page-'. str_replace('_', '-', $vars['node']->type);
  }
}

If you don't have a code editor that shows you which opening bracket relates to its closing braket e.g. { and }, then get Komodo Edit or some similar editor, to help you make sure you don't break the PHP when you paste things in.

Now just make your copies of page.tpl.php and name them like this: page-view-name.tpl.php and page-node-type.tpl.php

Looking at what you posted tonight, http://74.220.215.68/~leemagaz/article ... I still don't think this is a wise approach (multiple page templates) but I'll wait for you to explain tomorrow :D

-- David
absolutecross.com

talyia’s picture

talyia commented

THANK YOU David!
Here is the full code as it now stands in my template.php if you could check over it. I had to add in the bit about the front page as well. Had to play around just a little until I got it back into the right place. (Not knowing php is definitely a handicap here... I need to learn some of that next in the very near future.)

<?php
/**
* Override or insert PHPTemplate variables into the templates.
*/
function phptemplate_preprocess_page(&$vars) {
  $vars['tabs2'] = menu_secondary_local_tasks();

  // Hook into color.module
  if (module_exists('color')) {
    _color_page_alter($vars);
  }

    //the path module is required and must be activated
    if(module_exists('path'))
    {
        //gets the "clean" URL of the current page
        $alias = drupal_get_path_alias($_GET['q']);
      
        $suggestions = array();
        $template_filename = 'page';
        foreach(explode('/', $alias) as $path_part)
        {
            $template_filename = $template_filename.'-'.$path_part;
            $suggestions[] = $template_filename;
        }
		 if (drupal_is_front_page()) {
      $suggestions[] = 'page-front';
    }
      
        $vars['template_files'] = $suggestions;
    }

  // $vars['node'] is available when the page is focused on a node. i.e., example.com/node/123
  if (isset($vars['node'])) {
    // Add template naming suggestion. It should alway use hyphens.
    // If node type is "custom_news", it will pickup "page-custom-news.tpl.php".
    $vars['template_files'][] = 'page-'. str_replace('_', '-', $vars['node']->type);
  }
}
?>
talyia’s picture

talyia commented

I am really eager to bookmark it! :)

Thanks a lot David,
Christine

talyia’s picture

talyia commented

Just thought I'd add an update for anyone who may visit this thread in the future, and in case it would be of any help and interest:)

I have finished the new site in Drupal and we are REALLY glad we used Drupal...we love it!!

The new Drupal site is at http://www.lee-magazine.com.

The original (static) one can still be seen at http://www.lee-magazine.com/leemag/index.html

Christine
___________________________

dman’s picture

dman commented

Wow.
Thanks for the follow-up. Looks like you got everything done, and it's a success.
Gotta say that the dotted form elements look a little odd (in FF3) compared to the sharp or toned look everywhere else, so maybe the login block could do with a little more theming love. You wouldn't have noticed it much during development, as it disappears when you are logged in.

But as for showing that any desired (or existing) graphic design CAN be done without compromise in Drupal - that's totally cool!

.dan.
if you are asking a question you think should be documented, please provide a link to the handbook where you think the answer should be found.
| http://www.coders.co.nz/ |

.dan. is the New Zealand Drupal Developer working on Government Web Standards

talyia’s picture

talyia commented

I thought it looked okay on the Mac (and had not paid as much attention to it as I should have because, you're right again, it disappears when logged in) but when looking at it from a Windows machine it just looked terrible!!
I have modified it somewhat:)

Thanks for your very helpful input!!:)

Christine

(P.S. Took a look at some of your websites...WOW, some really gorgeous websites!!!)

bmodesign’s picture

bmodesign commented

Thank you for posting your final code about editing the theme that a page view is displaying on. I am very grateful. When I am done, I'll send you a link!
Bmodesign