more customizing questions

[Plasmodium]

I have a question about customizing my gallery. I've put a background picture on the left side of my home page. I'd now like to tile all my categories in rows, but on the right side -- not centered in the middle. I haven't the faintest idea even how to find info on this topic, let alone how to do it.

Thanks!

[Plasmodium]

Nevermind, figured that one out.

Next issue -- removing as many of the links at the bottom of the page as possible.

[pat.kane]

Here's what I did to kill the feeds.

#feeds {display:none}

[Plasmodium]

Thanks for the help. That took care of the feeds, though all of the links are still there.

What I'm trying to do is the following (feel free to look at my gallery):

I want to tile all my gallery categories on the right side, with no text except for a caption.

When you open one of the categories, the gallery display within is arranged the same way (in tiles, not as a long list like in my 'Boston' category).

I'd also like to change the background picture when a category is opened, and have the background picture disappear within the galleries.

I want there to be a minimum amount of extraneous text and stuff, so I'd prefer that the 'share with forums' and 'exif' and everything be invisible except when I'm logged in.

There will be other things, I'm sure, that I'll need help with, but this suffices for now. I'm just getting very frustrated that there isn't an easier, user friendly interface for someone who doesn't do this for a living.

[Mike Lane]

Thanks for the help. That took care of the feeds, though all of the links are still there.
Put a single space in your footer html box and lots of that should go away

What I'm trying to do is the following (feel free to look at my gallery): Holy crap your gallery is super creative! Nice work!

I want to tile all my gallery categories on the right side, with no text except for a caption. That is what I see currently. Did you find a fix for that?

When you open one of the categories, the gallery display within is arranged the same way (in tiles, not as a long list like in my 'Boston' category).
I'm not sure what you mean here...

I'd also like to change the background picture when a category is opened, and have the background picture disappear within the galleries.
.cagetory_<CategoryName> {background:#000033 url(http://www.whatever.com/image.jpg) top left fixed no-repeat;}

View the page source and look at the body tag to see what class is tied in with the body tag

.category_Object {background:#000033}

This makes the background your dark blue for all the gallery styles including the single image views.

I want there to be a minimum amount of extraneous text and stuff, so I'd prefer that the 'share with forums' and 'exif' and everything be invisible except when I'm logged in.
It's hard to know what you want there and what you want gone. Try starting with

#breadcrumb {display:none}
.loggedIn #breadcrumb {display:block;}

That will hide some of the offending text when you're logged out and make it show when you're logged in.

There will be other things, I'm sure, that I'll need help with, but this suffices for now. I'm just getting very frustrated that there isn't an easier, user friendly interface for someone who doesn't do this for a living.
These things take time. Smugmug is a young company and they're building this service from scratch. If you think it's difficult now, you should have tried getting where you are before the most recent updates.

I don't do this for a living (although I'm thinking I'd like to after the whole military gig is up in a year) but I know what I'm doing for the most part. Plus there are several people out there that are willing to help you with your problems. We're a community that is here to help. Take advantage of that.

[Plasmodium]

Thanks so much for all the help, Mike.

There actually may be a bug on my page -- when I add #breadcrumb {display:none} my homepage actually will not successfully load (it freezes internet explorer). The other gallery pages seem to work fine, and the tag is gone from it, but the home page is toast as long as that script is in there.

So here are a few things I'm working on at this point. First, I want to move the 'powered by smugmug' stuff to the right, so that it's not overlapping the background picture. I was able to position the 'box' over to the right, but I can't seem to get that syntax to work with other objects.

With the categories, I'd prefer to have the names appear below the picture and eliminate the 'updated' line and the 'description' lines.

That's enough for now, but I'm sure I'll have more questions. Thanks again!

[Plasmodium]

I'm still having difficulty figuring out how to change the picture on each successive page. I've tried to add a different picture to the background in the 'nature' gallery, but it doesn't seem to be working. Perhaps I just haven't been able to identify the body tag, or perhaps the way I've set up the home page is overriding the subsequent pages.

Thanks again.

[Mike Lane]

Your locking up problem could be due to:

.box {position: position: absolute; left: 220px}

You couldn't get it to work if you didn't have the two positions: could you? The browsers are all confused so it looks like they made it position relative to me (which may be the default set by smugmug). Change it to this instead:

#homepage {width:100%;}
.box {margin:0; padding:0 0 0 460px;}

I'm still working on the footer for you.

[Plasmodium]

Thanks, Mike.


The positioning doesn't work unless I plug in "position" twice. The script you suggested made the home page look more or less similar, but it actually made my galleries disappear from every other page.

[Mike Lane]

Thanks, Mike.


The positioning doesn't work unless I plug in "position" twice. The script you suggested made the home page look more or less similar, but it actually made my galleries disappear from every other page.
Putting in the position twice doesn't do anyhing for you (except, I suspect cause the browser to crash depending on the statements before and after it), I promise you. Change it to position:relative, see what you get.

[Plasmodium]

Thanks, Mike, you're right that it still works with position: relative. I'm still trying to figure out some of these other questions, though, like having a different picture in each gallery's background.

[Mike Lane]

Thanks, Mike, you're right that it still works with position: relative. I'm still trying to figure out some of these other questions, though, like having a different picture in each gallery's background.
I tell you what, give me a link to a picture that you want for a background, and the gallery in which you want that gallery to go and i'll give you a specific example that you can modify to suit your needs for other galleries.

[Plasmodium]

For instance, in place of my current background photo, I was going to use this photo: http://DrPablo.smugmug.com/photos/34339724-L.jpg as the background in the Nature gallery, along with a dark green background color.

[wholenewlight]

http://drpablo.smugmug.com/photos/24445018-S.jpg

Pretty cool shot of Logan takeoffs / Landings :thumb

[Plasmodium]

Thanks! :):

[Mike Lane]

First let's talk about my conventions. When I put something in the CSS in angle brackets, I mean for you to replace everything inside and including the angle brackets. So .categor_<whatever> should be something like .category_Nature. If you have questions about what you should use, look at the body tag for the page in question. In this case, we are talking about the page http://drpablo.smugmug.com/Nature. The body tag for that page is <body class="category_Nature">. To access that in the CSS you need to use a period before the class declaration. If it were an id="whatever" you'd need to use a # to access it in the CSS.

So let's break down why this won't work:

.cagetory_<Nature> {/* The CSS is confused right off the bat by the < and > and ignores the whole thing */
background:#030533 /* you are missing a ; at the end of the statement */
background image: /* you forgot the dash between background and image: background-image is proper */ url(http://DrPablo.smugmug.com/photos/34339724-L.jpg); background-position: left top;
background-attachment: fixed;
background repeat: no-repeat; /* Again you forgot the dash between background and repeat */
}

Use this instead:

.category_Nature {background:#113d1c url(http://drpablo.smugmug.com/photos/34339724-L.jpg) left top fixed no-repeat;}

Notice that I collapsed all the background declarations into one shorthand declaration. I just used a dark green color (#113d1c) you can change it if you'd like.

[Plasmodium]

Thanks, Mike. That's the idea. I'll give it a shot for the other pages. Now, when I open the nature gallery now the background picture is in the right spot, but it looks like a portion of it is also floating in the middle. Any idea why that might be?

[Mike Lane]

Thanks, Mike. That's the idea. I'll give it a shot for the other pages. Now, when I open the nature gallery now the background picture is in the right spot, but it looks like a portion of it is also floating in the middle. Any idea why that might be?
I'm not seeing that. All I see is your big image and a thumbnail of an image from your gallery and some text.

[Plasmodium]

I just checked on three separate computers here, and I still see it. Where the 'breadcrumb' starts there is a small segment of the background picture superimposed on the actual background.

This is what it looks like:

http://DrPablo.smugmug.com/photos/37183715-L.jpg

[Mike Lane]

I just checked on three separate computers here, and I still see it. Where the 'breadcrumb' starts there is a small segment of the background picture superimposed on the actual background.

This is what it looks like:


Ahh of course. That's because the body has a class of .category_Nature and so does the div for the container for the smugmug-generated content.

What is odd is that you wouldn't see that in firefox. Obviously firefox and IE handle the cascade differently. Try adding this to what you already have (don't delete the other statement):


#category .category_Nature {background:transparent;}

That should work.

[Plasmodium]

Hmm, no luck with that.

[Plasmodium]

Incidentally, it still crashes internet explorer when I put in "#breadcrumb {display:none}"

[bwg]

try :

#category.category_Nature {background:transparent;}

with no space betwen #category and .category_Nature

you may need to do background-image: none; background-color: transparent, but that first line will get you to the element you need.


Incidentally, it still crashes internet explorer when I put in "#breadcrumb {display:none}"

[Plasmodium]

Cool, that worked, thanks!


I really appreciate all the help. Now, here are the next couple things I want to accomplish, which I just can't figure out:

1) Get the smugmug footer to the very bottom of the screen and/or over to the right away from the background image

2) remove the breadcrumb (remembering that the #breadcrumb {display:none} command will invariably cause internet explorer to crash when I open my home page)

3) move the links/images for the specific galleries to the right of the background picture and line them up

4) remove the 'updated' and the 'description' information from the galleries

Thanks again.

[Mike Lane]

Cool, that worked, thanks!


I really appreciate all the help. Now, here are the next couple things I want to accomplish, which I just can't figure out:

1) Get the smugmug footer to the very bottom of the screen and/or over to the right away from the background image

2) remove the breadcrumb (remembering that the #breadcrumb {display:none} command will invariably cause internet explorer to crash when I open my home page)

3) move the links/images for the specific galleries to the right of the background picture and line them up

4) remove the 'updated' and the 'description' information from the galleries

Thanks again.
1) It is kind of complicated to get footers to stick to the bottom of the viewport in FF and IE. I'll work on that as I may want to do something along those lines myself.

2) #breadcrumb {visibility:hidden} I think it was your position: position: absolute that was causing the crash when it interacted with the #breadcrumb thing. There is nothing about #breadcrumb {display:none} that would cause IE to crash.

3) The way you've got things set up currently is going to make this an exercise of change the position in the CSS, save it, check it out in FF, fix it until it looks good there, sigh when you see it in IE, hack IE, until it looks good. There is an easier way to set up your page so that everything is bumped over x number of pixels from the left. I described that earlier in this thread I think.

4) you can remove the updated and description information in the gallery options, you don't need CSS to do this. Now if you wanted one or the other that'd be a different story.

[Plasmodium]

Ugh, I'm trying to do the same thing as above with the Food gallery, and I'm having the same problem. I can't seem to figure out the name of the food category.

[Plasmodium]

2) #breadcrumb {visibility:hidden} I think it was your position: position: absolute that was causing the crash when it interacted with the #breadcrumb thing. There is nothing about #breadcrumb {display:none} that would cause IE to crash.
That works, actually. I had been doing display:block, as had been suggested, but visibility:hidden works fine.

[Plasmodium]

I'm trying to fix that same image problem for the Food category now. I've put in #category.category_Food {background:transparent;}, but unlike the Nature category it's not working now. Any ideas? Thanks.

[Mike Lane]

I'm trying to fix that same image problem for the Food category now. I've put in #category.category_Food {background:transparent;}, but unlike the Nature category it's not working now. Any ideas? Thanks.
Try just #category {background:none;}

[Plasmodium]

Try just #category {background:none;}
Wow, that worked. Thanks again!

[Mike Lane]

Wow, that worked. Thanks again!
yeah, I was (once again) the victim of overthinking the problem.

[Plasmodium]

Now if you can help me with this one I may be able to give you a breather from my numerous issues. I was trying to change the background picture in the category 'The Sea', and I used the same syntax that worked in the food and nature categories, but it didn't work this time. I keep looking at the source code without the slightest idea of what I'm looking for. How can I find the actual name in order to make these changes?

[Mike Lane]

Now if you can help me with this one I may be able to give you a breather from my numerous issues. I was trying to change the background picture in the category 'The Sea', and I used the same syntax that worked in the food and nature categories, but it didn't work this time. I keep looking at the source code without the slightest idea of what I'm looking for. How can I find the actual name in order to make these changes?
I knew we'd get to this eventually. I waited because I didn't think it'd make sense to you until we got here.

Just a bit of background so you understand what you're seeing. When you make a class declaration in an element you separate multiple classes with a space. So for example if I say <body class="category_The sea"> I'm actually declaring that there are two separate classes "category_The" and "sea". Basically what we've got here is a bit of an issue that JT has already fixed but has not gotten distributed out live just yet. So in your css if you're doing this:

.category_The sea {background:...}

You actually are making the browser confused because it doesn't know what this "sea" thing is because it isn't in the right syntax. So, what you could do is simply use

.category_The {background:...}

for the time being. But there's an issue here since you have a category named "The Desert". That category will respond to anything you do to .category_The as well (and I doubt you want to have the same image for your "The Sea" category and your "The Desert" category.

So what you can do is simply this:

.sea {background:...}

.desert {background:...}

But, like I said, the fix is done and will be released shortly so this will invariably break when that happens. Once it does, all you need to do is to check through your code and look for the <body class="whatever"> code and replace .sea and .desert with the appropriate code. Remember, no spaces though!

Let me know if this made sense to you.

[pat.kane]

Paul,

Here's some more code you need to add to your css:

body.imagePopup {background:#fff}

It removes the background image from the popup window you get when you click on a smaller sized image. Code is courtesy of Mike when I needed to solve the problem in thread http://www.dgrin.com/showthread.php?t=18963.

Regards,
Pat