Dental Lab Website Re-Design

9 replies [Last post]
Cade_One's picture
Offline
Joined: 07/02/2009
Graces: 71

I'm redesigning a website for some friends of mine (who also happen to be Catholic).  Okay, so here is my dilemma: I'm creating a custom template in Wordpress (and let all the Drupal fans moan in unison ; )  and I've created some pretty cool rollover buttons that look and work great on the homepage, however, when I click on an individual page or post, the menu bar collapses and then disappears.  I think I know what is causing this, but may need some assistance!

The problem is that the Preload script and the Styles script is in the <head> of the "header.php" file.  Then the Onload script and the Slices scripts are in the <body>.  I think the problem is where I have my <div id="wrapper"> and <div id="header"> placed.  I have it placed in the body, after the Onload script and before the slices scripts.  Can you put the <div id="wrapper"> and <div id="header"> in the <head>???

Please don't get mad at me, if I should know this.  I'm kind of learning this stuff on my own.  When I was in college (10 years ago) web design was basically HTML and Java.

Here is a before and after shot of what the site currently looks like (done by someone else) and what it may look like if I figure this out.  I'm trying to keep a simple and clean look to the site.  When I think of dental lab, I don't want to see a black background, the generic navigational bar, and the old 90's visitor's counter!  It needs to look professional.

Old Site

(Right-Click and "View Image" to see actual size)

New Site

Here is what the menu should look like (which it works great on the home page)

"I'm a PC (practicing Catholic) and I'm only 30 years old."

Cade_One's picture
Offline
Joined: 07/02/2009
Graces: 71
One other problem

Originally I was using tables to slice the rollovers, but I just tried outputting it to CSS from ImageReady and when I place the script into the "header.php", it doesn't line up at all! I know home much you hate to see tables, but if that is what works, is it okay to use them? If not, can you give me some pointers on how to get the CSS to look right? Because right now, it is way to the left and covering up the posts. I want it to look like it does in the picture above. Thanks : )

"I'm a PC (practicing Catholic) and I'm only 30 years old."

oscatholic's picture
Offline
Joined: 06/25/2009
Graces: 577
Hmm... there are quite a few

Hmm... there are quite a few variables which can cause the problems you're describing. Do you have a link to a live site, so I can view the CSS/html? Since Wordpress processes header.php, and adds its own stylesheets (and theme stylesheets, etc.), there might be some CSS definitions getting in a tangle. When coding a template for any CMS, I do it all by hand - I really, really distrust the output from a GUI app like ImageReady, Photoshop, FireWorks, etc.

It's not bad when creating an HTML web page in Dreamweaver, but it gets sticky when you want to integrate that HTML with a php template for a CMS.

Advancing the faith.

Cade_One's picture
Offline
Joined: 07/02/2009
Graces: 71
Re: Hmmm

I can e-mail it to you. I think I still have your e-mail address.

"I'm a PC (practicing Catholic) and I'm only 30 years old."

oscatholic's picture
Offline
Joined: 06/25/2009
Graces: 577
Sounds like a plan!

Sounds like a plan!

Advancing the faith.

Cade_One's picture
Offline
Joined: 07/02/2009
Graces: 71
E-mail Sents

Hey Jeff,

I just e-mailed you my custom Wordpress theme files:

• header.php
• page.php
• single.php
• others

So, my question is, what do I need to do to the single.php and the page.php files to, first, bring up the images, and second, to keep it from collapsing?

I also included two screenshot of what it looks like when working correctly and one right before it folds up and disappears.

Thanks : )

"I'm a PC (practicing Catholic) and I'm only 30 years old."

oscatholic's picture
Offline
Joined: 06/25/2009
Graces: 577
[as per my email] Eeks! I

[as per my email] Eeks! I would try to use Wordpress' dynamic menus instead of incorporating the non-semantic markup produced by ImageReady - which also includes a lot of unneccessary JavaScript (which is probably the main cause of the problems you're having).

It would be best to have a list of links:

<ul> <li><a href="/about/">About Us</a></li> <li><a href="/products/">Products &amp; Services</a></li> <li><a href="/prescriptions/">Prescriptions</a></li> <li><a href="/contact-us/">Contact Us</a></li> </ul> <p></p>

in the HTML, then you would stylize the links into a horizontal menu using CSS.

There are a great many guides to how to do this online. Here's a good one for you:

http://codex.wordpress.org/Creating_Horizontal_Menus

Advancing the faith.

Cade_One's picture
Offline
Joined: 07/02/2009
Graces: 71
Problem Solved!

Got it figured out!

Putting

<?php
bloginfo
('stylesheet_directory');
?>

/images/file_name.gif instead of putting wp-content/themes/theme_folder/images/file_name.gif for the path solved my problem.

"I'm a PC (practicing Catholic) and I'm only 30 years old."

oscatholic's picture
Offline
Joined: 06/25/2009
Graces: 577
Ah, very good - that will get

Ah, very good - that will get the right path.

Advancing the faith.

Cade_One's picture
Offline
Joined: 07/02/2009
Graces: 71
Thank You

What's really weird is that both are the correct paths, but the later doesn't work when you go to view a single page/post.

Thanks Jeff! Now that I've mastered creating a custom menu using ImageReady and Wordpress, I'll try your way of creating horizontal menus on my next theme : )

"I'm a PC (practicing Catholic) and I'm only 30 years old."

Post new comment

The content of this field is kept private and will not be shown publicly.