13 Days with Smugmug - time for a redesign.

[Pupator]

Alright - in 13 days here I've been able to mostly reproduce what my galleries looked like with the *other* service I've used over the years.

Then I remembered - I didn't like that look! Time for a redesign. Switching from black to white background - removing the banner from the top to (more) middle - adding a slide show and a search function....


...heh, I'm gonna be in way over my head. This ought to be fun. Here's the preliminary sketch of what I'm going for on the home page. Galleries come later.

http://paulsclicks.smugmug.com/photos/121018634-L.jpg

[ivar]

Alright - in 13 days here I've been able to mostly reproduce what my galleries looked like with the *other* service I've used over the years.

Then I remembered - I didn't like that look! Time for a redesign. Switching from black to white background - removing the banner from the top to (more) middle - adding a slide show and a search function....


...heh, I'm gonna be in way over my head. This ought to be fun. Here's the preliminary sketch of what I'm going for on the home page. Galleries come later.

Hi Paul, I think that's very doable actually. The only thing you need to do is get the rounded corners to line up nicely, and possible create the borders of the slideshow in Photoshop as well as your logo. I don't think this will be too difficult for you to do.

[Pupator]

Hi Paul, I think that's very doable actually. The only thing you need to do is get the rounded corners to line up nicely, and possible create the borders of the slideshow in Photoshop as well as your logo. I don't think this will be too difficult for you to do.


Thanks Ivar - I didn't think it would be too bad, especially after being directed to bigwebguy's site, which (in many ways) has the look that I want. The one thing I'm worried about (from the outset - there will be more later) is figuring out how to best make the permanant frame for the slideshow pictures, but I don't think that will be as difficult as I'm anticipating.

[Andy]

LOL at the title of your post. What took you so long???????

See this site for ideas:
http://www.scojobo.com/

:)

[Pupator]

LOL at the title of your post. What took you so long???????

See this site for ideas:
http://www.scojobo.com/

:)

Heh - thanks Andy.


Ick. I now have the feeling that looking at bigwebguy's code is not a good way to start. Tons of script, a theme + 2 css files (plus the standard)....*head begins spinning*

[Allen]

13 1/2

[bwg]

Heh - thanks Andy.


Ick. I now have the feeling that looking at bigwebguy's code is not a good way to start. Tons of script, a theme + 2 css files (plus the standard)....*head begins spinning*hehe, looking at bigwebguy's code isn't good for anybody....including bigwebguy.

I really need to get around to cleaning up that script someday.

[Pupator]

hehe, looking at bigwebguy's code isn't good for anybody....including bigwebguy.

I really need to get around to cleaning up that script someday.

Heh - didn't mean to pick on you, for sure! You're design and layout are awesome and similar in places to what I'm looking for, so I thought I'd use FireBug and take a peek under the hood....eeek!!!! :) Great stuff, just a bit more complicated than I'd expected. Of course, it's exactly what I should have expected considering all the images you have to use to get that kind of look. I'll have some questions for you soon, no doubt, as soon as I'm able to work on it again.

The biggest thing I know I'll need help with is making a simple white frame for all of the slideshow images to be displayed in. I'll search around though because I bet there are already plenty of threads dealing with that.

[Pupator]

What's the easiest way to get the logo positioned as displayed in the first post? I tried including it as an image in the #boxTop, but that didn't work very well. Should I create a new div and put it in there or is there an existing space for it?

[ivar]

What's the easiest way to get the logo positioned as displayed in the first post? I tried including it as an image in the #boxTop, but that didn't work very well. Should I create a new div and put it in there or is there an existing space for it?Create a new div, <div id="my_logo"></div>


CSS:
#my_logo {
background: url(.....) no-repeat;
width: XXXpx;
height: XXXpx;
margin: 0 auto;
display: none;
}

.homepage #my_logo {
display: block;
}

Change the X's to the appropriate numbers, and add the link to your logo :thumb

[DJKennedy]

hehe, looking at bigwebguy's code isn't good for anybody....including bigwebguy.

I really need to get around to cleaning up that script someday.

I had the same problem with my own CSS so to make easier for me (and anyone else checking it out) I added a bunch of comments to make it easier to find things.

[Pupator]

Create a new div, <div id="my_logo"></div>




Thanks Ivar! What I really can't figure out though is where to put the div so that it's placed correctly. In header/head tag it goes above the slide show - in footer it goes below the galleries. I want it just below the slide show and above the galleries. :scratch

Also, can you take a look at my slideshow controls and figure out what the heck is happening there? :dunno paulsclicks.smugmug.com (http://paulsclicks.smugmug.com)

[ivar]

Thanks Ivar! What I really can't figure out though is where to put the div so that it's placed correctly. In header/head tag it goes above the slide show - in footer it goes below the galleries. I want it just below the slide show and above the galleries. :scratch

Also, can you take a look at my slideshow controls and figure out what the heck is happening there? :dunno paulsclicks.smugmug.com (http://paulsclicks.smugmug.com)Done and done.

I moved your slideshow to it's own div, and put that above the logo.

Buttons: You had some a-symetric padding going on where you needed symetric margins :thumb

[Pupator]

Done and done.

I moved your slideshow to it's own div, and put that above the logo.

Buttons: You had some a-symetric padding going on where you needed symetric margins :thumb

DOH! I think I was messing with the code at the same time and my changes, not yours, got saved. Can you go back in a re-do it??? (A thousand apologies!) My ultimate goal- just so you don't waste time doing something else. Is to have the slide show controls appear at the very bottom right of the slideshow images.

[ivar]

DOH! I think I was messing with the code at the same time and my changes, not yours, got saved. Can you go back in a re-do it??? (A thousand apologies!) My ultimate goal- just so you don't waste time doing something else. Is to have the slide show controls appear at the very bottom right of the slideshow images.Fixed :D


Try this for the right-align of the buttons, see if you like it:

#ssControl {
width: 670px;
text-align: right;
}

[Pupator]

It's so fun to see real progress!!!

A few new things:
1) See the black border I've put around my image? Notice how there's an extra pixel or two of white between it and the picture on the left side? Then on the right side the picture seems to cover up a pixel or two of the border. I think I want to make that border an image anyway (something a bit fancier than just a black box) - is that doable or so complex I should just fix the border that's there?

2) The ss controls are appearing over the logo image and not over the slideshow image? When I try to fix it with something like margin-top: -20px; it goes in the right location, but is covered up by the ssimage rather than on top of it.

[ivar]

If you choose to not show the bioBox (use the 'hide' link in the top-right corner) you can remove all the CSS related to the bioBox.
Also, my_slideshow doesn't have any children, so you can remove all the code for those :thumb

[Pupator]

Heh - had a funny moment there (AWW CRAP) when cleaning up code and deleted a bunch of things and accidentally deleted .homepage #my_slideshow{display: block;} and my slideshow went away. Lucky I looked again at the code and noticed that was missing.


What are your thoughts on the ss image border?

[bwg]

I had the same problem with my own CSS so to make easier for me (and anyone else checking it out) I added a bunch of comments to make it easier to find things.the css is pretty recent and clean, the javascript on the other hand is old and inefficient.

[Pupator]

Heh - I knew it wouldn't take long to run into another problem. I'm trying to set this image: http://paulsclicks.smugmug.com/photos/121216699-M.jpg
as the background for all the currently white space. When I do it using the body tag, I get lots of weird gaps and problems. :huh