It’s Been A Year – Time for a New Blog Design

A few weeks ago, I talked about how I made blogging work for me again and part of that was doing more on Instagram.  I wanted to reflect a new photography focus on my blog design so I decided to update my blog theme.  I put a huge photo in the header that I took myself full of books and things I love.

Plus it’s been over a year since I’ve changed my design and after writing this post about how my design has changed over the years, I noticed that my design changed every year almost like clockwork.  I didn’t do that on purpose.  In fact, every time I redo my blog design my husband groans at the money I spend so I promise I will never change it again.  My blog redesigns often involve buying new themes and they can cost anywhere from $30-$50.  I think it’s time to stop the lies. I like changing my design periodically. :) BUT this design was relatively cheap since all I purchased were the fonts for my logo which only cost $12.  I took the new header photo myself so it was free :)  I was able to keep my theme and just tweak the code to the way I wanted it.  See?! Cheap!

Speaking of tweaking code, if you are reading this post from a laptop/desktop, you’ll notice that my header background image stays in place while my logo scrolls over the top.  This is called a parallax scrolling effect which creates an illusion of 3D depth and I got the code from here.  JUST FYI – this code is very buggy on mobile devices, especially iOS devices.  I had to change the code for my media queries to get it to look right on smartphones.  Media queries are a pain in the butt.  It’s possible, but it takes a lot of custom coding.  Just want you to be warned before you jump in :)

So here’s the code I did in case you want to use it:

/* custom fixed scrolling background header */

.site-header {
/* The background image */
background-image: url(“http://www.booksatruestory.com/wp-content/uploads/2016/05/headerimage”);
/* Set a specified height, or the minimum height for the background image */
height: 600px;
/* Set background image to fixed (don’t scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}

Other things I added:

• A home page.  I love it!!  My favorite part is the Instagram photos featured there.
• Instagram widgets on my homepage and sidebar.  I use the Instagram Feed plugin and it’s awesome.
• A new logo.  I kept the feather, but I changed the color and, like I said, I got new fonts.  I also added the ink splatter and I love everything about it!
  

• A new color scheme.  I have a reddish-orange instead of pink and a teal instead of light green

 

Just for fun, here’s a gallery of my past blog designs so you can see how it’s changed :)

What do you think of the new design? If you have any questions about how I did something with code or plugins feel free to ask :)