New here - need some help with site tweaks

[mudhouse]

Hi all-

I'm into my third day of my trial pro membership. Before I push the button, I'd like to be sure I can make the tweaks I need to be happy with my site: http://davereichert.smugmug.com/

I'm attaching an image of a gallery page to make my requests clearer. Hopefully the code geniuses here will be able to supply a few lines to this copy/paste -limited photographer who has no desire to become a part time coder...

1. I made a custom nav bar in the Easy Customizer. I'll be adding more items to it as I build the site, but what I'd like to tackle right now is the alignment. I'd like the left edge of the nav bar to align with the left edge of my 800 pixel wide banner. Using left align in the EC moves the nav bar to the left edge of the browser window - this is not what I want.
2. I'd like to eliminate the breadcrumbs, or alternatively, move them to the center of the page, just above the image.
3. I want to eliminate the "<Prev x of x Next>" widget above the image.
4. I'd like to be able to specify and lock the spacing between the bottom of the banner and the top of the image. With no breadcrumbs, 40 pixels would work. If the breadcrumbs can be centered over the image, then I'd need to use another value.
5. I want to eliminate the "Sizes: S M L..." text entirely, and lock the image size to Large (800 pixels wide). If my potential clients can't afford a monitor that fits an 800 pixel wide web page, then they certainly can't afford to buy my prints. At the present I'm not concerned with iPhone users.
6. I would like to move the lower "<Prev x of x Next>" so that it's centered on the image. If the text parts can be eliminated, leaving only the arrows, that would be best.

I'm hoping this isn't too much for a single post. I've been able to find variations on some of these issues in other threads, but nothing specific enough for me (a non-coder) to make any sense of.

Thanks in advance,
Dave Reichert

[J Allen]

Try this in your CSS box:



#customNav
{text-align:left;
margin-left:90px}

.notLoggedIn #breadCrumbTrail {display:none;}

#albumNav_top
{display:none;}

#my_banner
{margin-bottom:40px !important;}


#sizePicker
{display:none;}



#albumNav_bottom
{text-align:center;}




All these rules will effect every gallery, unless you only want this to be gallery specific...:ear

[LoulouPix]

Welcome to SM.
I will try to answer what I can ;)
Guess other will be able to complete


2. I'd like to eliminate the breadcrumbs, or alternatively, move them to the center of the page, just above the image.
To eliminate the crumbs you need to add the code below in your CSS section
.gallery_9252614 #breadcrumb {display: none;}
with 9252614 a gallery number.
To center you would do:
.gallery_9252614 #breadcrumb {text-align: center !important;}


3. I want to eliminate the "<Prev x of x Next>" widget above the image.
6. I would like to move the lower "<Prev x of x Next>" so that it's centered on the image. If the text parts can be eliminated, leaving only the arrows, that would be best.

This one is the pagenave..Still in the CSS you can add the code below.
.gallery_9227059 .pageNav {
display: none;
}
Note that I don't know if you can have the pagenav on the bottom but not on top


Good luck.

[LoulouPix]

Wow, Joe is really really fast :bow

[mudhouse]

Try this in your CSS box:

[CODE]

#customNav
{text-align:left;
margin-left:90px}


BrilliantJoe! Thank you!
Unfortunately, the first piece of code is not doing what I need. You've offset the nav bar from the edge of the browser window, the size which will vary on individual computers. I'd like to find a way to position the nav bar in relation to the banner, regardless of the width of the browser window. Is this possible?

[mudhouse]

Welcome to SM.
I will try to answer what I can ;)
Guess other will be able to complete
To eliminate the crumbs you need to add the code below in your CSS section
.gallery_9252614 #breadcrumb {display: none;}
with 9252614 a gallery number.
To center you would do:
.gallery_9252614 #breadcrumb {text-align: center !important;}



Thank you Lou.

I'm thinking that it might not be a very wise move to completely eliminate the breadcrumbs. I'll try centering and see how it looks.

[mudhouse]

BrilliantJoe! Thank you!
Unfortunately, the first piece of code is not doing what I need. You've offset the nav bar from the edge of the browser window, the size which will vary on individual computers. I'd like to find a way to position the nav bar in relation to the banner, regardless of the width of the browser window. Is this possible?


I figured it out. In the Easy Customizer, under the Header category, if I set the Custom Size to 800 pixels wide and align my nav bar left, it will stick to the left edge of the banner, regardless of the width of the browser window.

[mudhouse]

I'm wondering if anyone has any thoughts on how I can adjust this code:

.miniBox {
width:106px;
padding:0 0 0 0;
margin:0 0 0;
}

.miniBox {
width:106px;
padding:0 0 0 0;
margin:0 0 0;
}

.miniBox .photo {
height:auto;
_height:1px;
}

.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}

.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 40px 0;
}

.albumLarge .photoLarge {
height:auto;
_height:1px;
}

.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}

I picked it up on another thread, and I modified a couple of the parameters by trial and error. I'm using it to display my galleries three-across in my category pages. I'd like to compress the layout even further, as in the attached screen shot.

I'd also like to lose the title text on all my category pages.

Again, thank you all in advance - you're saving me lots of time and frustration.

[J Allen]

Try this:



/*=====No Titles!!=====*/
#galleryTitle,
#categoryTitle,
#subcategoryTitle,
#subCatGalleryTitle
{display:none;}




/*=====Wide Gallery Thumbs=====*/
.galleries #homepage,
#content.userKeywords,
#header_wrapper, #footer_wrapper, #cobrand_footer,
#category, #subcategory, #header,
#smugmug, .smugmug #header, .smugmug #footer
{margin-left: 15px;
margin-right: 15px;
min-width: 755px;
width: auto;
_width: expression
(document.documentElement.clientWidth < 790? "760px" : "auto");}

[mudhouse]

Try this:



Hi Joe -

The first bit worked great. The second didn't. I removed the code from my original post and replaced it with yours. Should I have kept both?

This is what I'm seeing:

[J Allen]

Yeah, keep both for it to work...see what you think

[mudhouse]

Yeah, keep both for it to work...see what you think

Much much better! Thank you Joe.

Now, is there a way to center the whole assembly on the browser window, like the banner and the gallery thumbnails do?

[J Allen]

Dont think there's a way to center it all with that stretchy code...but try changing all this:



/*=====Wide Gallery Thumbs=====*/
.galleries #homepage,
#content.userKeywords,
#header_wrapper, #footer_wrapper, #cobrand_footer,
#category, #subcategory, #header,
#smugmug, .smugmug #header, .smugmug #footer
{margin-left: 15px;
margin-right: 15px;
min-width: 755px;
width: auto;
_width: expression
(document.documentElement.clientWidth < 790? "760px" : "auto");}

.miniBox {
width:106px;
padding:0 0 0 0;
margin:0 0 0;
}

.miniBox {
width:106px;
padding:0 0 0 0;
margin:0 0 0;
}

.miniBox .photo {
height:auto;
_height:1px;
}

.miniBox .albumTitle,
.miniBox .private {
text-align:center;
}

.albumLarge {
width:156px;
padding:0 0 5em 0;
margin:0 40px 0;
}

.albumLarge .photoLarge {
height:auto;
_height:1px;
}

.albumLarge .albumTitle,
.albumLarge .private {
text-align:center;
}







To this:




/*=====Galleries 4 Across=====*/
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}
.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}
.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}







I'm on a very large monitor right now so its hard to test positioning things..

[mudhouse]

Dont think there's a way to center it all with that stretchy code...but try changing all this:

I'm on a very large monitor right now so its hard to test positioning things..


OK. That gets me three across, centered on the browser window, regardless of the width of the window. The gap between rows is also too big.

Joe, I really really appreciate all this help. There's no way I could have figured any of this out myself.

[J Allen]

I've got a few more ideas, but I have to head out, I'll try and post back tomorrow...hopefully someone can jump in here and help you until then.

[mudhouse]

I've got a few more ideas, but I have to head out, I'll try and post back tomorrow...hopefully someone can jump in here and help you until then.

Thank you again, Joe.

All best,
Dave

[mudhouse]

I think I see what was happening. If I've got 5 or fewer galleries on a category page, I get the layout above - SM uses larger gallery images. If I've got 6 or more galleries on the page, SM switches to a small image, and your CSS code for 4-across works as designed.

I'm going to spend some time adding galleries and uploading photos before I fool around with the layout any more. Once I'm reasonably sure that I've got that done, I'll get back to layout - this way, there won't be any more surprises.

Thanks again Joe. You've been more than helpful!

[mudhouse]

[QUOTE=
/*=====Galleries 4 Across=====*/
.miniBox {width:122px; text-align:center; height:210px; margin:0 28px;}
.miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
.miniBox .albumTitle {width:122px;}
.miniBox .description {width:122px;}
.miniBox .updated {width:122px;}
.loggedIn .miniBox {height:auto; min-height:300px;}
.loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
.loggedIn .miniBox input {width:122px;}
.loggedIn .miniBox textarea {width:112px;}
.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
.albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
.albumLarge .albumTitle {width:192px;}
.albumLarge .description {width:192px;}
.albumLarge .updated {width:192px;}
.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
.loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
.loggedIn .albumLarge input {width:192px;}
.loggedIn .albumLarge textarea {width:182px;}

[/QUOTE]

JAllen -

Your code (above) is working great when I've got 5 or more galleries in a category, but when there are only 4, it doesn't seem to have any effect. You can see what I mean at this link: http://davereichertphoto.com/Early-Work

Is there anything I can do to adjust the gallery layout in this category? I wouldn't be adverse to adding another invisible gallery to the category if that would fix it...

Thanks again,
Dave

[mudhouse]

JAllen -

Your code (above) is working great when I've got 5 or more galleries in a category, but when there are only 4, it doesn't seem to have any effect. You can see what I mean at this link: http://davereichertphoto.com/Early-Work

Is there anything I can do to adjust the gallery layout in this category? I wouldn't be adverse to adding another invisible gallery to the category if that would fix it...

Thanks again,
Dave


I'm still at a loss for how to treat the galleries in this page:
http://davereichertphoto.com/Early

I've tried adding two more unpublished and empty galleries to the category, with the idea that they might force the smaller gallery previews and give me four in a row, but it didn't work.

Any ideas out there?
This page seems to be working properly, thanks to Joe's script.
http://davereichertphoto.com/Current

TIA,
Dave

[mudhouse]

This, and a couple more tweaks ought to complete my site. Does anyone have a method to tighten up the spacing of gallery thumbs on this page?

http://davereichertphoto.com/Early

[mudhouse]

Bump.

[JaeSen]

Not really sure what thread to post this in, this seemed like the right place.

I have two things I want to do:

1. On this page http://www.jaesenphotography.com/gallery/9624240_DDPEM
I want to clean it up by getting rid of where it says Gallery Page: 1 on top and bottom since I won't ever be adding any more images. Also, changing Gallery Comments to just Comments would be nice.

2. On my Portfolio pages, like this one http://www.jaesenphotography.com/gallery/8422679_EWJy7
I want to get rid of the Photo Viewing Size Option. I want it to stay Medium when they are on the filmstrip style page. If they click the main image where it takes you to a blacked out screen, I would like for them to be able to choose the size there, but only there. Does that make sense??

I know Dave had asked about this in his initial post, but didn't see if it ever got addressed. Any help would be greatly appreciated.

JaeSen

[jfriend]

Not really sure what thread to post this in, this seemed like the right place.

I have two things I want to do:

1. On this page http://www.jaesenphotography.com/gallery/9624240_DDPEM
I want to clean it up by getting rid of where it says Gallery Page: 1 on top and bottom since I won't ever be adding any more images. Also, changing Gallery Comments to just Comments would be nice.

2. On my Portfolio pages, like this one http://www.jaesenphotography.com/gallery/8422679_EWJy7
I want to get rid of the Photo Viewing Size Option. I want it to stay Medium when they are on the filmstrip style page. If they click the main image where it takes you to a blacked out screen, I would like for them to be able to choose the size there, but only there. Does that make sense??

I know Dave had asked about this in his initial post, but didn't see if it ever got addressed. Any help would be greatly appreciated.

JaeSenYou should start your own thread for new questions specific to your site. rather than hook onto to someone else's thread.

[JaeSen]

You should start your own thread for new questions specific to your site. rather than hook onto to someone else's thread.

Actually, I have found that starting a new thread does not necessarily get your question answered as there are already people subscribed to existing threads.

Also, in many of the threads I have read over the past several months, ya'll usually get mad that new threads were started covering the same topics. The question I have is the same as he originally posted and never got answered, I figured this would be a good place to get it answered for both of us...

So everytime someone has a question about the slideshow they should start a new thread?? So then why are there several thousand posts to the Shizam slideshow thread?? I must be misunderstanding the idea of SHARING questions and concerns.

Sorry you feel I intruded on "someone else's thread" I thought it was meant to help EVERYONE.

[jfriend]

Actually, I have found that starting a new thread does not necessarily get your question answered as there are already people subscribed to existing threads.

Also, in many of the threads I have read over the past several months, ya'll usually get mad that new threads were started covering the same topics. The question I have is the same as he originally posted and never got answered, I figured this would be a good place to get it answered for both of us...

So everytime someone has a question about the slideshow they should start a new thread?? So then why are there several thousand posts to the Shizam slideshow thread?? I must be misunderstanding the idea of SHARING questions and concerns.

Sorry you feel I intruded on "someone else's thread" I thought it was meant to help EVERYONE. If you have a new issue that is specific to your site, you should start a new thread. That is proper forum etiquette.

There are some "topic" threads like the slideshow thread that are meant as a catch-all thread for lots of issues related to slideshows. As a volunteer trying to help people, I personally hate those topic threads because I can't follow a conversation I'm trying to have with one person because it's 10 people all speaking at once about different issues and I am not able to offer as good a service in those threads because I can't follow just one conversation without missing things. But, the flip side, is it gives other people 30 pages of slideshow-related stuff they can look through (not that most people actually do that though).

When you post a new thread and nobody responds, just reply to your own posting with a message that says "bump". That brings it back to the top of the forum listings and points out to everyone that nobody has responded. Putting it into some other thread just so those people HAVE to see your posting is not proper forum etiquette. In fact, an active moderator who sees your post would probably move it onto it's own thread because that's where it belongs.

As to your question, I'm sorry I didn't/don't see any similarity between your questions and the ones in the original post.

[JaeSen]

As to your question, I'm sorry I didn't/don't see any similarity between your questions and the ones in the original post.

He originally stated he wanted to hide the picture viewing option and fix his image size, which is what I am wanting to do too. No one ever addressed it...and I did post this same question on another forum about breadcrumbs over a month ago and it never got answered. I didn't know about the "bump" thing so thanks for that.

[jfriend]

Not really sure what thread to post this in, this seemed like the right place.

I have two things I want to do:

1. On this page http://www.jaesenphotography.com/gallery/9624240_DDPEM
I want to clean it up by getting rid of where it says Gallery Page: 1 on top and bottom since I won't ever be adding any more images. Also, changing Gallery Comments to just Comments would be nice.

2. On my Portfolio pages, like this one http://www.jaesenphotography.com/gallery/8422679_EWJy7
I want to get rid of the Photo Viewing Size Option. I want it to stay Medium when they are on the filmstrip style page. If they click the main image where it takes you to a blacked out screen, I would like for them to be able to choose the size there, but only there. Does that make sense??

I know Dave had asked about this in his initial post, but didn't see if it ever got addressed. Any help would be greatly appreciated.

JaeSenTo get rid of the page navigation on that page and clean up the resulting borders around it, use this CSS:

.gallery_9624240 .pageNav {display:none;}
.gallery_9624240 #albumNav_top {border-top:none; padding-top:0; padding-bottom:0;}
.gallery_9624240 #albumNav_bottom {border-bottom:none; padding-top:0; padding-bottom:0;}

To change the text, requires a script which I don't have handy with me now.

In the flimstrip view, you can hide the size choice by adding this CSS:

#sizePicker {display:none;}

There is no way to lock it to medium size as it was designed to be something the viewer controls, not the site owner.