Frequently Requested Simple Modifications / Tweaks

W.W. Webster

Lille Ulven wrote: »

Try to change .... to this ... In theory it should do the trick

Unfortunately, no.

leftquark

This should expand the width of the title:

/* Make the lightbox title wider */
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info>div {
    max-width: 1000px !important;
}

W.W. Webster

leftquark wrote: »

This should expand the width of the title ...

No, it didn't ... but wait. I found this code that I had previously commented out some time in the distant past, which I made active again and it works!

/* Widen the Lightbox Title/Captions Box */ 
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-title, 
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-caption, 
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-keywords,
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > div, 
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info > p {
    max-width: 1000px !important;
    }

Someone better versed in the mysteries of CSS will know why this works while the other solutions don't, but thanks anyway to everyone who offered help.

Trasmc

Hi everyone - thanks in advance for your help.

I'm looking for a way to change the size of the gallery name in Smugmug style (or probably all styles). Here's an example gallery link:

http://www.brickstreetphotos.com/Events/20152016-Zionsville-Show-Choir/Finale-Gallery-1-2016/

The name of the gallery is too large - any way to reduce the size of the font?

Thanks again!

Allen

Trasmc wrote: »

Hi everyone - thanks in advance for your help.

I'm looking for a way to change the size of the gallery name in Smugmug style (or probably all styles). Here's an example gallery link:

http://www.brickstreetphotos.com/Events/20152016-Zionsville-Show-Choir/Finale-Gallery-1-2016/

The name of the gallery is too large - any way to reduce the size of the font?

Thanks again!

Here's what I put in "all galleries" CSS

.sm-gallery-cover-title {
   font-size: 200%;
   color:gold!important;
}

Example here
http://www.photosbyat.com/Birds/2016-Birding/Birding-2016-May/2016-05-30-WEKI

Liquidtravel

smug mug gallery style
Hello and thanks for all the great info. I noticed in your galleries (you are using the smugmug gallery style it appears), you have the large image on the left and the thumbnails on the right. How did you implement this. I can't seem to figure it out.

http://www.liquidtravel.org/Most-Popular/i-4VNdGj9

vs.

http://www.aaronmphotography.com/Places/SF/

Also, how did you get the thumbnails and top of the main image to line up. My larger image is always lower than the top of my thumbnails?

Lastly, I can't seem to figure out the sub linking. I would like to have sublinks that appear under gallery when you hover over it showing the various galleries and then the same under each gallery for the folders within them.

thanks again.


Layne

Liquidtravel

OK, I found your site with all the very valuable info and was able to swap the thumbnails and large image and then align them at the top. Awesome. Thanks for that.

I was not able to find any info (might have overlooked it) regarding the menus and sub menus. If it is there can you point me to it.

When I did swap the images with the thumbnails, I noticed the pagination and tools icons were pushed about an inch underneath. Any way to fix that?

How about the buy photos button, can that be aligned to the right side of thumbnails instead of pushing out beyond them?

thanks again.

Layne

Lille Ulven

Hi Layne

Not that I would be leftquark, but he has actually an entire website for his smug mug customizations here: http://www.aaronmphotography.com/Customizations/

So swapping them from left to right is here: http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Swap-Photo-Thumbnails-SM
Line up is here: http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Align-Photo-And-Thumbs

Menu sub-links are here: http://www.aaronmphotography.com/Customizations/Navbar

And you just gave me a couple of ideas for my website...I suppose it is good the weather forecast from Wednesday on is rainy

Good luck

Lille Ulven

Liquidtravel

thanks for your response. I did find those customizations you listed and they were implemented as described. There were a few more questions which I posted above that I am still trying to figure out including why the pagination and tools are so far below the main image.

As for the subnav, I saw those customizations as well but I could not find how to implement the subnav itself, only how to change the color.

thoughts?

thanks again

Layne

Lille Ulven wrote: »

Hi Layne

Not that I would be leftquark, but he has actually an entire website for his smug mug customizations here: http://www.aaronmphotography.com/Customizations/

So swapping them from left to right is here: http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Swap-Photo-Thumbnails-SM
Line up is here: http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Align-Photo-And-Thumbs

Menu sub-links are here: http://www.aaronmphotography.com/Customizations/Navbar

And you just gave me a couple of ideas for my website...I suppose it is good the weather forecast from Wednesday on is rainy

Good luck

Lille Ulven

denisegoldberg

Liquidtravel wrote: »

As for the subnav, I saw those customizations as well but I could not find how to implement the subnav itself, only how to change the color.

By subnav, do you mean nested menu items? You can nest menu items by dragging them to the side in the menu content block.

From the help page How do I make a navigation menu?:

Create a Dropdown Menu

When you choose to add a link to a SmugMug Folder page that contains folders, galleries, and pages, you can include all the pages nested under that folder. This will generate a navigation link with a dropdown menu to display those folders/galleries/pages.
...
To nest specific dropdown items, drag an item to the right in the list. That list item will then nest under the item above it.

--- Denise

Lille Ulven

Sorry I didn't pick up your questions earlier, Layne.

On how to generate a menu with sub-menus look here: http://help.smugmug.com/customer/portal/articles/1222523 pretty much at the bottom of the page, you just have to drag the entry that is supposed to be a sub-menu of another entry a little further to the right side

We actually wrote our posts at almost the same time - I hadn't seen your "in between post" from 4:50 when I posted mine from 4:52

For your cover-buttons movement: I cannot see a solution to that one. Maybe someone else can help you out here?
And for your pagination and tool items: their position depends on the maximum height of your photos in a gallery. So if you have say 100 photos and 99 of them have a height of 200px but the last one is 500px in height...well the distance to the pagination and tool items will be fitting to the 500px photo.

Hope this helps at least a little bit. (Please add your website to your signature, it makes it so much easier to help you out )

Lille Ulven

Liquidtravel

Thanks so much. Nav is now working.

Layne

---

www.liquidtravel.org

Baku

Thank you for the effort making all those customization available.

HenrikSundholm

I will thank @leftquark loads as your CSS snippets has helped me gain headway with my SmugMug design. I have two questions:

1. You have two clear vertical stripes of your background image to the far left and right respectively. How is this achieved? I use SmugMugs built in "mask" option to dim the background image but it effects the entire site, leaving no untouched bars.

2. How do you change the form and color of your scroll bar? Couldn't find this customization on your website.

Thanks a lot in advance... :smile:

Hikin' Mike

@HenrikSundholm said:

2. How do you change the form and color of your scroll bar? Couldn't find this customization on your website.
   
   
   
   Thanks a lot in advance...

You can search for "Custom Scrollbar" on Google. This might help: https://css-tricks.com/almanac/properties/s/scrollbar/

Keep in mind that not all browsers support this. I don't think Firefox does.

rjwilner

While bouncing around various parts of the SM world, I've seen reference made to 'the new SM' somewhat frequently. Can anyone give me a general time frame when that was introduced?

I ask only because a brief buzz through this thread leads me to believe there are some good suggestions provided here. But with the exception of a couple posts, this thread pretty much ends in 2016. And that makes me wonder how 'current' some of the suggestions might be. Very possible some have been incorporated into the current product, or that the changes made have made some of them obsolete.

Not looking for feedback on specific suggestions. But it might be helpful to know when 'the new SM' was introduced to give us some idea how far back we can rely on suggestions continuing to be functional w/o some serious testing of our own.

Any feedback appreciated!

denisegoldberg

@rjwilner said:
While bouncing around various parts of the SM world, I've seen reference made to 'the new SM' somewhat frequently. Can anyone give me a general time frame when that was introduced?

I believe it was in 2013.

rjwilner

> @denisegoldberg said:
> @rjwilner said:
> While bouncing around various parts of the SM world, I've seen reference made to 'the new SM' somewhat frequently. Can anyone give me a general time frame when that was introduced?
>
>
>
>
>
> I believe it was in 2013.

Ohhhh...thanks. For some reason I was thinking it had been much more recent. I guess because I don't think of products introduced in 2013 as 'new'. :)

denisegoldberg

@rjwilner said:
Ohhhh...thanks. For some reason I was thinking it had been much more recent. I guess because I don't think of products introduced in 2013 as 'new'.

It was referred to as "new" when it was released! Note that the first post in this thread is dated 2013.

picomoments

Hi all, How can I remove the left and right padding from my site: picomoments.smugmug.com?

rainforest1155

Hi there,
What do you refer to by padding? Going to your homepage, the background slideshow is displayed full width. Could you elaborate? It might be helpful if you could also link to a screenshot of your whole screen showing us what you see.
If you refer to a different page, could you link to the specific page?

All the best,

picomoments

@rainforest1155 said:
Hi there,
What do you refer to by padding? Going to your homepage, the background slideshow is displayed full width. Could you elaborate? It might be helpful if you could also link to a screenshot of your whole screen showing us what you see.
If you refer to a different page, could you link to the specific page?

All the best,

The spacing around the menu, and along the sides of the page

I want to have my photo and all other photos to be full bleed, edge to edge.

picomoments

Another question, how can I add a drop shadow to the section so that it stands out from the background.

Hikin' Mike

@picomoments said:
Another question, how can I add a drop shadow to the section so that it stands out from the background.

Add this to your theme's custom CSS section:

/**
* Remove Margins on Mobile
***************************************************/
@media screen and (max-width: 736px) {
    .sm-user-ui .sm-page-widget .sm-page-widget-content {
        margin: 0 !important;
        padding: 0 !important;
    }

}


/**
* Drop Shadow on Pages
***************************************************/
.sm-user-ui .sm-page-layout.sm-page-layout-sitetemplate .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-center {
    box-shadow: 0 0 12px 4px rgba( 0, 0, 0, 1 );
}

I don't know what type of effect you're looking for on your drop shadows, so here is a summary: https://css-tricks.com/almanac/properties/b/box-shadow/

picomoments

@Hikin' Mike said:

@picomoments said:
Another question, how can I add a drop shadow to the section so that it stands out from the background.

Add this to your theme's custom CSS section:

/**
* Remove Margins on Mobile
***************************************************/
@media screen and (max-width: 736px) {
  .sm-user-ui .sm-page-widget .sm-page-widget-content {
      margin: 0 !important;
      padding: 0 !important;
  }

}


/**
* Drop Shadow on Pages
***************************************************/
.sm-user-ui .sm-page-layout.sm-page-layout-sitetemplate .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-center {
    box-shadow: 0 0 12px 4px rgba( 0, 0, 0, 1 );
}

I don't know what type of effect you're looking for on your drop shadows, so here is a summary: https://css-tricks.com/almanac/properties/b/box-shadow/

Thanks Mike, it does partially work by the formatting goes a bit off with the header etc. So I'm not going to pursue this further but Thank you.

BTW, I've redone the site completely ;-)

siebzehnx

I need help with some CSS to achieve a hovering effect on galleries thumbnails when no gallery info is shown. Tried to post a discussion and the system doesn't allow newbies like me to post links (Which I need to illustrate what I want to accomplish). Can anyone help me out?

Allen

You can add text looking like a link, Leave off the http: and .com
or add some spaces http : // . com
Is the past I have bolded the : and dot
http://link.com

rht

Another little hack mod you can do to the folders page is to fake an album description, and see my example:

https://reheatimages.smugmug.com/CivilAviation

As far as I can tell, you cannot have description text aside from the title of the gallery. But you can fake it with CSS at the attr function which I have done on the cards I have for my folders.

.sm-tiles-info-after .sm-tile-info p::after {
  font-size: .65em !important;
  font-weight: 300 !important;
  padding-left: 0;
  padding-top: .5em;
  content: 'See all content in the 'attr(title) ' section.';
  display: block;
  padding-bottom: 0;
}

That grabs the title attribute from the HTML of each tile. You might also need the following:

.sm-tiles-info-after .sm-tile-info p {
min-height: 120px;
}

That sets the height of the area so the "description" doesn't get chopped off, you have to tweak that number to your needs..

Little by little you can make some of the limitations of Smugmug less obvious.

One catch, if you are using ::after for this faked description text (as I am above), then you will have to use ::before if you want to include anything else, for instance how I have the fontawesome right arrow as an indicator.