Labels widget

As I was trying to figure out the whole 3 column thing last time, I knew I had a problem with my labels widget. I had set it to display as a cloud yet it was not doing it. After trying playing around with the options, I had to remove and add it back, and that fixed the problem. No more crazy long list of labels with tons of white space!



Still, I didn't like exactly how it was displayed, so I set out to find some customization option. I didn't want different size words, or just words, but more than that, I really had no idea what I wanted, so I'm not being too picky for this. I liked the idea of this one, with my colors instead.

Without any tweaks from the original tutorial:



And a few adjustments.



I thought it would be nice to replicate my 2 opposite rounded corner effect from my social media buttons, but it didn't work with %, I had to use fixed px.

There was a large space above and below the title of the widgets in the footer, which I could not figure out where it was coming from. I remembered that in Chrome you can Inspect Element (by right clicking anywhere on the page) and see how something is coded, so I did that and saw that there was a default margin around the titles that blogger was automatically placing.



So I just specified margin 0 and it fixed that.



This gave me the idea to do the same for the width of the footer, which I was having trouble getting it to be 100%, there was always a sliver of background on either side. By inspecting the element I saw there was indeed a margin being placed for the body, so again I just specified margin 0 and voila!!



SO happy to finally figure this one out!

Continue Reading...

Footer

I know I'm not done with the main content part of the design (blog posts, comments, sidebar), but I really wanted to get started with the footer. Just making it presentable, and well, THERE.

For now, I just want the footer to be the place where you can find more posts of mine, however you want to find it. Whether it be by category (via an other iteration of the main navigation), by label (which I suppose is just an other way of organizing the categories, just more messy I find), or by date (via the blog archives), anyone can find something else to read once they are at the bottom of the blog page.

So, I wanted to do a simple 3 column footer. Simple,ha! No such thing as simple when your coding apparently. Unless you've done it a million times, maybe.

The hierarchy should go like so:
footer-wrapper
footer
main navigation, labels, blog archive (all side by side)

But, making a 3 column is proving to be more difficult than it should be (apparently a common problem amongst even the best designers, so I don't feel so bad now). I want them to all be equal size, so I put all width 33.3333%. And yet they appear just one on top of the other, taking 33.333% of the width still. After trying a few things with floats (one float right, one float left, but what about the 3rd since no float center...) and it still not working, I google and found that your suppose to have them display as inline-block (because divs automatically use the next line, like an enter would in a word processor, so you need to tell it not to do that) (here). It works but they are all aligned with the bottom of the container box instead of the top, weird...



If I try to put them as all float left, like someone else suggested, then the background color disappears? Fixes my top alignment problem, though. Why does it not do that with my header, then , since I use floats on everything? Cuz the last div (main navigation) is not floated?



Ok, so let's try adding an other element below those 3 columns. I think I might have read something about this way back when.



Woohoo, that worked! With a clear both added though, or else it appears below the archives widget.

One thing that is driving me absolutely MAD (as in crazy, not angry, though a bit of that too) right now is that even if I do width 100%, there is still a bit of space on either side. I do not get it. The only bigger container is body, which if I put as 100% will move the footer slightly to the right and make it bigger than the window size, and it's got no padding or margin. I specifically took the footer out of the outer-wrapper to be able to have it full width. Websites do this all the time, so what gives?!

First battle won! TBC...

Continue Reading...

Getting back in the game

I haven't worked on my blog design since, what April?! Yikes... I really want to start blogging again, but I'd like to have my blog design finished first. Then again, if I wait for the design to be done, I'll never start blogging again. So I decided to get it mostly finished. At the very least, functionnal. But now that I'm looking at the code, I'm feeling a little lost. Some things have dissapeared, like my social media button images, WTF?! I haven't touched anything since they last worked, or did I? I don't understand what I did anymore, where I was at, why I need some code for the design to look like I want it to.

I think I have to start over. Not over over, but just erase everything and put things back. Start from a clean template, cuz I have a feeling some things are broken and that's why it's not acting the way it should. Good thing I documented everything here!! And saved most of the pieces individually in Onenote. Still, might have some problems. But I do need to get back to it and finish it!!

Here goes...

Continue Reading...