Blog Customization

jpl_1020

Hello Everyone - for sure some of you have read the new article in Smugmug Education on how to make a blog in the New Smuggy - here's the link: http://school.smugmug.com/SmugMug-Tips/How-to-Make-a-Photo-Blog

As for the text part, it's recommended to use HTML/ CSS for better customization. My question is: what's the HTML/ CSS coding for text body to have same width and alignment with the picture? To better describe it, here's the link to what I'm trying to achieve:

http://www.michaelbonocore.com/Blog/A-Photographer-In-Cambodia- (please scroll down)

Lastly, how do I reduce the gap in between pictures? Here's the link to the gallery that I'm trying to customize as my first blog post: http://www.jplegaspina.com/Blog/AntelopeCanyon

Thanks in advance,
Jp

leftquark

Could you add some text to it so we can see that it's not working as you want?

jpl_1020

leftquark wrote: »

Could you add some text to it so we can see that it's not working as you want?

Hello Leftquark, thanks for the quick response. I have now added a text after the title and a caption under the first photo.

Thanks,
Jp

leftquark

jpl_1020 wrote: »

My question is: what's the HTML/ CSS coding for text body to have same width and alignment with the picture?

Try adding this to your theme's Advanced CSS section:

/* Make the journal captions wider so they match the width of the image */
.sm-gallery-journal .sm-gallery-images .sm-tile>.sm-tile-info>p {
  max-width: 1200px !important;
}

jpl_1020 wrote: »

Lastly, how do I reduce the gap in between pictures? Here's the link to the gallery that I'm trying to customize as my first blog post: http://www.jplegaspina.com/Blog/AntelopeCanyon

Add this code:

/* Remove the gap below each image */
.sm-gallery-journal .sm-tile-wrapper {
  margin-bottom: 0px !important;
}

jpl_1020

Thanks Leftquark. That fixed the caption and gap between pictures.

Although, I would also need the text (box) after the blog title to be in same width and alignment with the image... fixing that will complete my blog customization.

Thanks a lot for your help,
Jp

jpl_1020

Bump!

Help, anyone?

leftquark

jpl_1020 wrote: »

Thanks Leftquark. That fixed the caption and gap between pictures.

Although, I would also need the text (box) after the blog title to be in same width and alignment with the image... fixing that will complete my blog customization.

Woops, I meant to reply when I got home from work but got distracted. Thanks for the bump/reminder.

Try this:

.sm-page-widget-2823465 {
  max-width: 1050px; 
  margin-left: auto;
  margin-right: auto;
}

leftquark

leftquark wrote: »

Woops, I meant to reply when I got home from work but got distracted. Thanks for the bump/reminder.

Try this:

.sm-page-widget-2823465 {
  max-width: 1050px; 
  margin-left: auto;
  margin-right: auto;
}

For what it's worth, you're probably better off dropping an "HTML" block into the top instead of a "text" block. Here's why....

The block of code I gave you only works for that specific page (Antelope Canyon). If you drop another text block in, on another page, the widget ID (that 2823465) will be different.

If you drop an HTML block, you can paste just the 3 lines of code into the "CSS" tab. It will automatically apply to that HTML block. So every page you create and drop an HTML block, you'd just have to add those 3 lines of code, and you'd be set.

  max-width: 1050px; 
  margin-left: auto;
  margin-right: auto;

jpl_1020

That did it. Thanks a lot for your help. I'll take note of your advice as well.

Regards,
Jp

Allen

leftquark wrote: »

...
If you drop an HTML block, you can paste just the 3 lines of code into the "CSS" tab. It will automatically apply to that HTML block. So every page you create and drop an HTML block, you'd just have to add those 3 lines of code, and you'd be set.

  max-width: 1050px; 
  margin-left: auto;
  margin-right: auto;

Interesting, so you're saying you only need the parameters and it will apply to the html box? No need to
drag out ID's/classes? This is in the box CSS tab, right?

leftquark

Allen wrote: »

Interesting, so you're saying you only need the parameters and it will apply to the html box? No need to
drag out ID's/classes? This is in the box CSS tab, right?

I just tried it out and apparently I'm quite wrong. :cry

You still need to worry about ID and classes. It's gunna be a pain for him to implement on other blog pages. You'd think that if it says it only applies to things on that page that it would also apply just to the block. Guess not. Boo.

Allen

leftquark wrote: »

I just tried it out and apparently I'm quite wrong. :cry

You still need to worry about ID and classes. It's gunna be a pain for him to implement on other blog pages. You'd think that if it says it only applies to things on that page that it would also apply just to the block. Guess not. Boo.

There ought to be a way to apply to the div its in. Maybe?

div {......}

Looks like it works in an html box CSS tab.

leftquark

Allen wrote: »

There ought to be a way to apply to the div its in. Maybe?

div {......}

Looks like it works in an html box CSS tab.

Actually, I think you're quite right here.

You could put the following in the HTML tab:

<div>
   Whatever text you want.
</div>

Then in the css block:

div {
  max-width: 1050px; 
  margin-left: auto;
  margin-right: auto;
}

Allen

leftquark wrote: »

Actually, I think you're quite right here.

You could put the following in the HTML tab:

<div>
   Whatever text you want.
</div>

Then in the css block:

div {
  max-width: 1050px; 
  margin-left: auto;
  margin-right: auto;
}

It's already in a div so no extra div is needed in the html. This does not apply to the html block but to the
contents only. So you still need CSS for things like the box border.

jpl_1020

Hi - Off topic from the subject line.

My galleries have the SM Slideshow style and it currently shows a huge margin between the picture and the header, but the bottom margin is OK.

Here's a link to one of my galleries: http://www.jplegaspina.com/Children/i-z5bvnSX

Is there a way to get the upper margin of the photo the same as the bottom margin?

Thanks,
Jp

Allen

jpl_1020 wrote: »

Hi - Off topic from the subject line.

My galleries have the SM Slideshow style and it currently shows a huge margin between the picture and the header, but the bottom margin is OK.

Here's a link to one of my galleries: http://www.jplegaspina.com/Children/i-z5bvnSX

Is there a way to get the upper margin of the photo the same as the bottom margin?

Thanks,
Jp

Go into customize > customize site

I have no idea on a veiled site if this shows.
Click the triangle on top of slideshow box. See if there's a top margin to reduce.

jpl_1020

Allen wrote: »

Go into customize > customize site

I have no idea on a veiled site if this shows.
Click the triangle on top of slideshow box. See if there's a top margin to reduce.

Thanks as always Allen, but i wish the problem is as simple as that since I already did what you said prior to posting the question here. Infact, I even addressed this with SM helpdesk previously and they're blaming the picture size which I believe has nothing to do with it. I hope SM admin or helpdesk would see this post and do something about it.

Thanks again,
Jp

Allen

There's something blank taking that space with a class name of sm-gallery-header. No idea what it is.

jpl_1020

Allen wrote: »

There's something blank taking that space with a class name of sm-gallery-header. No idea what it is.

Here's a screenshot when I'm logged in:

http://screencast.com/t/sEHCbLk0

Here's when when I'm in customize screen, the space is not there:

http://screencast.com/t/UTfH0ijt

Allen

Here's what I see. The red box is WebDev inspect element. I pasted the div name below it.

Perhaps reserved space for the Buy button? Not showing logged out.

jpl_1020

Allen wrote: »

Perhaps reserved space for the Buy button? Not showing logged out.

That's what I'm thinking...

I checked my other pages and that space is constantly there.

When I checked with my Customizer FastLine Media, they said there's nothing they can do about it and it's in the hands of SM...bummer!

Oh well... I just sent another email to SM Helpdesk and let's see what they say.

Thanks a lot for your help Allen.

Jp

fadeoutfoto

Thanks for all this info, at least the parts I understand ha ha.

One big question I have is why to create pages that are populated with content from a gallery, instead of just putting html or text box at the top of the gallery itself? Is there an SEO benefit to this?

thanks!