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:
And here’s what it looks like today:
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.