Help with various "simple" gallery coding issues

bnickeson

I'm hoping to pick the brains of some folks who know more than the bare bones of CSS (like me). I've haven't quite gotten a handle on some of the CSS used with the new layout so hopefully these questions should be fairly simple since I'm a coding idiot.

1) Hiding gallery descriptions. These appear over the thumbnail tiles in my theme. I'd like to use a display: none with it, but the few variations I've tried don't seem to work. I don't know if different themes have different coding, but mine is located within a p class .sm-gallery-description. Only problem is trying to use the display: none; doesn't work on it, and if I hide the block it's located within then it hides the Buy button as well. Any ideas?

2) Within a folders page, I'd like to reduce the folder and galleries box to about 80% or 90% of the page width, but center that 80% or 90% on the page. Currently, if you reduce the width it just takes it away from the right margin. I'd instead like to center the block if at all possible. I thought adding auto-margins in CSS would fix this, but it didn't work.

3) On a related note to #2, I'd like to center my logo image within the browser width but have no idea how to horizontally align it, either with CSS or the content block.

Basically to sum up, I just can't figure out how to target certain things with CSS in the new format. I knew just enough to be dangerous with the old SM format but something throwing me off in this one. Thanks in advance for any help!

thenickdude

bnickeson wrote: »

1) Hiding gallery descriptions

This actually has a built-in setting. On the settings for the gallery block, go to the "Display" tab and set "Info style" to "None".

2) Within a folders page, I'd like to reduce the folder and galleries box to about 80% or 90% of the page width, but center that 80% or 90% on the page. Currently, if you reduce the width it just takes it away from the right margin. I'd instead like to center the block if at all possible. I thought adding auto-margins in CSS would fix this, but it didn't work.

It seems to work for me, but you might need to add "!important" to the end of the CSS settings to get it to apply over SmugMug's settings, for example:

.sm-page-widget-galleries, .sm-page-widget-folders {
    width: 80% !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

bnickeson

I should have been clearer on #1, this is on the actual gallery page that displays the photos. The block of the image area is locked down, so CSS appears to be the only way to hide the gallery description.

#2 works pretty well. It still doesn't center the block that has the galleries/folders within it, but if it is set to 100% width and then the auto-margins are applied, it centers the tiles at least. That's good enough for me. I'd still like to know what class ID or whatever targets the folder and gallery block that we can edit in the basic Customize Size dialog. All of the class ID's seems to be used in multiple locations (.sm-page-layout-columns).

Any ideas on #3? Still haven't figured that thing out yet.

thenickdude

bnickeson wrote: »

I should have been clearer on #1, this is on the actual gallery page that displays the photos. The block of the image area is locked down, so CSS appears to be the only way to hide the gallery description.

Ah I get you. You probably had the code right already, but the SmugMug CSS would have had higher priority so it would have been applied over the top of the code you entered. You can add !important to the end of the code like this to combat that:

.sm-gallery-header.sm-gallery-header-has-description .sm-gallery-description {
  display:none !important;
}

It looks like you'll then need to add back some spacing to stop the Buy button from butting up against the gallery:

.sm-gallery-header.sm-gallery-header-has-description .sm-gallery-headerbuttons {
    bottom:12px !important;
}

#2 works pretty well. It still doesn't center the block that has the galleries/folders within it, but if it is set to 100% width and then the auto-margins are applied, it centers the tiles at least. That's good enough for me.

When your site's unveiled, post back for more help, it's much easier to help out when I can see what's going wrong!

I'd still like to know what class ID or whatever targets the folder and gallery block that we can edit in the basic Customize Size dialog. All of the class ID's seems to be used in multiple locations (.sm-page-layout-columns).

The one called "Folders, Galleries and Pages"? That has the class "sm-page-widget-nodes".

Any ideas on #3? Still haven't figured that thing out yet.

Sorry, it's hard to say without being able to play with your unveiled site.