[FONT=Verdana]Customizing for Dummies[/FONT]

[FONT=Verdana]Chapter 5 – Fix up those galleries.[/FONT]

[FONT=Verdana]A quick note about my conventions.[/FONT][FONT=Verdana] I'm going to try to color code the things that I write to make them easier to understand. I've decided that the following colors mean the following things. Chapter titles and sub-titles are in green. HTML is in orange. CSS is in yellow. Changes are in red. I will sometimes put things in a code box, but often times I actually think it makes more sense to put things in the text just in a different color. I'd appreciate any feedback from you if this is a system you don't like.[/FONT]


[FONT=Verdana]Recap:[/FONT]

[FONT=Verdana]Last time we began the process of actually doing some modest changes to our homepages by using CSS to change the color scheme.[/FONT]


[FONT=Verdana]Customizing your galleries.[/FONT]

[FONT=Verdana]Last time we added some CSS that would change the look of our smugmug pages. Hopefully you weren’t afraid of actually getting your hands dirty with CSS and adjusting your pages. As you can see, much of what we did last time didn’t have much affect on the gallery pages. That is what this chapter is going to be about. I’m not going to go in as much depth about how to get to your cobranding page or what each of the boxes are or anything like that. If you need a refresher, check out chapter 4, it has all of that in there. This time I’m going to be giving you CSS and telling you my thought processes when I deal with the smugmug galleries. The way that I do things certainly isn’t the only way or the best way necessarily. But it works and it may help you when you’re designing your pages.[/FONT]

[FONT=Verdana]So let’s get started. The first thing that you need to know is that you should always customize your sites to look right in a modern browser first. A modern browser is one with good support for the CSS 2 recommendation (and preferably good support for the CSS 2.1 recommendation and maybe even some CSS 3 support). A modern browser will not have buggy handling of basic things like padding or margins, and it will support things like pngs with alpha transparencies. Some of the most popular modern browsers are the browsers that use the Gecko engine (Firefox 1.5 and higher, Mozilla Suite, Flock), Safari, and Opera 8 and higher. Notice the one that I left out. Internet Explorer is NOT a modern browser. You should not design your pages in IE and then try to fix the “problems” that you will end up with in the other browsers. You’ll go crazy believe me. So with that in mind, pull up your favorite modern browser and we’ll get to work! I’ll be working in Firefox 1.5 using the Webdeveloper extension by Chris Pederick.[/FONT]

[FONT=Verdana]Recall that for my page I decided on a color scheme that you can find at http://www.colorschemer.com/schemes/index.php?id=358. I’m going to continue with that muted brown scheme on my page. You may use any color scheme that your heart desires.[/FONT]

[FONT=Verdana]I always start with the smugmug style when I start tackling the gallery styles. No particular reason, that’s just my way. So go to one of your pages and put it in the smugmug style. You will want to find a gallery page that has all the various elements available on the page that you will use on your site. If you ever sell photos in any gallery, make sure the gallery you are looking at has photo sales enabled (the gallery need not be public by the way). If you have an album description in any of your galleries you’ll need to have it in the gallery that you’re going to be looking at as you style. Make sure this gallery has some comments etc. The gallery that I’ll be working with can be found at http://customize.smugmug.com/gallery/814524.[/FONT]

[FONT=Verdana]I always work from top to bottom. That helps me stay focused on what I need to tackle next and it keeps my CSS from being all over the place. So the first thing I’ll do is create a comment to let myself know that I’m starting the section for the gallery styles. Below all the code I input last time I’m going to put this:[/FONT]

[FONT=Verdana]/* General Gallery Styles */[/FONT]

[FONT=Verdana]/* Smugmug Styles */[/FONT]

[FONT=Verdana]/* Smugmug Small Styles */[/FONT]

[FONT=Verdana]/* Traditional Styles */[/FONT]

[FONT=Verdana]/* All Thumbs Styles */[/FONT]

[FONT=Verdana]/* Journal Styles */[/FONT]

[FONT=Verdana]/* Slideshow Styles */[/FONT]

[FONT=Verdana]/* Filmstrip Styles */[/FONT]

[FONT=Verdana]/* Single Image Styles */[/FONT]

[FONT=Verdana]Now, I like to stay as general as I possibly can with my code. That means that I’ll have a lot of things that will stay the same from gallery to gallery in my page. The more things I can make do that, the less work I’ll have. That’s why I called this section “General Gallery Styles”[/FONT]

[FONT=Verdana]So working from top to bottom here is my thought process. The smugmug header is going to be the same for all pages throughout the site (for now) so I don’t need to fool with that. So the next thing is the breadcrumb. I want to make the breadcrumb stand out from the page just a little bit more than it does currently. I know the breadcrumb is an element that is in every single gallery style so I’ll put the following under the General Gallery Styles heading. My initial thought is that I’d like to add an underline that goes all the way across and I’d like to increase the font size a bit. First I have to find the element that contains the breadcrumb. Using the webdeveloper extension I can hit ctrl-shift-f (in windows) to pull up a neat tool that will help me out with this (I could also view the source of the page if I wanted to). So I find out that the element is a div with id=“breadcrumb”. So I’ll put this in the CSS under General Gallery Styles:[/FONT]

[FONT=Verdana]#breadcrumb { /* select all elements with id=“breadcrumb” */[/FONT]
[FONT=Verdana]border-bottom:1px solid #EDEBE9; /* set the bottom border to 1px solid and light gray */[/FONT]
[FONT=Verdana]font-size:15px; /* set the font size to 15 pixels */[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]But that’s not quite right. The border is just fine but only the “>” elements and the “Art Gallery” text got bigger. What gives? Well as it turns out, there is a bit of a conflict with the SmugmugBlack.css. It is overruling the font size of linked elements. That’s not a big deal, we simply have to win the specificity war. An easy way to do that is to include an ID in the CSS declaration. Something like this:[/FONT]

[FONT=Verdana]#breadcrumb a:link, /* select all link elements that are children of elements with id=“breadcrumb” */[/FONT]
[FONT=Verdana]#breadcrumb a:visited, /* same for visited links */[/FONT]
[FONT=Verdana]#breadcrumb a:active, /* same for active states */[/FONT]
[FONT=Verdana]#breadcrumb a:hover { /* hover states too */[/FONT]
[FONT=Verdana]font-size:15px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]So I’ll put that just below the CSS I did above and try it out. And it works! I’m satisfied with the Breadcrumb so I’ll move on to the Album Description.[/FONT]

[FONT=Verdana]The album description is also something that is going to be a part of all the gallery styles. So again, I’ll place the CSS I come up with for it in the General Gallery Styles section of the CSS. So what do I want to do with it? Well it looks a little cramped having all that text right up there with the edges the same width as everything else on the page. So let’s give it a bit of padding shall we? With the webdeveloper tool I found that the text is in a div with id of albumDescription. So at the bottom of the general gallery styles section I’ll put in:[/FONT]

[FONT=Verdana]#albumDescription { /* select any element with id=“albumDescription” */[/FONT]
[FONT=Verdana] padding:10px 20px; /* set the top and bottom padding to 10px and the left and right to 20px */[/FONT]
[FONT=Verdana] text-align:justify; /* make the text block lined up on both sides */[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]I think graphic designers shun the idea of justifying a block of text. But whatever, I can do what I want! Just remember that. It’s your page, do what you want with it! I digress.[/FONT]

[FONT=Verdana]So I like what we did with the homepage, the darker header titles with the lighter boxes. That is an element that I want to repeat here. Now, JT and the guys and gals up at Smugmug central were kind enough to make it so lots and lots of the element class names were reused in really smart ways on the site. So what I’m about to do could conceivably be a pain in the neck but as you’ll see it’s really easy with this setup. Here’s what I’ll add:[/FONT]

[FONT=Verdana].albumNav { /* select all elements with class=“albumNav” */[/FONT]
[FONT=Verdana]background:#6D6056; /* set the background to dark brown */[/FONT]
[FONT=Verdana]border:2px solid #BAB0A6; /* set the border around the top box */[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#photos { /* select all elements with id=“photos” */[/FONT]
[FONT=Verdana]background:#9F8E7F; /* set the background to be light brown */[/FONT]
[FONT=Verdana] border:2px solid #BAB0A6; /* put a border around the whole photos element */[/FONT]
[FONT=Verdana] border-top:0; /* remove the top border since it’s extra */[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]You’ll see that we have the dark brown background for the top bar and the light brown for the background of the bottom box where the photos are. But there are a couple of problems. The first and easiest to fix is that there is a small gap between the top dark brown box and the bottom light brown box. If you try to fix it by putting margin:0; in the #photos declaration, nothing changes. What gives? As it turns out there is a setting in the smugmugBlack.css that is inputting a margin and overriding your attempts to change it. Here is the code that is affecting us in the smugmugBlack.css [/FONT]

Originally Posted by smugmugBlack.css [FONT=Verdana]#smugmug #photos {[/FONT] [FONT=Verdana] margin: 5px 0px;[/FONT] [FONT=Verdana]}[/FONT]

[FONT=Verdana]So to win out we need to add this:[/FONT]

[FONT=Verdana]#smugmug #photos { /* select all elements with id photos that are children elements of elements with id smugmug */[/FONT]
[FONT=Verdana] margin:0; /* set all margins to 0 */[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]But that will only affect the smugmug style so let’s fix that by adding this:[/FONT]

[FONT=Verdana]#singleImage #photos,[/FONT]
[FONT=Verdana]#smugmug_small #photos,[/FONT]
[FONT=Verdana]#allthumbs #photos,[/FONT]
[FONT=Verdana]#filmstrip #photos,[/FONT]
[FONT=Verdana]#traditional #photos,[/FONT]
[FONT=Verdana]#smugmug #photos {[/FONT]
[FONT=Verdana] margin:0;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]Let’s pause so you can make sure the code is correct and saved into your cobranding. This is what we should have at this point:[/FONT]

[FONT=Verdana]/* General Gallery Styles */[/FONT]
[FONT=Verdana]#albumDescription { /* select any element with id=“albumDescription” */[/FONT]
[FONT=Verdana]padding:10px 20px; /* set the top and bottom padding to 5px and the left and right to 10px */[/FONT]
[FONT=Verdana] text-align:justify;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana].albumNav {[/FONT]
[FONT=Verdana] background:#6D6056;[/FONT]
[FONT=Verdana] border:2px solid #BAB0A6;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#photos {[/FONT]
[FONT=Verdana] background:#9F8E7F;[/FONT]
[FONT=Verdana] border:2px solid #bab0a6;[/FONT]
[FONT=Verdana] border-top:0;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#singleImage #photos,[/FONT]
[FONT=Verdana]#smugmug_small #photos,[/FONT]
[FONT=Verdana]#allthumbs #photos,[/FONT]
[FONT=Verdana]#filmstrip #photos,[/FONT]
[FONT=Verdana]#traditional #photos,[/FONT]
[FONT=Verdana]#smugmug #photos {[/FONT]
[FONT=Verdana] margin:0; padding:0;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]Now here’s where we come to our first big gallery specific fix. As you’ve probably noticed there is a major problem with the alignment of the smugmug gallery now. The right column has wrapped itself to the next line. This is because the widths of the various elements are set without any slop. Then we came in and set the border to be 2 pixels wide on the right and the left and that meant that the elements didn’t have any room so they got pushed down. This is something that we’re going to have to fix on a per gallery style basis. My guess is that only the smugmug and smugmug small styles are affected. This will also give us a chance to fix the padding between the images and the border too.[/FONT]

[FONT=Verdana]I only have to do the following because I set a border on the left and right sides of my gallery. If you did not do this for your gallery, you will not have this problem and you should skip this section.[/FONT]

[FONT=Verdana]The first thing I want to do is to make it so I can see the various elements. This is particularly useful if you are using the webdeveloper extension. Open the CSS editor function by going to CSS > edit CSS in the webdeveloper toolbar or by hitting ctrl-shift-e. What we’re going to do is highlight the various elements by changing their background colors (since borders add widths). This is something that is only temporary so don’t commit it to your CSS (unless you like it for some strange reason!) In the webdeveloper edit CSS box go to either your style CSS or the embedded tab and go to the bottom and input this:[/FONT]

[FONT=Verdana].albumNav {[/FONT]
[FONT=Verdana]background:red;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug .leftColumn {[/FONT]
[FONT=Verdana]background:gold;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug .rightColumn {[/FONT]
[FONT=Verdana]background:blue;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug .pageNav {[/FONT]
[FONT=Verdana]background:green;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug .photoNav {[/FONT]
[FONT=Verdana]background:lime;[/FONT]
[FONT=Verdana]}[/FONT]
[FONT=Verdana]#smugmug #thumbnails {[/FONT]
[FONT=Verdana]background:#f0f;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug .photo {[/FONT]
[FONT=Verdana]background:#ff0;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug #thumbnails .photo {[/FONT]
[FONT=Verdana]background:#0ff;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug #displayPhoto {[/FONT]
[FONT=Verdana]background:#f80;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]I do this all the freaking time. Believe me; this will help you see what is going on like nothing else. Now, if you can, actually put those in one at a time instead of copying and pasting. You’ll see what elements are what really nicely.[/FONT]

[FONT=Verdana]So the first thing I’m going to do is to try to change some widths so the various elements do not wrap down. This is important: the width of the smugmug style is 960px. I just added 2 pixels to both the left and right sides in the form of a border. That means that the sum of the elements inside the photos element must be 956px. I can see from the webdeveloper extension that the widths of the left and right elements are 345px + 613px = 958px. Since that is wider than 956px we get a wrap. To fix it start at the top and work down. My goal is to set the left side to a total width of 344px and the right side to a width of 612px for a sum of 956px. This will fix the smugmug style galleries only.[/FONT]

[FONT=Verdana]The albumNav element is fine since it is what we’re trying to fit things into. The rightColumn and leftColumn have widths that are set by the elements within them. So you don’t have to worry about them. Okay, look at the pageNav and the photoNav. It is these two elements that we need to fix. Remember that any padding on the left and right will add to the width so first start off by putting padding:0. Then simply set the width of the pageNav to 344px and the width of the photoNav to 612px. BUT… I want to make it so the text isn’t sitting right on the border of the top box so I’ll set the padding to be 0 on the top and bottom and 5px on the left and right (padding:0 5px;). Since that adds 10 pixels to the width, I’ll have to subtract 10px from the declared width. The final result is:[/FONT]

[FONT=Verdana]#smugmug .pageNav {[/FONT]
[FONT=Verdana]background:green;[/FONT]
[FONT=Verdana]width:334px;[/FONT]
[FONT=Verdana]padding:0 5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug .photoNav {[/FONT]
[FONT=Verdana]background:lime;[/FONT]
[FONT=Verdana]width:602px;[/FONT]
[FONT=Verdana]padding:0 5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]You should now see that the top bar is not wrapped. Great! Let’s move on to the bottom part. Let’s start off by setting the width of the thumbnails box to 344px and the width of the displayPhoto to 612px. So far no change. So lets set the padding of the displayPhoto to 0. Voila, you should see the wrapping is gone. Now lets set a top margin of 5px for both elements to push them down a bit. Also I want to center the display photo so I’ll add text-align:center; to it. The end result CSS is:[/FONT]

[FONT=Verdana]#smugmug #thumbnails {[/FONT]
[FONT=Verdana]background:#f0f;[/FONT]
[FONT=Verdana]width:344px;[/FONT]
[FONT=Verdana]margin-top:5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug #displayPhoto {[/FONT]
[FONT=Verdana]background:#f80;[/FONT]
[FONT=Verdana]padding:0;[/FONT]
[FONT=Verdana]width:612px;[/FONT]
[FONT=Verdana]margin-top:5px;[/FONT]
[FONT=Verdana]text-align:center;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]The next thing that is bugging me is that the thumbnails are sitting right against the left edge of the box. The first thing I’m going to try is to set the margin of the #smugmug #thumbnails .photo to be 0 like so:[/FONT]

[FONT=Verdana]#smugmug #thumbnails .photo {[/FONT]
[FONT=Verdana]background:#0ff;[/FONT]
[FONT=Verdana]margin:0;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]If you try this, you’ll see that your thumbnails collapse to the left side of the box. What we want to do is to add a margin to both sides of the thumbnails so they are spaced as far apart as they can get in their element. Change the margin:0; to margin:0 1px;. See how the photos came off of the edge a little bit and are moving to the right? That’s a good start but we need more. So keep increasing the second number: margin:0 2px; and then margin 0 3px; getting better margin:0 5px; almost there margin:0 7px; pretty much there margin:0 8px; and the thumbnails change to a row of 2 wide. So we know that we can only go to margin:0 7px;. So change your margin to that like so:[/FONT]

[FONT=Verdana]#smugmug #thumbnails .photo {[/FONT]
[FONT=Verdana]background:#0ff;[/FONT]
[FONT=Verdana]margin:0 7px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]Now except for the colors we are good to go. So go in and change your code to take out the colors and remove the selectors that we didn’t use (the ones that only have colors in them). Copy and paste the final result into your CSS box under the smugmug styles heading. The result is:[/FONT]

[FONT=Verdana]/* smugmug styles – see cobranding for dummies chapter 5 for details*/[/FONT]
[FONT=Verdana]#smugmug .pageNav {[/FONT]
[FONT=Verdana]width:334px;[/FONT]
[FONT=Verdana]padding:0 5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug .photoNav {[/FONT]
[FONT=Verdana]width:602px;[/FONT]
[FONT=Verdana]padding:0 5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug #thumbnails {[/FONT]
[FONT=Verdana]width:344px;[/FONT]
[FONT=Verdana]margin-top:5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug #thumbnails .photo {[/FONT]
[FONT=Verdana]margin:0 7px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug #displayPhoto {[/FONT]
[FONT=Verdana]padding:0;[/FONT]
[FONT=Verdana]width:612px;[/FONT]
[FONT=Verdana]margin-top:5px;[/FONT]
[FONT=Verdana]text-align:center;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]I am quite satisfied with the look of the smugmug gallery so it’s time to move on to the next gallery style, smugmug small. Make sure all the above code and the earlier code is saved into your cobranding at this point. Now go to your gallery and switch it to the smugmug small gallery style. Notce that much of what we want is already set because of the smart way that Smugmug has built their galleries. Less work for us! The smugmug small style is not suffering from all the same wrapping issues that I had with the smugmug gallery style so that is another good thing for me! I do need to make it so the photos have some whitespace between above and to the left of them and so that the big photo is centered. The code to do this will be exactly the same as it was in the smugmug style except everything will be prefaced with #smugmug_small instead (and we can leave a bunch of stuff out).[/FONT]

[FONT=Verdana]First, starting from the top, we want to get the pageNav and photoNav elements to not sit right on the borders. So just like last time, we’ll use the webdeveloper extension (ctrl-shif-f) to determine the width of the various elements currently. We see that the left is 333px and the right is 413px. So to get the whitespace we set the margin:0 5px; on the elements and reduce their declared width by 10px (5px + 5px = 10px). Like so:[/FONT]

[FONT=Verdana]#smugmug_small .pageNav {[/FONT]
[FONT=Verdana]width:323px;[/FONT]
[FONT=Verdana]padding:0 5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug_small .photoNav {[/FONT]
[FONT=Verdana]width:403px;[/FONT]
[FONT=Verdana]padding:0 5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]But notice the cartbuttons are still sitting on the border. What gives? I’m not sure to be honest, but it doesn’t matter. All we need to do is to get the element they belong to and give it a 5px right margin and we’ll be okay. The element is found to be div.cartbuttons and we change it with this:[/FONT]

[FONT=Verdana]#smugmug_small .cartbuttons {[/FONT]
[FONT=Verdana] margin-right:5px;[/FONT]
[FONT=Verdana]}[/FONT]


[FONT=Verdana]Now to get the whitespace above the thumbs and the big picture we need to add margin-top:5px to the displayPhoto and the #thumbnails just like we did in the smugmug style:[/FONT]

[FONT=Verdana]#smugmug_small #displayPhoto {[/FONT]
[FONT=Verdana] margin-top:5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug_small #thumbnails {[/FONT]
[FONT=Verdana] margin-top:5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]We also need to get the thumbnails off the left border so we’ll play around with the margins until we get it right just like we did in the smugmug style, start with margin:0; then change it to margin:0 1px; then margin:0 2px; and so on until the thumbs go to 2 rows. We end up with this:[/FONT]

[FONT=Verdana]#smugmug_small #thumbnails .photo {[/FONT]
[FONT=Verdana]margin:0 5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]We see in the smugmug small style that the image is sitting on the right border. Do you see how each of the gallery styles have their own issues that you have to deal with? To fix this issue I first set the padding to 0 and found that everything moved to the right. From there the fix was easy. Set the width to 413px (what we found from above) and set the text alignment to center. The result:[/FONT]

[FONT=Verdana]#smugmug_small #displayPhoto {[/FONT]
[FONT=Verdana] margin-top:5px;[/FONT]
[FONT=Verdana]padding:0;[/FONT]
[FONT=Verdana]width:413px;[/FONT]
[FONT=Verdana]text-align:center;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]And I’m satified with the look of the smugmug small style. The end result is this:[/FONT]

[FONT=Verdana]/* smugmug small styles */[/FONT]
[FONT=Verdana]#smugmug_small .pageNav {[/FONT]
[FONT=Verdana]width:323px;[/FONT]
[FONT=Verdana]padding:0 5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug_small .photoNav {[/FONT]
[FONT=Verdana]width:403px;[/FONT]
[FONT=Verdana]padding:0 5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug_small .cartbuttons {[/FONT]
[FONT=Verdana]margin-right:5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug_small #displayPhoto {[/FONT]
[FONT=Verdana] margin-top:5px;[/FONT]
[FONT=Verdana]padding:0;[/FONT]
[FONT=Verdana]width:413px;[/FONT]
[FONT=Verdana]text-align:center;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug_small #thumbnails {[/FONT]
[FONT=Verdana]margin-top:5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#smugmug_small #thumbnails .photo {[/FONT]
[FONT=Verdana]margin:0 5px[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]Let’s move on to the traditional gallery style. Save the above code into your cobranding and then go back to your gallery and select the traditional style from the drop down box.[/FONT]

[FONT=Verdana]The traditional style seems to have an issue with being more narrow than the other styles so we’ll have to set it’s width. Plus this is the first time when you’re logged in that you can see a toolbar that kind of looks out of place so we’ll have to fix that. Also we need to adjust the margins around the thumbnails once again to make sure they are well fitted to the page and not off to one side or the other. And once again we need to set some padding in the albumNav box. So let’s get down to brass tacks on this one shall we?[/FONT]

[FONT=Verdana]/* Traditional Styles */[/FONT]
[FONT=Verdana]#traditional .albumNav { /* set the 5px padding in the top and bottom dark brown boxes */[/FONT]
[FONT=Verdana]width:736px; /* 750px – 2px – 2px – 5px – 5px = 736px */[/FONT]
[FONT=Verdana]padding-left:5px; /* we didn’t want to set a padding to the top */[/FONT]
[FONT=Verdana]padding-right:5px; /* so we specified the left and right padding values this time */[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#traditional #photoTools {[/FONT]
[FONT=Verdana]width:736px; /* same width as above for the same reasons */[/FONT]
[FONT=Verdana]padding-left:5px; /* see above */[/FONT]
[FONT=Verdana]padding-right:5px;[/FONT]
[FONT=Verdana]border:solid #BAB0A6; /* set the border type and color */[/FONT]
[FONT=Verdana]border-width:0 2px; /* set the top and bottom border width to 0 and the left and right to 2px */[/FONT]
[FONT=Verdana]background:#9F8E7F /* set the background for the toolbar in the traditional style to e the same as the background color of the bottom box */[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#traditional #photos { /* select the container for all the thumbs */[/FONT]
[FONT=Verdana]width:746px; /* same width as before except we don’t have padding this time */[/FONT]
[FONT=Verdana]padding-top:5px; /* padding on the top to get some whitespace */[/FONT]
[FONT=Verdana]border-bottom:0; /* since we have the album nav box at the bottom we don’t need the border at the bottom for this page */[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#traditional #photos .photo {[/FONT]
[FONT=Verdana]margin:0 17px; /* we played around with this to make it just right like before */[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]Save that to your CSS on your cobranding page and move on to the all thumbs gallery style. It’s nice that the all thumbs shares so much in common with the traditional style because that means you can copy and paste the traditional stuff under the all thumbs header and rename #traditional to #allthumbs and you’ll almost be all set. Some things to keep in mind are that the all thumbs style has the toolbar in a different place so you will not want to use #allthumbs #photoTools probably. And you will need a different set of margins for the thumbnails than you did in the traditional style.[/FONT]

[FONT=Verdana]/* All Thumbs Styles */[/FONT]
[FONT=Verdana]#allthumbs .albumNav { /* same as traditional style */[/FONT]
[FONT=Verdana] width:736px;[/FONT]
[FONT=Verdana] padding-left:5px;[/FONT]
[FONT=Verdana] padding-right:5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#allthumbs #photos { /* same as traditional style */[/FONT]
[FONT=Verdana] width:746px;[/FONT]
[FONT=Verdana] padding-top:5px;[/FONT]
[FONT=Verdana] border-bottom:0;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#allthumbs #photos .photo { /* slightly different margin settings than traditional style */[/FONT]
[FONT=Verdana] margin:0 11px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]I’m running out of time but I want to get this submitted so you can start work on your galleries. Here is the journal style minus any comments. I will get to the other styles if I can before I go. If not, BWG, Andy, JT, Ben, etc can help you out and I’ll get it done when I get back.[/FONT]

[FONT=Verdana]/* Journal Styles */[/FONT]
[FONT=Verdana]#journal .albumNav {[/FONT]
[FONT=Verdana] width:736px;[/FONT]
[FONT=Verdana] padding-left:5px;[/FONT]
[FONT=Verdana] padding-right:5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#journal #photoTools {[/FONT]
[FONT=Verdana] width:736px;[/FONT]
[FONT=Verdana] padding-left:5px;[/FONT]
[FONT=Verdana] padding-right:5px;[/FONT]
[FONT=Verdana] border:solid #BAB0A6;[/FONT]
[FONT=Verdana] border-width:0 2px;[/FONT]
[FONT=Verdana] background:#9F8E7F[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#journal .journal_entry {[/FONT]
[FONT=Verdana] border:solid #BAB0A6;[/FONT]
[FONT=Verdana] border-width:0 2px 2px;[/FONT]
[FONT=Verdana] background:#9F8E7F[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#journal .caption,[/FONT]
[FONT=Verdana]#journal .caption {[/FONT]
[FONT=Verdana] margin:0; [/FONT]
[FONT=Verdana] padding:5px;[/FONT]
[FONT=Verdana] text-align:justify[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#journal .photo.left,[/FONT]
[FONT=Verdana]#journal .photo.right {[/FONT]
[FONT=Verdana] margin:5px;[/FONT]
[FONT=Verdana]}[/FONT]

[FONT=Verdana]#journal #albumNav_bottom {[/FONT]
[FONT=Verdana] border-top:0;[/FONT]
[FONT=Verdana]}[/FONT]

Thank you, Mike - another invaluable resource for everyone here at Dgrin.

Thanks Mike for taking the time to write this. Your insight into the tags and properties is invaluable. I liken this to cake frosting... you can get the angel food frosting from a can at the store or you can learn how to make your own 7 minute frosting and have something that is unique and worth the effort and extremly good!!

I really liked the part about highlighting the different sections in colors. I just started doing that myself, and while going trough this tuturial it really helped to see what tags were doing what.

To be honest, it never registered what #smugmug #smugmug_small and #filmstripe were when I was reading the CSS. Now its like a thunk on the head!! DUH!

I never realized you could adjust the shopping carts, nor had I thought about centering the photo. Its subtle small touches like that that make a decent web site.. better.

Kelly
www.actionphotos-k3.com

[quote=Mike Lane]

[FONT=Verdana] So the next thing is the breadcrumb. I want to make the breadcrumb stand out from the page just a little bit more than it does currently. I know the breadcrumb is an element that is in every single gallery style so I’ll put the following under the General Gallery Styles heading. My initial thought is that I’d like to add an underline that goes all the way across and I’d like to increase the font size a bit. First I have to find the element that contains the breadcrumb. Using the webdeveloper extension I can hit ctrl-shift-f (in windows) to pull up a neat tool that will help me out with this (I could also view the source of the page if I wanted to). So I find out that the element is a div with id=“breadcrumb”. So I’ll put this in the CSS under General Gallery Styles:[/FONT]

[FONT=Verdana]#breadcrumb { /* select all elements with id=“breadcrumb” */[/FONT]
[FONT=Verdana]border-bottom:1px solid #EDEBE9; /* set the bottom border to 1px solid and light gray */[/FONT]
[FONT=Verdana]font-size:15px; /* set the font size to 15 pixels */[/FONT]
[FONT=Verdana]}[/FONT]



Hi I have been trying to follow along and refrencing your Customize page but I can't seem to find what you are referring to as a "breadcrumb." What am I missing?
Thanks,
M

I have been wondering the same thing what is "breadcrumb"?

[quote=maiwyck]

Originally Posted by Mike Lane [FONT=Verdana] So the next thing is the breadcrumb. I want to make the breadcrumb stand out from the page just a little bit more than it does currently. I know the breadcrumb is an element that is in every single gallery style so I’ll put the following under the General Gallery Styles heading. My initial thought is that I’d like to add an underline that goes all the way across and I’d like to increase the font size a bit. First I have to find the element that contains the breadcrumb. Using the webdeveloper extension I can hit ctrl-shift-f (in windows) to pull up a neat tool that will help me out with this (I could also view the source of the page if I wanted to). So I find out that the element is a div with id=“breadcrumb”. So I’ll put this in the CSS under General Gallery Styles:[/FONT] [FONT=Verdana]#breadcrumb { /* select all elements with id=“breadcrumb” */[/FONT] [FONT=Verdana]border-bottom:1px solid #EDEBE9; /* set the bottom border to 1px solid and light gray */[/FONT] [FONT=Verdana]font-size:15px; /* set the font size to 15 pixels */[/FONT] [FONT=Verdana]}[/FONT] Hi I have been trying to follow along and refrencing your Customize page but I can't seem to find what you are referring to as a "breadcrumb." What am I missing? Thanks, M

All your questions are answered in the page source. I can't help right now, but if you view the source or get firefox with the webdeveloper extension, you'll be able to figure it out.

[QUOTE=BrianLowe]I have been wondering the same thing what is "breadcrumb"?

Andy>Travel Photos>Trip to Venice

That line up near the top of your page, that's the breadcrumb.

Thanks Mike & Andy I now know what is "breadcrumb" .

This thread is named customization for dummies after all...

Brian

i cannot get the smugmug/smugmug small style to not wrap down. what
am i doing wrong????????????
http://soar.smugmug.com

Originally Posted by Mike Lane [FONT=Verdana]I do this all the freaking time. Believe me; this will help you see what is going on like nothing else. Now, if you can, actually put those in one at a time instead of copying and pasting. You’ll see what elements are what really nicely.[/FONT] [FONT=Verdana]So the first thing I’m going to do is to try to change some widths so the various elements do not wrap down. This is important: the width of the smugmug style is 960px. I just added 2 pixels to both the left and right sides in the form of a border. That means that the sum of the elements inside the photos element must be 956px. I can see from the webdeveloper extension that the widths of the left and right elements are 345px + 613px = 958px. Since that is wider than 956px we get a wrap. To fix it start at the top and work down. My goal is to set the left side to a total width of 344px and the right side to a width of 612px for a sum of 956px. This will fix the smugmug style galleries only.[/FONT] [FONT=Verdana]The albumNav element is fine since it is what we’re trying to fit things into. The rightColumn and leftColumn have widths that are set by the elements within them. So you don’t have to worry about them. Okay, look at the pageNav and the photoNav. It is these two elements that we need to fix. Remember that any padding on the left and right will add to the width so first start off by putting padding:0. Then simply set the width of the pageNav to 344px and the width of the photoNav to 612px. BUT… I want to make it so the text isn’t sitting right on the border of the top box so I’ll set the padding to be 0 on the top and bottom and 5px on the left and right (padding:0 5px;). Since that adds 10 pixels to the width, I’ll have to subtract 10px from the declared width. The final result is:[/FONT] [FONT=Verdana]#smugmug .pageNav {[/FONT] [FONT=Verdana]background:green;[/FONT] [FONT=Verdana]width:334px;[/FONT] [FONT=Verdana]padding:0 5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug .photoNav {[/FONT] [FONT=Verdana]background:lime;[/FONT] [FONT=Verdana]width:602px;[/FONT] [FONT=Verdana]padding:0 5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]You should now see that the top bar is not wrapped. Great! Let’s move on to the bottom part. Let’s start off by setting the width of the thumbnails box to 344px and the width of the displayPhoto to 612px. So far no change. So lets set the padding of the displayPhoto to 0. Voila, you should see the wrapping is gone. Now lets set a top margin of 5px for both elements to push them down a bit. Also I want to center the display photo so I’ll add text-align:center; to it. The end result CSS is:[/FONT] [FONT=Verdana]#smugmug #thumbnails {[/FONT] [FONT=Verdana]background:#f0f;[/FONT] [FONT=Verdana]width:344px;[/FONT] [FONT=Verdana]margin-top:5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug #displayPhoto {[/FONT] [FONT=Verdana]background:#f80;[/FONT] [FONT=Verdana]padding:0;[/FONT] [FONT=Verdana]width:612px;[/FONT] [FONT=Verdana]margin-top:5px;[/FONT] [FONT=Verdana]text-align:center;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]The next thing that is bugging me is that the thumbnails are sitting right against the left edge of the box. The first thing I’m going to try is to set the margin of the #smugmug #thumbnails .photo to be 0 like so:[/FONT] [FONT=Verdana]#smugmug #thumbnails .photo {[/FONT] [FONT=Verdana]background:#0ff;[/FONT] [FONT=Verdana]margin:0;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]If you try this, you’ll see that your thumbnails collapse to the left side of the box. What we want to do is to add a margin to both sides of the thumbnails so they are spaced as far apart as they can get in their element. Change the margin:0; to margin:0 1px;. See how the photos came off of the edge a little bit and are moving to the right? That’s a good start but we need more. So keep increasing the second number: margin:0 2px; and then margin 0 3px; getting better margin:0 5px; almost there margin:0 7px; pretty much there margin:0 8px; and the thumbnails change to a row of 2 wide. So we know that we can only go to margin:0 7px;. So change your margin to that like so:[/FONT] [FONT=Verdana]#smugmug #thumbnails .photo {[/FONT] [FONT=Verdana]background:#0ff;[/FONT] [FONT=Verdana]margin:0 7px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]Now except for the colors we are good to go. So go in and change your code to take out the colors and remove the selectors that we didn’t use (the ones that only have colors in them). Copy and paste the final result into your CSS box under the smugmug styles heading. The result is:[/FONT] [FONT=Verdana]/* smugmug styles – see cobranding for dummies chapter 5 for details*/[/FONT] [FONT=Verdana]#smugmug .pageNav {[/FONT] [FONT=Verdana]width:334px;[/FONT] [FONT=Verdana]padding:0 5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug .photoNav {[/FONT] [FONT=Verdana]width:602px;[/FONT] [FONT=Verdana]padding:0 5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug #thumbnails {[/FONT] [FONT=Verdana]width:344px;[/FONT] [FONT=Verdana]margin-top:5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug #thumbnails .photo {[/FONT] [FONT=Verdana]margin:0 7px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug #displayPhoto {[/FONT] [FONT=Verdana]padding:0;[/FONT] [FONT=Verdana]width:612px;[/FONT] [FONT=Verdana]margin-top:5px;[/FONT] [FONT=Verdana]text-align:center;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]I am quite satisfied with the look of the smugmug gallery so it’s time to move on to the next gallery style, smugmug small. Make sure all the above code and the earlier code is saved into your cobranding at this point. Now go to your gallery and switch it to the smugmug small gallery style. Notce that much of what we want is already set because of the smart way that Smugmug has built their galleries. Less work for us! The smugmug small style is not suffering from all the same wrapping issues that I had with the smugmug gallery style so that is another good thing for me! I do need to make it so the photos have some whitespace between above and to the left of them and so that the big photo is centered. The code to do this will be exactly the same as it was in the smugmug style except everything will be prefaced with #smugmug_small instead (and we can leave a bunch of stuff out).[/FONT] [FONT=Verdana]First, starting from the top, we want to get the pageNav and photoNav elements to not sit right on the borders. So just like last time, we’ll use the webdeveloper extension (ctrl-shif-f) to determine the width of the various elements currently. We see that the left is 333px and the right is 413px. So to get the whitespace we set the margin:0 5px; on the elements and reduce their declared width by 10px (5px + 5px = 10px). Like so:[/FONT] [FONT=Verdana]#smugmug_small .pageNav {[/FONT] [FONT=Verdana]width:323px;[/FONT] [FONT=Verdana]padding:0 5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug_small .photoNav {[/FONT] [FONT=Verdana]width:403px;[/FONT] [FONT=Verdana]padding:0 5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]But notice the cartbuttons are still sitting on the border. What gives? I’m not sure to be honest, but it doesn’t matter. All we need to do is to get the element they belong to and give it a 5px right margin and we’ll be okay. The element is found to be div.cartbuttons and we change it with this:[/FONT] [FONT=Verdana]#smugmug_small .cartbuttons {[/FONT] [FONT=Verdana]margin-right:5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]Now to get the whitespace above the thumbs and the big picture we need to add margin-top:5px to the displayPhoto and the #thumbnails just like we did in the smugmug style:[/FONT] [FONT=Verdana]#smugmug_small #displayPhoto {[/FONT] [FONT=Verdana]margin-top:5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug_small #thumbnails {[/FONT] [FONT=Verdana]margin-top:5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]We also need to get the thumbnails off the left border so we’ll play around with the margins until we get it right just like we did in the smugmug style, start with margin:0; then change it to margin:0 1px; then margin:0 2px; and so on until the thumbs go to 2 rows. We end up with this:[/FONT] [FONT=Verdana]#smugmug_small #thumbnails .photo {[/FONT] [FONT=Verdana]margin:0 5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]We see in the smugmug small style that the image is sitting on the right border. Do you see how each of the gallery styles have their own issues that you have to deal with? To fix this issue I first set the padding to 0 and found that everything moved to the right. From there the fix was easy. Set the width to 413px (what we found from above) and set the text alignment to center. The result:[/FONT] [FONT=Verdana]#smugmug_small #displayPhoto {[/FONT] [FONT=Verdana]margin-top:5px;[/FONT] [FONT=Verdana]padding:0;[/FONT] [FONT=Verdana]width:413px;[/FONT] [FONT=Verdana]text-align:center;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]And I’m satified with the look of the smugmug small style. The end result is this:[/FONT] [FONT=Verdana]/* smugmug small styles */[/FONT] [FONT=Verdana]#smugmug_small .pageNav {[/FONT] [FONT=Verdana]width:323px;[/FONT] [FONT=Verdana]padding:0 5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug_small .photoNav {[/FONT] [FONT=Verdana]width:403px;[/FONT] [FONT=Verdana]padding:0 5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug_small .cartbuttons {[/FONT] [FONT=Verdana]margin-right:5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug_small #displayPhoto {[/FONT] [FONT=Verdana]margin-top:5px;[/FONT] [FONT=Verdana]padding:0;[/FONT] [FONT=Verdana]width:413px;[/FONT] [FONT=Verdana]text-align:center;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug_small #thumbnails {[/FONT] [FONT=Verdana]margin-top:5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#smugmug_small #thumbnails .photo {[/FONT] [FONT=Verdana]margin:0 5px[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]Let’s move on to the traditional gallery style. Save the above code into your cobranding and then go back to your gallery and select the traditional style from the drop down box.[/FONT] [FONT=Verdana]The traditional style seems to have an issue with being more narrow than the other styles so we’ll have to set it’s width. Plus this is the first time when you’re logged in that you can see a toolbar that kind of looks out of place so we’ll have to fix that. Also we need to adjust the margins around the thumbnails once again to make sure they are well fitted to the page and not off to one side or the other. And once again we need to set some padding in the albumNav box. So let’s get down to brass tacks on this one shall we?[/FONT] [FONT=Verdana]/* Traditional Styles */[/FONT] [FONT=Verdana]#traditional .albumNav { /* set the 5px padding in the top and bottom dark brown boxes */[/FONT] [FONT=Verdana]width:736px; /* 750px – 2px – 2px – 5px – 5px = 736px */[/FONT] [FONT=Verdana]padding-left:5px; /* we didn’t want to set a padding to the top */[/FONT] [FONT=Verdana]padding-right:5px; /* so we specified the left and right padding values this time */[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#traditional #photoTools {[/FONT] [FONT=Verdana]width:736px; /* same width as above for the same reasons */[/FONT] [FONT=Verdana]padding-left:5px; /* see above */[/FONT] [FONT=Verdana]padding-right:5px;[/FONT] [FONT=Verdana]border:solid #BAB0A6; /* set the border type and color */[/FONT] [FONT=Verdana]border-width:0 2px; /* set the top and bottom border width to 0 and the left and right to 2px */[/FONT] [FONT=Verdana]background:#9F8E7F /* set the background for the toolbar in the traditional style to e the same as the background color of the bottom box */[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#traditional #photos { /* select the container for all the thumbs */[/FONT] [FONT=Verdana]width:746px; /* same width as before except we don’t have padding this time */[/FONT] [FONT=Verdana]padding-top:5px; /* padding on the top to get some whitespace */[/FONT] [FONT=Verdana]border-bottom:0; /* since we have the album nav box at the bottom we don’t need the border at the bottom for this page */[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#traditional #photos .photo {[/FONT] [FONT=Verdana]margin:0 17px; /* we played around with this to make it just right like before */[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]Save that to your CSS on your cobranding page and move on to the all thumbs gallery style. It’s nice that the all thumbs shares so much in common with the traditional style because that means you can copy and paste the traditional stuff under the all thumbs header and rename #traditional to #allthumbs and you’ll almost be all set. Some things to keep in mind are that the all thumbs style has the toolbar in a different place so you will not want to use #allthumbs #photoTools probably. And you will need a different set of margins for the thumbnails than you did in the traditional style.[/FONT] [FONT=Verdana]/* All Thumbs Styles */[/FONT] [FONT=Verdana]#allthumbs .albumNav { /* same as traditional style */[/FONT] [FONT=Verdana]width:736px;[/FONT] [FONT=Verdana]padding-left:5px;[/FONT] [FONT=Verdana]padding-right:5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#allthumbs #photos { /* same as traditional style */[/FONT] [FONT=Verdana]width:746px;[/FONT] [FONT=Verdana]padding-top:5px;[/FONT] [FONT=Verdana]border-bottom:0;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#allthumbs #photos .photo { /* slightly different margin settings than traditional style */[/FONT] [FONT=Verdana]margin:0 11px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]I’m running out of time but I want to get this submitted so you can start work on your galleries. Here is the journal style minus any comments. I will get to the other styles if I can before I go. If not, BWG, Andy, JT, Ben, etc can help you out and I’ll get it done when I get back.[/FONT] [FONT=Verdana]/* Journal Styles */[/FONT] [FONT=Verdana]#journal .albumNav {[/FONT] [FONT=Verdana]width:736px;[/FONT] [FONT=Verdana]padding-left:5px;[/FONT] [FONT=Verdana]padding-right:5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#journal #photoTools {[/FONT] [FONT=Verdana]width:736px;[/FONT] [FONT=Verdana]padding-left:5px;[/FONT] [FONT=Verdana]padding-right:5px;[/FONT] [FONT=Verdana]border:solid #BAB0A6;[/FONT] [FONT=Verdana]border-width:0 2px;[/FONT] [FONT=Verdana]background:#9F8E7F[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#journal .journal_entry {[/FONT] [FONT=Verdana]border:solid #BAB0A6;[/FONT] [FONT=Verdana]border-width:0 2px 2px;[/FONT] [FONT=Verdana]background:#9F8E7F[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#journal .caption,[/FONT] [FONT=Verdana]#journal .caption {[/FONT] [FONT=Verdana]margin:0; [/FONT] [FONT=Verdana]padding:5px;[/FONT] [FONT=Verdana]text-align:justify[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#journal .photo.left,[/FONT] [FONT=Verdana]#journal .photo.right {[/FONT] [FONT=Verdana]margin:5px;[/FONT] [FONT=Verdana]}[/FONT] [FONT=Verdana]#journal #albumNav_bottom {[/FONT] [FONT=Verdana]border-top:0;[/FONT] [FONT=Verdana]}[/FONT]

I just went through the entire guide, and this was a tremendous help for me! I have been messing around with CSS & HTML, but didn't really put 2 and 2 together regarding the behavior. This will help me far beyond Smugmug. Thanks Mike!

This is a great thread. Lots of useful information. Is there a list of the different CSS attributes and/or styles that we can use for the Slide Show type? I am trying to remove the navigation bar for a gallery that I set as a slide show (not the homepage slide show)

Originally Posted by ergonzalez This is a great thread. Lots of useful information. Is there a list of the different CSS attributes and/or styles that we can use for the Slide Show type? I am trying to remove the navigation bar for a gallery that I set as a slide show (not the homepage slide show)

Add this to your CSS

#slideshow .toolsbox {display: none;}


or gallery specific xxxxxxx = gallery number

.gallery_xxxxxxx #slideshow .toolsbox {display: none;}


Might want to use a logged in version.

.notLogedIn #slideshow .toolsbox {display: none;}
.notLogedIn .gallery_xxxxxxx #slideshow .toolsbox {display: none;}

Originally Posted by Allen Add this to your CSS #slideshow .toolsbox {display: none;} or gallery specific xxxxxxx = gallery number .gallery_xxxxxxx #slideshow .toolsbox {display: none;} Might want to use a logged in version. .notLogedIn #slideshow .toolsbox {display: none;} .notLogedIn .gallery_xxxxxxx #slideshow .toolsbox {display: none;}

Thanks! That did it. Is there a way to tweak the speed of the slideshow?