A few questions for Legacy Smugmugger now Previewing New SM

mylifeinfocus

I just switched (Preview mode) to the New Smugmug from Legacy, and I have a few questions I've not found answers to in the forum yet, so I'm hoping someone can help.

1. Once a visitor has clicked on a particular photo in the Galleries, I'd like for my PayPal info below the photo to be moved up and centered under the photo so it's more visible. Here's an example:
http://www.alicethompsonphotography.com/Nature/Landscapes/i-zPNhX2s/A
(I know the New SM doesn't support PayPal, but all the dropdown code that I manually inserted for each photo on my Legacy site seems to have migrated over, so I'd like to keep it if possible).

2. When the visitor mouses over a photo in the specific gallery (http://www.alicethompsonphotography.com/Nature/Landscapes as example), is there a way to turn off the pricing info that comes up? On my Legacy site, the pricing info and link to the PayPal button was inserted as HTML code into the photo caption, so I assume that's where it's coming from. To clarify: I want to keep the PayPal info for each individual photo if possible - I just want it to not be distracting by popping up when the visitor mouses over Gallery photos.

3. On my About page, I tried inserting a bio photo on the right, but the text didn't seem to wrap around (thereby leaving a bunch of empty space under the photo). I want the text to wrap around the photo, but didn't see a way to do that.

4. To change colors of the text, am I correct in assuming an HTML block needs to be inserted? I want to make the headings "Pricing", "Framed Photos" and "Matted Photos" green.

5. Social icons: is there a custom Blogspot icon that is available instead of the generic link icon? My blog is with Blogger rather than WordPress.

Those are my questions for now. I'm sure I'll have more, but so far, I'm really liking the new SM!

Thanks in advance for any help!

Alice
P.S. I just realized that if I'm still in Preview mode, you all won't be able to see my new Galleries, which relate to my first couple questions. I'll try to add a few screengrabs to help.

mylifeinfocus

The pricing info mentioned in #2:



Here is the PayPal pricing info from #1: (what it looks like before the visitor mouses over it in the bottom left corner, which might easily get overlooked). I'd like to move this centered under the photo.



and what it looks like once the user mouses over or clicks the button to view the pricing info:

denisegoldberg

mylifeinfocus wrote: »

2. When the visitor mouses over a photo in the specific gallery (http://www.alicethompsonphotography.com/Nature/Landscapes as example), is there a way to turn off the pricing info that comes up? On my Legacy site, the pricing info and link to the PayPal button was inserted as HTML code into the photo caption, so I assume that's where it's coming from. To clarify: I want to keep the PayPal info for each individual photo if possible - I just want it to not be distracting by popping up when the visitor mouses over Gallery photos.

3. On my About page, I tried inserting a bio photo on the right, but the text didn't seem to wrap around (thereby leaving a bunch of empty space under the photo). I want the text to wrap around the photo, but didn't see a way to do that.

4. To change colors of the text, am I correct in assuming an HTML block needs to be inserted? I want to make the headings "Pricing", "Framed Photos" and "Matted Photos" green.

5. Social icons: is there a custom Blogspot icon that is available instead of the generic link icon? My blog is with Blogger rather than WordPress.

Here's a start...

Unfortunately there isn't any way to suppress the caption from popping up on hover. There is a feature request for that - Restore option to hide caption tooltips.

There isn't an option that I know of to wrap text around a photo. There are a couple of options here. One is to use multiple text blocks, one next to the photo and one underneath it. The negative to that is I think it will be difficult to flow the text on different sized browser windows. The other is to place both the photo and the text in an HTML content element. You can use CSS to wrap text around a photo. I did a bit of playing with this on a blog entry, see if this helps at all - http://denisegoldbergplays.blogspot.com/2009/12/photo-placement-left-right.html.

To change colors of text you will use CSS. I'm not sure what elements you are trying to change so I can't suggest the CSS. You can place CSS in your theme or in a CSS block for entire site, or on the page you are trying to build.

There is a Blogger icon available. I believe you first need to set up a link to your blog. Click on the thumb representing you, Profile, Social. Once you do that a blogger icon will show up in social. (I'm not using the social icons right now but I have Google+ and my blog set up in my profile - if I drag in social icons I see both the G+ and the blogger icons.

On your first question I believe there are some threads about formatting a caption containing paypal pricing, just haven't managed to pull it up yes.

--- Denise

denisegoldberg

In case you haven't seen this yet, here's Lamah's PayPal shopping cart customization - http://www.sherlockphotography.org/Customisations/SmugMug-for-Chrome/PayPal, pointed to from the thread Add a PayPal shopping cart to your SmugMug galleries.

--- Denise

thenickdude

SmugMug said that they would ban the tag in image captions, which is required for drop-down boxes to appear (I'm not sure if they've implemented that yet or not). My extension that Denise mentioned will convert the PayPal dropdown box into a list of clickable links instead for you, which isn't banned by SM.

mylifeinfocus

Thanks so much, Denise! The text wrap option you show on your blog is what I was trying to do. So am I correct in understanding that if I want my image to float right, this is the code I would use in my CSS block (replacing your image with mine, of course:
<div id="floatLeft">

<img src="http://www.denisegoldberg.com/Wandering-near-home/White-winter-2010/200912G92328L/733498332_ZsrR8-250x250.jpg"&gt;

Text for About Me page goes here.

#floatRight img {
float: right;
margin: 0 10px 3px 10px; /* top right bottom left */
}
</div>

***
I'll look at the CSS block for changing text color. I know that's normally simple to do, but I think I forgot to put in a CSS block.

Will look around for the Blogger icon. Thanks.

And thanks for the link to Lamah's info about the PayPal cart. I'll take a look at that.

Thanks again! I'll post again if I have further questions.

denisegoldberg wrote: »

Here's a start...

Unfortunately there isn't any way to suppress the caption from popping up on hover. There is a feature request for that - Restore option to hide caption tooltips.

There isn't an option that I know of to wrap text around a photo. There are a couple of options here. One is to use multiple text blocks, one next to the photo and one underneath it. The negative to that is I think it will be difficult to flow the text on different sized browser windows. The other is to place both the photo and the text in an HTML content element. You can use CSS to wrap text around a photo. I did a bit of playing with this on a blog entry, see if this helps at all - http://denisegoldbergplays.blogspot.com/2009/12/photo-placement-left-right.html.

To change colors of text you will use CSS. I'm not sure what elements you are trying to change so I can't suggest the CSS. You can place CSS in your theme or in a CSS block for entire site, or on the page you are trying to build.

There is a Blogger icon available. I believe you first need to set up a link to your blog. Click on the thumb representing you, Profile, Social. Once you do that a blogger icon will show up in social. (I'm not using the social icons right now but I have Google+ and my blog set up in my profile - if I drag in social icons I see both the G+ and the blogger icons.

On your first question I believe there are some threads about formatting a caption containing paypal pricing, just haven't managed to pull it up yes.

--- Denise

mylifeinfocus

Thanks so much, Lamah! I appreciate your help. This is awesome!

Lamah wrote: »

SmugMug said that they would ban the <form> tag in image captions, which is required for drop-down boxes to appear (I'm not sure if they've implemented that yet or not). My extension that Denise mentioned will convert the PayPal dropdown box into a list of clickable links instead for you, which isn't banned by SM.

Allen

mylifeinfocus wrote: »

...
I'll look at the CSS block for changing text color. I know that's normally simple to do, but I think I forgot to put in a CSS block. ...

If you add text and the img to an html block it has its own CSS tab. Text color CSS can be put in that.

mylifeinfocus

Allen wrote: »

If you add text and the img to an html block it has its own CSS tab. Text color CSS can be put in that.

Thanks Allen. I thought that would be the best way to do it, but any changes to HTML that I make in the HTML block are not reflected when I click "Done." Am I doing something wrong? (I've got the HTML code and body copy inside the HTML block).

Sorry - disregard. I think it's working now. And adding CSS is helping with the font/link colors. Thanks!

mylifeinfocus

Ok, I thought I had it working, but I evidently messed up something. I have 3 h2 tags on this page: "Pricing", "Matted Only" and "Framed." The Pricing heading looks the way I want (size and green color are fine). The other 2 look just like my body text, but I can't figure out why. Here's that part of my code:

For Pricing:

Pricing:

For the Matted tag, it reverts back to:
Matted only:





Should be same as Pricing.

Here's what's in my CSS:

h2 {
color: #03DE5E;
}

a {
color: #03DE5E;
}

What am I overlooking? (Sorry - still getting used to the CSS).

Allen

Missing # sign, typical a few places.

<span style="color: #A9A9A9;">


You'd be better off if you used classes.

<span class="text1">.... </span>

<span class="text2">.... </span>

Then in html box CSS

.text1 {color: #03DE5E; font-size: 12pt; font-weight: bold;}

.text2 {color: #03DE5E; font-size: 10pt;}

mylifeinfocus

Allen wrote: »

Missing # sign, typical a few places.

<span style="color: #A9A9A9;">


You'd be better off if you used classes.

<span class="text1">.... </span>

<span class="text2">.... </span>

Then in html box CSS

.text1 {color: #03DE5E; font-size: 12pt; font-weight: bold;}

.text2 {color: #03DE5E; font-size: 10pt;}

Thanks Allen! I'm most grateful. So the <span class> tags would replace the <div>s? So <span class="text1"> could be <span class="Pricing">... and <span class="text2"> could be <span class="Matted photos">, etc.?

Allen

mylifeinfocus wrote: »

Thanks Allen! I'm most grateful. So the <span class> tags would replace the <div>s? So <span class="text1"> could be <span class="Pricing">... and <span class="text2"> could be <span class="Matted photos">, etc.?

Using class names has the advantage of controlling multiple text through out
the block with one CSS change. Like all titles or text paragraphs. But if it's
one timers it's just as easy to use
<span style="color:red;">... </span>

I don't think it makes much difference if div's or spans are used. div's are usually
for big blocks as spans apply to pieces text here and there.

mylifeinfocus

Allen wrote: »

Using class names has the advantage of controlling multiple text through out
the block with one CSS change. Like all titles or text paragraphs. But if it's
one timers it's just as easy to use
<span style="color:red;">... </span>

I don't think it makes much difference if div's or spans are used. div's are usually
for big blocks as spans apply to pieces text here and there.

Perfect. Thank you, Allen. That did the trick. I'm still a bit rusty with some of the CSS when it comes to <div> and <class> tags, so I appreciate your help. Now to work on adding the photo, then I'm off to create my Contact form!

Thanks again!