24 before 24: Redesign my blog

I finally did it!

If you’ve been to this blog before, you may notice a few changes. Yes, I redesigned my site! I’m seriously so excited about the new look! It feels even better because I did it myself! It turns out that it wasn’t even that hard! Guys, this is a big deal! Exclamation marks all day every day! I was inspired my this post and decided that if I put in some work, I could change my blog all by myself.

With the help of WordPress, a free theme and a day’s worth of work using custom CSS and the WordPress forums, I was able to make my site look the way I wanted. I’m sure I’ll make more changes later on, but for now, I’m happy.

Here’s what Modern Notebook looked like before I started making changes:

Modern Notebook 1.2

And here’s what it looks like today:

Modern Notebook 2.2

Can you see the changes? It’s like one of those Spot the Differences challenges. Mainly, I wanted to make the site look more like my own and less like the theme because it is really common. My favorite colors are pink and gray, so I used those throughout the site. Even though I love pink and I feel like it goes with Modern Notebook, I wanted to minimize it while keeping it on as an accent color.

Let’s geek out about those details!

I upgraded from a free WordPress account to WordPress premium back in April, when I changed the blog’s name and URL. The upgrade comes with great options, such as the ability to customize with CSS. But I was lost and honestly, I didn’t even bother with it. I just figured I would have to take a class in CSS or do a ton of research before I could make any changes. That’s simply not the case though.

CSS can be really fun, especially if you have a customize tool and theme to work with. With the way my blog is set up, I just had to look at the framework of the free theme I was using, figure out what I wanted changed and make adjustments from there. It would have been a lot different if I was working from scratch. Knowing a little bit about how HTML works helped too, since CSS is different but similar.

Using CSS, I finally hid the pink polka dots that are signature part of the free Adelle theme. I also snipped off the end of he navigation bar, which looked  more like a ribbon before, and I changed it from black to gray. Adelle normally has squiggly lines between each section in the sidebar, but I changed them to straight lines. To make a cohesive look, I made the post date the same color gray as the navigation bar and changed it from an oval shape to more of a circle.

By the way, CSS stands for cascading style sheets. It’s often used to style web pages and interface with HTML. Or something like that.  read about it on Wikipedia and got a little lost.

Most of the work came down to Google + copy + paste = :) Add some critical thinking for a job well done.

Some of the changes didn’t even require CSS. For example, I added a new header to give it a signature touch, thanks to the help of my amazing boyfriend. We made the header together in Photoshop. (But it could be done using any free photo or design software instead.)

Then I worked on the sidebar to make it look special. I added in my blog’s categories with a text widget and HTML, only after going through all my posts to make sure they were each in the right categories. Then I added in an image to link to my summer playlist, which I plan to change out occasionally.  Finally, I used free social media icons from Carrie Loves Design and took out the old social widgets. To top it all off, I changed out my profile photo from last summer to a more recent one.

That about did it!

If you have any questions about how I made my site look the way I wanted, let me know with a comment or email! I’d love to help. If you have any advice or critiques about my redesign, please let me know! I’m totally new to this.

P.S. I’m trying to do 24 things before my 24th birthday in February, and this one is on the list. I know, I’m crazy. See the rest of the 24 before 24 list and then judge me.

12 thoughts on “24 before 24: Redesign my blog

  1. Looking good! Blog design can take awhile when you’re teaching yourself–I know after having spent ages trying to figure out how to make a custom header and other similar changes to what you did. So kudos to you for doing so much! & good luck with your 24 list–having a mentor is an amazing professional experience, and when you find someone you can connect with, it can truly help you move through any professional situation.

    • Thank you, Alicia! You’re always so encouraging. I don’t think I’m even going to finish half of my 24 list, but at this point I don’t really care for a lot of them. I won’t blame myself for not doing any of the things involving money or travel. Having a mentor is an exception. I hope that still happens soon. I would love to hear more about your experience.

    • Hi Daisy! Sorry for such a late reply. It looks like you figured it out or had your site designed by someone. It looks great! Just for future reference, here’s what I did.

      I put this code into my custom CSS screen to take out the squiggly lines:
      .widget {
      background: none;
      }

      Then I put in this code to add in straight lines:
      #secondary .widget {
      border-bottom: 2px solid #A9A9A9;
      }

      You can adjust the size and color of the lines with that code.

I would love to hear what you have to say. Leave me a comment and I'll try to write back soon.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s