Advanced co-branding

[januszk]

Hi,
I've just started to do some html/css coding on my galleries. I have an idea of what to do but I'm stuck somewhere in the middle. Maybe somebody can help. I'd like to have a horizontal menu (that's easy) with several buttons. 3 of the buttons will be:
Home
Galleries
About

I'd like the following:

1. Home button to go to specific gallery. That's easy, but I'd also like to have this gallery displayed as my home page (in other words when you type januszk.smugmug.com I'd like this gallery to open instead of default bio/categories)

2. Galleries button should open categoriesBox (but without bioBox)

3. About button should open bioBox, but without categoriesBox

Before I dig any further the css and co-branding features do you think if this is even possible ? Any hints will help.

Thanks a lot,

Janusz

[Mike Lane]

Moved to the Smugmug customization room.

Hi,
I've just started to do some html/css coding on my galleries. I have an idea of what to do but I'm stuck somewhere in the middle. Maybe somebody can help. I'd like to have a horizontal menu (that's easy) with several buttons. 3 of the buttons will be:
Home
Galleries
About

I'd like the following:

1. Home button to go to specific gallery. That's easy, but I'd also like to have this gallery displayed as my home page (in other words when you type januszk.smugmug.com I'd like this gallery to open instead of default bio/categories) This (http://www.dgrin.com/showthread.php?t=20011) may be of some help. It's not exactly the same thing, but I'm thinking that some of the techniques discussed in there could be pertinent. flyingdutchie? jfriend? :ear

2. Galleries button should open categoriesBox (but without bioBox) I'm not sure what you mean here. Can you elaborate?

3. About button should open bioBox, but without categoriesBox
:scratch

[januszk]

Moved to the Smugmug customization room.

This (http://www.dgrin.com/showthread.php?t=20011) may be of some help. It's not exactly the same thing, but I'm thinking that some of the techniques discussed in there could be pertinent. flyingdutchie? jfriend? :ear

I'm not sure what you mean here. Can you elaborate?

:scratchHi,
Thanks for link. I'll check it out later.
What I meant by categoriesBox and bioBox is this. Currently, the default home page look is more or less like: bioBox at the top and list of categories below (at least I have it customized this way). Lets assume that I'll be able to make one of my galleries a home page. This way, when somebody goes to januszk.smugmug.com will see banner and menu at the top and selected gallery in the middle of the page. There will be no bioBox or list of categories displayed on home page. Then, when user clicks on About link in menu, I'd like bioBox to be displayed (so on the page there will be banner, menu, bioBox, footer, no galleries or categories). Then, when user clicks on Galleries link in menu I'd like the list of categories to be displayed (just like currently on homepage, but without bioBox). So, the page would have banner, menu, Categories, footer. Would it be possible ?
Thanks,
Janusz

[Mike Lane]

Hi,
Thanks for link. I'll check it out later.
What I meant by categoriesBox and bioBox is this. Currently, the default home page look is more or less like: bioBox at the top and list of categories below (at least I have it customized this way). Lets assume that I'll be able to make one of my galleries a home page. This way, when somebody goes to januszk.smugmug.com will see banner and menu at the top and selected gallery in the middle of the page. There will be no bioBox or list of categories displayed on home page. Then, when user clicks on About link in menu, I'd like bioBox to be displayed (so on the page there will be banner, menu, bioBox, footer, no galleries or categories). Then, when user clicks on Galleries link in menu I'd like the list of categories to be displayed (just like currently on homepage, but without bioBox). So, the page would have banner, menu, Categories, footer. Would it be possible ?
Thanks,
Janusz
I think it would be much easier to build a gallery on your home page (which would avoid the whole going straight into a gallery thing) and then would allow you to hide or show various boxes as you see fit. Yes, I can see this as something that would work.

[januszk]

I think it would be much easier to build a gallery on your home page (which would avoid the whole going straight into a gallery thing) and then would allow you to hide or show various boxes as you see fit. Yes, I can see this as something that would work.
I will try this but is it possible to hide bioBox on the home page and make it available from menu?

[Mike Lane]

I will try this but is it possible to hide bioBox on the home page and make it available from menu?
With javascript, sure.

[januszk]

With javascript, sure.Have you seen anybody done that already?

[flyingdutchie]

Have you seen anybody done that already?Take a look at my page:

http://flyingdutchie.smugmug.com (http://flyingdutchie.smugmug.com/)

You can't hide my bioBox on my homepage, but you can hide the logo and the galleries ('View' menubar item) -- not very useful, unless i start adding some featured galleries --.

On my gallery-pages, in smugmug or smugmug_small style, you can also hide the thumbnails section.

-- Anton.

[bwg]

just to clarify, you CAN hide the bio, just as Anton has hidden the galleries. Anton just hasn't put the code in his page to hide the bio.

Take a look at my page:

http://flyingdutchie.smugmug.com (http://flyingdutchie.smugmug.com/)

You can't hide my bioBox on my homepage, but you can hide the logo and the galleries ('View' menubar item) -- not very useful, unless i start adding some featured galleries --.

On my gallery-pages, in smugmug or smugmug_small style you can also hide the thumbnails section.

-- Anton.

[januszk]

just to clarify, you CAN hide the bio, just as Anton has hidden the galleries. Anton just hasn't put the code in his page to hide the bio.Thanks guys. I still don't know how to do it (Anton, can you help ? an example will do). For me this will be Step 1: remove bio from homepage. Step 2 will be displaying it someplace else. For example if I'll create gallery_AAAA and display it, do you think it will be possible to display bioBox right above it ?

[flyingdutchie]

Thanks guys. I still don't know how to do it (Anton, can you help ? an example will do). For me this will be Step 1: remove bio from homepage. Step 2 will be displaying it someplace else. For example if I'll create gallery_AAAA and display it, do you think it will be possible to display bioBox right above it ?
To hide your bioBox permanently on your homepage, you don't need javascript. CSS will suffice:
#bioBox { display: none; }

However, you have to jump through hoops to make your bioBox available on any other page other than your homepage. Smugmug only provides the HTML that contains the (contents of your) bioBox on your homepage. Any other page does not contain it at all....

What you could do is to never ever show your bioBox. Create a Header instead that contains your bio-information and add this to your CSS:
(given your header contains two items; #default_header which is your default-header but not your bio-info and #header_bio which contains your bio, replacing your bioBox).

#bioBox { display: none; } /* Always hides your BIO */
#header_bio { display: none; }/* Always hides your BIO */

/* But show your replacement-bio just above your gallery_AAAA */
.gallery_AAAA #header_bio {
display: block;
/* And some more CSS to style it. */
}

If you want to dynamically show and hide your bioBox through a button/menu-item etc... that'll require quite some work, especially if you don't know javascript very well.

Let me know if this helps you out! :-)
-- Anton.

[Mike Lane]

I'm confused as to exactly what you're trying to do still I guess.

I know first you want to make http://username.smugmug.com land on http://username.smugmug.com/gallery/123456. Honestly, I can't imagine why you'd want to do that. That would mean you would be eliminating nearly all of the benefits of having a site that allows you 3 levels of heirarchy and tons of other ways of interacting with people. Not to menion the fact that the buttons that you see when you're logged in that lead you to various things like account settings and such are only accessible from the homepage. There are just so many disadvantages of doing this, I just can't fathom why you'd want to.

But the rest is kind of murky. You want to hide your bio somewhere and display it somewhere else? Why? Where? Can't you just type up what is in your bio and put it in a gallery description if that's where you want it? Why do you need the <div id="bioBox"> specifically?

Again, I'm not sure at all why you want to display the categories box in a gallery either. I thought I had it, but now I'm just confused.

What EXACTLY do you want to see when someone goes to http://januszk.smugmug.com?

[januszk]

I'm confused as to exactly what you're trying to do still I guess.

I know first you want to make http://username.smugmug.com (http://username.smugmug.com/) land on http://username.smugmug.com/gallery/123456. Honestly, I can't imagine why you'd want to do that. That would mean you would be eliminating nearly all of the benefits of having a site that allows you 3 levels of heirarchy and tons of other ways of interacting with people. Not to menion the fact that the buttons that you see when you're logged in that lead you to various things like account settings and such are only accessible from the homepage. There are just so many disadvantages of doing this, I just can't fathom why you'd want to.

But the rest is kind of murky. You want to hide your bio somewhere and display it somewhere else? Why? Where? Can't you just type up what is in your bio and put it in a gallery description if that's where you want it? Why do you need the <div id="bioBox"> specifically?

Again, I'm not sure at all why you want to display the categories box in a gallery either. I thought I had it, but now I'm just confused.

What EXACTLY do you want to see when someone goes to http://januszk.smugmug.com? (http://januszk.smugmug.com/?)Thanks everybody. I think I'll go with Anton suggestion and do it all with specific galleries and css. As the matter of fact I don't know javascript at all but it is another opportunity to learn (I have C/C++ background even though I haven't used it in a while).
Now, my reason. You are right Mike, this might sound kind of weird at first. I was thinking of making my smugmug home a little more like most photographers sites. When you go to the website of the photographer or studio it does not give you all the information up-front. It usually starts with one picture or a photography-related quote and a menu. Menu takes you to the specific pictures or groups like portfolio, best pictures etc. Menu usually contains the links to contact and to photographer information. That was my point. Hide everything at the beginning and let user decide where to go. The other way of doing this would be of course to buy web hosting, design my page any way I want it and use smugmug only for picture hosting but with full time job and 2 years old daughter I just don’t have time to put it all together. That’s why I picked smugmug which gives me the possibility to create galleries fairly quick but also does allow pretty advanced customization. Anyway I hope I made it a little clearer of what was my point. Thanks everybody for your help. When I figure out how to do certain thing I’ll customize my gallery and then ask what do you think.

Regards,
Janusz

[Mike Lane]

Thanks everybody. I think I'll go with Anton suggestion and do it all with specific galleries and css. As the matter of fact I don't know javascript at all but it is another opportunity to learn (I have C/C++ background even though I haven't used it in a while).
Now, my reason. You are right Mike, this might sound kind of weird at first. I was thinking of making my smugmug home a little more like most photographers sites. When you go to the website of the photographer or studio it does not give you all the information up-front. It usually starts with one picture or a photography-related quote and a menu. Menu takes you to the specific pictures or groups like portfolio, best pictures etc. Menu usually contains the links to contact and to photographer information. That was my point. Hide everything at the beginning and let user decide where to go. The other way of doing this would be of course to buy web hosting, design my page any way I want it and use smugmug only for picture hosting but with full time job and 2 years old daughter I just don’t have time to put it all together. That’s why I picked smugmug which gives me the possibility to create galleries fairly quick but also does allow pretty advanced customization. Anyway I hope I made it a little clearer of what was my point. Thanks everybody for your help. When I figure out how to do certain thing I’ll customize my gallery and then ask what do you think.

Regards,
Janusz
You want something like www.choicephotos.net right? Surprise, that was done without any external hosting at all (nothing but html and css either. no javascript or anything fancy) :wink Check out the code to see how it was done.

You can do all the things you are looking to do (and more probably) with your smugmug site and some CSS / xhtml knowledge.

[januszk]

You want something like www.choicephotos.net (http://www.choicephotos.net/) right? Surprise, that was done without any external hosting at all (nothing but html and css either. no javascript or anything fancy) :wink Check out the code to see how it was done.

You can do all the things you are looking to do (and more probably) with your smugmug site and some CSS / xhtml knowledge.
Here we go. That's exactly what I'm looking for. Thanks Mike. I think I have a couple of sleepless nights ahead of me but I'll figure it out.

[Mike Lane]

Here we go. That's exactly what I'm looking for. Thanks Mike. I think I have a couple of sleepless nights ahead of me but I'll figure it out.
Don't lose too much sleep. I created it so I can help you with it. It's pretty simple really.

1) create two headers, one to use on the home page and one to use on all the other pages.
2) Put each of those headers in its own div and give that div a meaningful id (and class if you want).
3) Set the default for your splash page div to be hidden (that way the other header will show up everywhere).
4) Use the body tag class to make the splash page div show up on the homepage only and use that same body tag class to make all the other elements go away. (e.g. .homepage #Splash {display:block;} .homepage #homepage {visibility:hidden; width:0; height:0;})

Gotchas: The logged in buttons are only visible inside the #homepage element so you can't use display:none on the #homepage element or else you won't have access to the logged in buttons. You have to carefully consider how you're going to arrange your site if you hide every element in the #homepage layer. Mark Javer had all his pertinent galleries in a single category and he called that category page his main gallery. There's no reason you can't have more than one category that you link to from your splash page (business and personal for example. Weddings, product shots, corporate photography, etc perhaps?).

The possibilities are endless.

[januszk]

Don't lose too much sleep. I created it so I can help you with it. It's pretty simple really.

1) create two headers, one to use on the home page and one to use on all the other pages.
2) Put each of those headers in its own div and give that div a meaningful id (and class if you want).
3) Set the default for your splash page div to be hidden (that way the other header will show up everywhere).
4) Use the body tag class to make the splash page div show up on the homepage only and use that same body tag class to make all the other elements go away. (e.g. .homepage #Splash {display:block;} .homepage #homepage {visibility:hidden; width:0; height:0;})

Gotchas: The logged in buttons are only visible inside the #homepage element so you can't use display:none on the #homepage element or else you won't have access to the logged in buttons. You have to carefully consider how you're going to arrange your site if you hide every element in the #homepage layer. Mark Javer had all his pertinent galleries in a single category and he called that category page his main gallery. There's no reason you can't have more than one category that you link to from your splash page (business and personal for example. Weddings, product shots, corporate photography, etc perhaps?).

The possibilities are endless.
I'll need a couple of day to go through this (I'm new to html/css as well) but I'm gonna make it work. Thanks a lot.
Janusz

[Mike Lane]

I'll need a couple of day to go through this (I'm new to html/css as well) but I'm gonna make it work. Thanks a lot.
Janusz
Well I'm here for you if you can't figure it out.

[januszk]

Well I'm here for you if you can't figure it out.
Hi Mike,
OK, a couple of questions:
1. Why do I need 2 headers? I want the top of the page look the same regardless where I'm so I was thinking to create a banner and a menu below it and put it to "Header" section of the smugmug customization. This way it would be displayed everywhere and that's what I need. Am I missing something here?
2. I understand that the idea on the www.choicephotos.com (http://www.choicephotos.com) is to remove everything from the home page and replace it with the pictures and special galleries. In my case it will be easier (just a picture, no links). Is that right?
3. I'll permanently remove bioBox from homepage and use one of the galleries instead.
4. Mark Javer moved all galleries to common category Gallery. Since I'm already using all 3 levels (Category, Subcategory and Galleries) I can't do this. Is there any way to display all my categories (or .categoryBox) anywhere other then homepage?
5. If no than I have a tricky thing to do. After accessing my homepage for the first time, categoryBox should be removed from homepage and replaced with one background picture. When menu button Home is pressed the picture from homepage should be gone and .categoryBox displayed again. Is there a easy way to do it? I've just thought about another possibility. Can I display .categoryBox on the homepage but cover it with selected picture and permanently remove picture when cursor goes over it? I'm just considering the possibilities. Does any of this make sense?
Thanks,
Janusz

[Mike Lane]

Hi Mike,
OK, a couple of questions:
1. Why do I need 2 headers? I want the top of the page look the same regardless where I'm so I was thinking to create a banner and a menu below it and put it to "Header" section of the smugmug customization. This way it would be displayed everywhere and that's what I need. Am I missing something here?
I must be confused as to what you want. I thought you wanted a splash page a la Choice Photos. To get a splash page like that you've got to get it into the HTML somewhere. I simply made it a part of the header in the customize section of the cobranding on Mark' site. You could just as well put it in the footer. If it isn't a splash page that you're looking for, then you'll have to explain what you want to me again.

2. I understand that the idea on the www.choicephotos.com (http://www.choicephotos.com) is to remove everything from the home page and replace it with the pictures and special galleries. In my case it will be easier (just a picture, no links). Is that right?
All of the stuff is still there, it's just hidden using CSS. I can't imagine an easier way to do that really (not that there isn't one mind you). You'll be using a layer in much the same way that I did on Mark's page only you'll be displaying something different (obviously).

3. I'll permanently remove bioBox from homepage and use one of the galleries instead.
mmm...okay.

4. Mark Javer moved all galleries to common category Gallery. Since I'm already using all 3 levels (Category, Subcategory and Galleries) I can't do this. Is there any way to display all my categories (or .categoryBox) anywhere other then homepage?
Nope.

5. If no than I have a tricky thing to do. After accessing my homepage for the first time, categoryBox should be removed from homepage and replaced with one background picture. When menu button Home is pressed the picture from homepage should be gone and .categoryBox displayed again. Is there a easy way to do it? I've just thought about another possibility. Can I display .categoryBox on the homepage but cover it with selected picture and permanently remove picture when cursor goes over it? I'm just considering the possibilities. Does any of this make sense?
Thanks,
Janusz
I like your thinking, but I think you're on the wrong track here. Consider doing a stylesheet switch (and this is something that someone more versed in javascript will have to help you with but it shouldn't be difficult at all). Simply set up a link on your splash page (if that's what you're going for) to execute a JS program that will reload the browser using a different external stylesheet. In the splash stylesheet you can have all the CSS for the splash page and the CSS to hide the homepage elements, in the non splash stylesheet you can have all the css for the home page and to hide the splash elements. Voila, two pages in one.

[januszk]

I must be confused as to what you want. I thought you wanted a splash page a la Choice Photos. To get a splash page like that you've got to get it into the HTML somewhere. I simply made it a part of the header in the customize section of the cobranding on Mark' site. You could just as well put it in the footer. If it isn't a splash page that you're looking for, then you'll have to explain what you want to me again.


All of the stuff is still there, it's just hidden using CSS. I can't imagine an easier way to do that really (not that there isn't one mind you). You'll be using a layer in much the same way that I did on Mark's page only you'll be displaying something different (obviously).


mmm...okay.


Nope.


I like your thinking, but I think you're on the wrong track here. Consider doing a stylesheet switch (and this is something that someone more versed in javascript will have to help you with but it shouldn't be difficult at all). Simply set up a link on your splash page (if that's what you're going for) to execute a JS program that will reload the browser using a different external stylesheet. In the splash stylesheet you can have all the CSS for the splash page and the CSS to hide the homepage elements, in the non splash stylesheet you can have all the css for the home page and to hide the splash elements. Voila, two pages in one.
Thanks. I'm sorry for not being clear again. I do want a splash screen. I think I know what you mean. When I said header I only meant the upper banner and a menu but I think you meant the whole page, right ?
Since I can't re-organize my galleries I think I'll try to find something that will work as your last suggestion. It's real fun.
Janusz

[januszk]

Thanks. I'm sorry for not being clear again. I do want a splash screen. I think I know what you mean. When I said header I only meant the upper banner and a menu but I think you meant the whole page, right ?
Since I can't re-organize my galleries I think I'll try to find something that will work as your last suggestion. It's real fun.
JanuszHi Mike,
I have another question. Could you help me to disable tooltips that pop up when cursor goes over thumbnail picture ? Sometimes on Firefox they are too slow and you go over one image then move to another and a tooltip for previous picture is displayed. Since most of my pictures doesn't have description is useless for me. I found one discussion that you were a part of about nicetitle so I figure you know how to disable them.
Thanks,
Janusz

[Mike Lane]

Hi Mike,
I have another question. Could you help me to disable tooltips that pop up when cursor goes over thumbnail picture ? Sometimes on Firefox they are too slow and you go over one image then move to another and a tooltip for previous picture is displayed. Since most of my pictures doesn't have description is useless for me. I found one discussion that you were a part of about nicetitle so I figure you know how to disable them.
Thanks,
Janusz I suppose you could put this in your css:

div.nicetitle {display:none;}
div.nicetitle p {display:none;}
div.nicetitle p.destination {display: none;}

[januszk]

I suppose you could put this in your css:

div.nicetitle {display:none;}
div.nicetitle p {display:none;}
div.nicetitle p.destination {display: none;}
Thanks, but that's not it. Tooltips are still there. I'll play with it some more later.
Janusz

[januszk]

Thanks, but that's not it. Tooltips are still there. I'll play with it some more later.
JanuszHi Mike,
I need to ask you about another thing. The customization I've done so far looked ok to me on IE. I tried it yesterday on Firefox. 2 things went wrong. I fixed one but can't do anything with second one. I have the following in the css:
#photos {
padding-top: 5x;
margin: 0;
border: 2px;
border-top: 0;
position: relative;
top: -5px;
_height:1%;
margin: auto;
background-color: #342f27;
}
The background color in the gallery view is set correctly in IE but remains black in firefox (black is my default body background). When I set this color as background in #thumbnails and #displayPhoto it is set correctly in both browsers. I've tried everything I know (which is not much) but nothing seems to work. Can you help ? The whole thing is at http://januszk.smugmug.com
Thanks,
Janusz

[bwg]

janusz

your site looks the same to me in firefox and IE

did you get this taken care of?

Hi Mike,
I need to ask you about another thing. The customization I've done so far looked ok to me on IE. I tried it yesterday on Firefox. 2 things went wrong. I fixed one but can't do anything with second one. I have the following in the css:
#photos {
padding-top: 5x;
margin: 0;
border: 2px;
border-top: 0;
position: relative;
top: -5px;
_height:1%;
margin: auto;
background-color: #342f27;
}
The background color in the gallery view is set correctly in IE but remains black in firefox (black is my default body background). When I set this color as background in #thumbnails and #displayPhoto it is set correctly in both browsers. I've tried everything I know (which is not much) but nothing seems to work. Can you help ? The whole thing is at http://januszk.smugmug.com
Thanks,
Janusz

[januszk]

janusz

your site looks the same to me in firefox and IE

did you get this taken care of?
No, not really. The difference I'm talking about is a background color in the gallery (eg. http://januszk.smugmug.com/gallery/845083 ) the backgrund under the thumbnails and main picture is supposed to be kind of brown (the same as the background color in the list of categories or subcategories). It is this way in IE but in Firefox it's all black. I've installed Firefox 2 days ago and haven't added much to it. Is it possible that I'm missing some plugins ?
Janusz

[bwg]

interesting.

i'm running firefox 1.5 beta 2 and the background is brown for me.

your thumbnails are stacked on the right, but the background is brown.

No, not really. The difference I'm talking about is a background color in the gallery (eg. http://januszk.smugmug.com/gallery/845083 ) the backgrund under the thumbnails and main picture is supposed to be kind of brown (the same as the background color in the list of categories or subcategories). It is this way in IE but in Firefox it's all black. I've installed Firefox 2 days ago and haven't added much to it. Is it possible that I'm missing some plugins ?
Janusz

[januszk]

interesting.

i'm running firefox 1.5 beta 2 and the background is brown for me.

your thumbnails are stacked on the right, but the background is brown.I was using 1.0.7. After upgrading to Firefox 1.5 beta it looks OK. Weird.

[flyingdutchie]

Hi Mike,
I need to ask you about another thing. The customization I've done so far looked ok to me on IE. I tried it yesterday on Firefox. 2 things went wrong. I fixed one but can't do anything with second one. I have the following in the css:
#photos {
padding-top: 5x;
margin: 0;
border: 2px;
border-top: 0;
position: relative;
top: -5px;
_height:1%;
margin: auto;
background-color: #342f27;
}
The background color in the gallery view is set correctly in IE but remains black in firefox (black is my default body background). When I set this color as background in #thumbnails and #displayPhoto it is set correctly in both browsers. I've tried everything I know (which is not much) but nothing seems to work. Can you help ? The whole thing is at http://januszk.smugmug.com (http://januszk.smugmug.com/)
Thanks,
Janusz
I don't know why this CSS snippet fixes this issue for you, but here it goes.

Add this to your CSS styling:
#photos {
border: 1px solid #342f27;
}

I tried this in the 'Edit CSS' of FireFox 1.0.7 and the background will look fine suddenly! It does not make any sense, but see if it works for you as well.
-- Anton.

[Mike Lane]

I don't know why this CSS snippet fixes this issue for you, but here it goes.

Add this to your CSS styling:
#photos {
border: 1px solid #342f27;
}

I tried this in the 'Edit CSS' of FireFox 1.0.7 and the background will look fine suddenly! It does not make any sense, but see if it works for you as well.
-- Anton.
Yeah I had to do that same thing to get it to work in firefox. The fun thing is that you can set the border to be transparent and the fix still works. Of course if you want a colored border you can also use a color rather than transparent (as you did).

Everyone expects IE bugs but Firefox bugs are almost a little painful huh? Like a betrayal...

Okay that's going too far...but still. The one bug I've got with firefox won't be fixed until ff1.6a1 apparently *sigh*

[bwg]

ok, i see what's going on here. i ran into the same problem on my new theme (http://bigwebguy2.smugmug.com/gallery/883844). The way i got around it was to specify a float attribute for the #photos (#photos {float:left;})

you just need to make sure you do a clear: both on the first thing that follows it (usually #albumNav_bottom or #comment)

something about a non-floated box that contains floated boxes it doesn't like.

Yeah I had to do that same thing to get it to work in firefox. The fun thing is that you can set the border to be transparent and the fix still works. Of course if you want a colored border you can also use a color rather than transparent (as you did).

Everyone expects IE bugs but Firefox bugs are almost a little painful huh? Like a betrayal...

Okay that's going too far...but still. The one bug I've got with firefox won't be fixed until ff1.6a1 apparently *sigh*

[Mike Lane]

ok, i see what's going on here. i ran into the same problem on my new theme (http://bigwebguy2.smugmug.com/gallery/883844). The way i got around it was to specify a float attribute for the #photos (#photos {float:left;})

you just need to make sure you do a clear: both on the first thing that follows it (usually #albumNav_bottom or #comment)

something about a non-floated box that contains floated boxes it doesn't like.
Did you try float:none? Probably won't work I guess, but maybe, just maybe.

[bwg]

hmm...not quite sure that'll work as float: none is the default value.

http://www.w3.org/TR/CSS21/visuren.html#propdef-float

Did you try float:none? Probably won't work I guess, but maybe, just maybe.

[Mike Lane]

hmm...not quite sure that'll work as float: none is the default value.

http://www.w3.org/TR/CSS21/visuren.html#propdef-float
Yeah, I know. I was hoping to avoid problems with people who had resized div#photos boxes (if those people exist that is). Oh well, if they're having problems like that they can use the border hack :dunno

[januszk]

Yeah, I know. I was hoping to avoid problems with people who had resized div#photos boxes (if those people exist that is). Oh well, if they're having problems like that they can use the border hack :dunno
The border fix worked well. Thanks Anton.

[Trish323]

...I know I still want to set this up a bit..here is how it looks so far

http://trishfahnerphoto.smugmug.com/

any help will be appreciated!

[Cameron]

...I know I still want to set this up a bit..here is how it looks so far

http://trishfahnerphoto.smugmug.com/

any help will be appreciated!
I really like the header, but it it so tall that I have to scroll down to see each picture - that gets old after a few clicks.
Your header is over 400 pixels tall - even with 1024x768 resolution the header takes more than half of the screen.
I'd make it a bit smaller so the focus is on your great photos, not the header. I love the photos though!

[Andy]

...I know I still want to set this up a bit..here is how it looks so far

http://trishfahnerphoto.smugmug.com/

any help will be appreciated!

Hello, Trish :D

You'll want to get Firefox, and also the Firefox Web Developer Extension (both free from mozilla.org. The web dev tool allows you to "resize" and see what your site looks like on 1024x768 resolution, the most common size (followed closely by 800x600). It's really useful, and I highly recommend it. It also allows you to make changes in html and css on the fly, see what they look like, before you put them in your cobranding section of smugmug.

Next: banner-bloat. Your banner is over 100K, which will cause some visitors on slow connections to be frustrated. Try for very lightweight images - really lightweight - and save for web or as gifs. I agree with the above poster, it's big - and that's nice for a splashscreen (see www.choicephotos.net or www.photoscapedesign.com) but I feel it's too much for every page on your site. Take a look at some of these sites (http://www.dgrin.com/showpost.php?p=179232&postcount=4) maybe for some inspiration and ideas?

Finally - your site is broken on firefox, I'm sure that one of the experts can tell you why...

Keep it up!

[Trish323]

Well, Hello Andy:D ,
Whew...I now know why I didn't get into web design. I resized my header..@72kb now..that should be ok. I checked out the sites you mentioned...jeesh...how can I get the custom look they have utilizing my seriously deflated brain when it comes to this stuff? I downloaded firefox...Avant is faster for me...but I will use FF as needed.

Even reading all the stuff in the how to customize forums...i still don't know what the heck does what...guess it will take time..thanks for your help!

[Trish323]

I really like the header, but it it so tall that I have to scroll down to see each picture - that gets old after a few clicks.
Your header is over 400 pixels tall - even with 1024x768 resolution the header takes more than half of the screen.
I'd make it a bit smaller so the focus is on your great photos, not the header. I love the photos though!
thanks for taking a look...i resized the header...should be better.

[Barb]

thanks for taking a look...i resized the header...should be better.

Trish, it looks great! Wonderful pictures, too
:clap

[januszk]

Trish, it looks great! Wonderful pictures, too
:clap I have a challenge for everybody more advanced in html then me. It might not even be a possible customization thing but rather an enhancement request for smugmug. I hope you can help me figure it out. One of my friends reported a problem and I'm passing it to you. What you need to see the problem is: banner (little more then 100px is enough) and resolution up to 1024x768. When you leave smugmug format you have thumbnails displayed on the left panel and photo on the right. With default setting photo it to big to fit on the screen so you scroll down to see full picture. Then you click "Next" button to see next picture. Browser is refreshed and you need to scroll it down again ..... and so on, through the whole gallery. You don't notice this kind of things if you just create a gallery and check if its there, but if you actually want to look at the tens of pictures it is really annoying thing to scroll down after every photo. The solutions would be:



1. make you photos smaller (I don't really like this one)

2. change size of displayed main photo as in: http://photos.mikelanestudios.com/ (well but I want the photos to be 600x400)

3. not to refresh the whole page after every picture so the browser does not go back to the top



I really wish item 3 was possible. You could just scroll the viewer so the navigation bar (Next, Prev buttons) and main picture are visible and then just press Next. Picture would change but browser would not scroll up. Now question: Is it possible to implement this kind of change either through customization or by smugmug.com team?

Janusz

[Mike Lane]

I have a challenge for everybody more advanced in html then me. It might not even be a possible customization thing but rather an enhancement request for smugmug. I hope you can help me figure it out. One of my friends reported a problem and I'm passing it to you. What you need to see the problem is: banner (little more then 100px is enough) and resolution up to 1024x768. When you leave smugmug format you have thumbnails displayed on the left panel and photo on the right. With default setting photo it to big to fit on the screen so you scroll down to see full picture. Then you click "Next" button to see next picture. Browser is refreshed and you need to scroll it down again ..... and so on, through the whole gallery. You don't notice this kind of things if you just create a gallery and check if its there, but if you actually want to look at the tens of pictures it is really annoying thing to scroll down after every photo. The solutions would be:



1. make you photos smaller (I don't really like this one)

2. change size of displayed main photo as in: http://photos.mikelanestudios.com/ (well but I want the photos to be 600x400)

3. not to refresh the whole page after every picture so the browser does not go back to the top



I really wish item 3 was possible. You could just scroll the viewer so the navigation bar (Next, Prev buttons) and main picture are visible and then just press Next. Picture would change but browser would not scroll up. Now question: Is it possible to implement this kind of change either through customization or by smugmug.com team?

Janusz
I can probably help you accomplish #2 if I only understood what your problem was. Are you saying that you'd like to have one header on the main page and one (smaller) header in the gallery pages?

[januszk]

I can probably help you accomplish #2 if I only understood what your problem was. Are you saying that you'd like to have one header on the main page and one (smaller) header in the gallery pages?
Thanks Mike but no (sorry for making it confusing again). I don't want to make header smaller (thanks you you and other smugmug masters I already know how to do this). The second solution is to make main photo smaller so it fits on the 1024x768 screen without scrolling (just like you did, the information under your fireworks photos are current size: 600x400 but the actual size is 400x267). If I have no other choice I'll do this but I'd rather the window stay unscrolled when Next button is pressed. Do you think it would be something doable by smugmug team so I can add it as the enhancement request?

[Mike Lane]

Thanks Mike but no (sorry for making it confusing again). I don't want to make header smaller (thanks you you and other smugmug masters I already know how to do this). The second solution is to make main photo smaller so it fits on the 1024x768 screen without scrolling (just like you did, the information under your fireworks photos are current size: 600x400 but the actual size is 400x267). If I have no other choice I'll do this but I'd rather the window stay unscrolled when Next button is pressed. Do you think it would be something doable by smugmug team so I can add it as the enhancement request?
Hmmm, you had me confused at first. But now I think I know what you're talking about. On smaller screens smugmug pages (all of them, not just mine) revert to smugmug small. The smugmug small gallery style is the one that the image is 400x267 (at least my uncropped 20D images are) but you're right the image info still says 600px x 400px.

The good news is you don't have to do anything to make this work. It already does! When a user lands on a page in the smugmug style (either set by a gallery preference cookie or because the site owner has forced the smugmug style), the page will determine the screen resolution behind the scenes and will pull up the appropriate style (smugmug for larger screens and smugmug_small for smaller screens) and will feed the user agent a cookie to make that the new default. There shouldn't be any issues with having to scroll down except for those times when the site owner has a header image that is too large.

[rainforest1155]

The good news is you don't have to do anything to make this work. It already does! When a user lands on a page in the smugmug style (either set by a gallery preference cookie or because the site owner has forced the smugmug style), the page will determine the screen resolution behind the scenes and will pull up the appropriate style (smugmug for larger screens and smugmug_small for smaller screens) and will feed the user agent a cookie to make that the new default. There shouldn't be any issues with having to scroll down except for those times when the site owner has a header image that is too large.The point Janusz rose is an issue for me to and I also see what you're saying. Theoretically there should be no scrolling in order to see the picture, but 1024x768 is a border case. It uses the large smugmug-style and I like this, but in most cases the height isn't enough through various factors:
Most browsers having tab-bars and people putting link-bars and google-bars in their browser-window. Then there are people like me having a permanent 2-line taskbar. Plus any customized header is most likely heigher than the 24px smugmug logo, gallery descriptions are often longer than one line and for example your font sizes for gallery names are perhaps optimized for higher resolutions...you see where I'm heading - in 1024 you really can be lucky when you see the image caption without having to scroll.

Now enough ranting - I like the style very much and don't want it to be changed and also got a proposal to change the need for scrolling while browsing through a gallery - anchors!
The anchor could be placed at the line where the upper navigation is directly above the thumbs. This way the browser would always jump down showing the picture without scrolling.

I requested this before and thought this would be possible with Ajax - but simple html should be enough to make this work. :wink

What do you think?
JT, any comments on this?

Thanks,
Sebastian

[{JT}]

What do you think?
JT, any comments on this?

I can give it some tests and see what everyone at smugmug thinks. But in reailty - we don't get this complaint very often.

[januszk]

I can give it some tests and see what everyone at smugmug thinks. But in reailty - we don't get this complaint very often. The problem that I'm having is exactly what Sebastian specified (obviously much clearer then me :-)). I have a google toolbar in my browser, there goes my smugmug logo that has height 123px, then my smugmug menu bar and then regular gallery. With browser resolution set to 1024x768 smugmug_small is not selected by default (and I really like the picture to be 600x400 so I don't want to force it) but the main picture is too big to be displayed without scrolling. Thanks JT for looking. Please let us know what you decide.

[rainforest1155]

I can give it some tests and see what everyone at smugmug thinks. But in reailty - we don't get this complaint very often.That's my point in this - I imagine visitors browsing through the galleries and often just seing the upper part of a picture and in this procedure the caption doesn't get recognized at all. They're just seing the picture and make up there mind about it and don't see my annotations.
I don't want to put the caption at the top either, because the longer it gets - the more the visitors have to scroll to even get to see the picture.

Maybe you could just make the anchors optional (if it works out the way I thought) - for people like Janusz and me - that would be awesome! :thumb

Thanks,
Sebastian

[bwg]

#caption_top {display: block;}

That's my point in this - I imagine visitors browsing through the galleries and often just seing the upper part of a picture and in this procedure the caption doesn't get recognized at all. They're just seing the picture and make up there mind about it and don't see my annotations.
I don't want to put the caption at the top either, because the longer it gets - the more the visitors have to scroll to even get to see the picture.

Maybe you could just make the anchors optional (if it works out the way I thought) - for people like Janusz and me - that would be awesome! :thumb

Thanks,
Sebastian

[rainforest1155]

#caption_top {display: block;}I know I could do this, but sometimes my captions get a littlebit longish - results in even more need for scrolling. :D

Sebastian