Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Integrating a blog into a current site

L

Lau

Guest
Original poster
I have very little knowledge of blogs (apart from reading them on occasion), and I'd like to incorporate one into my new website, as a kind of online sketchbook. If I did do this, I'd like it to be as seamless as possible. Fortunately, my new site will be fairly simple, and has a four column grid, making it presumably fairly easy to customise a the body of a template to look close enough, so I'm not so worried about the body.

However, while I know it's possible to customise a blog header, is it possible to replace the code entirely of a blog header, and just have the most recent entry underneath the header of the main site? Here's the header in progress of the whole site, and ideally I'd like, when you click on the "blog" link, for the blog to begin just below the paragraph of "lorem ipsum" and the navigation on the right e.g. like this site has below the dotted line here.

Is this possible? From what I can work out, it might be possible if I pay for the "pro" versions of blog software in which you can customise the CSS, but it would be good to know before I pay!

Thanks for any help and advice. :)
 
Very easy. You can replace the whole header in Wordpress or Moveable Type (although it's easier with Wordpress IMO) without paying for any "pro" software. :)
 
Thanks for the info, it's much appreciated.

I signed up to Wordpress, and installed it, but am having trouble with permissions to edit the files, and am a bit out of my depth in the php-surrounded HTML! I keep getting some very strange layouts, and am not good enough to know what I'm doing wrong...

Ideally, I'd like to get Wordpress working, as it's a bit better supported and the design is already fairly close to what I'm after, but in the meantime, I'll look into InBlogit. Although it doesn't bode well when neither Camino or Safari are supported...
 
Lau said:
Thanks for the info, it's much appreciated.

I signed up to Wordpress, and installed it, but am having trouble with permissions to edit the files
Click to expand...

More specifically what kind of problems? You shouldn't need to edit the files too much. And if you do, you edit files in the template folders. Do you at least have wordpress up and running?
 
jng said:
More specifically what kind of problems? You shouldn't need to edit the files too much. And if you do, you edit files in the template folders. Do you at least have wordpress up and running?
Click to expand...

Now I’m at work, and not weeping into my monitor in the middle of the night (;)) I wonder if I was perhaps making it too complicated, and tried this quickly before I went to work. I was trying to insert my HTML around the PHP in the header, and link to my stylesheet to style the header whilst keeping the original stylesheet, but now I wonder if that was too complicated. Should I just copy and paste my entire header into the header.php file, replacing all the code, and then replace the entire stylesheet file with my site stylesheet (and then add and edit the bits from the Wordpress stylesheet back in if I need them)? Or do I need the PHP bits that are in the default header?

I sorted out the permissions so I can now edit it in the Wordpress admin panel, which is a help, and the blog resides here.
 
if you go into the "wp-content/themes" folder, you'll see some folders. I recommend copying one of them, maybe "default" and renaming the copy "lau" or something. That way you can also revert back to the default templates.

In the "lau" folder you'll see a header.php and footer.php file. Just put your HTML in there. There's HTML towards the bottom in the header file and towards the top in the footer file. As long as you just put in your code and don't remove any php code, you're fine. Feel free to remove their HTML though.
 
Thanks for all your help with this, jng.

I'm struggling with where to put the code in. I've got the header.php file:

Code: 
<!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<style type="text/css" media="screen">

<?php
// Checks to see whether it needs a sidebar or not
if ( !$withcomments && !is_single() ) {
?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>

</style>

<?php wp_head(); ?>
</head>
<body>
<div id="page">


<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>
<hr />

and have tried putting my HTML in underneath <body>, but still get the same WordPress header like so:

Picture 1.png

but if I replace any more, I think I'm going to be replacing important php. I think because I'm so clueless about php, I'm struggling to work out what I can touch and what I can't, or what each bit does.

Bloody annoying, because the whole website is coming on in leaps and bounds, and I should be chuffed to bits, but this is hugely frustrating. :eek:
 
Lau said:
Fortunately, my new site will be fairly simple, and has a four column grid.
Click to expand...

Fortunately, my new site will be fairly simple, and has a three column grid. :(

*quickly adds another two columns to his code to beat the Lau. :D
 
Lau said:
Thanks for all your help with this, jng.

I'm struggling with where to put the code in. I've got the header.php file:


and have tried putting my HTML in underneath <body>, but still get the same WordPress header like so:

View attachment 74970

but if I replace any more, I think I'm going to be replacing important php. I think because I'm so clueless about php, I'm struggling to work out what I can touch and what I can't, or what each bit does.

Bloody annoying, because the whole website is coming on in leaps and bounds, and I should be chuffed to bits, but this is hugely frustrating. :eek:
Click to expand...

No problem. Glad to help.

Learning to make a website can indeed be frustrating but it's quite rewarding when one is finished.

As long as you don't remove anything between <?php and ?> tags you should be quite safe.

What you do want to remove is extraneous HTML includin the default Wordpress HTML including the following:

Code: 
<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div>
</div>
<hr />

You'll notice I removed entire chunks of PHP but nothing between php tags alone. The chunks I removed would get read of the giant Word press header and I'm assuming your own header would already include your blogs name and a description if you want one.

You might have to remove the "page" class div as well. You definitely also need to edit its CSS file, with respect to the body definition to get a white background color instead of grey.

The default Wordpress theme is pretty but also a bit difficult.

It might be worthwhile to download a Word Press Theme like this one and modify that instead of the default.

Cheers.
 
jng, you are currently my favourite person! Thank you so much for your help. It works!

I need to sort out the main bit and CSS up the middle bit (as you can see), but now I think I understand what I can delete and what I can't, and the header works a treat.

I couldn't work out why the images weren't showing up, and then I was in the pub this evening, and was describing my site, and realised as I spoke that I'd put the images folder and the CSS file in with the header files, and that it probably should be in the top index. Came home, and it works. :D

I'm chuffed to bits. Thanks again for your help with this. :)
 
Hmm. I say "I need to sort out the main bit and CSS up the middle bit " in a kind of offhand excitable manner, but I'm struggling with the final bits. It's nearly there, but the two columns aren't sitting alongside each other, no matter how small I make them. I've tried removing all the left and right padding/margins from pretty much everything, and the sidebar is still getting pushed below the main column.

Also, the padding and margins that make the header nice and spaced out on the main page don't seem to be working on the blog header, in spite of copying and pasting it, and the header image is wrongly aligned to the left to the header.

Does anyone have any ideas why that might be? :eek:
 
Lau said:
Does anyone have any ideas why that might be? :eek:
Click to expand...
Absolutely no clue about any of this stuffs...

I just had to say, "There be dragons..." :D I clicked. :o What can I say? I'm a naughty naughty girl.
 
Lau said:
Hmm. I say "I need to sort out the main bit and CSS up the middle bit " in a kind of offhand excitable manner, but I'm struggling with the final bits. It's nearly there, but the two columns aren't sitting alongside each other, no matter how small I make them. I've tried removing all the left and right padding/margins from pretty much everything, and the sidebar is still getting pushed below the main column.

Also, the padding and margins that make the header nice and spaced out on the main page don't seem to be working on the blog header, in spite of copying and pasting it, and the header image is wrongly aligned to the left to the header.

Does anyone have any ideas why that might be? :eek:
Click to expand...


Maybe you've already fixed it or I need to sleep, but I don't notice a differece. Can you post a screenshot?
 
jng said:
Maybe you've already fixed it or I need to sleep, but I don't notice a differece. Can you post a screenshot?
Click to expand...

It was just that everything was more bunched up, but I managed to sort that by using two different stylesheets, one linked, one imported. I'm not sure why it worked but it does.:p

The only issue I have left is that I cannot get the right sidebar to sit to the right of the main posts. I've fiddled around with the CSS, and even managed to get the footer to sit to the side of the main posts, with the sidebar resolutely underneath still. If it's all in a 800px container, and float:left the main part, and make it 510px wide, and float:left and clear:right the sidebar and make it 200px wide, it should sit as two columns with the footer underneath, clear of both, shouldn't it?
 
Your CSS doesn't validate because you're missing a few semicolons and a bracket too I think. Run it through the validator and fix those errors and see if that helps.

Also the markup validator reveals several errors but the most important one is probably towards the end where it says you're missing an end div, so one's left hanging.

Also add double quotes to your id divs like so: <div id="rightColumn">

See if those small changes (you don't need to fix all the markup problems, just find and fix the hanging div) make the page lineup properly.

My hunch says the hanging div is the problem.
 
jng said:
My hunch says the hanging div is the problem.
Click to expand...

Thanks for the quick answer. I was just trying to make sense of all the divs, funnily enough. It's so much harder to keep track of them all when they may not open or close in the same document and you can't see them all in front of you at the same time! I had a feeling that one of them might be open, so thanks for looking at it. I'll keep looking!
 
Finally! It's done (with some very minor tweaking left to do).

After sorting out the sloppy CSS and div tags, I worked out that basically, the sidebar has to come before the main bit, but this makes it go left. Putting it after meant it went underneath (and I suppose is dogdy semantically). So in the end, I thought eff this, and put it first, but relative positioned the main div and the sidebar div. Bit of a botch job, I suspect, but it works.

Thank you so much for your patience and help, jng. I'd love to say I'd buy you a pint, but I think location may be an issue. But rest assured I would buy you a drink if I had the opportunity. ;)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back