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

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

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: make the background image. Oh wait, back track a second. First order of business: choose a color theme!! Ha! Ok, well since I've already started with this post, I will cover how I chose my color scheme in an upcoming post, that sound good?

Ok, second order of business: make the background image. I looked through all the free pattern templates at Delicious Scraps and chose the one I liked best. This one to be precise:


Curtesy of Delicious Scraps

I wanted each layer of circle flowers to be a different color (the solid vs the paller one), and the dots an other. They all come in different files when you download the template. But I could not figure out intuitively how to do it in Photoshop! I thought I'd be able to do it with the overlay property, but it did not give me what I wanted at all!!

So I turned to all mighty Google, but I wasn't sure exactly how to phrase what I wanted to do. My first couple of searches came out fruitless, and I was almost ready to give up when I came upon this tutorial (for digital scrapbooking). I almost discard it because there were no pictures and it was using a different version of photoshop than me, but I figured I'd better try, and it worked!! Exactly what I wanted!!

I was now able to color every layer a different color, and because they had a transparent background, I could easily put them one on top of the other. Hooray, background graphic: Check!

With the background image in hand, I had to figure out how I wanted to place it. Here's a good tutorial to know your choices: How To Use a Background Image for Your Blog .

I wanted my background image to be scalable, proportional to the width of the window of the browser, since I'm going for a responsive design. I don't know if I'm making sense... I knew from my past (current?) background image that it looks slightly different for every device/resolution seeing my blog; it's set to background fixed and no-repeat. Someone with a big screen/resolution (Desktop computer) would see quite a bit of the colored part of the background (right, below) and that's the way I intended it to look like when I designed it; whereas someone on a smaller screen/resolution like a 15" laptop (my work laptop; middle, below) would have the background cut off where the lacey borders are and barely see the rest of the colorful background. And who knows what someone on a tablet or phone would see, probably not much if it follows the trend. (Note to self, check on bf's tablet and iPhone)

Click to enlarge in LighBox

The point is, I don't want the flowers to look huge in the background of a smartphone. Which is what I think it would do if I code it the same way as I've previously coded it. I also needed to figure out the biggest size of monitor it would be seen on. If I didn't make the image wide enough for the biggest screen, then there would be white space somewhere to compensate.

With that in mind, I thought my best bet would be to make the background image itself responsive, but was it possible? Apparently, with the new CSS3 rules, it is! Check it: CSS3 backgrounds. It would still mean that anyone with an older browser would not see it properly, but I think the majority update their browsers, right?

So here we go. Try 1, I set background image to fixed, no-repeat and a width of 100%. BTW, the image I made is 2000 px by 1000 px. And I always prefer fixed, I don't like it when it scrolls, I find it too distracting, especially when it's a busy pattern.


Please don't mind that the text is unreadable now. I'm fixing it after, and it's quite easy: just color the background of the main sidebar and header containers white.

Problem numero uno: If you're on a widescreen viewing the blog, the background isn't tall enough to cover the whole height of the screen! Which means the background image needs to be higher than it is wide for widescreens in landscape mode. But, thinking ahead, for portrait mode, then I would need it to be wayyyyyyy higher than wide, which would make for a huge file. There's gotta be an other way. (If you see how to fix it at this point, unlike I did, you can skip to the end ;) )

Try #2: Let's just see what it would look like without specifying the width 100%. (I'm really kicking myself for not thinking of the right fix!!)



Ok, well it fixes the above problem (I think, can't check on more devices...), but I don't like the size of the flowers, I really liked them smaller. And anyway I really want it responsive. Even if I were to adjust the image to have a higher density of flowers, it wouldn't scale.

At this point, I had to leave it be cuz I had other things to do. And then it came to me while I was taking a shower. It was so simple really, why hadn't I thought of it before?

Try #3: background width to 100%, fixed, repeat-y!!!! Duh! If it's not high enough, just repeat the pattern vertically, as long as it is a (seamless) pattern, it won't even show.

And with that, TADA:



Perfect! Actually, I might edit down the background image to the minimum repeating pattern, yet still keep the same width (might also make it less wide, and therefore the flowers slightly larger). That way, the file size of the background image will be smaller, and it should lead quicker. The background image and header image are the biggest graphics of my current blog, and what slows it down a lot right now.

One of my objectives with this design was to minimize the loading times by optimizing the images (not make them too big), and using more CSS to do what I want to do. Which is what my next task will be: make a white background for the containers containing text so they are easier to read. That or/and make the container sizes responsive. Should be easier enough.

Ha! Cuz adding the background was so easy, right?!

TBC...

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 Sidebar... And I can't move them?



Will need to fix that. I remember seeing a tutorial for removing the attribution on Help Logger, so I'll do that first, it'll be done.



Step 1 of 83475983476958: Done!

I'll label this post footer-tweak because I think the attribution is most often there. Or should I label it widget-tweak, it is a widget after all. I'd like to clearly label all posts from the beginning so I don't need to go back in time and for anyone to be able to find what they want to know. We'll see how that works out.

I'll be working on background next, or maybe making widths responsive, or both. We will see!

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, where all the CSS is to add my background code, and I didn't understand a lot of things. Like wtf is .body-fauxcolumn-outer?? (and there where other other like .cap and whatnot) Nowhere in all my basic blogger template reading did I see anything mentioning that tag (or is it class?)!

I thought it might be just the template I was using (The Simple tempalte) so I change to the Ethereal template. Well, the same code was there, so I think it might be just a think with the preset blogger templates.

At this point I remembered reading in one of the articles/series that someone was sharing a very basic blogger template as a starting point. Now in WHICH article was it?? I've been reading blog template stuff on 3 computers, so it's not like I could just go back through my history. I'm pretty good at remembering things based on what the page looked like, so I knew if I could just find the webpage that I pictured in my mind, all would be good.

I'm also trying really hard to save all the articles I'm reading for future reference, either here like I started doing in my first research posts, or organized in my OneNote (but sometimes I have a hard time finding it bc I try to over organize my pages in there).

Needless to say I couldn't figure out which article it was. Well, I knew the articles I was refinding were not it, I knew which one I was looking for but where had I looked at it?? And I was pretty sure I had not yet closed the tab. I finally found it last night. It was on my netbook, the one I use the least often. Good thing I decided to do some bedtime blog reading, or else I still wouldn't have found it! And don't worry I've saved the article now.

So, here's a list of the articles and series that have helped me most understand the anatomy of the blogger template, which is quite different from other templates from what I understand.

1. From Blogger Guide starting with Understanding Blogger Template. There's just a couple of posts after this one also that really help.

2. At Theme Forest, there's this article from Amanda of Blogger Buster as a guide for web designers. This is where I found the basic template (in the middle of the article, you can download the template). It's really quite comprehensive and has great info about widgets and such.

3. This series at Our Blog Template is also very good and clear.

I must have read others, but those were the most helpful to get started and feel a little more confident once I open the blogger template (and also the ones I managed to save). They don't discuss as much WHAT to change, but more making sure you understand the anatomy and know where to put what and what not to touch.

Also, reading many articles, from different authors, really helps because everyone has a different way of explaining. What might click with one article might not click in your mind from an other article. Also, repeat exposure helps.

Even after all that reading, I was still stuck not understanding my template. So I downloaded the one from Amanda at Theme Forrest (#2 above). When I opened it in Notepad, it was all a wide and hard to scroll though document, so I started making Enters and Tabs to be able to read it better.

I found this a wonderful exercise. Especially for the body section with all the div tags and b: tags. That's where I am now. Trying to keep the hiaerchy of it all, seeing what goes inside what and indenting properly. Helps to understand the containers to know what I will need to modify later, and how. I'm probably going to go back and read some more after. I'm realizing now that as much as I thought I understood from just reading, I didn't, and hands on playing with the template is what really makes it stick. And then probably when I re read I'll understand even better, and it'll stick and stay in my mind even better!

TBC...

Continue Reading...

Research,Pt 2

ACtually, you know what, if I'm to do this, I'm gonna do it right (well until I get too lazy to write it all down). I'll document here, or try to, everything I read and my thoughts. Maybe this could be useful for someone else, to see the thought process that goes behind designing a blog.

First let me say I am BY NO MEANS a proffesionnal. I don't even know if I can say I'm an amateur because I've done all of 2 designs. I will count my LiveJournal "blog", that is how I learned HTML and CSS and when I started learning how to tweak both, even if only very very rudimentarily. Then I did my own blog design at Color Me Domestic, but that was a lot more graphical design and I didn't touch too much the template code except to add a couple of widgets.

So now that that is out of the way, I'll say this. If you like this stuff (I mean coding and designing) then your hard work is all that stands in the way. I'm positive I will come out of this with my own personnal made template and graphic elements. It may take a while, because I have other things I SHOULD focus on (*cough* writing my thesis *cough*), but this is more fun.

Complete side note, I did something yesterday that is making me very very happy today, even though it is SUCH a trivial thing. What is it? I cleaned my keyboard. Yes I know trivial. I popped off every key and rubbed them all with 50% ethanol (I think, why does the bottle not clearly label what type of alcohol is in there?! that's what we need to do at the lab!). And then I cleaned under the keys. There were so.many.crumbs it was DISGUSTING. Anyway, so now as I'm typing this, because I only sorta have my "doighté" (I don't know the english term??? you know when you don't need to look at your keybooard when you type?) I CAN do it, but my eyes always go back to looking at the keyboard, it's just faster. Anyway, yes I am just so happy inside that it's so clean and beautiful. I need to do my boyfriend's keyboard next. It's 10X worst than mine was.

Ok back to topic. Which was....I don't know. Where was I going with this?? Ok, documenting I suppose.

I read this series yesterday, dating back to 2007, about the basics of a template. Quick enough read, and I think it's important to understand the anatomy of a template before you start messing with it. Here: http://www.ourblogtemplates.com/2007/06/tutorials-on-blogger-template-design.html

This doesn't mean I understand everything that is written in the template, but I know the parts, which is a good start. I think it's important to really UNDERSTAND this stuff, only then can you really make something truly unique.

Next. I need to read some articles from http://www.w3schools.com/ They were referenced over and over again in the series above, and they are still up to date. I think this will really help in know what the different codes are in the template, and the different options are for changing them.

My problem right now is that I have a ton of tabs open with different articles and series about web design. I kinda have ADHD when it comes to this stuff... Which is why I am referencing here what I find that I want to read later (I suppose I could also use Pocket)

And a couple more things I want to take note of if I need it later:
1. http://styletil.es/ Love the look of this site (the doodly-ness, that's what I want in my own blog, but I've not too good at drawing or anything, so we will see how that pans out). Looks like it would be good to help you establish what you want your blog or website to look like, the layout, the color scheme and the fonts, they mention.

2. Tools for responsive design http://www.hongkiat.com/blog/rwd-tools/ 50 of them

3. Blogger Template Design series start here: http://www.bloggerbuster.com/2008/01/creating-three-column-or-wide-two.html I guess. The baellabel (holy cow that was a messed up typo, I didn't even know at first what I was trying to say1) for the serie doesn't work, and there's no table of contents type page. Still seems like it's well written and easy to understand.


~~~
Alright, so I went through the CSS tutorials on W3schools. While I learned some tricks and got some ideas as to how to do some of the things I want to do in my template, it was not specific at all to blog templates. I do think I have a better grasp of how to write CSS, the difference between id and classes, but it also brought up a lot of questions. So I'm off to find something more relevant to blog template css. I think I'll read through blogger buster now. That might be all I do tonight.

Oh and I just found this free ebook about blogger template design, I think: http://blog.themeforest.net/installation-guides/free-e-book-the-blogger-template-book/

TBC...

Continue Reading...