Embedding in existing CSS website

[garvinhicking]

Hi!

My bad. I copied one {/if} too many. This made a fatal error, but on your site the errors are hidden so you get a blank page (this is due to the php error_reporting setting on your server).

The {/if} in line 121 needs to be removed.

I attached a ZIP File with the fixed file and all in place.

handyman.zip

handyman template

(3.69 KiB) Downloaded 318 times

HTH,
Garvin

[don0don]

Oh, we are so close!! Thanks so much!

If you go to the blog page now, you will see what I mean ...

http://www.pc-handyman.net/serendipity/

How do I get the Flash header at the top to show?

How do I get the banner image below the Flash header to show?

The title bar over the blog content area is funky ... don't know what that white box is doing there and I'd prefer the "PC Handyman Blog/News from PC Handyman" to be flush left. How can we get rid of the white box and make the title header and subhead flush left?

Thanks again for all your help!

[don0don]

Ah! Figured out how to get the banner image below the Flash header to show ... it was just a problem with the path in the index.tpl file.

So ... now we just need to get the Flash header to show, and clean up the problems with the blog header annd subhead.

Thanks!

[don0don]

I am hoping someone will help me with the final tweaks to get my blog running properly. Right now, the Flash header at the top of the page isn't running and there is a strange white box covering the left-hand portion of the blog header and subheader.

http://www.pc-handyman.net/serendipity/

To give you an idea of what the Flash header at the top of the page looks like when it is running properly:

http://www.pc-handyman.net/home.html

I am so close!! Please help me get to the finish line!

Thanks!!

[garvinhicking]

Hi!

The flash thing happens because your .swf file requests a "flash.txt" file inside the current directory, but in /serendipity/ there is not flash.txt. So yo need to change your flash.txt to request from /flash.txt as well.

About the indentation of the white box: Your CSS declares a margin: auto to #serendipity_banner. You need to remove that margin to make it pan to the left, and then you might to declare a custom background color to that div.

Regards,
Garvin

[don0don]

I just made a copy of the flash.txt file in the /serendipity directory -- problem solved! Thanks for pointing me in the right direction.

> About the indentation of the white box: Your CSS declares a margin: auto to
> #serendipity_banner. You need to remove that margin to make it pan to the left, and then you
> might to declare a custom background color to that div.

Please forgive my ignorance, but which CSS file do I edit to remove the margin? And is the background color also controlled by a CSS file -- and, if so , which one?

Thanks!

[don0don]

With a bit of experimentation, I figured out how to edit the style.css for my Handyman template and reposition the banner head and subhead text to flush left and how to apply a custom background color.

However, I am still getting that weird white box and the other lighter blue background behind the actual head and subhead and its dark blue background.

http://www.pc-handyman.net/serendipity/

What is generating that white box and the other color bar? It's acting almost like it's using a background image, though I can't see anything in the code about an background image file.

Help!

[don0don]

More layers of complication ...

The problem appears to be browser-specific: it shows up in Firefox 3.5 (the browser I usually use), but not in IE7 nor in Chrome 3.0. (My apologies ... I should have checked this earlier.)

So, is there a way to adjust the coding so that the blog pages will appear the same in all browsers?

Thanks!

[Don Chambers]

can you post a screenshot? Not sure I am seeing the problem.

[Don Chambers]

Nevermind... I'm not going to extensively troubleshoot it because your layout is a table, which I hate, and there are a number of validation errors any one of which could be contributing to a layout problem.

Having said that, the actual color is your body background color. In your stylesheet, you have this:

Code: Select all

body {
    font-size: 10pt;
    margin: 0;
    background-color: #D2DFF2;
    font-size: 10px;
    font-family: verdana, arial, helvetica, sans-serif;
    margin-bottom: 30px;
}

That light blue is #D2DFF2.... just delete that line, or make the color #FFFFFF (white).

[don0don]

Don: Now, now ... no need to get peevish! Thanks for the tip about the background color. That did the trick, though it would still be interesting to understand why the color showed through in Firefox but not in the other browsers.

If there is a way to get all (or most, or all the major) browsers to display this page the same way, that would be both interesting and helpful.

Any insights, anyone?

[Don Chambers]

I edited my message to actually give you the solution, but never submitted my edited post.

The gap was revealed due to margin on the <h1>. Simply add margin: 0 to this:

Code: Select all

a.homelink1,
a.homelink1:hover,
a.homelink1:link,
a.homelink1:visited,
#serendipity_banner h1 {
	color: #FFFFFF;
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size : 18px;
	padding-left: 6px;
	padding-top: 10px;
	text-decoration: none;
	text-align: left;
}

I tend to add this to the top of most of my stylesheets so no browser will make padding or margin assumptions if it has not been explicitly definted for that element:

Code: Select all

* {margin: 0; padding: 0;}

You could also review Eric Meyer's Master Reset stylesheet for an insanely complete list of master resets.

As far as looking the same across all browsers? That's always been a challenge... some of them simply are not standards compliant. I try to comply with IE, FF, Opera and Safari... I use IE6 and FF2 for most of my testing... I do not think I have ever run into an issue where it worked in those older browsers, but not in newer ones.

BTW - alll that stuff after <body is not really helping you. I would edit index.tpl so its just <body>

[don0don]

Garvin & Don: Thanks a million for helping me get my blog running. You were both extremely generous with your time and expertise -- and patient with my sometimes ignorant questions.

I look forward to learning more about Serendipity as I explore its many features.

Garvin: you and your fellow developers should be proud of this excellent platform. Well done!

Thanks!

[Don Chambers]

and patient with my sometimes ignorant questions.

The only ignorant question is the one not asked! Best wishes with your new blog!