Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Badges

Maybe I've missed it but it would be great to be able to embed or otherwise add our badges to your website in a way that categorizes them. e.g. I display my HTML badge and upon someone clicking on it it will display all the sub-category badges I have, like wise with my CSS badge. When I complete the Web Developer track as a whole It will display that badge with all of its sub badges.

Sure I could build this out myself and download all of the badges and put them on my web host. I just thought it would be cool to have right from treehouse.

See this tutorial here found on this thread here on how to embed your badges.

Also a wordpress plugin here

Hope this helps!

10 Answers

Also here is a codepen of it working just enter your name in the js part here

Sweet! thanks

I made some edits to fit my needs. I am building my portfolio website now and I have a "resume" page that plays out much like my paper resume but I wanted ot add some interactivity to it and then just hide the non-essentials when in print. this is pretty slick thanks again.

James Barnett
James Barnett
39,199 Points

The Treehouse badges JavaScript has gotten a major upgrade http://reportcard.rileyh.com/

Here's it's on codepen and on github

I like that one less James Barnett!

James Barnett
James Barnett
39,199 Points

Adam Sackfield - You can also tweak limit the number of badges and have CSS tool tips.

http://codepen.io/jamesbarnett/pen/fcugz

James Barnett Do you know how I could pull the data from Json for the to create the home page on here on my site. So would like to recreate the circle with the points breakdown and the key to the right of it.

Thanks

Wow all of these are great I was going to use Riley Hillard's most recent version as it includes CodeSchool as well which is where I started my online classes. However his requires an older version of JQuery and older Bootstrap. I am not sure I have what it takes to rip up his code to update it to Bootstrap 3 and JQuery 2+.... yet.

James Barnett
James Barnett
39,199 Points

> However his requires an older version of JQuery and older Bootstrap.

Why bother? There's great support for both of those versions.

I love how the new bootstrap handles the grid system as well and its icons being a font versus being a spritsheet. I hate having to include both versions (if that's even possible)

James Barnett
James Barnett
39,199 Points

> icons being a font versus being a spritsheet

Not sure why one is superior to the other. In both cases the icon is added via a class. A font file & a spritesheet image both require an HTTP request.

Yeah I hadn't thought that all the way through... you're right it is a separate HTTP request.. The new Bootstrap still handle the grid system so much better IMO. I would be awesome to be able to bundle all your web-fonts into a single file and separate them after. I hate having more than 3 or 4 HTTP request. (fonts, javascript, css, other-crap).

update: So I included the latest JQuery and Bootstrap JavaScript and CSS with the existing reportcard.jsand I have it working... sort of... the badges display HUGE... but they do display.

James Barnett
James Barnett
39,199 Points

You got a codepen to show us?

James Barnett
James Barnett
39,199 Points

Add in .badges img { width: 100%; } that should get you pointed in the right direction.

I won't be able to try this on the actual code until the admins get done doing there 'remote-whatever' on my system but it work in the PEN I didn't think it would have worked because the .js file is setting the widths and its being called at the end of my document. (I was always told call .js files just before the closing body tag to speed up load times to the user. and since the last file called was setting the widths I didn't think my CSS would override it.

Thanks

I don't yet. I 'think' the issue is it looks like the badge size is being dictated by the reportcard.js file. i'll get a pen up asap

OK so I have a codepen but nothings showing up on it (never use codepen before.)

edit:: the PEN is working now, I had to include my HTML pages script in the JS portion of the PEN. http://codepen.io/johnweland/pen/uxyCI

Hmm I realized this morning that my update while working in the latest bootstrap and JQuery. and now showing badges properly still the progress bar at the bottom only shows the first section "css" and its hover-able and gives corresponding info. The second portion HTML shows a section of the progress bar with no label and is not hover-able and JavaScript the third section doesn't show at all.