ClassCreator.com | Blockbuster sites, amazing reunions

Share Tips

New Topic Reply Subscription Options  

Cork Board with Notes

" and inside it the left cell is the first " tags. Email me if I can help more.

Forums: Questions and Answers About Building Your Site
Created on: 12/09/08 06:16 PM Views: 8122 Replies: 37
Tuesday, December 9, 2008 at 6:16 PM

Does anyone know of a site that offers something similiar to what is used on the ClassCreator homepage...the cork board with the different notes? I am thinking of incorporating that into the site (providing I can find it!).

Or...Brad, would it be possible to make this an optional layout for the message forum?

Thanks, in advance, for your help.

Vicki

Reply
Edited 12/09/08 6:17 PM
Tuesday, December 9, 2008 at 7:24 PM - Response #1

No, the current and upcoming threaded message forums are colored with your site color (although in the new ones you'll be able to tweak your colros) and you will not be able to implement a corkboard theme.

However, technically you could put a corkboard pattern on any page of your web site. Simply upload a seamless corkboard pattern to the system and then use it to fill a table as a background. Simple as that. If you'd like I can even send you ours. Once the table fills with the background then you could add notes, papers, photos, images etc. on top of it.


Reply
Wednesday, December 10, 2008 at 11:24 AM - Response #2

If you don't mind walking me through it, I'd like to give it a try...and after I put the corkboard on the page, do I have to get the different note papers from a site, or does that come with the corkboard?

Thanks for your help!

Vicki

Reply
Wednesday, December 10, 2008 at 1:29 PM - Response #3

No, you just get the coarkboard. Anything you want to put on the coarkboard is entirely up to you.

Here's a link to a quick sample page I made that contains a table with the coarkboard background: http://www.classcreator.com/Agate-CO-Agate-JrSr-2005/class_custom4.cfm

And here's a link to the corkboard background image itself: http://www.classcreator.com/userfiles/File/corkboard.jpg

So basically, you create a table, you set the background of the table to be your corkboard graphic, and then inside the table you put whatever pictures and things you want to rest on top of the corkboard.


Reply
Wednesday, December 10, 2008 at 4:08 PM - Response #4

Here is the source code you would paste onto your page (be sure to click the "source" button in the upper right hand of the editor before you paste it.

This table has 2 rows and 2 columns. the row tag is the "

". The things you want inside it will go in between the and















Reply
Participant: Log in to see names Wednesday, December 10, 2008 at 9:30 PM - Response #5

Dear Brad. Oops, before seeing this thread, I raided your Class Creator Home Page and made a small Bulletin Board for my site, even with a push pin. I even took your polaroid picture. By the way, is that you in the video?

Reply
Participant: Log in to see names Wednesday, December 10, 2008 at 11:19 PM - Response #6

Oh heck have at it -- if there's anything on our site you can raid, feel free.

No that is not me in the video. That's actually a guy I chose 13 months ago from a talent pool. Honestly I don't even remember his name. I met him one day for 4 hours, we shot the home page video and wizard video clips, and I've never seen him again.


Reply
Participant: Log in to see names Wednesday, January 7, 2009 at 4:02 PM - Response #7

Hi Beth and Brad,

I somehow used a customized page and got the corkboard background on it not realizing I was creating tables. The code looks like this:












   
   

My question is how to get the photos, push pins etc. on it that I want. I copied the red push pin from my home page but then I can'f figure out where to put it (between strings of source code?) so that it shows ON the corkboard. It always shows up at the top of the cork board in the white area. Same with photos. I've tried moving them after I click off source and see them at the top of the page but they won't move. What's the trick?

Thanks, p.s. I just noticed that when I copy the code into this messsage it looks the same until I hit "save", then it all aligns to the left, which I'm sure you know. It probably doesn't matter, but thought I should mention it.
Retha

Reply
Edited 01/07/09 4:05 PM
Participant: Log in to see names Wednesday, January 7, 2009 at 4:17 PM - Response #8

The way you put things precisely where you want them within a table is by using a nested table. It can be from easy to tricky to do that, depending on exactly what it is you want to do. If you're going to get into nested tables and html like you're asking, your best bet is to Google "html tutorial" and read up on creating tables and making nested tables, etc. Also good to read about transparent images, such as pngs and gifs so you don't have a square background around your pushpins. Or grab any good html book from the bookstore. Even the most basic of html books are all you'd need. "Web Sites For Dummies" or whatever those yellow books are, are always a good bet.


Reply
Participant: Log in to see names Wednesday, January 7, 2009 at 7:12 PM - Response #9

Oh ok, I guess I was trying to avoid that but I'll try not to be so lazy. I got the impression from your former notes to Vicki that it was easy peasy. I don't even know what a seamless table is. Guess I'd better do some homework.

Thanks,
Retha

Reply
Participant: Log in to see names Wednesday, January 7, 2009 at 9:08 PM - Response #10

Another option is using Photoshop, create an image the exact same size as your bulletin board. Esport it out as a png (pngs are transparent). Place it on top of your bulletin board background. That way the background will show through around your objects. For that matter you could create the entire image in Photoshop or any other graphics program and just upload it to your site -- that's certainly another way to do it.


Reply
Participant: Log in to see names Wednesday, January 7, 2009 at 10:52 PM - Response #11

Brad Switzer wrote:

Another option is using Photoshop, create an image the exact same size as your bulletin board. Esport it out as a png (pngs are transparent). Place it on top of your bulletin board background. That way the background will show through around your objects. For that matter you could create the entire image in Photoshop or any other graphics program and just upload it to your site -- that's certainly another way to do it.

That's how I do mine Brad only I use Microsoft Publisher because it's so easy to manipulate. Then I do a Preview and use Jing to capture and save it as a .jpg. Easy Peasy!

Reply
Participant: Log in to see names Sunday, March 8, 2009 at 9:26 PM - Response #12

I tried copying the code (shown below) for the cork board to my page. The board is huge- I have to scroll left to find the end. I was wondering which number needs to be changed in order to get the width right for the customizable pages.
Thanks, Karen












Reply
Participant: Log in to see names Sunday, March 8, 2009 at 11:51 PM - Response #13

Change the cellpadding and cellspacing to 10 or less.


Reply
Participant: Log in to see names Monday, March 9, 2009 at 10:25 AM - Response #14

Thanks, Brad. I tried putting the cellpadding and cellspacing at 10 but it just gave me a very small cork board. I played around with the numbers and set the cellspacing at 350 and the cellpadding at 10. That gives me a cork board that fills almost the entire middle of the page. Smile

Reply
Participant: Log in to see names Monday, March 9, 2009 at 6:01 PM - Response #15

You need to keep the cellpadding and/or cellspacing low. And set the size of the table itself. Otherwise you're not going to be able to put anything in there. Basically what you're doing with those numbers is creating a huge margin, and you won't be able to put anything in a margin area.


Reply
Participant: Log in to see names Monday, March 9, 2009 at 6:16 PM - Response #16

Rats. Just when I thought that I was beginning to understand.

Reply
Participant: Log in to see names Friday, April 10, 2009 at 11:41 AM - Response #17
postit.jpg

Brad Switzer wrote:

No, you just get the coarkboard. Anything you want to put on the coarkboard is entirely up to you.

Here's a link to a quick sample page I made that contains a table with the coarkboard background: http://www.classcreator.com/Agate-CO-Agate-JrSr-2005/class_custom4.cfm

And here's a link to the corkboard background image itself: http://www.classcreator.com/userfiles/File/corkboard.jpg

So basically, you create a table, you set the background of the table to be your corkboard graphic, and then inside the table you put whatever pictures and things you want to rest on top of the corkboard.

Ok, I am just NOW finding the time to start working on adding the corkboard to our site...since we have a classmate announcement now. Woohoo! However, I still have one problem: I have a white background behind all of the post its that I want to put on the coarkboard. I am using photobucket (if anyone is familiar with it), but I can't figure out how to make the post it the only thing that shows on the corkboard. It just doesn't look good with that background between the post it and the corkboard. Can anyone offer any suggestions on how to make the white background go away? If the post its that I wanted to use weren't at an angle, I might be able to work it in Microsoft Paint, but I have ones that are tilted to one side or the other, so I don't know what to try now!

HELP, PLEASE?!?!?!?!?!?!?!?!?!?!?!?!

I have attached the blank post it to this post just in case.

Thanks,
Vicki

Reply
Edited 04/10/09 11:42 AM
Participant: Log in to see names Friday, April 10, 2009 at 11:54 AM - Response #18

Welcome to the world of alpha channels Vicki. Basically, that means that your object has to have a transaprent background to do what you're wanting it to do. Yours doesn't. Thus in a program such as Adobe Photoshop you need to use the eraser tool to carefully remove the white background. You would then need to save the post it as a png image with 32 bit alpha channel transparency. If you do this and then put it on your corkboard background, no background will be present and it will look like the postit is right on the board. Or better yet, just work with the entire board in Photoshop or whatever else, and post one large image of the board rather than trying to arrange things on the board. Making one complete board image in your graphics program will be way easier than trying to adjust things online.

For most people this post isn't going to make any sense or be helpful. So the bottom line is, if you want to get into transparent backgrounds and making more advanced graphics for your web site, Photoshop or similar program and a good tutorial book is a great way to begin. You're getting into things here that 99% of people are never even going to attempt.


Reply
Participant: Log in to see names Friday, April 10, 2009 at 12:27 PM - Response #19

I have adobe photoshop and would be willing to try and do this for you if you would like. I can't do it here at work, but I can do it on my home computer. Give me a few days (I have 300 eggs to hide this weekend for my grandkids!) and I would be happy to send it to you as Brad described. (hopefully!)

Reply
Participant: Log in to see names Saturday, April 11, 2009 at 12:37 AM - Response #20
postit copy.gif

This file should work against the cork board without the white behind it. Let me know if it does what you want.

Reply
Participant: Log in to see names Saturday, April 11, 2009 at 12:42 AM - Response #21

It will work, but as a gif it will be anti-aliased to white, thus there's going to be a little white halo around the postit. Can you post the same image as a png file? png files have true 32 bit alpha transparency and will seamlessly anti-alias to any background image.


Reply
Participant: Log in to see names Saturday, April 11, 2009 at 12:50 AM - Response #22
Postit Png.png

How's this?

Reply
Participant: Log in to see names Saturday, April 11, 2009 at 12:55 AM - Response #23

Hey Brad..if you are still up? If you look at my home page, the gif file I put in my announcements has no white around it but the png file does? That is how I tested it after I erased the background. The gif looked like it should to me and the png file shows like a photo? Did I save the png file incorrectly?

Reply
Participant: Log in to see names Saturday, April 11, 2009 at 1:06 AM - Response #24

Yes it does. Smile Your .gif file has a white halo around the entire image, because gif images can only anti alias to 1 solid color -- in your case it's white. Try putting that same gif file on a solid black backround and then you'll really see the white halo stand out. Your png file has an entire white box around it because you actually saved it as a JPG, not a PNG. You need to save that imge as a true 32 bit transparency png file. If you do that, and you post a true png up there as a third image, it will perfectly mesh with your gray background. In fact put it right under your current gif image and you'll see the difference immediately.


Reply
Participant: Log in to see names Saturday, April 11, 2009 at 7:54 AM - Response #25

Not sure what I am doing wrong but when I save the imaage as a png, I get the white around the edges. I removed the background, went to save as png and when I paste it to a background, the white box is there. I just don't get it. Spent way too much time tryng to get it right and I know it's just something stupid I am missing. Guess I get an "F" in "saving pngs". Very Happy

Reply
Participant: Log in to see names Saturday, April 11, 2009 at 12:03 PM - Response #26

1) Make sure the background is transaprent before you save the png. I.E. make sure no white background is present. You should see a gray and white checkerboard patterns around your postit, which indicates the background is transaprent.

2) Make sure you click File, Save for the web, and select the png setting with 32 bit transparency. There are different types of pngs, and only the 32 bit transparent type will work.

If all else fails, attach your native .psd file to this thread and I'll save it out as a 32 bit transaprent png and post it back up.


Reply
Participant: Log in to see names Saturday, April 11, 2009 at 1:09 PM - Response #27
postit.psd

Thanks for you help. I had tried doing it just as you said by saving for the web but the problem I keep having is that my photoshop must be a cheaper version or something because the best I can save it as is PNG-24. There is not other option except for PNG-8. I am attaching the psd file. Thanks again for you help.

Reply
Participant: Log in to see names Saturday, April 11, 2009 at 1:27 PM - Response #28
postitlarge.png

Actually png 24 should be just fine if you have the transaprency checkmarked checked.

In any case I'm attaching a transparent png here that should work.


Reply
Participant: Log in to see names Saturday, April 11, 2009 at 1:27 PM - Response #29
postitsmall.png

And here's a smaler version of the postit transparent png.


Reply
Participant: Log in to see names Saturday, April 11, 2009 at 1:30 PM - Response #30

By the way, the shadow on this png is blended with white, which won't look too realistic on a corkboard background. I just noticed that now. See how picky I am! Smile

When I'm back at the office Monday remind me to post a png with a shadow that's also transparent so it will fall seamlessly onto any background color or texture.


Reply
Participant: Log in to see names Saturday, April 11, 2009 at 1:45 PM - Response #31

Thanks again! If you ever come to Maine I will buy you a lobster!Wink

Reply
Participant: Log in to see names Saturday, April 11, 2009 at 3:26 PM - Response #32

If I come back I'll take you up on that! I was just there recently actually, staying in a little city called Naples on the lake. Was wonderful.


Reply
Participant: Log in to see names Sunday, April 12, 2009 at 5:54 PM - Response #33

Oh wow.. just a hop skip and a jump from our camp in Raymond. I will hold you to it! Lobstah with all the fixins!! Ayah!!

Reply
Participant: Log in to see names Monday, April 13, 2009 at 5:19 PM - Response #34

Brad Switzer wrote:

By the way, the shadow on this png is blended with white, which won't look too realistic on a corkboard background. I just noticed that now. See how picky I am! Smile

When I'm back at the office Monday remind me to post a png with a shadow that's also transparent so it will fall seamlessly onto any background color or texture.

Brad,
Just a reminder, per your request, about the png file with the transparent shadow...you are officially my hero because this who cork board process is so cool, yet so frustrating because I don't have the programs required to do what I want!

Thanks,
Vicki

Reply
Participant: Log in to see names Tuesday, April 14, 2009 at 5:11 PM - Response #35
postit.png

Here ya go. This will blend nicely into any corkboard background.


Reply
Participant: Log in to see names Tuesday, April 14, 2009 at 7:34 PM - Response #36
postit.png

Brad Switzer wrote:

Here ya go. This will blend nicely into any corkboard background.

Thank you!!!! Very Happy

Reply
Participant: Log in to see names Tuesday, April 14, 2009 at 9:59 PM - Response #37

Of course, if you type anything onto it inside of your graphics program, you'll have to save it as a transparent png again. Smile


Reply
New Topic Reply  
Subscription Options: Have all new forum posts sent directly to your email.
Subscription options are available after you log in.