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...

Post Summary and Thumbnail with Javascript

I've known for a long time that my next blog design would have truncated posts. Post truncation was not well welcomed when it started being a bit more common on popular blogs, but I always thought that the reasons for truncated posts was absolutely valid and beneficial, and I still do! When I started looking into this and I realized that the real way to truncate posts was to go back to every single post and insert the jump break. 1) That did not seem like a fun time to me, 2) it did not look the way I wanted it to look. I imagined there would be an other way to do this, to automate it, and make it look like I wanted.

I started looking for how to do it with blogger, but the only thing I found was the jump break method. So I started to look for blogs that had what I wanted. I found the blog Megan Brooke Handmade Blog that had a post on truncated posts and that's when I saw what I wanted:



The hiccup? These post thumbanils and summaries, as they are called, were generated from a wordpress template/ theme/ childtheme: Genesis. So I couldn't exactly see how they were generated. But that gave me a new search term: post summary with thumbnail. At the same time as I figured this out, I was also browsing through XO Misse's blog and found the exact post that was useful for this! But the original Javascript is from here.

I also found this tutorial for an updated and more customizable script version, but I could not make it work properly, and in the end was not more customizable for me so I stuck to the original script. The problem I had with the custom version was that the read more link would not lead to the full post, even if it was the permalink (ie item page) and I had put the script between conditionnal if tags for index type pages only.

I did change a few things from the original script, even if I am very unfamiliar with Javascript, since I recognized some patterns with CSS.
- Changed the float of the image to right
- Adjusted the size of the image
- Adjusted the length of the summary
- Changed the text link to Continue Reading... and removed the title of the posst from this line/link
- Changed the float of the Continue Reading link to left, and adjusted the padding; I also moved the style line in the body section to the CSS section for easier stylability



One thing that I cannot figure out how to do or even if I CAN do it is to have the images generated by the script to be responsive, as in have the width of the image be a percentage of the width of the container. I can only put a fixed width, which will also stretch smaller images to be that size, which is annoying. I don't think that will be an issue with the real blog as I think my images will all be bigger than that anyway.



I did try putting a % in the place of the px value. If I put 100%, then the image would not be resized and appear it's true size. Good for small images as they were now actually small and not stretched(above), but the other images were displaying too big. If I put say 50%, the images were 50% of their original size, but the remainder 50% was just white space, as in the text would not be able to fill up the space not taken up by the image, so this tactic was useless. And I'm back to square one. If anyone know how to go around that I would love to know!!


With image width set to 100%


With image width set to 50%

So for now I'm leaving it like this: fixed image width of 300, height of 250. At least it keeps things proportionnal, I think it uses the width if a landscape image, and the height if a portrait image, but I have yet to test that theory.


I'll probably have to adjust these values once on my the real blog, so that it looks good.

Continue Reading...

Post Date and Title

For a long time I knew I wanted the date to be displayed calendar style, as in month, day and year all one on top of the other. So I found this tutorial to help me achieve that look. Only thing is I had some trouble understanding it and getting it to work, so I tried an other one of her tutorials with a very similar effect (just doesn't look like a calendar) and this one worked better with less tweaking and was easier to understand. Here are the changes I did to that particular code.



- changed the color of the circle and added a radial gradiant (though it doesn't show much because there isn't enough of a color difference between my 2 colors)
- moved the date header less to the left until it looked good. I find it strange that it disappears if it goes beyond the main container though, but at the same time I do like the effect it gives to have it slightly cut off.
- removed the letter-spacing between the letters of the month and year, it just made it look very odd
- made the year slightly smaller than the month, since it's 4 letters compared to 3 for the month
- moved the whole date up a bit with negative margins so it would look right (before it looked like there was too much space above the month, and too little below the year)
- changed the color of the text to white for all
- changed the font to the same as the post font



I really like the effect of the box shadow being wider than the white border and showing beyond it. Would not have thought to do that. Might use that elsewhere in my design now.

I also changed a few things about the post title:

- post body clear both so post text would appear below the date and not next to it; also this will prevent the title text to overlap the body text if ever the post title is really long, some blogs need to add this bit of code as I've noticed they have this problem which is more noticable on a phone
- moved the post h2 (aka title) so it would be almost lined up vertically with the center of the date circle using padding, and so it would clear the circle, too.

I'm not sure how, or where the code is, but if there are 2 posts on the same date, then the older post, or the one lower on the page, does not have the date next to the title. Nonetheless, it looks just fine.



Part of me want to delineate the title a bit more than this. So I tried putting a shadow-line below it, but I'm not quite sure if I like it... Also it might look weird if I add something below it (like labels, author, comment links). I'm keeping this option in my head, but for now I'm removing it.


PS this screencap was taken before I changed the font face of the date.

Now before I get too ahead of myself, I'm going to look into having a thumbnail and post summary of each blog post on the main page/ index pages (I know, you already got a glimpse of it in here, but it was not working correctly). This will change things considerably for how I want the rest to look.

Continue Reading...

Header: Tagline and other finishing graphics.

We're finishing the header today!! Just a few graphic elements to mention and we're done.

First I want to talk about the long herringbone pattern that essentially looks like a long arrow. I made this graphic from scratch in photoshop. Yes, from scratch.

I started with a small square image, hand traced, or mouse trace, an imperfect square around the perimeter. This would be literally the building block for the bigger graphic. My first intention was to have it be the background image, but after I finished I found it way too busy for that.



Anyway, from the block outlines I made a variety of colored blocks using my color scheme. Then I proceeded to literally build one outline block at a time the herringbone pattern, minus the color, for the graphic. It started with 1 block, then 2, then 4, then 8, 16, 32, 64, etc etc exponentially until I had an entire row, which then became 2 rows then 4, 8, 16, 32 until I had a page full.



Then I added the colored blocks one at a time and dispersed them it would look even.



After I had a small patch, I just merged all the colors onto one layer that I could then repeat for the whole pattern. I no longer have the whole image colored, but you can imagine what it would look like: busy. Just way too much for a background.

But then while coding for the header elements, I felt I needed some sort of line graphic and thought of just one row of this pattern that would form an arrow.



The black outline made it look very heavy, but remove it and keep just the color and it's perfect!



I added it right below the page tabs to sort of anchor them and give them support. It also had the benefit of directing the eye towards the logo. But I thought it was a little unbalanced, so I added an other one above the main nagivation. I inverted the orientation of the arrow, as I found this balanced out the whole thing better.

Then, to make it fit more with the logo, I wanted them to overlap and the arrows to go slightly behind it. So I set the position of the logo to relative, and the z-index to 2 (you need position relative for the z-index to work, I learned this the hard way). High z-index means more on top. Then I set the position relative of the arrows to left -5%, but that meant the arrows were no longer aligned with the right side of the header container. I remedied this by increasing the size of the image. Both arrows are under their own span, and I had to put the css for the image of that span for it to work (ex: .arrow img{ width:105%; }. I increased the size by the same percentage that I moved the arrow to the left.

The very last part was the tagline. I went back and forth between 2 sayings. 1) Learning the Art of Homemaking and 2) Experiments in Homemaking and handcrafting. For now I'm going with the 2nd as an ode to my science/research background. But it could change.

The font is Halo Handletter, and the tagline is an image. That way it will be responsive. I cropped the image as tight as possible around the words, and positioned it where I wanted using padding. I had to set all but the right padding so that all the elements in the header would be where I wanted them to be.

And just like that, the header was DONE! For now...

Continue Reading...

Blog Background: Take 2

I've been noticing that my blog background takes some time to load. Not surprising since it is quite a large file, as the image itself is quite huge (2000px x 1000px).

But it need not be that way. My background is a simple repeating image. I thought I needed it that big so it would scale to the size of the window, but upon further thought, I believed I could achieve the very same look but with a smaller image, and hence reduce load times.

First, I cropped my background image to the smallest repeating pattern, which is this:


Changed the repeat to repeat instead of repeat y (or just removing this would work too as the default is repeat x and y), changed to scroll instead of fixed (or just remove as again the default is scroll), and played around with the size until I thought the pattern looked right (not too big and not too small). That number ended up being 3%.

And just like that I went from a file size 641kb to 12.5kb and got the same look!

Continue Reading...

Header: Search bar

I'm almost finished coding for the header section of the new layout! So far I have the logo down, the pages navigation, and the main navigation and the social media buttons. So I'm only missing the search bar and the tagline.

For a long time I knew where I wanted the search bar to be displayed within the header section, but really had no clue as to the esthetics of it.

As I always do when I don't know where to start, I search for what's already been done until I find something I like. I found this tutorial that I really liked so I started implementing it.

After some color changing of the code, I ended up with this:



For some reason, I could not get the actual search function to work with this code, and try as I might I could not understand WHY. Also, I had a really hard time making this responsive since the Go circle was coded with ems. As I learned when doing the social media buttons, responsive circles with text inside are rather tricky, and well kinda impossible to achieve.

I let it be for a while while I worked on the main navigation, and once that was done I came back to it. I then thought it looked too busy and fancy, and I wanted to simplify the design of it. And also find a way to make it more responsive.

So I found this code instead. I forewent the option of having placeholder text because that's done with Javascript and I don't know Javascript. I'm trying to stay within HTML5 and CCS3.

In the end, I could only make the width responsive, and not the height. Which I guess in hindsight is also true for the navigation menu. This is because font cannot be made truly responsive (as in scale to the width of the browser window), and this element is in major part font dependent. Yes you can define it in ems, but that means it will be adaptable and not responsive/scalable. If that makes any sense...

Anyway, once it gets to the point where it no longer looks proportionate in the design, there will be a breakpoint that will completely rearrange the layout, and I will then be able to change the look of it so it's once again proportionate. Which will mostly be adjusting the font size.

Making the width responsive was a bit more complicated than I would've thought, and necessitate a lot of cascading widths to be set.

The cascade for this element is like so:
body--> header --> search bar container 1--> search bar container 2--> search input and search button

The header is 80% of the body, the search bar container 1 is 67% of the header (because it's next to the logo which together make up 100% of the width), the search bar container 2 is 50% of the space beside the logo with a left padding of 50%(to push the search bar to the right), the search input is 70 % of that space while the search button is 30% (which together make up 100%). Did you follow that? Yeah, I know complicated.

I changed the color scheme of the original tutorial, removed shadows to make it simpler, and that was pretty much it for this guy.

Continue Reading...

Header: Social Media Buttons

My quest for the social media buttons as to make them with pure CSS, as I did with my main navigation. That means that the social medianess, as in the font or icon of each button, would have to be rendered by a font. I have yet to find a social media font that has all the ones I want: RSS, email, Facebook, g+ and Bloglovin. But then again if I made small images and put them inside the button, they would be easily scalable... hmm, food for thought.



I'm trying to stay away from images as much as possible because the nature of my blog means the content is already pretty image heavy. So as to not increase load times beyond that, I'm trying to minimize image sizes for the blog layout, because afterall those are the images that are loaded every.single.time a page on my blog is loaded. Make sense?

I wanted simple yet unique social media buttons. Not just a circle, not just a square, definetely not a bunting as that is being done wayyyy too much, but something different. After a lot of searching and pondering, this idea came into my head: a square with 2 facing corners that are rounded. And a border. And a radial gradient to up the fanciness :)

I used this article to help make it responsive. In the end, the tutorial was more complicated than it needed to be, and well, didn't even work. But I couldn't have figured it out without it, so it's worth a mention.

Basically all you need to do is set the width in %, set the height to 0, set the TOTAL padding equal to the width in %. Because there's text that I want centered in the shape, I set the padding-top first, then the padding-bottom for it to look like it's even on all sides. Of course you complicate things if you put a border, but again you can just use the border-box trick I mention here.

Then, round 2 opposing corners (I rounded by 40%, so they remain responsive), add radial gradient, and you're done. Each button is a seperate span element. I will need to change the font so the actual icons appear, but you get the idea.



Still need to add a hover effect, which might be a text-shadow, or invert the radial gradient direction.

Continue Reading...

Content Main Navigation

Continuing on my quest for the header graphics and layout, the next big element is the content navigation. I already decided on my Main Navigation categories, and sub-categories previously, now it's time to find a nice way to display them and make them... navigatable.

I had a hard time coming up with something here. Most blogs I frequent have just a simple text navigation. Some have effects on hover, but most do not. That's too plain for me. I also wanted the navigation links to be easily made responsive for the different designs. I knew I wanted only the 3 main categories to be displayed, and then the sub-categories appear on hover, but I wasn't exactly sure HOW that would work, or how I want it to look.

While I mulled over my possibilities for coding this part, I went ahead and tried to make some graphics for the main navigation. I wanted them to keep in with my doodle graphics that I'd already made for my pages navigation and my logo. I came up with these:



I wasn't 100% sold on them though, I couldn't figure out a way to make the space between each tag/category more transient, gradual, whatever, since I wanted each of the categories to be a different color. And also, I made the space between the 2 lines transparent, so that on hover there would be a background color that would only show through that part, but instead all I see is a colored line along the bottom on hover, as you can see for the first category in the picture above. I can't figure out why it's doing this.

Then I finally found a tutorial for a navigation bar that had what I wanted, except it was text based, no graphics. I figured I might as well just try and make the navigation work, and then worry about whether I can change the text to graphics, if I still wanted that.

The code I found, a dropline on hover navigation bar, is based on list items, which actually conventional menu bars are based on, not just images with links all in a line like I did my last one. The thing with list items is that you can easily have sub-list items, aka Categories and Sub-Categories. Also, text is more easily scalable while still keeping it's crispness at whatever size, which will be super important for viewing on high pixel density devices (aka retina screens).

Took me a long time fiddling with this code to make it work the way I wanted it to. It's one thing to find the code, and another finding a TUTORIAL with the code. I had to figure out what each line of code did exactly, since it's not exactly explained... and which code was redundant, because there was redundant code.

Here are a few things I changed to suit my needs:
- changed the text-align to center
- changed the width of the li a to 33.3333%, since I have 3 main navigation... The thing I haven't figured out is why I need to set the width to li a and not li only... but do whatever works right?
- changed the li background color to white
- apply gradient background color and add round upper corners to li a elements so they are defined more as individual tabs
- applied different background colors for the 2nd child and 3rd child of the li a so each main category is a different color like I wanted
- changed the active and hover state of li a to have a white background and for the text to be colored the respective color; added a colored border to keep the tab definition, but since border are fixed px and not % to make them look good, it's harder to make them fit and be responsive, so had to change the width of li to a guestimated # that would not break the page, in this case 33%; also had to add a border to the non active state or else it would appear as if the tabs are growing/moving to the right on hover.



Up to that point it was fairly straight forward, it was the sub-list that gave me a lot of trouble, both in understanding the existing code, and changing it to what I wanted. For one, the sub-list inherited most of the code from the main list, like the round upper corners, so I had to override by adding a 0px radius to the upper corners.

Second, the sub-list ul li is by default a little to the right of the list, like a "Tab" indent, or nesting of the sub-list under the list, which I could not figure out how to get rid of. The reason why it's not evident for the main code which I am basing this on is because he put a background color to the container containing the ul, and he used fixed pixels. If I did the same using % for the width so that it's responsive, that container extended past it's own container (past the header container) because of the indent, it keeps the same width it's just moved to the right. So I had to set the background to white, and make it less than 100% or else it would extend past still.

And this is why sometimes it's good to explain to someone, even if that someone is invisible. I just realized that if I set my background to transparent, then I CAN just move the ul container and make everything flush!! This won't be responsive if I move it by %, but with -40px at the left margin everything's good and responsive!! 40px seems to be the default indentation for sublists in this case.

So for the sub-list I changed:
- set upper corner radius' to 0em
- set margin-left to -40px

After all that, I could not get the sublist to be the exact same width as the main list, because of the border I added to the main list. Though even adding borders to the sublist didn't work. Finally, I found a bit of code that worked its magic. Basically, the problem is that the border is not part of the width but added to it, so this bit of code tells it to be included in the width. Magic I tell ya! I found it here.

The one thing that will most probably cause me trouble is when I want to add more sub-list items, I'll have to change the set width % to accomodate for it, or else it will go below the existing ones. Also, I need to work around the fact that if a item text is longer than the 33% width, it will do a line break and continue writing, whereas I would want it to shift the other list items for the to be one after the other on the same line. So I might have to fiddle with this part a little more, remove the tab definition (rounded corners) for the sub-list and not give it a defined width, and not center the text but left align it. Yeah, I'm probably gonna have to do that... but I'm pretty tired of fiddling with this part of the code, I want to move on to something new for a bit.

With that, I'm pretty satisfied with my navigation, and I'm not planning on adding a background image to them. But, I do want to change the text font, which is an entire different post, as this one is pretty long. And also because I haven't figure out how to do it yet.

Continue Reading...