By proudleo on

Hi there! Ok. I have Pro Drupal Development, have searched the forums, and read the handbooks/tutorials. I hand coded my xhtml and css from a psd and tested it in browsers. I created a new file in my sites/all/themes folder for my css and copied a contributed theme there to modify. (It was the closest to my design- I'm modifying 'litejazz'.)

I've adjusted all of the css (added in the additional that I needed for node, page, block, etc.).

My problem: I know enough php to barely get by, so where do I put the html in the page.tpl.php file? My css is a table-less design so the html is relatively small and I recognize all of the html tags in the php file (Div tags and such), BUT I'm scared to mess with too much of the php that is enclosed in the div tags-and do I need to put those php texts into my html tags?

Here's my html code:

body bgcolor="#cccccc">
!--WRAPPER DIV TAGS-->
div id="wrapper">
div id="header">
div id="header_logo">Only local images are allowed.
img src="images/mainphoto1.png" />img src="images/mainphoto2.png" />img src="images/mainphoto3.png" />img src="images/mainphoto3.png" />img src="images/mainphoto3.png" />img src="images/mainphoto3.png" />

div id="content_top">

/div>
div id="sidebar_right">
/div>
div id="navbar">navbar
/div>
div id="sidebar_left">

div id="content">
/div>
div id="footer">
/div>
/div>
!--END WRAPPER DIV TAGS-->

I don't want someone to do it for me because I want to learn it too. I've seen several places that I'm supposed to put the html into the page.tpl.php file, but ummm...exactly where and do I just replace everything is the question...So if someone could guide me in the right direction, that would be awesome!!

Thanks in advance!!

⋅ Categories: Drupal 5.x

Comments

roopletheme’s picture

roopletheme commented

First and foremost... If you really want to learn fast, don't be scared to change things. In fact, aggressively change things just to see what happens. Use an editor with a good multi-step undo feature so that you can easily undo changes that break things. And if at all possible, work on a local server so that you can edit the files directly without having to FTP every minor edit in order to test it.

Think of the page.tpl.php file as a stock index.html file, but with php code to insert dynamic content where you might otherwise place your hard-coded content. So you might see HTML code setting up the divs for the left sidebar, but the actual content will be displayed by php code that looks like:

<?php print $sidebar_left ?>

The whole things might look something like this:

<?php if ($sidebar_left) { ?>
<div id="left-sidebar>
<?php print $sidebar_left ?>
</div>
<?php } ?>

Obviously, if you choose to omit the php code, then you won't see the contents of the sidebar.

There's qutie a bit of php code in LiteJazz that is used to provide the collapsible block and dynamic sidebar functionality. If you don't need this flexibility in your layout, you can greatly simplify the page.tpl.php file by eliminating this code.

FWIW, there's a table-less version of LiteJazz in beta. As soon as we finish beta testing, I'll update the theme on drupal.org. In the mean time, the beta is available for download at the referenced link.

Good Luck

proudleo’s picture

proudleo commented

I'm honored that I've been schooled by the 'litejazz master'!!

OH YEAH! There's a good php editor I found a couple of weeks ago that I'll go find again. I want to get *balls* deep into whatever I can here, so gonna play with that a bit. (I'm a girlie, so you can definitely laugh at that...heh)

In the meantime, because I'm a "I'm thisclose to having it in there and want it done now" type, I have another question. Would it work to just rename the regions in either MY files or in the litejazz file so that it sees mine instead of the regular theme's? That's probably a silly question and I should just go try it real quick...lol. (I'm using cpanel through the host so I edit right there on the site and refresh the page afterwards.)

All I'm really changing is making the header area longer to include other images and float the right side bar up there above the navigation. (header float left, right sidebar float right, navbar clear both) It already has my colors, left side bar, navigation, logo, site slogan, content, and footer.

When I'm finished, by the way, I'll be more than happy to jettison it to you. Or post it in the drupal contribs. Although, it's a fairly simple tweak so it may not even be worth all that. Perhaps I'll just post a tutorial on it...:)

Thanks again!!

roopletheme’s picture

roopletheme commented

Would it work to just rename the regions in either MY files or in the litejazz file so that it sees mine instead of the regular theme's?

Sure, just change the region name in both page.tpl.php and template.php.

I'm honored that I've been schooled by the 'litejazz master'!!

I'm a hack. When your questions are answered by MerlinOfChaos or BorisMann, you can consider yourself schooled. This is just a case of the blind leading the blind. :)

proudleo’s picture

proudleo commented

...just updating you on my progress and learning. I've broken the theme a few times already...ha! I tried a php editor online and then in Dreamweaver 8. (I didn't even know that Dreamweaver 8 has one installed!) The online one was no help because all of the image files were missing and since a lot of the stuff in 'litejazz' is collapsable, I couldn't see where anything messed up. So then I went to Dreamweaver on my system. That didn't really work since there are two template files and three css files with no images. It just produced a page with a million stacked boxes so I couldn't see where the regions were actually stacked.

So I went back to my trusty host and my drupal install. I'm editing the files through the host. Copying a section and then deleting...seeing what happens and then pasting back if it breaks. First time I broke it I deleted all of the files from the page.tpl.php file that referenced section 1 as I won't be using those. On refresh, nothing came back but an error in page.tpl.php line 145. Since I'm not in an editor, I wasn't going to try and count down 145 lines...lol. So I pasted it back, refreshed, and everything was fine again.

Then I moved the navigation area below the section 1 and the navigation completely disappeared. Not happening either...lol. I think what I'll have to do is specify a height for the header area in css to make it taller. (About 400px. as I want the nav bar almost in the center of the page.) And then create a completely different sidebar_right and float it next to the header. Then completely ignore the lower right bar portion so that my main content area fills up that part of the page. (I read the docs before beginning with the theme so I know that if one of the side bars or user sections isn't used, the other regions fill up the page.)

I know there's an easier way to do it...and probably a 'right' way. And I'll find it and replace before I go live. I just want to see some progress and see how it works with the blocks and such before I commit to the time involved with one theme just to start all over with another...lol.

proudleo’s picture

proudleo commented

I can't get my sidebar_right_top to show blocks...

This is what I did. Created the region in template.php. Created the div tag for it in page.tpl.php after the header/before the navigation and added a print 'sidebar_right_top'; (I'm guessing that this just prints the text "sidebar right top" as defined in the regions section of template.php). Then created the styles in css.

When I go to my blocks admin page, I can see the region- and it's where I want it- but the text isn't highlighted like the rest of the regions and blocks don't post to it. Am I missing something?

proudleo’s picture

proudleo commented

YAY me!!!

It was user error...a typo.

me~~~~~~~-----> doing the happy dance!!

styro’s picture

styro commented

I'm not sure quite how to put this but... "just do it". You are editing a non-production development copy of your site aren't you?

page.tpl.php is the complete HTML page, with a few PHP output bits in it. Just look at the output of the original theme and move the PHP chunks around where you want them.

Or take your static HTML mockup and copy/paste the PHP chunks into it wherever you want them to go. There is no magic order or required placement. You will only learn what the bits are by hacking around with them.

Just keep copies of the originals or intermediate steps in case something breaks. Any breakage will only be the HTML rendering - the database won't be affected and you can copy an older file back.

--
Anton
New to Drupal? | Troubleshooting FAQ
Example knowledge base built with Drupal

proudleo’s picture

proudleo commented

Working with a new language has me a little hesitant. No my site isn't production ready, but I'd kick the dog if I had to start all over again because I deleted a ")" and can't remember where to put it back...I've already done that...twice.

But yes, I'm going to take it into a php editor and play around a bit. See how many mountains I can move. Sometimes it's the simplest answer that's the most elusive.

I don't really have a dog, so please don't flame me...

Thanks for the advice!! Looking forward to giving you some someday ;)