Choosing Media Breakpoints

One thing that has been nagging me in the back of my head and prevented me from moving forward is that I wasn't sure of the layouts I wanted to get for different media devices. I didn't know how many breakpoints I wanted, or where those breakpoints would be best situated. Sure I've read of some in articles, they mostly reference the iPad and iPhone, and well, I'm kinda anti-Apple... So I didn't want to base myself on them but rather on actual resolutions. So I took the time to look through my google analytics for my blog and see what people are viewing my webpage on. In my mind, I saw a total...

Continue Reading...

Translucent Backgrounds and Round Corners

One of the rules defined in CSS3 is opacity of background images. The moment I read that I knew I'd be taking advantage of that feature to do something I had in my head. I wanted to make my outer-wrapper container translucent, so that it frames the entire blog but still shows a bit of the beautiful background I've got going on. So I set the color to white and then added the little bit of code for opacity. Easy peasy! Right?! Wrong! Turns out, this affects everything inside the container. All the text all the images are now also transclucent. Not what I was going for!! So after a bit of digging,...

Continue Reading...

Responsive Design: Setting the Widths, and Background Color

So I was gonna do a post to say I needed to add a background color (white) to the parts with writing: post, sidebar header, then as soon as I did that I realized I needed to play with the margins and paddings, which need to be in % if I'm to do a responsive design, so what the heck I'm gonna start the responsive design thing right now with the width of the containers. Good place and time as any to start. So yes after a couple of lines of code to make the backgrounds white to be able to read properly, I get this: And then with some adjustments to the width and padding of the main containers...

Continue Reading...

Setting the Body Background Image

The background image, or graphic, was one of the first graphic elements I made for the new design. I knew I wanted I pattern, and for it to be predominantly white, yet still quite colorful. I'd found this graphic designer, Delicious Scraps, and I loved her stuff because you could use them to create your own graphics with them using your own color scheme. Perfect! Exactly what I needed since I hadn't yet found a scrapbook kit with a color scheme I liked and elements I was longing for. And I can pretty much guarantee no one else will have the same background as me! So, first order of business:...

Continue Reading...

Ready Set Start! aka Removing Attribution

Alright, I've finished indexing (indenting?) the basic blogger template. It was Loooooong! Made me think of the wax on wax off exercise, lol. It was fun at first, but it got really repetitive. It made me realize just how many little widgets and links and such goes into a blogger template! I'm glad I'm not starting from scratch. But it almost feels like it when this test blog looks like this after loading that template: Complete blank slate!! And no nonsense in the template that I can't make sense of! So I've noticed a few things in the Layout Mode: The Navbar and Attribution are in the...

Continue Reading...

Gotta Start Somewhere... Or Not

Yesterday, I was finally feeling tired of reading, and reading and reading instead of actually DOING, so I decided it would be the day that I would actually make a change to my base template. There's only so much you can read before you have to actually START. So you're expecting something to have changed on the template, right? Well, trying to change SOMETHING (I decided to go easy and just add my background) highlighted some challenges that I did not foresee because I hadn't actually LOOKED at my template yet. I THOUGHT I understood the skeleton of blogger, but then I looked at the head tag,...

Continue Reading...