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

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, it turns out the best (only?) way to do this is to create a transclucent png image and use that as a background image.

So I just created a small wide transclucent white image to use.

I used the same CSS code as for my body background. Size 100%, fixed, repeat y, and voila, that's what I wanted!



Yet, I don't know if it looks all that right. I'm leaving it for now, we'll see how it works as I add graphic elements like the header graphics etc.

Ok, one more thing here, I'm adding round corners to my containers. I just really don't like how square corners look, here or in real life. When I do wood projects, I pretty much always sand down the corners and edges so they aren't perfectly square.

Following this tutorial: Rounded corners using CSS without Images.

Of course things are never that easy. I should have seen this coming. Rounded corners are a property set to borders, which means I needed to add a border, which I don't necessarily want. So fine ok I set it to white, the same color as the background, it won't show.

But then I forgot that adding a border to a container contributes to it's width, and since I already took up all the available width as I mentioned in my last post, so the sidebar fell off below the main post area. Easy enough fix, remove 1% from one of the widths. Now I just hope it doesn't break at a small screen size.

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 (header, outer-wrapper, main and sidebar), I get this:



And it's already responsive!! I've also been coding my images inside my posts to be responsive for the long run. They are set at width 95% so they take up as much space as possible.

So here are the dets for the containers. As of right now, my outer wrapper is set to width 80%, my header width 96% with 2% paddings on each side (so total 100%), my main post area is 65% with 3% paddings on both sides and 1% margin on the right (for space between it and sidebar) (so total is 72%) and my sidebar is 21% with 3% paddings on each side and a 1% margin to the left (total 28%). Yes, I played around a lot with those #s to get what I wanted, and it might still change as I add the graphic elements and other features.

The thing to remember when you are setting these widths is that the % is based on the size of the PARENT container. outer-wrapper is inside the body (which is the entire window), header main and sidebar are inside outer-wrapper. Setting the widths of the header is easy because it takes up the entire width of the outer wrapper, but main and sidebar share the width, so their total width needs to fit inside the outer-wrapper. It's really quite easy once you get that concept down. And also remember that paddings and margins need to be counted towards the width. If it equals more than 100%, it won't look right. It won't be cut off but it won't look right.

If you're not sure what the difference between margin and padding is, check out this article from Blogger Buster. But quickly, margin is the space outside the container, and padding is the space inside the container.

You can try out the responsiveness by resizing the browser. Everything should adjust and fit as the screen gets smaller or bigger. Of course this is just the beginning for responsive design, the very base. I'll be adding media queries so that the layout changes as you get smaller, to better suit tablets and smartphones. I'm so excited for that!!

Continue Reading...

Research, Pt 3

Yesterday, I read the eBook I referenced in my 2nd post. Well, it didn't help any. It was basically a guide to help you choose a premade template. Or well that's what I got out of it. There were the very very basic customization of template (change the background image, font and color, I think) but that was it.

BUT, I did found a pretty awesome website with very good tutorials to customize your blogger template. It's Help Logger, and I've found quite a few new tutorials for customizing things I didn't think you even could, like removing the Powered by Blogger note at the bottom of the template.

I'm going through some tutorials and saving the ones which I would like to implement down the line. So many things to customize, it's gonna take a while!

I did want to share how I am organizing my saved links for future reference. I use OneNote Notebooks to organize pretty much everything in my life right now. I know some people like paper notebooks better, but I seriously think that electronic Notebooks are becoming more and more useful because we have so much electronic information to keep track of, and printing is so wasteful.

So I have a OneNote notebook dedicated to my Blog, and a Section for my Blog Design. I've got a page in there that I'm collecting links to tutorials and they are separated by which section the tutorial is for (header, post, sidebar, footer, social media etc).

Sometimes, you don't know you want to customize your blog a certain way because you don't even realize it's possible. This way, I'm perusing different tutorials and noting what I CAN do, and later I will chose what I WILL do. I'm still curious, because most tutorials only tell you what you need to know for that tutorial, and might not give you all the options possible. I wonder how much more you could customize beyond just that tutorial but still the same element.

I want to make a sorta series on how I use OneNote on my main blog Color Me Domestic, because it's really like my ultimate resource for absolutely everything, and I'm sure others can benefit from it too. All in due time I suppose.

Continue Reading...