JeannelMah.Rocks

JeannelMah.Rocks

A blog about the adventures of Jeannel Mah

Getting the blog aligned

My website and my blog have been looking very different for a while. But the main thing I wanted was to get the header and footer of the website aligned with the blog.

So I’ve been playing with this bit of code for a long time, which basically just puts the Header and Footer into the blog template.  It worked sometimes, sometimes it didn’t.

<base href=”http://jeannelmah.com/” />
<?php include(“template/Header.php”); ?>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<?php include(“template/Header.php”);
?>

<?php get_header(); ?>

<div class=”row”>
<div class=”container”>
<div class=”col-sm-8 blog-main”>

<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();

get_template_part( ‘content’, get_post_format() );

endwhile; endif;
?>

</div> <!– /.blog-main –>

<?php get_sidebar(); ?>
</div>
</div> <!– /.row –>

<?php get_footer(); ?>

The main reason is because the blog template and contents are in different directories from the website one (as it should be). Anyway, there may be some way to automate this, but I’ve just created different template folders in the respective directories and do an rsync every time I update one of them.

rsync -r dir1/ dir2

But well, it works. So my website and my blog look similar now!

Blog:

 

Website:

Also you might have noticed, I drew up a logo for myself.

Its not as symmetrical as I’d like it, but it was the best I could do with a mouse at the point of time. I’m open to anyone helping me recreate it.

Anyway I inserted this into my header file. So in the same directory as the directory that has the template folder, I’ve got another folder called “images” which has two versions of this logo (black and white), inside it in png format. The Header file in “template” folder has a line which looks like this:

<a class=”navbar-brand” href=”http://jeannelmah.com”><p><img src=”http://jeannelmah.com/images/JM Logo white.png” style = “width:21px;height:21px;”>JeannelMah.com</p></a>

The part in bold italics is what inserts my logo image into the header where it does.

Slowly but surely, my website is taking shape.