fonts, spacing, links

blouie · January 30, 2015

I'd like to accomplish these things:

(1) Set the font style of individual words within a text block.

(2) Change the spacing between certain paragraphs within a text block. I find that the space between paragraphs is usualy too great and I'd like to tighten it up.

(3) For my gallery in vertical format, change the vertical spacing between the images. I find that the space between images is too great and I'd like to tighten it up.

(4) Change the spacing between blocks, to a finer degree than the margin setting. I find that the space between certain blocks is too great, even when I have their margins set to 0.

(5) Link from one part of the page to another part of the page. In particular, to start, I have a list of captions in a text block under my vertical gallery. I'd like to make each caption a link to the particular photo in the gallery.

(6) This one may be more involved: Have it so that when you mouseover a line of text in a block on the left, it displays an image in a block on the right, and a different image for each different line of text.

Thanks for any help you can give.

leftquark · January 30, 2015

I've moved this thread to the "New SmugMug Customizations" forum so that more dgrinners will see this thread. Would you be able to provide a link to your site so I can take a look and make sure I answer all your questions?

blouie · January 30, 2015

I emailed you, Aaron. Thanks for your help.

leftquark · January 30, 2015

OK, lets see if we can try to tackle these!

1) The "Text" block isn't very good in terms of being able to format the text in it. I wish we could improve that. Your best bet would be to replace it with an "HTML" block. You can then stylize individual words using the following code:

<span style="font-face:Verdana; color: red;">Some text</span>

You can set whatever font you want by replacing "Verdana". Feel free to remove the color or change it as needed.

2) There's currently a 12pixel spacing above and below paragraphs. You can change it by adding a "CSS" block to your page and adding the following code:

.sm-page-widget-text p {
  margin: 12px 0;
}

Change 12 to something like 6. If you'd like to only change the paragraph spacing on certain sections of your page, let me know which sections and I can drill down more.

3) To change the vertical spacing between each photo:
a. Click "Customize" -> Content and Design.
b. Put your mouse over the "Multi Photos Content Block" and click on the wrench to edit the settings.
c. Click on the "Display" tab.
d. Set the "Spacing" to something smaller than 72px.
e. Click done and close.

4) We can change the margins of any block but you'll need to let me know which ones you'd like to change.

5) Captions can take HTML so you could add a link <a href="www.whatever.com">Link Text</a> to your caption. However, you could also have the "Action on Click" of the photo to actually open the lightbox. Right now you have it set to doing nothing.

6) Unfortunately that's not possible within SmugMug

blouie · January 30, 2015

This is great. Thanks, Aaron.

I think I see how it works. If I want to use various HTML tags for various parts of text then I use an HTML block instead of a text block. But if I just need one control for everything in a whole block, then I add a CSS block over that block. Is that right?

Item (3), vertical spacing for photos, I overlooked that option; I should have known that one already.

Item (4), I'd like to tighten the space between the bottom of the vertical gallery and the top of the text block under it, to something like half the distance of the current space.

Item (5), I think I should not have used the word 'captions'. I don't want to make the captions that are just under the photos into links. Rather, each photo has a number for its caption, and after the vertical gallery, I have a text block, and each line of text has a number and the historical info for each numbered photo. So what I want to do is to make each line of that list a link (I know the HTML href tag for making links), and I want clicking on the link result in the photo popping up. So to make each line a separate link, should I change the block to an HTML block? But what would be the target URL for each photo?

Thanks again for your valuable help.

leftquark · January 31, 2015

blouie wrote: »

I think I see how it works. If I want to use various HTML tags for various parts of text then I use an HTML block instead of a text block. But if I just need one control for everything in a whole block, then I add a CSS block over that block. Is that right?

You got it!

blouie wrote: »

Item (4), I'd like to tighten the space between the bottom of the vertical gallery and the top of the text block under it, to something like half the distance of the current space.

The easiest thing is to probably use this code. The space is controlled by the margin you set between the photos so it's adding 48pixels below the last one. But we can move the text block up using:

/* Move the block of text */
.sm-page-widget-9614528 {
  position: relative;
  top: -50px;
}

blouie wrote: »

Item (5), I think I should not have used the word 'captions'. I don't want to make the captions that are just under the photos into links. Rather, each photo has a number for its caption, and after the vertical gallery, I have a text block, and each line of text has a number and the historical info for each numbered photo. So what I want to do is to make each line of that list a link (I know the HTML href tag for making links), and I want clicking on the link result in the photo popping up. So to make each line a separate link, should I change the block to an HTML block? But what would be the target URL for each photo?

Yepp - that will work. You can also add "/A" to the end of any link to make it open in the lightbox.

I can't help but think that this is a lot of work for naught. Is there a particular reason you want your visitors to have to scroll all the way to the bottom to see the titles and links to the photos? Research has shown that people barely scroll, let alone get to the very bottom of a long list. Why not have the caption below each photo using our caption options and take advantage of click to lightbox so people can click on the image to open it? It would certainly be a lot less work on your part!

Let me know if there's anything else I can do.

blouie · January 31, 2015

Thanks, leftquark! It's starting to come together!

Thanks especially for your note about having to scroll down to the history-info lines; I'll explain separately why I want to keep the history-info separate from the photos. But I have some possible other approaches with this I'd like to run by you.

A couple things I'd like to do now:

(1) Pin the the top text block without making it a header block. So I'd have the top block and the left block pinned (the left block is already pinned). (The reason I don't want to make it a header is that there's no way to turn off the header displaying on the Unlock Site page, and I don't want the top block text on that page.)

(2) Make the photos in the gallery line up on the left with the text blocks above and below the gallery. As it is now, I have it set to left alignment with 0 margin, but for some reason it doesn't move further to the left so that it lines up with the text blocks.

(3) Near the bottom, I don't know why there's so much space now between the text block with the history-info lines and the text block with the copyright spiel. I don't recall that it was like that before. Everything is set to 0 margins, and I even tried the CSS minus spacing code you gave me for the gallery bottom, but it didn't work.

fonts, spacing, links

Comments