Tweaking "Show galleries as a list of names" (Sherlock!)

ChancyRat · September 23, 2013

I have added this wonderful code from http://www.sherlockphotography.org/Customisations/Gallery-list to my site:

http://www.sherlockphotography.org/Customisations/Gallery-list

.sm-page-widget-nodes img, .sm-page-widget-galleries img, .sm-page-widget-folders img, .sm-page-widget-pages img {
display:none !important;
}
.sm-page-widget-nodes .sm-tile-wrapper, .sm-page-widget-galleries .sm-tile-wrapper, .sm-page-widget-folders .sm-tile-wrapper, .sm-page-widget-pages .sm-tile-wrapper {
width:auto !important;
max-width:none !important;
display:block !important;
}
.sm-page-widget-nodes a, .sm-page-widget-galleries a, .sm-page-widget-folders a, .sm-page-widget-pages a {
padding-bottom:0 !important;
}
.sm-page-widget-nodes .sm-tile-info, .sm-page-widget-galleries .sm-tile-info, .sm-page-widget-folders .sm-tile-info, .sm-page-widget-pages .sm-tile-info {
position:static !important;
}
.sm-page-widget-nodes .sm-tile-placeholder-icon, .sm-page-widget-galleries .sm-tile-placeholder-icon, .sm-page-widget-folders .sm-tile-placeholder-icon, .sm-page-widget-pages .sm-tile-placeholder-icon {
display: none!important;
}

How can I limit it to one gallery only, so that I can then insert navigation blocks in other pages such as the home page, such that they have the regular Smugmug layout and format?

thenickdude · September 23, 2013

ChancyRat wrote: »

How can I limit it to one gallery only, so that I can then insert navigation blocks in other pages such as the home page, such that they have the regular Smugmug layout and format?

In the customiser, edit that gallery. If "all galleries" is selected at the top right, click "make this gallery custom". Now add a CSS content block to the page and paste the code in there. Remove it from your theme's CSS if you had added it there.

ChancyRat · September 24, 2013

Lamah wrote: »

In the customiser, edit that gallery. If "all galleries" is selected at the top right, click "make this gallery custom". Now add a CSS content block to the page and paste the code in there. Remove it from your theme's CSS if you had added it there.

Thank you for contributing to this project. I don't see where to add the CSS for one gallery only. I have only ever found access to Advanced/CSS, through the Theme.

I see a CSS block in the content blocks, but where does one add it?

EDIT: Got it! Nothing like dragging a block around until it finds the green line of home.
Thank you! Will post next question next.

ChancyRat · September 24, 2013

Two columns and wrapping title text?
This is such a fun project.

lust

And you are SO great to have written code for this capability

lust

.
Are you married? (

)

Okay back to business. Each title/link takes up one full line. Is it possible to organize the material into two columns, and have long-title-text wrap where necessary?

thenickdude · September 24, 2013

Okay so for two columns, change this code:

.sm-page-widget-nodes .sm-tile-wrapper, .sm-page-widget-galleries .sm-tile-wrapper, .sm-page-widget-folders .sm-tile-wrapper, .sm-page-widget-pages .sm-tile-wrapper {
    width:auto !important;
    max-width:none !important;
    display:block !important;
}

To:

.sm-page-widget-nodes .sm-tile-wrapper, .sm-page-widget-galleries .sm-tile-wrapper, .sm-page-widget-folders .sm-tile-wrapper, .sm-page-widget-pages .sm-tile-wrapper {
    width:50% !important;
    max-width:none !important;
    display:inline-block !important;
}

To make it wrap, add this code to the end:

.sm-page-widget-nodes .sm-tile-info p, .sm-page-widget-galleries .sm-tile-info p, .sm-page-widget-folders .sm-tile-info p, .sm-page-widget-pages .sm-tile-info p {
  white-space:normal !important;
  height:auto !important;
}

Although the height of entries in neighbouring columns might not match up if the captions wrap.

P.S. my sister has two rats so I've sent her a link to your gallery!

ChancyRat · September 24, 2013

ChancyRat wrote: »

Okay back to business. Each title/link takes up one full line. Is it possible to organize the material into two columns, and have long-title-text wrap where necessary?

I took a shot at this. l see that:
- I can't control the width of each column. If I plug in 400 px to col 1, col 2 takes up the rest of the 960 total. That's okay I guess.
- How can I control the font size so as to make it smaller?
- I need the titles to wrap when necessary.
- Hardest of all, the left column inserted a lot of blank space below the list from Earning, because the column on the right had more title lines. Is it possible to stop this behavior and eliminate the white space?

So close...

ChancyRat · September 24, 2013

[QUOTE=ChancyRat;1913491

P.S. my sister has two rats so I've sent her a link to your gallery!

[/QUOTE]

Oh, love it love it. Tell her to email me.

ChancyRat · September 24, 2013

I moved my blocks back to one column and inserted your code. I see your columnar format is different than I had envisioned. Not sure what I hoped for is possible?
Yes, I see the line spacing can be a little funny for some titles but that's okay.
Is it possible to get rid of the gallery icons, or insert another graphic such as a bullet/circle? The folder icons are okay as is.
Can I make the font size smaller for this gallery only?

ChancyRat · September 24, 2013

three colums!
I tried 3 col. just to see. Not bad if the font size could be smaller and the silly gallery icons removed.

thenickdude · September 24, 2013

Unfortunately that problem you identified in your first screenshot with the SmugMug customiser (dragging two blocks next to each other means that the shorter column will have a gap underneath it) can't really be overcome, so the style you've got in your later screenshots is your best bet!

To remove the gallery icons, add this code:

.sm-page-widget-nodes .sm-tile-info .sm-tile-type-icon, .sm-page-widget-galleries .sm-tile-info .sm-tile-type-icon, .sm-page-widget-folders .sm-tile-info .sm-tile-type-icon, .sm-page-widget-pages .sm-tile-info .sm-tile-type-icon {
	display:none;
}

To change that font size, try adding this:

.sm-page-widget-nodes .sm-tile-info p, .sm-page-widget-galleries .sm-tile-info p, .sm-page-widget-folders .sm-tile-info p, .sm-page-widget-pages .sm-tile-info p {
    font-size:14px;
}

ChancyRat · September 24, 2013

Okay great, went back to 2 columns, all working perfectly so far.
For the purpose of a sitemap, the breadcrumb should have home only, as the path is really unlisted.
Can I remove Other/Test?

Also, I swear that JoinRats was written out in the breadcrumb. The little house is undesirable.

PS I have a 2nd theme which is actually closer to what I want where this code will ultimately go. This is one of my test/learning themes to practice with.

If I can remove the breadcrumb, this will effectively create a visitor sitemap via Smugmug. That capability has been non-existent, so this is fantastic. It does take work to set up, but after that updates are much much easier, just edit the list of folders or galleries to add in new ones. If reorganization is needed, drag blocks where needed. Did you know someone would capitalize on your customization?? :ivar

ChancyRat · September 24, 2013

Background
I hope you are okay with continuing tweaking - I'm not sure why the background of the titles is grey as opposed to the same color as the page background?

I have been roaming all areas where that might be set and cannot find it. Transparency somewhere?

EDIT: In the other theme that is really where I'm headed, I don't have a texture background, only a color. But I need to add a texture. Not sure how to get there in that theme from the color theme collection. I think I need to make a png that is the final thing and then link to that. That's another project. All to say, maybe figuring out the background of the links issue in this theme isn't important at the moment...

ChancyRat · September 24, 2013

Changing color of link background
Here's my "real" theme, which makes the grey problem color much more visible. Is it possible to change the color of grey, to that of the page background? I have a feeling it has to be via CSS, if I'm following that it comes from your custom code that is masking/modifying SM's default thumbnail format?

ChancyRat · September 29, 2013

ChancyRat wrote: »

Here's my "real" theme, which makes the grey problem color much more visible. Is it possible to change the color of grey, to that of the page background? I have a feeling it has to be via CSS, if I'm following that it comes from your custom code that is masking/modifying SM's default thumbnail format?

Request again - is there code to change the background color of the links? Thanks.

thenickdude · September 30, 2013

Sure, add this code to make that transparent:

.sm-user-ui .sm-page-widget-nodes .sm-tile-content > .sm-tile-info, .sm-user-ui .sm-page-widget-galleries .sm-tile-content > .sm-tile-info, .sm-user-ui .sm-page-widget-pages .sm-tile-content > .sm-tile-info, .sm-user-ui .sm-page-widget-folders .sm-tile-content > .sm-tile-info {
    background-color: transparent;
}
.sm-user-ui .sm-page-widget-nodes .sm-tiles .sm-tile-content, .sm-user-ui .sm-page-widget-pages .sm-tiles .sm-tile-content, .sm-user-ui .sm-page-widget-galleries .sm-tiles .sm-tile-content, .sm-user-ui .sm-page-widget-folders .sm-tiles .sm-tile-content {
    background-color: transparent;
}

ChancyRat · September 30, 2013

Lamah wrote: »

Sure, add this code to make that transparent:

.sm-user-ui .sm-page-widget-nodes .sm-tile-content > .sm-tile-info, .sm-user-ui .sm-page-widget-galleries .sm-tile-content > .sm-tile-info, .sm-user-ui .sm-page-widget-pages .sm-tile-content > .sm-tile-info, .sm-user-ui .sm-page-widget-folders .sm-tile-content > .sm-tile-info {
    background-color: transparent;
}
.sm-user-ui .sm-page-widget-nodes .sm-tiles .sm-tile-content, .sm-user-ui .sm-page-widget-pages .sm-tiles .sm-tile-content, .sm-user-ui .sm-page-widget-galleries .sm-tiles .sm-tile-content, .sm-user-ui .sm-page-widget-folders .sm-tiles .sm-tile-content {
    background-color: transparent;
}

Thank you so much. I've been holding my breath on this one because without it the concept of a sitemap seems to dissolve.

Can I control the percentage of transparency?

It worked - except, now there is no hover color change. Rather, the mouse pointer turns into a solid hand, indicating "you can click here to enter the gallery". But then it also means the entire block of gallery links is one big hand. The hand doesn't "turn off and on" as one moves it up and down through the links. Is there a way to code some hover, or underline on and off, or color change?

phaserbeam · September 30, 2013

Don't get me wrong... i just have a question while i was looking to the screenshots above.

When you remove the gallery icons in front of the galleries name it looks like a navigation menu using layout style "footer". I did something like that for my sitemap on my search page here.

OK, i also changed the look of that menu using some (bad) css, and when i make the window smaller the menu entries get a new (ugly) layout, but what are the advantages of using custom css to make a folders/galleries content block look like the footer menu?

As i said... don't get me wrong. Just interested if the code above will give me some advantages to my currently used navigation menu.

ChancyRat · September 30, 2013

phaserbeam wrote: »

Don't get me wrong... i just have a question while i was looking to the screenshots above.

When you remove the gallery icons in front of the galleries name it looks like a navigation menu using layout style "footer". I did something like that for my sitemap on my search page here.

OK, i also changed the look of that menu using some (bad) css, and when i make the window smaller the menu entries get a new (ugly) layout, but what are the advantages of using custom css to make a folders/galleries content block look like the footer menu?

As i said... don't get me wrong. Just interested if the code above will give me some advantages to my currently used navigation menu.

Oh thank you for asking these questions.

You know I don't understand footer or its content: does it by default list all of the pages or galleries below your main folders, as I see on your site? Or are you able to add in only the links of your choice? (As my method allows.) Do you have the option for vertical versus horizontal layout? I naively assumed it was "navbar at the bottom".

Can a footer go anywhere, in terms of block arrangement? For example can you have material below it? A photo, or text block?

You might be on to something depending on the format customization available for the different types.

For what it's worth, this is the visual I am hoping to replicate at least minimally:
http://www.joinrats.com/gallery/8004335_ppoPx

ChancyRat · September 30, 2013

phaserbeam wrote: »

When you remove the gallery icons in front of the galleries name it looks like a navigation menu using layout style "footer". I did something like that for my sitemap on my search page here.

OK, i also changed the look of that menu using some (bad) css, and when i make the window smaller the menu entries get a new (ugly) layout...

Phaser, how did you get the subfolders to show by default? I only see a way to have them appear with mouse hover.

phaserbeam · September 30, 2013

ChancyRat wrote: »

Oh thank you for asking these questions.
You know I don't understand footer or its content: does it by default list all of the pages or galleries below your main folders, as I see on your site? Or are you able to add in only the links of your choice? (As my method allows.) Do you have the option for vertical versus horizontal layout? I naively assumed it was "navbar at the bottom".

Well... at least it lists all galleries within my top-level-folders. I've tried to add a 2nd level of folders but looks like this does not get added to the footer menu. So this might be an advantage of the css code above.
Footer is always horizontal, but i think that can be tuned by using a bit of CSS.

ChancyRat wrote: »

Can a footer go anywhere, in terms of block arrangement? For example can you have material below it? A photo, or text block?

It is just a navigation menu, so it can go everywhere a content block can be applied to... i.e. on top of a page.

So currently footer works for me with only two levels, but as soon as i need more levels i need to play with the code above. Thanks for that

P.S. ChancyRat: You must edit the links and set "Inlcude folder content" to "On"

ChancyRat · September 30, 2013

phaserbeam wrote: »

P.S. ChancyRat: You must edit the links and set "Inlcude folder content" to "On"

Thanks - but I do have this on, and it's not working. That's okay for now, I think I like my version of a site map better. How do I say this, it's more - sitemappy-looking.

phaserbeam · September 30, 2013

ChancyRat wrote: »

Thanks - but I do have this on, and it's not working. That's okay for now, I think I like my version of a site map better. How do I say this, it's more - sitemappy-looking.

Well.. make sure you have Layout style of the menu set to "Footer". I just added a new menu, set layout to "Footer", added a new link => Link to:page i choose => Select a folder => Include Folder Contents:On. Thats it...

As i said... i was just asking what may be the benefits of using the css code from here. So no problem for me... i just learned something new

ChancyRat · October 18, 2013

Picking back up on this project
Now that I've twiddled with other code for my site, to test out the limits and functions, I've returned to this project and I still think it's a great idea. I'm not completely invested though, as a I have a couple of questions.

1. Most important, can I make the row height smaller. There is too much white space horizontally between the links.

I can tweak the margins between the folder or gallery blocks, but I can't tweak the height of the gallerys inside a block.

2. Can I make only the main folder titles, bold?

3. And increase the font size of them? I'm pretty proud that I found the code to change the font size overall, but it changes all the sections. Can I have different font sizes for different blocks?

Not sure this will post but trying, this is the current version:

http://www.joinrats.com/photos/i-7Xwg9rQ/0/X3/i-7Xwg9rQ-X3.jpg

Thanks.

thenickdude · October 18, 2013

Dunno, let me know when you unveil.

Tweaking "Show galleries as a list of names" (Sherlock!)

Comments