By tknospdr on

I developed a site for a doctor's office where patients can log in to fill out forms and whatnot, and another firm developed their new layout and graphic style. I told my contact at the office that I wasn't a designer, just a content builder and that I wasn't very good with CSS and PHP when it came to themeing. The other firm won't help with the themeing of my portion of the site aside from giving me all the files that they used for the site.

Would anyone be willing to help me theme this sucker to look like the main site?

Here's the site I built, not that it matters what it looks like right now but hey: http://www.technospider.com/~david/gso

And here's what it needs to look like: http://ns3.practisinc.com/~greenspoonortho.com/

If you want to see the source of the site it's here: http://www.technospider.com/~david/gso/gso-theme.zip

Thanks,
David
http://www.FloridaPets.org

⋅ Categories: Drupal 5.x

Comments

Magnity’s picture

Magnity commented

What is the timescale for this please?

Thanks.

Magnity

http://webdesign.magnity.co.uk
Magnity Webdesign is currently looking to recruit developers for a number of client projects.

tknospdr’s picture

tknospdr commented

As soon as it can be done. I mean, beggars can't be choosers and all that. But it's got to go live as soon as possible.

Thanks,
David
http://www.floridapets.org

rdsmith@drupal.org’s picture

rdsmith@drupal.org commented

Greetings:

1. Install Nice Menus , or see if menus can be replicated with normal menu module
2. Create 'user-login-block.tpl.php' in 'gso' theme and then use Drupal's Templating System to craft it into what you want it to look like
(http://www.lullabot.com/articles/hacking_phptemplate)

Cheers,

Robert D. S.

tknospdr’s picture

tknospdr commented

I know that's what needs to be done, but I suck at trying to figure this stuff out. That's why I was asking for help.
If you click on the site I'm working on you'll see that I've gotten it closer, but there are obsticles that I always seem to hit that I can't figure out how to overcome.

Thanks,
David
http://www.floridapets.org

tknospdr’s picture

tknospdr commented

Okay, a few hours of mucking around last night got me almost all the way. All I need help with now is theming the content area and the blocks.

Thanks,
David
http://www.floridapets.org

tknospdr’s picture

tknospdr commented

Still not sure how to do these two things. I've got background images that need to go behind, but don't know the CSS to get them there.

Thanks,
David
http://www.floridapets.org

dasithds’s picture

dasithds commented

send me an email with the info... ill have it done for you...

Dasith.

http://www.mytechdaily.com

tknospdr’s picture

tknospdr commented

Thanks for the offer. I couldn't find your e-mail address anywhere.

What would you need besides the stylesheet and the graphics?

Thanks,
David
http://www.floridapets.org

tknospdr’s picture

tknospdr commented

To Dasith for getting me as far as I am. Currently the site looks great in Firefox, Opera, and Safari; however, it's broken in IE. If anyone else could help me out with the fixes I need to do IE compatibility I'd really appreciate it. Here's what I have so far:

What it looks like:
http://www.technospider.com/~david/gso
It's style sheet:
http://www.technospider.com/~david/gso/sites/default/themes/admire-navy/...

What it needs to look like:
http://ns3.practisinc.com/~greenspoonortho.com/ <-- Works in IE

Here's the stylesheet for this one:

/*-----------------------------------------------------------------------------
Website Style Sheet

version:   1.0
author:    Bryan Miller
email:     bmiller@practisinc.com
website:   http://www.greenspoonorthopaedics.com/
-----------------------------------------------------------------------------*/

@media screen {

	/* =General
	-----------------------------------------------------------------------------*/
	body {
	  padding: 0;
	  margin: 0;
	  background-color: #f6f7ef;
	  font: 12px Arial, Helvetica, sans-serif;
	  color:#414141;
	  text-align: center; /* Centered design work around for IE 5.X and 6 in quirks mode. */
	  min-width: 910px; /* Centered design work around for Netscape 6. */
	  overflow: -moz-scrollbars-vertical;
	}
	
	/* Class for clearing floats */
	.clear { clear:both; height:0px;}
	
	/* Remove border around linked images */
	img { border: 0; }
	
	p { margin: 9px 0; }
	
	h1, h2, h3, h4, h5 { margin: 12px 0; color:#147b96;}
	h1 { font-size: 24px; }
	h2 { font-size: 18px; color:#dc872c;}
	h3 { font-size: 14px; }
	h4 { /* different color */ }
	h5 { /* different color */ }
	
	
	/* =Links
	-----------------------------------------------------------------------------*/
	a:link, a:visited { color:#147b96;  text-decoration:none; }
	a:hover { color:#147b96; text-decoration:underline; }
	
	
	/* =Structure
	-----------------------------------------------------------------------------*/
	#container {
	  width: 910px;
	  margin: 0 auto;
	  padding:0;
	  text-align: left; /* Centered design work around for IE 5.X and 6 in quirks mode. */
	}
	
	#content { margin:0; padding:0;}
	
	#footer { margin:0; padding:20px 0 20px 0; line-height:18px; text-align:center; clear:both;}

	/* =Navigation
	-----------------------------------------------------------------------------*/
	ul#nav_main { height:53px; margin:0; padding:0; list-style-type:none; }
	ul#nav_main li { height:53px; float:left; position:relative; }
	ul#nav_main li span { width:100%; height:100%; position:absolute; }
	ul#nav_main li a { display:block; cursor:pointer;}
	* html #nav_main a:hover { background:#ccccff; cursor:pointer;}
	
	
	/* This is an example of what needs to be done for each li in the main navigation unordered list. 
	   You can copy this block and just change out the class name, widths and background image names/locations. */
	ul#nav_main li.home { width:100px; }
	ul#nav_main li.home a span,ul#nav_main li.home a:link span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-home.gif") no-repeat }
	ul#nav_main li.home a:hover span,body.home ul#nav_main li.home a span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-home.gif") no-repeat 0 -53px }
	
	ul#nav_main li.about-us { width:106px; }
	ul#nav_main li.about-us a span,ul#nav_main li.about-us a:link span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-about-us.gif") no-repeat }
	ul#nav_main li.about-us a:hover span,body.about-us ul#nav_main li.about-us a span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-about-us.gif") no-repeat 0 -53px }
	
	ul#nav_main li.our-office { width:108px; }
	ul#nav_main li.our-office a span,ul#nav_main li.our-office a:link span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-our-office.gif") no-repeat }
	ul#nav_main li.our-office a:hover span,body.our-office ul#nav_main li.our-office a span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-our-office.gif") no-repeat 0 -53px }
	
	ul#nav_main li.services-specialties { width:191px; }
	ul#nav_main li.services-specialties a span,ul#nav_main li.services-specialties a:link span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-services-specialties.gif") no-repeat }
	ul#nav_main li.services-specialties a:hover span,body.services-specialties ul#nav_main li.services-specialties a span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-services-specialties.gif") no-repeat 0 -53px }
	
	ul#nav_main li.patient-education { width:161px; }
	ul#nav_main li.patient-education a span,ul#nav_main li.patient-education a:link span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-patient-education.gif") no-repeat }
	ul#nav_main li.patient-education a:hover span,body.patient-education ul#nav_main li.patient-education a span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-patient-education.gif") no-repeat 0 -53px }
	
	ul#nav_main li.your-visit { width:108px; }
	ul#nav_main li.your-visit a span,ul#nav_main li.your-visit a:link span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-your-visit.gif") no-repeat }
	ul#nav_main li.your-visit a:hover span,body.your-visit ul#nav_main li.your-visit a span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-your-visit.gif") no-repeat 0 -53px }
	
	ul#nav_main li.contact-us { width:136px; }
	ul#nav_main li.contact-us a span,ul#nav_main li.contact-us a:link span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-contact-us.gif") no-repeat }
	ul#nav_main li.contact-us a:hover span,body.contact-us ul#nav_main li.contact-us a span  { background: url("file:///private/var/tmp/folders.501/images/buttons/btn-contact-us.gif") no-repeat 0 -53px }
	
	
	#nav_supp { }
	#nav_supp, #nav_supp a, #nav_supp a:visited { color:#0386ab; text-decoration:none; }
	#nav_supp a:hover { color:#0386ab; text-decoration:underline; }
	
	
	/* =Header
	-----------------------------------------------------------------------------*/
	#branding  { background: url("file:///private/var/tmp/folders.501/images/branding-right.jpg") no-repeat right top; height: 101px }
	
	#branding h1 { width:323px; height:101px; margin:0; padding:0; position:relative; overflow:hidden; }
	#branding h1 span  { background: url("file:///private/var/tmp/folders.501/images/logo.jpg") no-repeat; cursor: pointer; position: absolute; width: 100%; height: 100% }
	
	/* =Three Column
	-----------------------------------------------------------------------------*/
	
	#three_column #content_main  { background: url("file:///private/var/tmp/folders.501/images/3col-content-main.jpg") no-repeat left top; width: 910px; height: 290px }
	
	#three_column #content_main #flash { width:649px; float:left; }
	
	#three_column #content_main #quick-access  { background: url("file:///private/var/tmp/folders.501/images/quick-access-bg.jpg") no-repeat right top; width: 261px; height: 199px; float: right }
	#three_column #content_main #quick-access h1 { width:136px; height:29px; margin:26px 0 0 21px; padding:0; position:relative; overflow:hidden; }
	#three_column #content_main #quick-access h1 span  { background: url("file:///private/var/tmp/folders.501/images/quick-access.gif") no-repeat; position: absolute; width: 100%; height: 100% }
	#three_column #content_main #quick-access ul { list-style-type:none; margin:0; padding:0; }
	#three_column #content_main #quick-access ul li { color:#3f3f3f; margin:0 0 0 23px; padding:0; font-size:14px; line-height:40px;}
	#three_column #content_main #quick-access ul li a, 
	#three_column #content_main #quick-access ul li a:visited,
	#three_column #content_main #quick-access ul li a:hover { color:#3f3f3f; text-decoration:none; font-size:14px; }
	
	#three_column #content_main #callout { float:right; clear:right;}
	
	#three_column #content_sub  { background: #fff url("file:///private/var/tmp/folders.501/images/3col-content-sub-bg.jpg") no-repeat center top; margin: 0 5px; padding-top: 24px; width: 900px }
	#three_column #content_sub .content  { background: url("file:///private/var/tmp/folders.501/images/3col-content-sub-bottom.jpg") no-repeat center bottom; padding-bottom: 35px; height: 145px }
	
	#three_column #content_sub #welcome { width:360px; float:left; margin:0; padding:0 0 0 20px;}
	#three_column #content_sub #welcome h1 { width:362px; height:23px; margin:0; padding:0; position:relative; overflow:hidden; }
	#three_column #content_sub #welcome h1 span  { background: url("file:///private/var/tmp/folders.501/images/welcome.jpg") no-repeat; position: absolute; width: 100%; height: 100% }
	#three_column #content_sub #welcome p {margin:5px 0 0 0; padding:0; line-height:16px; }
	
	
	#three_column #content_sub #specialty-areas { width:475px; float:right; }
	#three_column #content_sub #specialty-areas h1 { width:142px; height:23px; margin:0; padding:0; position:relative; overflow:hidden; }
	#three_column #content_sub #specialty-areas h1 span  { background: url("file:///private/var/tmp/folders.501/images/specialty-areas.jpg") no-repeat; position: absolute; width: 100%; height: 100% }
	
	#three_column #content_sub #specialty-areas ul { float:left; width:205px; list-style-type:none; margin:0; padding:5px 30px 0 0; }
	#three_column #content_sub #specialty-areas ul li { border-bottom:1px solid #9cc9d4; padding:0px 0 2px 0; margin:0;}
	#three_column #content_sub #specialty-areas ul li a,
	#three_column #content_sub #specialty-areas ul li a:visited,
	#three_column #content_sub #specialty-areas ul li a:hover { margin:0; padding:0; text-decoration:none; }
	
	/* =Two Column
	-----------------------------------------------------------------------------*/
	#two_column #content_main  { background: url("file:///private/var/tmp/folders.501/images/2col-content-main-bg.jpg") repeat-y left top; margin: 0; padding: 0; width: 688px; float: left }
	#two_column #content_main .top  { background: url("file:///private/var/tmp/folders.501/images/2col-content-main-top.jpg") no-repeat left top; margin: 0; padding: 20px 0 0 }
	#two_column #content_main .bottom  { background: url("file:///private/var/tmp/folders.501/images/2col-content-main-bottom.jpg") no-repeat left bottom; margin: 0; padding: 0 40px 50px; height: auto !important; min-height: 350px }
	
	#two_column #content_sub {width:225px; float:left; margin-left:-4px; } 
	
	#two_column #content_sub #in-this-section  { background: url("file:///private/var/tmp/folders.501/images/in-this-section-bg.jpg") no-repeat; padding: 20px 0 0 22px; height: 260px }
	
	#two_column #content_sub #in-this-section h1 { width:145px; height:16px; margin:0 0 8px 0; padding:0; position:relative; overflow:hidden; }
	#two_column #content_sub #in-this-section h1 span  { background: url("file:///private/var/tmp/folders.501/images/in-this-section.gif") no-repeat; position: absolute; width: 100%; height: 100% }
	
	#two_column #content_sub .vcard {width:180px;}
	
	#two_column #content_sub #in-this-section ul  { background: url("file:///private/var/tmp/folders.501/images/hr-bevel.gif") no-repeat 50% top; list-style-type: none; margin: 0; padding: 0; width: 180px }
	#two_column #content_sub #in-this-section ul li  { color: #3f3f3f; background: url("file:///private/var/tmp/folders.501/images/hr-bevel.gif") no-repeat 50% bottom; margin: 0; padding: 0 }
	#two_column #content_sub #in-this-section ul li a, 
	#two_column #content_sub #in-this-section ul li a:visited,
	#two_column #content_sub #in-this-section ul li a:hover { display:block; color:#3f3f3f; text-decoration:none; font-size:12px; line-height:23px; margin-left:2px;}
	
	#two_column #content_sub #callouts { margin:-8px 0 0 0; padding:0; }
	
	
	* html #two_column #footer { padding:10px 0 20px 0; }
	*+html #two_column #footer { padding:10px 0 20px 0; }
	
	
	/* =Driving Directions 
	-----------------------------------------------------------------------------*/
	#driving_directions  { background: url("file:///private/var/tmp/folders.501/images/directionsBg.gif") no-repeat; margin: 0; padding: 0; width: 250px; height: 220px; float: right; border: 0 }
	#driving_directions h2 {width:250px; height:30px; margin:0; padding:0; position:relative;}
	#driving_directions h2 span  { background: url("file:///private/var/tmp/folders.501/images/directionsTop.gif") no-repeat; position: absolute; width: 100%; height: 100% }
	#driving_directions form {margin:0; padding:0; border:0;}
	#driving_directions p {margin:3px 0; padding:0;}
	#driving_directions .dd-content {font-size:12px; padding:5px 10px 10px 30px ;}
	#driving_directions .dd-content input {margin:3px 0px;}
	#driving_directions .dd-bottom {width:250px; height:35px; text-align:center;}
	#driving_directions .dd-bottom #submitButton {margin:0px auto; padding:0; cursor:pointer;}
	
	/* =Vcard
	-----------------------------------------------------------------------------*/
	.vcard-dl  { background: url("file:///private/var/tmp/folders.501/images/vcard.gif") no-repeat 0 50%; margin-top: 10px; width: 180px }
	.vcard-dl a {margin-left:25px; display:block;}
	
	
	/* =Footer
	-----------------------------------------------------------------------------*/
	#site_info,
	#site_info a, 
	#site_info a:visited { color:#0386ab; text-decoration:none;}
	#site_info a:hover { color:#0386ab; text-decoration:underline; }
	
	
	/* =Forms
	-----------------------------------------------------------------------------*/
	form { padding: 0.4em; margin: 0; }
	form em { color: #FF0000; }
	form p { clear: left; margin: 0; padding: 0; padding-top: 0.4em; }
	form p label { float: left; width: 25%; }
	
	fieldset { padding: 0.6em; padding-left: 0.7em; }
	fieldset legend { padding: 0; margin-bottom: 0.2em; font-weight: bold; color: #000000; font-size: 1.1em; }
	
	input.txt { width: 200px; }
	
	/*textarea {
	  width: 300px;
	  height: 100px;
	}
	*/
	
	.formerror {
	  border: 1px solid red;
	  background-color : #FFCCCC;
	  width: auto;
	  padding: 0.4em;
	  margin-bottom: 0.4em;
	}
	.formerror ul { padding-left: 1.7em; }
	
	
	/* =Tables
	-----------------------------------------------------------------------------*/
	td {
	  text-align: left;
	  vertical-align:top;
	}
	
	td.middle {
		vertical-align:middle;
	}
	
	/* =Misc 1
	-----------------------------------------------------------------------------*/
	.question { background: #FF0000; }
	.highlight { font-weight:bold; background:#FFFF00; }
	
	
	/* =Misc 2
	-----------------------------------------------------------------------------*/
	img.left { float:left; }
	img.right { float:right; }
	
	p.left { text-align:left; }
	p.right { text-align:right; }
	p.center { text-align:cetner; }
	
	.fn {font-weight:bold;}
	
	
	
	
}

Thanks,
David
http://www.floridapets.org

tknospdr’s picture

tknospdr commented

Anyone? At all?

Thanks,
David
http://www.floridapets.org

letsbuild’s picture

letsbuild commented

ive had a quick look and I would say its to do with the 10px padding on the left and right side of
.main_bg_middle and possibly the padding on ".main_bg_middle .text" aswell.

The problem is that ie adds padding onto the total width of the element and because you have the main and right columns pushed right up against eachother its leaving no room so is causing the main column to drop down.
Normally I would use a margin on the left and right or position relative to solve this. Havent got time to test it at the moment though because I'm in work.

chitwa’s picture

chitwa commented

Im sorry I can't find the exact place to change in your CSS. However the problem of misalignment with IE is due to how it interprets CSS. TO rectify this, on the CSS section the deals with your menu, insert "display:inline". Same goes for the content section (blue-pink section) of your site.

http://golavish.com

tknospdr’s picture

tknospdr commented

Thanks to both of you. I tried kicking around some stuff that I feel you were talking about, but everything I tried made things worse. If anyone has more time to help me out I'd really appreciate it.

Thanks,
David
http://www.floridapets.org

dasithds’s picture

dasithds commented

can you send me the stuff again... i dont have it with me anymore... btw are you on IE6?

http://www.mytechdaily.com

tknospdr’s picture

tknospdr commented

If anyone else has anything they could possibly add, I'm now starting to get some pressure from my client. They are waiting on me to get these issues sorted in order to take the site live.

Thanks,
David
http://www.floridapets.org

tknospdr’s picture

tknospdr commented

Anyone?

Thanks,
David
http://www.floridapets.org