Integrating a blog into a current site

Discussion in 'Web Design and Development' started by Lau, May 21, 2007.

  1. Lau Guest

    #1
    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. :)
     
  2. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #2
    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. :)
     
  3. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #3
    use http://www.inblogit.com/ . They have a script that you can insert into your site and you can edit the blog on their site (it could be your site, i have forgotten). BTW: it is free and designed for designers and not php programmers and the like
     
  4. Nicolasdec macrumors 65816

    Nicolasdec

    Joined:
    Dec 7, 2006
    Location:
    São Paulo
    #4
    I Have used them before Its great. and easy to setup.
     
  5. Lau thread starter Guest

    #5
    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...
     
  6. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #6
    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?
     
  7. Lau thread starter Guest

    #7
    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.
     
  8. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #8
    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.
     
  9. Lau thread starter Guest

    #9
    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:
     
  10. iGav macrumors G3

    Joined:
    Mar 9, 2002
    #10
    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
     
  11. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #11
    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.
     
  12. Lau thread starter Guest

    #12
    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. :)
     
  13. Lau thread starter Guest

    #13
    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:
     
  14. devilot Moderator emeritus

    devilot

    Joined:
    May 1, 2005
    #14
    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.
     
  15. Lau thread starter Guest

    #15
    Heheh, cheers. :p
     
  16. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #16

    Maybe you've already fixed it or I need to sleep, but I don't notice a differece. Can you post a screenshot?
     
  17. Lau thread starter Guest

    #17
    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?
     
  18. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #18
    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.
     
  19. Lau thread starter Guest

    #19
    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!
     
  20. Lau thread starter Guest

    #20
    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. ;)
     

Share This Page