Cobrand help

marlinspike · January 15, 2005

Here's what I want to do to my site (www.davidson.smugmug.com). You see the picture at the top? What I want to do is incorporate some buttons in it that enable me to...
login/logout
help
go to the main page
maybe some others, don't know what yet

Is this simple enough that someone could explain to me how to do this here? I know some HTML, but not very much, but I'm pretty comfortable with that sort of stuff so if somebody could get me started, maybe I could figure it out.
Thanks,
Richard

marlinspike · January 15, 2005

Also, is there a way to...
center my bio text (I don't want to put a bio photo, so no need for a blank space for one).
Is there a way to get rid of the grey text below the photo I have at the top that says "Richard's galleries" and the white text that says "Richard's gallery categories"?
Thanks,
Richard

marlinspike · January 17, 2005

marlinspike wrote:

Also, is there a way to...
center my bio text (I don't want to put a bio photo, so no need for a blank space for one).
Is there a way to get rid of the grey text below the photo I have at the top that says "Richard's galleries" and the white text that says "Richard's gallery categories"?
Thanks,
Richard

Nobody? For the first one, I know how to make links and all, but what I don't know is how to superimpose them on top of the picture, so if someone could give me direction with that, that'd be great. For this second request (above), I don't know if smugmug allows this via the built-in cobranding (i.e. I don't have my own website) or not.
Richard

savannahga · January 17, 2005

I'd help you but I have no idea.

cletus · January 17, 2005

marlinspike wrote:

Nobody? For the first one, I know how to make links and all, but what I don't know is how to superimpose them on top of the picture, so if someone could give me direction with that, that'd be great. For this second request (above), I don't know if smugmug allows this via the built-in cobranding (i.e. I don't have my own website) or not.
Richard

Sorry I missed your post!

Here's the basic idea for including links in an image, as done in Photoshop:

Starting off with the image and the text that will be used for the links:

Select the Slice tool:

Using the slice tool, create a new slice around the text for your link:

Note that there are now three slices in my image. One that I just created (labeled 03) and two "auto" slices. Photoshop creates auto slices to cover any portion of the image not coverd by user slices.

Now take the Slice Selection tool -

and double click on the slice containing your link text. When you do this you will get the Slice Options dialog box. In the URL box, enter the URL for whatever you want the link to point to:

In this example I've only added one slice that has an URL but you could do as many as you want.

When you're all done, use the Save for Web command (it's in the File menu). In the Save for Web dialog box. Select the file format you want your file(s) saved in (I used JPEG High) and click the Save button. This will bring up the Save Optimized As dialog. Under Save as type: select HTML and Images. When you save your files, Photoshop will save each slice in your image in a seperate file, and then create a simple HTML document that puts the seperate slices together to make a complete picture. The HTML also creates your link(s). Since you'll probably be hosting your images on smugmug, you'll have to do a little editing on the HTML before you can place it in your cobrand header.

Here are the three images created by Photoshop:

And here is the HTML Photoshop generated:

    <html>
   <head>
   <title>Title</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   </head>
   <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
   <!-- ImageReady Slices (Title.psd) -->
   <table id="Table_01" width="406" height="600" border="0" cellpadding="0" cellspacing="0">
   	<tr>
   		<td colspan="2">
 			<img src="images/Title_01.jpg" width="406" height="545" alt=""></td>
   	</tr>
    	<tr>
   		<td>
 			<img src="images/Title_02.jpg" width="217" height="55" alt=""></td>
   		<td>
   			<a href="http://ab0wa.smugmug.com">
 				<img src="images/Title_03.jpg" width="189" height="55" border="0" alt=""></a></td>
   	</tr>
   </table>
   <!-- End ImageReady Slices -->
   </body>
    </html>

Hope this helps!

marlinspike · January 17, 2005

Wow, thanks a ton. I can't believe Cletus could know all that, though there was that episode where Homer had the crayon removed from his brain and they saw Cletus at the library.

I'm gonna give this a go as soon as I finish some stats homework
Richard

Baldy · January 18, 2005

Hey Richard,

Were you thinking something like this?

http://sau.smugmug.com/

If so, I can ask him if he'd share his co-branding code.

Thanks,
Baldy

marlinspike · January 18, 2005

I was thinking something like that Baldy, but I think Eric's instructions should do me right, and I should be able to do something like that guys cobranding, I just need to find the time.

Richard

marlinspike · January 18, 2005

So now that I know how to put a link in a picture, how do I get rid of the stuff that says Richard's Galleries and the like?

Richard

{JT} · January 19, 2005

Cobrand help ...
I will make a new thread to announce this; but we ahve a new help section on changing some of the colors and fonts: http://smugmug.com/help/custom-colors

marlinspike wrote:

So now that I know how to put a link in a picture, how do I get rid of the stuff that says Richard's Galleries and the like?

Richard

savannahga · January 19, 2005

An example of this is my site, I changed the font colors to match the background. www.savannahga.smugmug.com

marlinspike · January 19, 2005

Savannah,
How'd you do the bar at the top? I'm particularly interested in the home, e-mail, help, and cart buttons. Also, howd you make the search bar small like that (as opposed to the code given in the add bling section that makes a very large search bar)?
Thanks,
Richard

Baldy · January 20, 2005

savannahga wrote:

An example of this is my site

Wow, that's really NICE!!

bow

I should document the shopping cart code to the co-branding pages. Gotta fly to EZ Prints tomorrow, tho, so it'll be a few days.

One thing, that gorgeous banner of yours is 133 pixels high. We had to narrow ours over time because people were complaining of vertical scrolling when they browse the galleries.

PhotoHound · February 2, 2005

great stuff
This is very interesting! I like the PS method of adding links (great tutorial by the way!), but any chance anyone will share the co-branding code they use for the "bar" type method for their links? That SAU one is nice, and the Savanna one too! Pretty Please?

Cobrand help

Comments