How do I change the size of the album name and customize a button?

sgrotta · February 2, 2018

My site is nearly done. But a couple details are bothering me. In my slideshows, the name of the album is far too large. Here's an example: https://photo-galleries.sallywienergrotta.com/American-Hands/Grace-Fred-Hatton-spinning/i-pHLVphw.

How do I make the text "Grace and Fred Hatton, spinning" (and all such similar album names in my slideshows about the size of the text in the Back to Photo Galleries button?
How do I put the Back to Photo Galleries button on the same "line" as the name of the album so it doesn't take up so much display space, making my slide show smaller?
How do I change the button so the background is #000000 and it has a border of #65081c?

Thank you! Sally

Allen · February 2, 2018

This will apply to all child galleries of the /American-Hands folder. The .sm-gallery-cover-title is presently 36px.

/* children of the American-Hands folder */
.sm-page-parentnode-WRnNbM .sm-gallery-cover-title {font-size: 24px;}

Allen · February 2, 2018

/* BACK TO PHOTO GALLERIES */
.sm-page-widget-20340044 .sm-page-widget-button-align-right .sm-button {
background: #000;
border: 2px solid #65081c;
}

You could try this and see if it works.

/* BACK TO PHOTO GALLERIES */
.sm-page-widget-20340044 {
margin-bottom: -65px;
}

sgrotta · February 2, 2018

Thanks, Allen. Where do I put these?

By the way, I would also want the small font size to apply to the "children of the Other Projects folder". Does the above code do it for all my "children"

Thank you, Sally

Allen · February 2, 2018

This is the class ID for the American-Hands folder. Every folder has a different alpha/number (WRnNbM).
.sm-page-node-WRnNbM
It can be found in the <body class".....> tag at the top of the page source. Or "Inspect Element", right click menu in browsers.

Changing the "node" to "parentnode" means it affects all children.
.sm-page-parentnode-WRnNbM
This parentnode class name will be found in the <body class".....> tag of all child Pages/galleries/folders.
Actually, all folders up to the top (home page) will have their parentnode ID in the child <body class".....> tag.

Example: for gallery. Notice gallery node and two parentnode's. Assume 9CrPhw is your homepage.
<body class="sm-user-professional sm-user-loggedin sm-page sm-page-node sm-page-node-s6gfqz
sm-page-parentnode-9CrPhw sm-page-parentnode-WRnNbM sm-page-gallery sm-page-gallery-album sm-page-initialized" style="">

I can not find the "Other Projects" folder. Got a link?

Allen · February 2, 2018

All these have specific/unique ID's so can be put in theme or "site wide" CSS.

sgrotta · February 2, 2018

Here's the Other Projects group. https://photo-galleries.sallywienergrotta.com/Other-Projects

Thanks, Sally

Allen · February 2, 2018

Here's the body tag for this folder. The flow down class to children is sm-page-parentnode-SFrB5X .
sm-page-node-SFrB5X is the unique class name for THIS page (folder).

@sgrotta said:
Here's the Other Projects group. https://photo-galleries.sallywienergrotta.com/Other-Projects

Thanks, Sally

sgrotta · February 2, 2018

BY the way, do these codes go into the HTML section or CSS? Thanks, Sally

denisegoldberg · February 2, 2018

@sgrotta said:
do these codes go into the HTML section or CSS?

The supplied code is CSS. It can be placed in the Custom CSS in the Advanced tab of your theme, or it can be placed in a CSS content block.

sgrotta · February 3, 2018

Where do I find the body class tag for the gallery children of my Other Projects? https://photo-galleries.sallywienergrotta.com/Other-Projects

Thank you, Sally

sgrotta · February 3, 2018

I think I did it by following your lead. Thank you!

denisegoldberg · February 3, 2018

@sgrotta said:
I think I did it by following your lead.

Are you aware that the Buy button in your galleries sits on top of your "back to galleries" button?

Here's an example from this page - https://photo-galleries.sallywienergrotta.com/American-Hands/Navajo-Rug-Weavers/i-8pqkQfL:

On other pages, the "back to galleries" button overlaps with the photo. For example, on the page https://photo-galleries.sallywienergrotta.com/American-Hands/Artisans-of-the-Anvil/i-qZqG9wZ:

How do I change the size of the album name and customize a button?

Comments