CSS, Cobranding, and You!

[Mike Lane]

Okay, there are a boatload of posts asking how to do various things with the new cobranding and CSS. Things are getting asked (and answered) several times so I thought I'd go ahead and make a sticky thread for all the cobranding issues you may have.

This should serve as a repository for all those fancy tricks you've come up with as well as the basics of changing the colors around. I've seen some of you who really know what you're doing so please help people out that don't quite get css.

Sure, there will be official smugmug cobranding/css documentation coming soon but I doubt that it'll cover all the really fancy tricks that we'll all come up with. So get busy and get creative and let us all know what you're up to.

[Mike Lane]

I'll start out...

I have a navigation bar on my site (that'll be covered later) and my galleries and categories aren't all that complex. That means that having the breadcrumbs at the top of the gallery is redundant. However, I still want the title of the gallery to be displayed. In fact, I want it to be prominantly displayed. So how do I do it?

#breadcrumb {
visibility:hidden;
text-transform:lowercase;
border:1px solid red;
width:70%;
}

The breadcrumb id contains both the things that I want to hide and the thing that I want to make visible. The first thing I had to do was hide the breadcrumb id in such a way as to still make it accessible. My options for hiding something using CSS are by using the display property or the visibility property. If I use display:none; the browser won't even load the breadcrumb layer which means that it isn't accessible. By using visibility:hidden; I have hidden my breadcrumb layer but it is still accessible because the browser still loads it.

I use a lowercase text on most everything on my page so I used the text-transform to make all the text in the breadcrumb lowercase.

The border is a personal thing for me to visualize what the outline of the layer is. This is actually something leftover from when I was working on it. But this can be a bit of a lesson for the CSS n00bs too. I can type border:1px solid red; so quickly you have no idea. Basically if I have any questions about what is what I'll put that in the css and see what gets outlined. It's very handy. However, it is absolutely unnecessary currently.

I used width:70% because I wanted to fit the breadcrumb, the slideshow and map this, and the style switcher all on the same line. Nothing fancy there.


#albumTitle {
visibility:visible;
margin:0 auto;
float:left;
font-size:18pt;
font-weight:normal;
color:white;
padding-bottom:0;
margin-top:-20px;
_margin:0;
_position:relative;
_top:-25px;
}

This is where the real magic happens and where the new Smugmug customization is so awesome. They have given the album title its own ID: #albumTitle (strangely enough). Recall that I made the breadcrumb layer hidden but accessible. That means that I now can access the albumTitle layer that is inside of the breadcrumb layer. All I have to do is declare the visibility of the albumTitle to be visibility:visible; and I now have only the album title showing up and not the rest of the breadcrumbs.

Most of the rest of it is pure formatting of the album title text. So let's jump down to the margin-top:-20px for a second. This is merely done for positioning reasons and nothing more. The problem is that IE will absolutely go nuts when it sees a negative margin. It took me forever to figure out why my page was looking so ridiculous in IE.

Never fear, CSS hacks to the rescue. It turns out that it is completely CSS valid to use an underscore in front of a CSS property. The catch is that Firefox has not properly implemented this specification and IE has. You heard correctly, IE does something right with CSS and Firefox messes it up. But it's a very fortunate thing for us because that means that Firefox will completely ignore anything that has an underscore in front of it. It's called the underscore hack and it's super easy. You can use it with all kinds of things including when IE completely messes up the sizes of your various boxes (IE's got very serious flaws with how it implements the box model), you can use it to do anything including giving IE a completely different style entirely. In this case all I want to do is make it so IE doesn't freak out.

So for IE I had to put in _margin:0; _position:relative; _top:-25px;. That solved the positioning and now we have a cross browser solution. Notice that the position in IE is 5px different than in firefox. Stupid IE.



Check it out! http://www.mikelanephotography.com/gallery/641933 You should see "4th of july, lake union seattle" at the top left of my gallery.

[bigwebguy]

I'll start out...
#albumTitle {
visibility:visible;
margin:0 auto;
float:left;
font-size:18pt;
font-weight:normal;
color:white;
padding-bottom:0;
margin-top:-20px;
_margin:0;
_position:relative;
_top:-25px;
}

why not just use the positioning and not even bother w/the IE hack?

your fireworks photo's are awesome btw.

[Mike Lane]

Okay, I'm on a roll...

Hey firefox users, check out my page http://www.mikelanephotography.com (you stubborn IE people pay attention to this too). Notice on my page that the box that I use for a container appears to be semi-opaque. It seems like it is a middle gray box that has a 75% opacity so you can see the diagonal lines from the background showing through. In fact, if you scroll using the scrollbar you see that the box appears to scroll over the background as if the box were semi-transparent and the background was staying put and showing through the container box.

Want to know a secret? This is not done using transparent pngs in any way shape or form. In fact, the background of that box is 100% opaque and hides the dark background completely.

What the?!?!?!!?

Look down at the bottom, notice my footer is the same way but darker than the background and the cobranding footer and feeds layers are the same but blue translucent. No pngs, none, nada just simple, clean, 100% css and a regular old small non-transparent gif.

How'd I do that?

Well it's easy in fact. Firefox implements the background-attachment property correctly and IE doesn't. Firefox will attach the background with respect to the viewport (the browser window itself) rather than to the specific layer in which that background is contained (like IE does). That means if you tell the background to be at 0, 0: anchored to the top left, or simply repeated throughout and fixed (like mine), it will anchor it to the browser window top left irrespective of the position of the layer in which it is contained. Furthermore, if you specify the background to be fixed (so it doesn't scroll) the background will appear to stay in place in the containing layer as well.

In my page I have 4 backgrounds that I use. They are all 10px x 10px boxes with a diagonal line going from the bottom left to the top right. The only thing that has changed is the color. One is just darker than medium gray (the page background), one is just lighter than middle gray (the container background), one is just darker than the page background (my footer), and one is blue (the cobrand footer and feeds). They are all repeated in x and y (default) and fixed so they don't move with respect to the elements of the page.

Here is the CSS that is required:

body {
background:#606060 url(http://www.mikelanephotography.com/photos/31743485-Ti.gif) fixed;
}

#container {
background:transparent url(http://www.mikelanephotography.com/photos/31909495-Ti.gif) fixed;
_background:#808080;
}

#MyFooter {
background:transparent url(http://www.mikelanephotography.com/photos/31909652-Ti.gif) fixed;
_background:#606060;
}

#footer {
background:transparent url(http://www.mikelanephotography.com/photos/31931940-Ti.gif) fixed;
_background:#36648b;
}

#feeds {
background:transparent url(http://www.mikelanephotography.com/photos/31931940-Ti.gif) fixed;
_background:#36648b;
}

Notice that I used the IE underscore hack here again. That's because IE will place the background at the top left of the containing element rather than the browser window. In other words IE sucks. So in IE, you don't see the cool transparent effect, all you see is a non-transparent background that is the same color as the overall color of the boxes in firefox. IE looks just fine and firefox looks sweet.

For more information (and maybe a better explanation than I've given) and a really cool example go to: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html

[Mike Lane]

why not just use the positioning and not even bother w/the IE hack?

your fireworks photo's are awesome btw.
I'd have to use a hack either way since IE and firefox wouldn't put it in the same place. But I suppose that I could skip the negative margin all together.

Thanks for the comment on the photos.

[Courtenay]

I'm new to posting on this forum, so I apologize if this is the wrong category or I missed the answer in reading the hundreds of pages of threads!

I am experienced with Photoshop and have done HTML and light scripting for several years on sites such as MySpace and Xanga. For whatever reason, I cannot figure out what to do with the Smugmug scripts beyond those basic ones given at smugmug/hacks (i.e. replacing all the green and image border color). I'm also having trouble with their explanations of what-does-what... perhaps the summer heat has drained much of my brain function.

Here's what I want to do:
1) change photo description color from white to "mediumredviolet"
2) move photo description back to top of photo (elegant style)
3) suppress front page titles, i.e. "Courtenay's Home" and "Featured Galleries"
4) change size of font beneath gallery link (i.e. "4 galleries with 155 photos")
5) enter a code to block my site from search engines (especially Google) without having to password protect the whole thing

I think that's it, for now. Any help would be greatly appreciated!!!!

[sberley]

Thanks for the great resource...

I would love to find a guide to what all the page elements are called so I can then start experimenting...for example - I'd love to adjust the spacing between the image and the thumbs, or the image border color/size, and certainly change the bright lime green.

Steve

[Mike Lane]

Thanks for the great resource...

I would love to find a guide to what all the page elements are called so I can then start experimenting...for example - I'd love to adjust the spacing between the image and the thumbs, or the image border color/size, and certainly change the bright lime green.

Steve
To change the space between the image and the thumbs just do this:

#elegant {
width:1000px
}

#elegant .rightColumn{
float:right;
}

(adjust the width of the #elegant tag to be what you want.) This moves the whole right column - including the top navigation parts, the image, the comments, and the misc information at the bottom - over to the right a bit while still maintaining the overall centered page. This only works in the elegant style since I've only called up the elegant id but it can be made to work in the elegant_small style using a similar method.

To change all of the green to something else (red in this example, simply change the hex code after the # for other numbers) use:

.title {
color:#ff0000;
}

The image borders can be changed by using the .imgBorder and .imgBorderOn classes. The following will change the selected image to have a 2 pixel thick solid red border and the unselected images to have a 2 pixel thick dotted lime border:

.imgBorderOn {
border:2px solid #ff0000;
}

.imgBorder {
border:2px dotted #00ff00;
}

Adjust the size, type and color of your borders (including 0 for no border if you want). Keep in mind that there may be some positioning issues associated with borders that are too large.

[Mike Lane]

Back to the drawing board again!

Could someone also tell me how to change the color of the page numbers in the Traditional gallery style? They are dark and hard to see so I want them to be white as well.

I thought that changing them for the Smugmug style would also cause these to change but obviously not.

To change only the traditional style gallery page number links:

#traditional .pageNav a.nav {
color:#ff0000;
}

This changes them to red, replace the hex value as required.

To change the gallery page number links in all galleries:

.pageNav a.nav {
color:#ff0000;
}

Again, this changes them to red adjust as required.

[Mike Lane]

Can I Hide "Gallery Pages" for galleries with 1 page?

There seems to be a lot of neat tricks out there. Is this one?

I want to hide "Gallery Pages" for my galleries that only have one page. And there are actually few enough of them, that I can do special gallery specific CSS stuff. But I was wondering if there was any way to put code in there that would do:

If gallerypages = 1
- - don't display "Gallery Pages"
else
- - leave the defaults

Am I dreaming?

thanks!
Trish
example 1 page gallery -> http://www.trishtunney.com/gallery/384106/
If it's something you feel that you can do on a gallery specific basis then just do this:

.gallery_XXXXXX .pageNav, .gallery_YYYYYY .pageNav, etc... {
visibility:hidden;
}

Where XXXXXX and YYYYYY are the smugmug gallery ids. The etc just means that you can put as many of those in there that you want followed by a comma, don't put the etc... into the code when you do this.

There seems to be an issue right now with the implementation of the gallery specific class. The only thing that gets put in the page is class="gallery_" until you click on a thumbnail. Once a thumbnail is clicked the page refreshes with class="gallery_XXXXXX". So that means for now the above solution will work like you want it to only when someone clicks on a thumbnail.

[sser]

To change only the traditional style gallery page number links:

#traditional .pageNav a.nav {
color:#ff0000;
}


Thanks mike these are helping great. Is there a way to change the gallery page #'s 1 2 3 to be bigger 1 2 3

Shane

[Mike Lane]

To change only the traditional style gallery page number links:

#traditional .pageNav a.nav {
color:#ff0000;
}


Thanks mike these are helping great. Is there a way to change the gallery page #'s 1 2 3 to be bigger 1 2 3

Shane The following will make only the left column gallery page numbers a 20pt font while keeping the "gallery pages" text 10pt. You can of course change the 10pt and 20pt to be whatever you would like.

#albumNav .pageNav {
font-size:20pt;
}

.leftColumn span.title {
font-size:10pt;
}

.leftColumn a.nav {
font-size:20pt;
}

[Matthew Saville]

Here's my collection thus far: (it is of course VERY helpful to view my website along side with reading these CSS things so that you can see what i mean...)


/* MAIN PAGE CSS */

^ This is what I use to label what is what. the /* and the */ are the "ignore this!" boundaries that allow me to write anything I want in between them without harming the CSS. (That includes putting actual CSS inside, if I want to turn it off real quick...)

#userName {display: none;}
#userHome {display: none;}

^ This is used to disable my main page from saying "Matthew Saville's Home" at the very top.

/* CSS that changes bad green greens */
.title {color: #379D49;}
a.title {color: #379D49;}
.imgBorderOn {border: solid 1px #379D49;}

^ This changes misc. texts (and the "hover" image link) from that nasty green to a nicer green.

.imgBorderOn {position: relative;top: 1px;left: 1px;}
.imgBorder {border-color: transparent;
_border-color: white; position: relative;top: 0px;left: 0px;}

^ This makes each thumbnail turn into a neat-o little "button" that appears to "push down" when you hover the mouse over it.


/* #404040 is the color of the default */
.boxTop {background-color: #261E1C;}
.boxBottom {background-color: black}

^ This is used to change the background color of the little top "titlebar" for things like "featured galleries" and "categories", while ALSO changing the rest of the "box" to be black, the same as the rest of my background.

.miniBox { height: 110px; }

^ This squishes the "featured galleries" and "categories" etc. boxes down by 20 pixels. (the default is 130 pixels) ...However you can only see this change while logged OUT.

#feeds {display: none}

^ Hide that un-necessary "ATOM" and "RSS" stuff at the bottom of your site.



/* GALLERY CSS */

body {margin-top:3px; margin-left: 10px; margin-right: 10px;}

^ Paste this in and play with the different values to see what it does; if you use "smugmug" style and have a 1024 wide screen resolution, I HIGHLY reccomend toying with this!

#breadcrumb {.title color: #379D49;}
#breadcrumb .nav {color: white}
.nav {visibility: visible; color: #379D49}

^ I just tweaked a few colors in misc. parts of navigation text; try them yourself to see what each does and if you can find any use for them.


#caption_bottom {text-align: center;}
#displayPhoto {text-align: center;}
#toggleKeywords {display:none;}

^ This is the UPDATED CSS code to center the captions and large photo in "smugmug" style, also I dislike having the keywords displayed under individual photos...


#imageInfo {visibility:collapse;}
#imageCommentSummary {visibility: visible;}
.comment_header, .boxTop {border: solid grey 1px;}

^ This is some very nifty CSS that removes some of the often un-necessary info beneath a photo, such as "original size XXXpx" etc. etc., while NOT removing the comments line...


/* REMOVE HORIZONTAL & VERTICAL DASH LINES IN SM*/
.top_border, .bottom_border {border: 0px;}
.rightColumn {border: 0px;}

^ This does exactly what the /* */ description says, what do ya know!


#altViews {position: relative; right: 60px;}
.cartbuttons {position: relative; right: 60px;}
#comment_nav {position: relative; right: 60px;}
#comment_header {position: relative; left: 0px;}
.pageNav {position: relative; left: 0px;}

^ This block of CSS is used to "scoot in" a few things that are near the edges of the page in smugmug style. #altViews will scoot in the slideshow and map this buttons, .cartbuttons moves in the buy photo stuff, #comment nav will move in that little "page: 1"...



/* INDIVIDUAL CSS */

/* ABOUT ME */
.gallery_283089 .play_slideshow {display: none;}
.gallery_283089 .nav {display: none;}
.gallery_283089 .title {color: black;}

/* GUESTBOOK */
.gallery_371133 .play_slideshow {display: none;}

^ Finally, in a few (many more than are above) "specialty" galleries that I've created that are more like web pages, and I just wanted to get rid of a few things. The specific CSS code used is not reccomended unless you really want to hide BIG parts of your gallery's text. But the main point is that you can use the .gallery_XXXXXX CSS code to indivitually customize a gallery...

The best thing to do is simply cut and paste all sorts of stuff into your stylesheet HTML box and see what it does. I just keep two browser windows/tabs open, one continually on my "customize" page and the other on a gallery. I'll paste some text in from the forums, click "update", and then go click refresh on the gallery and see what happens. If nothing happens or something happens you don't want, just delete the text... Good luck!

[EDIT]
https://addons.mozilla.org/extensions/moreinfo.php?id=60
THIS plugin, if you use mozilla firefox which you definitely should be using if you have a PC and don't like spyware / popups etc. It's mostly useless to me but for help in editing my CSS, I love it. First what you can do is go to "Information > Display ID & Class Details", and that will automatically expose EACH CSS tag, as it appears on your smugmug page.

http://matthewsaville.smugmug.com/photos/34394575-M.jpg
http://matthewsaville.smugmug.com/photos/34394575-O.jpg

ALSO, you can go to "CSS > Edit CSS". When it first comes up, it will say "smugmugBlack.css" above a left-hand text box, and there's absolutely tons of stuff I have no idea about. But if you click on the next one, I think it's "nicetitle.css", you get a much smaller collection of text. I found that by randomly pasting any CSS text into the text box, you can INSTANTLY see the results on your smugmug! In fact, you can help other people work on their CSS by doing the same on their smugmug gallery. You just can't permanently change it; all you're doing is seeing what WOULD happen if you actually put the CSS into your stylesheet box in "customize"

How nifty is that?

-Matt-

(edited according to Mike's advice, thanks Mike!)

[Mike Lane]

#imageInfo .title {display: true;}

#imageInfo .gray {display: none;}

#imageInfo .note {display: none;}

#imagecommentsummary {display: true;}

^ This is my big problem. The above CSS is all that's left of my efforts to try and hide the line of text that (in elegant) says "original size: xxxxxPX xxxx PX current: xxxxxPX xxxxxPX" It seems I cannot remove this line without removing other lines that I DO want, such as the "comments: 0 - add commments" line...
First off "true" is not a possible value of the display property so display:true; isn't doing anything for you.

The following will hide all of the image information except for the number of comments part as well as the keywords (I was just playing around to see what I could do). Additionally, the keywords will be moved up to be directly below the comments line. If you don't want keywords take the #keywords out of the second declaration and remove the third one completely.

#imageInfo {
visibility:collapse;
}

#imageCommentSummary, #keywords {
visibility:visible;
}

#keywords {
position:relative;
top:-3.5em;
}

[Matthew Saville]

If I were female, I'd say "I love you Mike!" I mean, "visibility: collapse;" ...I'd have never figured that out...

-Matt-

[Mike Lane]

If I were female, I'd say "I love you Mike!"...

-Matt-
So I guess it worked:thumb

[Mike Lane]

I'm new to posting on this forum, so I apologize if this is the wrong category or I missed the answer in reading the hundreds of pages of threads!

I am experienced with Photoshop and have done HTML and light scripting for several years on sites such as MySpace and Xanga. For whatever reason, I cannot figure out what to do with the Smugmug scripts beyond those basic ones given at smugmug/hacks (i.e. replacing all the green and image border color). I'm also having trouble with their explanations of what-does-what... perhaps the summer heat has drained much of my brain function.

Here's what I want to do:
1) change photo description color from white to "mediumredviolet"
2) move photo description back to top of photo (elegant style)
3) suppress front page titles, i.e. "Courtenay's Home" and "Featured Galleries"
4) change size of font beneath gallery link (i.e. "4 galleries with 155 photos")
5) enter a code to block my site from search engines (especially Google) without having to password protect the whole thing

I think that's it, for now. Any help would be greatly appreciated!!!!
Moved to the appropriate room.:D

[Mike Lane]

Here's what I want to do:
1) change photo description color from white to "mediumredviolet" I think you meant mediumvioletred...

#caption_bottom {
color:mediumvioletred;
}

2) UPDATED: for a caption on the top and not the bottom put the following in your stylesheet html:

#caption_bottom {
display:none;
}

#caption_top {
display:block;
}

[quote=Courtenay]3) suppress front page titles, i.e. "Courtenay's Home" and "Featured Galleries" UPDATE: This has also changed. To remove "Courtenay's Home" (and "map this") from the main page, put

.homepage #breadcrumb {
display:none;
}

in your stylesheet html. To remove the "Featured Galleries" label put

.homepage #featuredBox .boxTop {
display:none;
}

in your stylesheet html.

4) change size of font beneath gallery link (i.e. "4 galleries with 155 photos") UPDATED: This will change the size of the font to be huge in both the gallery description and updated boxes on the home page.

.homepage #categoriesBox .miniBox p.description{
display:none;
}

.homepage #categoriesBox .miniBox p.updated {
display:none;
}

5) enter a code to block my site from search engines (especially Google) without having to password protect the whole thing I can't help you there. Anyone else know if this is possible?

[peestandingup]

Thanks for all the info! Is there a way to force Smugmug Style in every gallery? When I try to force it in the Customize Gallery tab, it for some reason forces Smugmug Small. And can I center the <Prev & Next> buttons so they are on the top center of my pics. Thanks.

Also, im dying to know how you make a custom navigation bar! :D

[bigwebguy]

Thanks for all the info! Is there a way to force Smugmug Style in every gallery? When I try to force it in the Customize Gallery tab, it for some reason forces Smugmug Small. And can I center the <Prev & Next> buttons so they are on the top center of my pics. Thanks.

Also, im dying to know how you make a custom navigation bar! :D I was able to force smugmug style for my galleries....i'm guessing that there is a check to see your browser window size and that determines whether you get smugmug or smugmug_small. smugmug_small isn't even an option on the customize gallery screen.

this will center the prev & next buttons in the space available, but it won't truly be centered over your picture because of the cartbuttons:

#albumNav .photoNav {
text-align: center;
}


if you'd rather have centered prev & next buttons than cart buttons then this will remove the cartbuttons and combined with the previous style code, center your prev & next over your image:

#albumNav .cartbuttons {
display: none;
}


if you'd like to center the gallery page numbers over the thumbnails then add this as well:

#albumNav .pageNav {
text-align: center;
}


and when you say custom navigation bar, do you mean something like this (http://bigwebguy.smugmug.com/gallery/626191)?

[peestandingup]

I was able to force smugmug style for my galleries....i'm guessing that there is a check to see your browser window size and that determines whether you get smugmug or smugmug_small. smugmug_small isn't even an option on the customize gallery screen.

this will center the prev & next buttons in the space available, but it won't truly be centered over your picture because of the cartbuttons:

#albumNav .photoNav {
text-align: center;
}


if you'd rather have centered prev & next buttons than cart buttons then this will remove the cartbuttons and combined with the previous style code, center your prev & next over your image:

#albumNav .cartbuttons {
display: none;
}


if you'd like to center the gallery page numbers over the thumbnails then add this as well:

#albumNav .pageNav {
text-align: center;
}


and when you say custom navigation bar, do you mean something like this (http://bigwebguy.smugmug.com/gallery/626191)?

Hey, the above codes didnt do much. The nav buttons just got moved a tiny bit. Am I doing something wrong?

And when I say custom navigation bar, I mean like this (http://picturesink.smugmug.com/) and this (http://williams.smugmug.com/) The Home, Contact, etc buttons. How is that done?

[bigwebguy]

Ok, so we all know that by default when you mouseover an image in your galleries, the border color changes. We also know that most people have already figured out to change the green to something they like better....but why stop there?

Why not have a thin white border turn into a 3px dashed hot pink border?

I'm sure some of you have tried but what ends up happening is that either a) you blow the margins on your page and end up stacking your thumbnails or b) you get this jumping effect when your borders change width. I will explain how to get around both of those.

first, we will address the stacking issue:

on the smugmug and smugmug_small templates, the thumbnails have a right-margin defined so that they have a nice amount of space between them.

The margin is 13px on smugmug and 9px on smugmug_small.

When you add wide borders to your thumbnails, the width of the thumbnails + borders + margins will exceed the container width and your thumbnails will get stacked. We can correct that by subtracting the width of our new border.

If we are going to add a 3px border then we need to account for both the left and right side. So take 6px and subtract that from either the 13px or 9px template margins to get your new margin size (7px or 3px respectively). Code looks like this (note: smugmug templates are refered to as #elegant in the page):

#elegant #thumbnails .photo {
margin-right: 7px;
}

#elegant_small #thumbnails .photo {
margin-right: 3px;
}


well that's great, but what about the jumping when i switch border widths?

this is much a much easier problem to solve: just add a margin thats the difference between your border widths. Say you want a 1px solid white border that turns into a 3px outset blue border, 3px - 1px = 2px margin.

.imgBorder {
border: 1px solid #ffffff;
margin: 2px;
}

.imgBorderOn {
border: 3px outset #0000ff;
}


that's it. no more jumping.

[bigwebguy]

Hey, the above codes didnt do much. The nav buttons just got moved a tiny bit. Am I doing something wrong?

And when I say custom navigation bar, I mean like this (http://picturesink.smugmug.com/) and this (http://williams.smugmug.com/) The Home, Contact, etc buttons. How is that done?
nah, you're not doing anything wrong. depending on the number of pages in your gallery, font-sizes and the template you're using there just may not be that much room to center those buttons.

post the link to your page and what template you're using and i'll check it out.

For those custom navigation bars, they replaced the header section in the co-branding section with the html to create those menus. Anything in that section will replace the smugmug header. A simple table layout would get you the basic navigation that williams.smugmug.com has. With the picturesink one it looks like they probably entered something in the body section as well to build the tables that lay out their site. They also use a javascript dynamic menu system for their drop down menus.

[Mike Lane]

I'd like to password protect some galleries with two mods:


1. I'd like the featured photo to show instead of the 'lock'.
2. I'd like to add some text to the password prompt, perhaps instructing the viewer on how to request a password.

Can I do that now? Let's try to stick to CSS tips and tricks in this forum please. I have moved this part of the conversation to its own thread in the smugmug support forum.

[Courtenay]

OMG, I love you, Mike! (and Lee, too) Thank you for all the help... now it's time for some serious playing around with my site! Yay! I've compiled all this data (ok, 95% of it) into a FAQ file if anyone wants a copy.

-Courtenay
:lynnma

[lidaf]

Mike, your header links aren't functioning for me. i tried different browsers, on both a mac and a pc, and still they don't work. just wanted to let you know...

~Lida

[bigwebguy]

Mike, your header links aren't functioning for me. i tried different browsers, on both a mac and a pc, and still they don't work. just wanted to let you know...

~Lida
i noticed that yesterday too, thought you were working on something.

[Mike Lane]

Mike, your header links aren't functioning for me. i tried different browsers, on both a mac and a pc, and still they don't work. just wanted to let you know...

~Lida
If you mean that they don't take you anywhere when you click them I know about that. I haven't finished yet, I'm such a slacker.

If you mean that they don't change when you hover or click, that's news to me. That part of them works for me.

Thanks for the heads up though!

[lidaf]

If you mean that they don't take you anywhere when you click them I know about that. I haven't finished yet, I'm such a slacker.

If you mean that they don't change when you hover or click, that's news to me. That part of them works for me.
yeah, i meant that the links don't take me anywhere. maybe you should change your dgrin name to "smugmug slacker" instead of "smugmug styler" ;oD ... but seriously, keep up the good work with the hacks. i've done all of the customization on the nomad website solely from dgrin posts and threads like this. thanks.

~Lida

[Tony Bonanno]

OMG, I love you, Mike! (and Lee, too) Thank you for all the help... now it's time for some serious playing around with my site! Yay! I've compiled all this data (ok, 95% of it) into a FAQ file if anyone wants a copy.

-Courtenay
:lynnma Can you email me a copy ? tony@bonannophoto.com ?

Thanks !

[peestandingup]

nah, you're not doing anything wrong. depending on the number of pages in your gallery, font-sizes and the template you're using there just may not be that much room to center those buttons.

post the link to your page and what template you're using and i'll check it out.

For those custom navigation bars, they replaced the header section in the co-branding section with the html to create those menus. Anything in that section will replace the smugmug header. A simple table layout would get you the basic navigation that williams.smugmug.com has. With the picturesink one it looks like they probably entered something in the body section as well to build the tables that lay out their site. They also use a javascript dynamic menu system for their drop down menus.
Oh, OK. Here is my site: http://kerrybailey.smugmug.com/

I have already learned a bunch just by watching this thread. Im gonna make a custom banner tonite & I would like to have a custom navigation bar like Mike (http://www.mikelanephotography.com) or Andy's (http://williams.smugmug.com/) It would be awesome if I could set up a sorta menu system within the tabs/nav bar. Thanks you guys for all the info!

Also, Mike. How do you get that wonderful color effect where you write your captions?? It looks great!

[Mike Lane]

Oh, OK. Here is my site: http://kerrybailey.smugmug.com/

I have already learned a bunch just by watching this thread. Im gonna make a custom banner tonite & I would like to have a custom navigation bar like Mike (http://www.mikelanephotography.com) or Andy's (http://williams.smugmug.com/) It would be awesome if I could set up a sorta menu system within the tabs/nav bar. Thanks you guys for all the info!

Also, Mike. How do you get that wonderful color effect where you write your captions?? It looks great!
I have a feeling Andy's nav bar will change eventually (he's on my free cobranding list). I'd stay away from tables, they're teh sux0r0x!11!!!11!1.

I'm planning on putting a navbar tutorial up here tonight (if I can get to it). It's super easy and way rad.

[bigwebguy]

Oh, OK. Here is my site: http://kerrybailey.smugmug.com/

I have already learned a bunch just by watching this thread. Im gonna make a custom banner tonite & I would like to have a custom navigation bar like Mike (http://www.mikelanephotography.com) or Andy's (http://williams.smugmug.com/) It would be awesome if I could set up a sorta menu system within the tabs/nav bar. Thanks you guys for all the info!

Also, Mike. How do you get that wonderful color effect where you write your captions?? It looks great! the gallery pages are centered over your thumbnails, as much as they can be with the font size you chose.

for the <prev & next> buttons for the images, you need to set .cartbuttons {display: none;} instead of .cartbuttons {visibility: hidden;} to get them to center up over the big photo.

I know mike touched on this in another post, but visibility:hidden just tells the browser to not show the content, but it still allocates the space for it whereas display:none tells the browser to not even bother making room for it, it's as if it never existed.

[peestandingup]

I have a feeling Andy's nav bar will change eventually (he's on my free cobranding list). I'd stay away from tables, they're teh sux0r0x!11!!!11!1.

I'm planning on putting a navbar tutorial up here tonight (if I can get to it). It's super easy and way rad.
Cool, I cant wait! Thanks so much!

the gallery pages are centered over your thumbnails, as much as they can be with the font size you chose.

for the <prev & next> buttons for the images, you need to set .cartbuttons {display: none;} instead of .cartbuttons {visibility: hidden;} to get them to center up over the big photo.

I know mike touched on this in another post, but visibility:hidden just tells the browser to not show the content, but it still allocates the space for it whereas display:none tells the browser to not even bother making room for it, it's as if it never existed.
OK, I will try that. Thanks.

EDIT: Hey, it worked! Thanks again!!

[Mike Lane]

Also, Mike. How do you get that wonderful color effect where you write your captions?? It looks great!
Are you viewing in firefox or IE? In firefox you should see what appears to be a semi-opaque blue box (i.e. you can see the diagonal lines in it). In IE you should only see a blue box. The way to do this is covered here (http://www.dgrin.com/showpost.php?p=153051&postcount=4) just applied to the #caption in your css.

[Barb]

I have a feeling Andy's nav bar will change eventually (he's on my free cobranding list). I'd stay away from tables, they're teh sux0r0x!11!!!11!1.
I second that! Tables really mess things up and never look the same in different browsers. Go the nav bar route ... I did and it's so easy to change, etc. Looking forward to seeing your tutorial Mike. Might find some other neat little tricks!

[peestandingup]

Are you viewing in firefox or IE? In firefox you should see what appears to be a semi-opaque blue box (i.e. you can see the diagonal lines in it). In IE you should only see a blue box. The way to do this is covered here (http://www.dgrin.com/showpost.php?p=153051&postcount=4) just applied to the #caption in your css.
Mike, im using Camino which is a Mac only browser, but its made by Mozilla (same people who make Firefox) and I am indeed seeing the opaque box. I will check out the link you posted. Thanks.

[Mike Lane]

Mike, im using Camino which is a Mac only browser, but its made by Mozilla (same people who make Firefox) and I am indeed seeing the opaque box. I will check out the link you posted. Thanks.
Good to know:D

[Courtenay]

Alright, I don't know where I got this coding -- <LINK REL="SHORTCUT ICON" HREF="LINK TO PICTURE"> -- but it is intended to replace that tiny Smugmug icon on the address bar with a custom icon.

I created a custom icon, loaded it onto my site, and entered the code in heading cobranding as instructed. The icon shows up with Firefox (it's the little dog on a pink background), but it does not show up on IE. Does IE have a block on these things? Or does it require a different code?

Thanks! --Courtenay

[peestandingup]

Alright, I don't know where I got this coding -- <LINK REL="SHORTCUT ICON" HREF="LINK TO PICTURE"> -- but it is intended to replace that tiny Smugmug icon on the address bar with a custom icon.

I created a custom icon, loaded it onto my site, and entered the code in heading cobranding as instructed. The icon shows up with Firefox (it's the little dog on a pink background), but it does not show up on IE. Does IE have a block on these things? Or does it require a different code?

Thanks! --Courtenay
Hey Courtenay. I also have a custom icon & I tried it with IE on a Mac and it didnt work. To my knowledge, IE doesnt support these on any sites, even the Windows version.

I think its pretty much the overall consensus of everyone here that IE really sucks. This isnt the only thing they dont support as far as custom sites goes, so my advice is just not to worry about IE if you really wanna make a custom site. Cheers...Kerry

[Mike Lane]

Alright, I don't know where I got this coding -- <LINK REL="SHORTCUT ICON" HREF="LINK TO PICTURE"> -- but it is intended to replace that tiny Smugmug icon on the address bar with a custom icon.

I created a custom icon, loaded it onto my site, and entered the code in heading cobranding as instructed. The icon shows up with Firefox (it's the little dog on a pink background), but it does not show up on IE. Does IE have a block on these things? Or does it require a different code?

Thanks! --Courtenay
IE is sketchy. The only thing that I've seen to do is once the page is loaded in In IE, as with just about everything else, the implementation of the faviconIE to grab where the favicon should be and move it ever so slightly to the right a couple of times. It should show up if you do it right.

I just looked at your site. It appears that you have a jpg as your shortcut icon. With IE I'm pretty sure the image has to have the extension .ico to work. note that this doesn't mean that you can simply rename whatever.jpg to whatever.ico and make it work. You have to actually convert the image to be an ico file. Fortunately there is tool on the internets that'll do that for you. Go to http://www.chami.com/html-kit/services/favicon/ and input your image and it'll spit out a file called favicon.ico.

The next trick will be to host the little sucker. There is one website that I found (http://www.favicon.com/#1-21) that'll host your favicon file (and only your favicon file all 50 bytes of it) for $10 a year. What a crappy deal that is. Smugmug won't host it, imageshack won't host it. If you have a free web page with your ISP you may want to use that to host the favicon. So the last part is the trick but you can make it work.

[peestandingup]

Does anyone know how to make my custom header clickable? I want it to point to my SM homepage when someone mouses over it. Here is the code im using now:

<div align="center">
<img src="http://MYIMAGE.gif" width="766" height="74">
</div>

[Mike Lane]

Does anyone know how to make my custom header clickable? I want it to point to my SM homepage when someone mouses over it. Here is the code im using now:

<div align="center">
<img src="http://MYIMAGE.gif" width="766" height="74">
</div>
<div align="center"><a href="http://MYURL.html"><img src="http://MYIMAGE.gif" width="766" height="74" /></a>
</div>

[DavidTO]

I just want to personally thank Mike Lane for reigning in the over-abundance of CSS posts by creating this sticky. I was getting pretty tired of wading through the mounds of CSS questions in order to get to the questions that really matter.

Like which is better, Cherry Ripes or Tam Tams?

[Mike Lane]

I just want to personally thank Mike Lane for reigning in the over-abundance of CSS posts by creating this sticky. I was getting pretty tired of wading through the mounds of CSS questions in order to get to the questions that really matter.

Like which is better, Cherry Ripes or Tam Tams?
Consolidation is good for the sanity. :D

[peestandingup]

<div align="center"><a href="http://MYURL.html"><img src="http://MYIMAGE.gif" width="766" height="74" /></a>
</div>
Thanks Mike. You rock! :super

[peestandingup]

Hmm, I just noticed in Firefox my custom header now has a white border around it. Any ideas???

[Mike Lane]

It's time for what you've been waiting for: instructions on how to do a basic nav bar. This is the CSS thread and I freaking hate tables so I'm going to show you the way that all the cool kids do it (or at least lots of the cool kids). This will only be a tutorial for a basic, text-only horizontal nav bar with some rollover effects. I will in the future teach you how to get a nav bar like you see on my page.

The basis of any good nav bar is.... the unordered list. You're going to chuckle when you see how crazy easy it is to do this.

The first thing you need to do is to decide what you want in your list. This list has the advantage of being ridiculously easy to modify so don't fret it too much. Let's just assume you want a nav bar that says home, about, pricing, links, and contact. First things first, let's get the basic list into the co-brand settings header html box. It's as simple as:

<ul>
<li>home</li>
<li>about</li>
<li>pricing</li>
<li>links</li>
<li>contact</li>
</ul>

That's the basis of our nav bar, but we're just getting started. We know that we're going to have to use css on our navbar so we need a way for the css to access it. Since this is going to be the only navbar on the whole page, we'll an id instead of a class. So the above becomes:

<ul id="navlist">
<li>home</li>
<li>about</li>
<li>pricing</li>
<li>links</li>
<li>contact</li>
</ul>

Now, we're going to need a way to make this whole bar sit where we want it when we're finished with it so let's go ahead and wrap it in a container all its own and let's give that container an id of its own:

<div id="navcontainer">
<ul id="navlist">
<li>home</li>
<li>about</li>
<li>pricing</li>
<li>links</li>
<li>contact</li>
</ul>
</div>

Okay, with that, we're ready for some CSS-ification. The first thing I like to do is to make sure there are no bullets in front of my items and that the items sit horizontally. That's done by putting the following in your co-branding settings, stylesheet HTML box:

#navlist li {
display: inline;
list-style-type: none;
}

Now, we want to make sure that the links aren't too crowded so we'll give them some padding:

#navlist a {
padding:3px 10px;
}

Let's give the overall navlist some positioning and lets prevent lines from wrapping if they exceed the element's content width:

#navlist ul {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

We're almost done:D We of course want to make this a rollover nav bar and here's how we do it:

#navlist a:link, #navlist a:visited {
color: #fff;
background-color: #036;
text-decoration: none;
}

This sets the text color to white and the background color to a dark blue and makes it so the text is not underlined when the mouse is not hovering over the box.

#navlist a:hover {
color: #fff;
background-color: #369;
text-decoration: none;
}

When the mouse is hovering over the box this sets the text color to white, changes the background color to a lighter shade of blue, and keeps the underline off the text.

So that's it, a rollover navbar contained in a navcontainer layer so you can use the navcontainer id to do some positioning. For example to center it on the page just use:

#navcontainer ul{
display:inline;
}

#navcontainer {
text-align:center;
}

Here is what we created, 5 blue buttons that highlight when you hover over them that are centered on the page.

For the header box:

<div id="navcontainer">
<ul id="navlist">
<li>home</li>
<li>about</li>
<li>pricing</li>
<li>links</li>
<li>contact</li>
</ul>
</div>

For the stylesheet HTML box:

#navlist ul {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li {
display: inline;
list-style-type: none;
}

#navlist a {
padding:3px 10px;
}

#navlist a:link, #navlist a:visited {
color: #fff;
background-color: #036;
text-decoration: none;
}

#navlist a:hover {
color: #fff;
background-color: #369;
text-decoration: none;
}

#navcontainer ul {
display:inline;
}

#navcontainer {
text-align:center;
}

You will very likely have to play around with the various margins and such to get it to be positioned properly. You may have to use the underscore hack to get IE to behave.

If you want to add anything to the list simply put it in an <li></li>. Conversely, you can remove things from the list by deleting the same <li>...</li> block.

This list was stolen shamelessly from Listamatic (http://css.maxdesign.com.au/listamatic/horizontal02.htm). They don't have much of a tutorial so I broke it down for you. There is plenty more information and tons more examples on the listamatic page.

[Mike Lane]

Hmm, I just noticed in Firefox my custom header now has a white border around it. Any ideas???
<div align="center"><a href="http://MYSITE.html"><img src="http://MYPIC.gif" border="0"></a></div>

This is deprecated html just so you know. Using CSS to do all of this is considered proper currently. But it'll work :D

[peestandingup]

Thanks for the help, Mike. It worked great! Now, im off to try the custom nav bar instructions you posted!!

[peestandingup]

I cant seem to space my list out. They are all sitting right beside each other. Ive tried messing with all the numbers and still got nothing. :dunno

Also, do you know how to add my links to them? Do you just use normal url linking code like this?

[url=LINKS[/url]

[Mike Lane]

I cant seem to space my list out. They are all sitting right beside each other. Ive tried messing with all the numbers and still got nothing. :dunno

Also, do you know how to add my links to them? Do you just use normal url linking code like this?

Linkypoo (http://LINKS) Um no, that isn't how you link to things on the web. That looks like you're trying to use bbcode which is how you link in dgrin but not on a regular web page. Here's a good resource for basic html: http://www.w3schools.com/html/. I'd start there and when you've gone through all of it, I'll give you some more resources if you want to learn how to do things on your own.

(alternatively I am for hire :wink)

Okay I just looked at your site. The reason the words won't move or style is because they aren't links. The problem with IE is that it doesn't recognize the :hover or :active tag on anything besides an a element. Anyhow, this navbar is set up so you have to have links. So, for example, just make the code look like this (only the pertinent part is shown):

<li><a href="http://mysite.smugmug.com/">Home</a></li>

If you want the effects to show up but you don't know where you want the links to go just yet simply do this:

<li><a href="#">Pricing</a></li>

That'll allow you to have a link that doesn't go anywhere so you can still see the navbar effects. Once you get everything as links, you'll notice that the navbar looks much different. Give it a try!

[peestandingup]

Um no, that isn't how you link to things on the web. That looks like you're trying to use bbcode which is how you link in dgrin but not on a regular web page. Here's a good resource for basic html: http://www.w3schools.com/html/. I'd start there and when you've gone through all of it, I'll give you some more resources if you want to learn how to do things on your own.

(alternatively I am for hire :wink)

Okay I just looked at your site. The reason the words won't move or style is because they aren't links. The problem with IE is that it doesn't recognize the :hover or :active tag on anything besides an a element. Anyhow, this navbar is set up so you have to have links. So, for example, just make the code look like this (only the pertinent part is shown):

<li><a href="http://mysite.smugmug.com/">Home</a></li>

If you want the effects to show up but you don't know where you want the links to go just yet simply do this:

<li><a href="#">Pricing</a></li>

That'll allow you to have a link that doesn't go anywhere so you can still see the navbar effects. Once you get everything as links, you'll notice that the navbar looks much different. Give it a try!
Cool, I got it now. Thanks. Im sorry to be asking all these questions. Im just really new at cobranding and when I try something new, I wanna learn all about it. I do know quite a bit about technical stuff, I just dont know coding yet. I dont wanna get to crazy with it, just make a nice looking page for all to see. :D

I just have one more question. How can I space out the words on my nav bar so they are all not so close together? Kinda like Andy has his. http://williams.smugmug.com/

BTW, I really do appreciate all your help in this. I try to help people the same way you do with the stuff I know about, so thanks very much!

[bigwebguy]

I just have one more question. How can I space out the words on my nav bar so they are all not so close together? Kinda like Andy has his. http://williams.smugmug.com/ both of these will space out your links, with different effects.

if you want your mouseover effect to be wider, use
#navlist a {
padding:3px 50px;
}
if you want your mouseover effect to be the same size:
#navlist li {
display: inline;
list-style-type: none;
padding: 0px 40px;
}

[peestandingup]

both of these will space out your links, with different effects.

if you want your mouseover effect to be wider, use
#navlist a {
padding:3px 50px;
}
if you want your mouseover effect to be the same size:
#navlist li {
display: inline;
list-style-type: none;
padding: 0px 40px;
}
Yeah, I had that first code already there. For some reason, it didnt really do much. Maybe it was the font size im using? Regardless, that second one did the trick! Thanks.

I really hope you guys keep this thread going. I have almost completed my entire customization just by reading this one thread. Thank you all very much!!! Cheers.

[Matthew Saville]

Um, I hate to break up the party but maybe it'd be good to like, delete un-necessary posts and / or assimilate posts like mine where I listed all my CSS into the main one. Because not having a million CSS question threads is good, but having to read four pages of one thread to find the CSS someone might want could also get equally tedious.

But quick!!! What's the hex code for the blue link text of things like the keywords at the bottom of the main page? It's something very close to 41B8D4 but not exactly, alas for the perfectionist... And can't I find out what it is by taking a screenshot and pasting it into photoshop and then using some sort of dropper tool? Or does Photoshop not deal with hex codes?

Thanks!
-Matt-

[Mike Lane]

Um, I hate to break up the party but maybe it'd be good to like, delete un-necessary posts and / or assimilate posts like mine where I listed all my CSS into the main one. Because not having a million CSS question threads is good, but having to read four pages of one thread to find the CSS someone might want could also get equally tedious.

But quick!!! What's the hex code for the blue link text of things like the keywords at the bottom of the main page? It's something very close to 41B8D4 but not exactly, alas for the perfectionist... And can't I find out what it is by taking a screenshot and pasting it into photoshop and then using some sort of dropper tool? Or does Photoshop not deal with hex codes?

Thanks!
-Matt-
That'll get done (I've already done some).

The blue link text of the keywords at the bottom of the main page? How about a URL, I'm not sure what you mean.

[Mike Lane]

That'll get done (I've already done some).

The blue link text of the keywords at the bottom of the main page? How about a URL, I'm not sure what you mean.
If you mean the color of the links on the default keyword page that is #41b8d4.

I do so love my Colorzilla (http://www.iosart.com/firefox/colorzilla/)!

[ksk]

and when you say custom navigation bar, do you mean something like this (http://bigwebguy.smugmug.com/gallery/626191)?
I would be interested to know how you did that, if it's not too much trouble.

[sberley]

Hi -

Is is possible to change the thumbnail layout in elegant - from 3x5 to, say, 2x4?

Also, is there (will there be) a place where I can look to see all the customizable elements so I don't have to continue asking you?

Thanks,

Steve

[Mike Lane]

Hi -

Is is possible to change the thumbnail layout in elegant - from 3x5 to, say, 2x4?

Also, is there (will there be) a place where I can look to see all the customizable elements so I don't have to continue asking you?

Thanks,

Steve
You won't be able to change the numbe of thumbnails there are in the elegant style, but you most certainly can change them from 3x5 to 2x7.5 or 4x3.75. It takes some adjusting of the widths of various things. I'm guessing it isn't what you want so I won't go into it.

This is going to be the place to find all that information for now. I started it so people could ask all the questions they wanted. Ultimately we'll have a very decent resource here. But there is css documentation on the way from the smugmug folks. I'll refer to it in here once it's out.

[sberley]

You won't be able to change the numbe of thumbnails there are in the elegant style, but you most certainly can change them from 3x5 to 2x7.5 or 4x3.75. It takes some adjusting of the widths of various things. I'm guessing it isn't what you want so I won't go into it.yes - it's the number of thumbs that I'd like to change rather than their sizes...

bummah!

thanks!

[jweatherson]

I have to give a personal Thank you to Mike Lane, for all the acurate and detailed advice you've posted on CSS. I know that I and my site surfers are very happy with the customizing I was able to pull off with a little direction from your posts.
Thanks again for the great work :thumb

[Matthew Saville]

If you mean the color of the links on the default keyword page that is #41b8d4.

I do so love my Colorzilla (http://www.iosart.com/firefox/colorzilla/)!Oooooh!! Firefox, how do I love thee? Let me count the ways...

And Thanks Mike for the tip! I think YOU need like, a "tip jar" on your site, seriously you'd at least pay for your smugmug and a few prints, easily...

-Matt-

[bigwebguy]

I would be interested to know how you did that, if it's not too much trouble. i will be more than happy but since they are changing the classes and id's for the navbar shortly, all my code will change.

I promise to post something after the updates get rolled out.

if you're interested in the meantime, you can check out my stylesheet at: http://home.comcast.net/~shepherd24/sm_madeline.css (http://home.comcast.net/%7Eshepherd24/sm_madeline.css)

[ksk]

Thanks a lot!

[peestandingup]

Can someone please look at the bottom of my page. Im trying to line up all 3 items in my footer so they are right beside each other, but spaced out equal with grey part right above it. I want the tip jar first, then the search box and then the firefox icon all on the same line. Thanks.

[peestandingup]

Please???

[ksk]

Hey bigwebguy, I noticed that in your site the background for your main page and galleries are different. It looks great, but I was wondering how you did this? Thanks in advance and again for the help last time.

[Mike Lane]

Please??? So here is what you have in your code currently:


<div align="center">
<a href="http://www.mozilla.org/products/firefox/">
<img src="http://img.photobucket.com/albums/v334/peestandingup/ff2.png" border="0">
</a>
</div>

<div align="center">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="http://img.photobucket.com/albums/v334/peestandingup/tipnew.png" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----">
</form>
</div>

<div align="center">
<form method="get" action="/search/index.mg">
<input type="text" name="searchWords" />
<input type="hidden" name="searchType" value="InUser" />
<input type="hidden" name="NickName" value="kerrybailey" />
<input type="submit" value="Search My Galleries" />
</form>
</div>

This is not an area where CSS positioning shines particularly. It's much easier to do this other ways, but I'm a massochist. I was going to tell you what steps you should take without giving you the answer in the hopes of teaching you to fish as it were but this is a bit complicated so I'm just going to feed you today. If you (or anyone else wants an explanation of what I did, just let me know and I'll provide it.

Replace the above html code in your footer box with:

<div class="container">
<div class="firefox">
<a href="http://www.mozilla.org/products/firefox/">
<img src="http://img.photobucket.com/albums/v334/peestandingup/ff2.png" border="0">
</a>
</div>

<div class="tips">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="http://img.photobucket.com/albums/v334/peestandingup/tipnew.png" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----">
</form>
</div>

<div class="search">
<form method="get" action="/search/index.mg">
<input type="text" name="searchWords" />
<input type="hidden" name="searchType" value="InUser" />
<input type="hidden" name="NickName" value="kerrybailey" />
<input type="submit" value="Search My Galleries" />
</form>
</div>

<div class="clear">

</div>

and put the following into your stylesheet html box:

.container {
margin:0 auto;
padding:0px;
padding-left:10px;
width:470px;
_width:536px;
}

.firefox {
float:left;
padding:0 10px 0 0;
}

.tips {
float:left;
padding:22px 10px 0 0;
}

.search {
float:left;
padding:23px 10px 0 0;
}

.clear {
clear:both;
}

This not only centers the elements, it also vertically aligns them with each other. You can change the padding to however you see fit if you don't like the verticle alignment.

[peestandingup]

Mike, thanks so much for the info, but I have run into a few problems. Nomatter what settings I use, the images look very different in every browser I tried. Also, the settings messed up the "powered by smugmug>logout>2005 smugmug inc." display at the main bottom of the page.

For now, im gonna revert back to the previous settings. Do you know anything else I can try?

[bigwebguy]

Hey bigwebguy, I noticed that in your site the background for your main page and galleries are different. It looks great, but I was wondering how you did this? Thanks in advance and again for the help last time. In my cobranding section, i have this css declaration:

body {
font-family: tahoma;
background-color:rgb(183,188,195);
background-image:url(http://bigwebguy.smugmug.com/photos/28840477-M.gif);
background-repeat: repeat-x;
background-attachment: scroll;
}that sets the background color as that greyish color and sets the background image. The background image is a white to grey gradient that is attached to the top and repeated horizontally. If you want to see what the background image looks like, paste the url from the code above into your browser.



now, in the stylesheet I use in my "pink" galleries, i have this declaration:

body {
background-color: #EFCEDB;
background-image: url(http://bigwebguy.smugmug.com/photos/28888981-S.gif);
}that overrides the background color and background image defined in the co-branding section. it's the "cascading" of "cascading style sheets (css)"


note: for the pink galleries, the stylesheet is refered to using the @import declaration in the gallery description. Check this thread (http://dgrin.com/showthread.php?p=150173#post150173) for more info.

hope that helps. let me know if you have any more questions.

[Mike Lane]

Mike, thanks so much for the info, but I have run into a few problems. Nomatter what settings I use, the images look very different in every browser I tried. Also, the settings messed up the "powered by smugmug>logout>2005 smugmug inc." display at the main bottom of the page.

For now, im gonna revert back to the previous settings. Do you know anything else I can try?
Let me know if you reimplement it and I'll try to see what's going on. I checked it in firefox and ie when I built it and it was working fine.

[mrqcho]

I'm trying to edit my customize my gallery, to match my blog, and to kinda get started into all this.
check it out and give me sugestions if you have any! :thumb
http://mrqcho.smugmug.com

My question is regarding the spacer.gif at the bottom of the page.
Right now, as you can see, I made a box that looks like a picture frame with css around each image, which I really like.

My problem right now is, the spacer.gif(transparent image that comes with smugmug pages) at the bottom of the page is taking this frame as well and it doesn't have any div or class or id around it, so I can't hide it.

Is there any way to hide this?
I noticed a line just below the table that contains the spacer as well.

<div class="spacer"></div>

My guess would be that those tags would have to enclose the spacer, but they missed it or something.

Thanks in advance!

P.S. I'm working on my front page first, I haven't really looked into anything on the gallery pages, so it kinda looks like crap right now.

[Mike Lane]

I'm trying to edit my customize my gallery, to match my blog, and to kinda get started into all this.
check it out and give me sugestions if you have any! :thumb
http://mrqcho.smugmug.com

My question is regarding the spacer.gif at the bottom of the page.
Right now, as you can see, I made a box that looks like a picture frame with css around each image, which I really like.

My problem right now is, the spacer.gif(transparent image that comes with smugmug pages) at the bottom of the page is taking this frame as well and it doesn't have any div or class or id around it, so I can't hide it.

Is there any way to hide this?
I noticed a line just below the table that contains the spacer as well.

<div class="spacer"></div>

My guess would be that those tags would have to enclose the spacer, but they missed it or something.

Thanks in advance!

P.S. I'm working on my front page first, I haven't really looked into anything on the gallery pages, so it kinda looks like crap right now. Great job! Your solution lies in the fact that those images are all hyperlinked images. Simply change:

img{
padding: 6px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 2px solid #c0c0c0;
border-right: 2px solid #c0c0c0;
}

to

a img{
padding: 6px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 2px solid #c0c0c0;
border-right: 2px solid #c0c0c0;
}

Notice all I did was add the "a" before the img. Note that this will very likely change when the cobranding updates to the home page are out.

EDIT: Thread merged...

[Mike Lane]

Would you like it if in the smugmug or smugmug small styles your photo was on the left and your thumbs were on the right? No problem! Just put this in your stylesheet html section:

.leftColumn {
float:right;
}

.rightColumn {
float:left;
}

That's all there is to it.

[quagmire321]

Would you like it if in the smugmug or smugmug small styles your photo was on the left and your thumbs were on the right? No problem! Just put this in your stylesheet html section:

.leftColumn {
float:right;
}

.rightColumn {
float:left;
}

That's all there is to it.
Mike,

Darn!!! I just found this out 10minutes ago all by myself... and you have already posted it here. ARGHH!!!! :cry

Hahaha... I need some help with this, I am trying to remove the album description on the Single Image display mode. Any ideas?

An example is here (http://www.light-mttrs.com/gallery/765106/1/33804363/Large)

I'd like to remove the blah... blah... after the gallery name. Not the image caption itself, that, I'd like to keep.

Suggestions?

Thank you in advance.

[Mike Lane]

Mike,

Darn!!! I just found this out 10minutes ago all by myself... and you have already posted it here. ARGHH!!!! :cry

Hahaha... I need some help with this, I am trying to remove the album description on the Single Image display mode. Any ideas?

An example is here (http://www.light-mttrs.com/gallery/765106/1/33804363/Large)

I'd like to remove the blah... blah... after the gallery name. Not the image caption itself, that, I'd like to keep.

Suggestions?

Thank you in advance.
I suggest you put:

#singleImage #albumDescription {
display:none;
}

in your stylesheet html :D

[OvertheHill]

I have a page with all the galleries as private, and on my homepage I get the following message

It's entirely possible this person has galleries, but they may be Private.

Is there any way to hide this? Thanks

[Mike Lane]

I have a page with all the galleries as private, and on my homepage I get the following message

It's entirely possible this person has galleries, but they may be Private (http://personalpaparazzi.smugmug.com/help/private-albums).

Is there any way to hide this? ThanksThe information contained in this post is now outdated. If there are further questions about this inquiry, please ask again.

[OvertheHill]

Thanks for that quick response - I guess there is a similar way to get rid of the

This is a brand new gallery with no photos.

too? BTW, excellent tutorials

Yes, but keep in mind that this is likely to change with the upcoming updates to the home page. Also keep in mind that if you do have non-private galleries before the update, you will probably want to remove this.

Having said all that, just add:

.headmd {
display:none;
}

into your stylesheet html.

[Mike Lane]

Thanks for that quick response - I guess there is a similar way to get rid of the

This is a brand new gallery with no photos.

too? BTW, excellent tutorials
Please provide a link for a page you'd like for me to look at.

[OvertheHill]

Just starting to put it together so much to do, but link is here - it's the contact page

http://personalpaparazzi.smugmug.com/gallery/775437


Please provide a link for a page you'd like for me to look at.

[quagmire321]

aI suggest you put:

#singleImage #albumDescription {
display:none;
}

in your stylesheet html :D Thank you, Mike. :super (http://misc.php?do=getsmilies&wysiwyg=1&forumid=12#)

[Jim]

How do I change the colors of each item displayed in the attached screenprint. Specifically, I’m concerned with changing the dark text to white so that it is more visible against the background.

The banner is also a link. How do I get rid of the purple border?

Thanks very much!

[bigwebguy]

How do I change the colors of each item displayed in the attached screenprint. Specifically, I’m concerned with changing the dark text to white so that it is more visible against the background.

The banner is also a link. How do I get rid of the purple border?

Thanks very much!



for your banner, add the attribute border="0" in your <img> tag like

<a href="linky"><img src="img" border="0" /></a>

for the dark text, the easiest thing would be to force the display to dark (which makes your text light). you can do this in the customizing section.

[Jim]

Thanks very much! That was very easy and I should have thought of that myself. I've checked out the tutorial since posting and they have expanded it a lot which should make things easier in the future.

[LOVEphotos]

I cant' seem to figure out the new code to CENTER the previous and next buttons that are above the photo :scratch

The below code was working before BUT not today

#photoNav{text-align: center;}

Any help appreciated. THANKS!

[bigwebguy]

I cant' seem to figure out the new code to CENTER the previous and next buttons that are above the photo :scratch

The below code was working before BUT not today

#photoNav{text-align: center;}

Any help appreciated. THANKS!
you can try

.albumNav #photoNav {text-align: center;}

if you post the url to your website, i can check it out myself.

[LOVEphotos]

you can try

.albumNav #photoNav {text-align: center;}

if you post the url to your website, i can check it out myself.

THANKS! I included the (.albumNav) code ... just forgot to put it in my post.

I even tried...
#albumNav .photoNav {text-align: center;}

I emailed u the link ... Thanks again for your help :)

[bigwebguy]

THANKS! I included the (.albumNav) code ... just forgot to put it in my post.

I even tried...
#albumNav .photoNav {text-align: center;}

I emailed u the link ... Thanks again for your help :)
i'm a dummy

should be .albumNav .photoNav {text-align: center;}

[LOVEphotos]

.albumNav .photoNav {text-align: center;}
YES! :clap that works...

and a BIG THANKS to U! :thumb

[OvertheHill]

You are correct - it has changed. I now get
No galleries found

Perhaps you'd like to try searching (http://personalpaparazzi.smugmug.com/search) for one?

It's entirely possible this person has galleries, but they may be Private (http://personalpaparazzi.smugmug.com/help/private-albums).

Can't seem to find a way to get rid of this - any suggestions anyone? TIA

Yes, but keep in mind that this is likely to change with the upcoming updates to the home page. Also keep in mind that if you do have non-private galleries before the update, you will probably want to remove this.

Having said all that, just add:

.headmd {
display:none;
}

into your stylesheet html.

[Oakley]

Thanks to Mike, and his tutorials...I have managed to get the "basic" roll-over navigation bar up on my site. And the counter is up and running too. I even managed to try a new background color....I know...I'm crazy!!! :1drink

So while I plug away at it....here are some of my next hurdles...



Get my navigation bar backgrounds to line up with my header pic.

what do I change, the background settings, or the header pic?

Get my links in my navigation bar to extend the width of my header pic - but with space between them.
Change the fonts of my navigation links.
In Firefox....the site is looking how it's supposed to....but in IE I've got underlines all over the place and "contacts" is constantly highlighted in my navigation bar. As most people use IE, I'd like to find a fix? Is this an easy fix???
This is so much fun building this site.

:D

Thanks for your help!

[Mike Lane]

As I predicted, I went away for less than 24 hours and the new updates came out. I fully expect many questions on how to go about updating the pages and making them look right. I will get to your questions ASAP (and I'm sure that bigwebguy - who has been an incredibly awesome addition to this room btw) will chime in as well.

[hutch]

I have been unable to fix the color of the 'updated: August...' on the home page. It appears that this is Class=updated.
I have tried:
.updated {color:#000000;}
and other variations that do not appear to do anything? What am I doing wrong?

[{JT}]

p.updated {
color: #000000;
}
When in doubt, search our CSS code for the same class.


I have been unable to fix the color of the 'updated: August...' on the home page. It appears that this is Class=updated.
I have tried:
.updated {color:#000000;}
and other variations that do not appear to do anything? What am I doing wrong?

[Mike Lane]

p.updated {
color: #000000;
}
When in doubt, search our CSS code for the same class. actually that didn't work either (for me on ff 1.0.6 anyhow). This is apparently what it takes:

.boxBottom p.updated {
color: #000000;
}

That'll make the "Updated: ..." black.

[Barb]

Okay, so I've got everything done after the updates, but one thing is making me nuts and I'm stumped. Probably one of the CSS guru's easiest questions of the day tho - lol.

When I am viewing a gallery in smugmug, or smugmug small, I have my caption text beneath the photo centered. When I click on large to view the photo individually, my caption text beneath the photo is left justified.

I have looked at code until I'm seeing double, and cannot seem to figure out the code to center that text. Anyone? This is the last thing I have to do, and can't rest until it's done ... :rofl Obsessed? Moi?

[Barb]

Well, I lied: I actually have one more thing I cannot figure out.

If you look here:

http://digitaldaze.smugmug.com/gallery/681774

In the cart information, when you mouse over "multiple photos" and "view" you can to put the mouse pointer way at the bottom before it will become a link. What do I need to change so that you can just mouse over the words to make a link? Also, I believe the word "cart" should be after "view." ??

EDIT: I MANAGED TO FIX THIS :)

[hutch]

actually that didn't work either (for me on ff 1.0.6 anyhow). This is apparently what it takes:

.boxBottom p.updated {
color: #000000;
}

That'll make the "Updated: ..." black.
Wow. Thanks. I never would have figured this out on my own. I did try something similar to this, but I didn't know that I needed the 'p'. I am really learning that I have almost no idea what I am doing. :dunno :)

Thanks JT and Mike for the help!

[LOVEphotos]

How do u get rid of the box around the word 'galleries' on the homepage:scratch

Also, is there a way to control the layout/display of your galleries on the homepage?..

for instance, instead of having two across ... u can have three across :):

Again, any help would be appreciated.

[ReneesEyes]

I am extremely confused by all of this. All of a sudden, this morning, I went to my site www.reneesumner.smugmug.com (http://www.reneesumner.smugmug.com) and all of the words are huge and ugly! And the part surrounding the galleries is gray instead of black. I've noticed a few minor things as well. I have all of the gallery descriptions set at <h3> and </h3> to keep them the size I want, but now it is overriding that. I have been reading all these posts and trying to figure out what to do but I am stumped, and very unhappy with the look of my home page especially.

HELP!!!Please...:dunno

Mike, I would love to try your tutorial as soon as I fix this font issue! Thanks, you are very knowledgable.

Renee

[joachim]

Hello Mike,

thanks for posting this. I've tried but couldn't figure out: how do I actually assign links to the items in the nav bar?

Also, with the new changes on smugmug, why do the colors assignement that i had set for visited links, mouse over, don't work any more?

From all your posts, you're a CSS guru: could you explain to me how to switch of the shopping carts for some galleries, not for all?

thanks!! appreciate your help
joachim

[QUOTE=Mike Lane]It's time for what you've been waiting for: instructions on how to do a basic nav bar. This is the CSS thread and I freaking hate tables so I'm going to show you the way that all the cool kids do it (or at least lots of the cool kids). This will only be a tutorial for a basic, text-only horizontal nav bar with some rollover effects. I will in the future teach you how to get a nav bar like you see on my page.

[peestandingup]

Anyone know how to get the line "this is my: friend/family" back on my hompage? I dont want "Kerry's Home" or anything else, just the friend/family buttons and just on the hompage. Thanks.

[Mike Lane]

How do u get rid of the box around the word 'galleries' on the homepage:scratch

Also, is there a way to control the layout/display of your galleries on the homepage?..

for instance, instead of having two across ... u can have three across :):

Again, any help would be appreciated.
Can you provide a link to the page in question?

[Mike Lane]

I am extremely confused by all of this. All of a sudden, this morning, I went to my site www.reneesumner.smugmug.com (http://www.reneesumner.smugmug.com) and all of the words are huge and ugly! And the part surrounding the galleries is gray instead of black. I've noticed a few minor things as well. I have all of the gallery descriptions set at <h3> and </h3> to keep them the size I want, but now it is overriding that. I have been reading all these posts and trying to figure out what to do but I am stumped, and very unhappy with the look of my home page especially.

HELP!!!Please...:dunno

Mike, I would love to try your tutorial as soon as I fix this font issue! Thanks, you are very knowledgable.

Renee
This is for your gallery only since you have made use of the <h1> and <h2> tags.

Put the following in your stylesheet html box:

h1 {
font-size:12pt;
}

h2 {
font-size:10pt;
}

This will make your fonts considerably smaller and you can change the font size to be whatever you want from there.

[Mike Lane]

Hello Mike,

thanks for posting this. I've tried but couldn't figure out: how do I actually assign links to the items in the nav bar?

Also, with the new changes on smugmug, why do the colors assignement that i had set for visited links, mouse over, don't work any more?

From all your posts, you're a CSS guru: could you explain to me how to switch of the shopping carts for some galleries, not for all?

thanks!! appreciate your help
joachim
Examples of the modifications that you'll need to do are in blue below:

<div id="navcontainer">
<ul id="navlist">
<li><a href="http://www.whatever.com/whatever">home</a></li>
<li><a href="http://www.whatever.com/whatever">about</a></li>
<li><a href="http://www.whatever.com/whatever">pricing</a></li>
<li><a href="http://www.whatever.com/whatever">links</a></li>
<li><a href="http://www.whatever.com/whatever">contact</a></li>
</ul>
</div>

Modify the link URLs as required. Basic HTML help can be found at http://www.w3.org/MarkUp/Guide/

For the last part, can you please provide a link to a page that you want to modify the shopping cart?

[Mike Lane]

Anyone know how to get the line "this is my: friend/family" back on my hompage? I dont want "Kerry's Home" or anything else, just the friend/family buttons and just on the hompage. Thanks.
Go to your control panel and scroll down until you see the friends and family box and then click "show on homepage". Is that what you're asking?

[Mike Lane]

You are correct - it has changed. I now get
No galleries found

Perhaps you'd like to try searching (http://personalpaparazzi.smugmug.com/search) for one?

It's entirely possible this person has galleries, but they may be Private (http://personalpaparazzi.smugmug.com/help/private-albums).

Can't seem to find a way to get rid of this - any suggestions anyone? TIA
#content {display:none;}

Caution, this may have adverse effects when photos and galleries are added.

[Mike Lane]

Okay, so I've got everything done after the updates, but one thing is making me nuts and I'm stumped. Probably one of the CSS guru's easiest questions of the day tho - lol.

When I am viewing a gallery in smugmug, or smugmug small, I have my caption text beneath the photo centered. When I click on large to view the photo individually, my caption text beneath the photo is left justified.

I have looked at code until I'm seeing double, and cannot seem to figure out the code to center that text. Anyone? This is the last thing I have to do, and can't rest until it's done ... :rofl Obsessed? Moi?
Can you provide a link so I can see it for myself?

[Barb]

Can you provide a link so I can see it for myself?

Hi Mike :)

Here's a link:

http://digitaldaze.smugmug.com/gallery/523453/5/32585599/Large

I want the caption centered underneath the photo.

[nwoehnl]

Hello -

this is my first posting on the board and I was wondering if someone can help me with the following question.

I'm really happy with the flexibility that CSS gives to customize the smugmug page layout. One thing I haven't been able to figure out yet - and that seems to have recently changed - is if there is a way to suppress my custom header and footer in a popup window when viewing the large version.

Like if on this page (http://nw.smugmug.com/gallery/535181), I click on the medium-sized photo of the Deli - how can I ensure that only the large photo is displayed in the popup window, and suppress at least my custom header so no scrolling would be necessary to view the large photo?

Thanks a lot, and best regards -
Norbert

[peestandingup]

Go to your control panel and scroll down until you see the friends and family box and then click "show on homepage". Is that what you're asking?
Not really. I just want this back on my hompage so someone can add me as a friend/family. I dont want "Kerry's Home" on there or anything else. Is there a way to do that? Here:
http://img.photobucket.com/albums/v334/peestandingup/friend.jpg

EDIT: Or maybe its already showing up & I just dont know it. I cant remember if you can see your own friends/family add button or not. Can anyone see it on my page thats signed in?

[Andy]

Hello -

this is my first posting on the board and I was wondering if someone can help me with the following question.

I'm really happy with the flexibility that CSS gives to customize the smugmug page layout. One thing I haven't been able to figure out yet - and that seems to have recently changed - is if there is a way to suppress my custom header and footer in a popup window when viewing the large version.

Like if on this page (http://nw.smugmug.com/gallery/535181), I click on the medium-sized photo of the Deli - how can I ensure that only the large photo is displayed in the popup window, and suppress at least my custom header so no scrolling would be necessary to view the large photo?

Thanks a lot, and best regards -
Norbert

:wave welcome to dgrin, norbert - mike lane or jt will be along i'm sure, to help answer this question. standyby, you *will* get a response :D

[joachim]

Thanks Mike - got the links fixed.

Before the recent changes at smugmug, I had the text of the galleries' names on the homepage in a blue color - that has not changed to white, plus, when the mouse goes over those titles get underlined; same for the keywords. On my homepage you'll see what I mean in my new custom nav bar; the color of 'home' is blue that changes when mouse is over. that's what I want for the galleries names and keywords.
my url is www.jlayesphotography.com

thanks again
joachim

For the last part, can you please provide a link to a page that you want to modify the shopping cart?
[/color] [/color][/QUOTE]

[joachim]

Hi Mike

I found a fix to switch on the shopping cart for a particular gallery

first, I switch of the shopping cart in the stylesheet section wtih
.cartbuttons {visibility: hidden;}

then, for a particular gallery, if I want to have the shopping cart on, I do this:

.gallery_###### .cartbuttons {visibility: visible;}

this is first time I ever used CSS, but, all that copy-past activities i've done really start to teach me something.

thanks again
joachim

[Oakley]

Hi Mike

I found a fix to switch on the shopping cart for a particular gallery

first, I switch of the shopping cart in the stylesheet section wtih
.cartbuttons {visibility: hidden;}

then, for a particular gallery, if I want to have the shopping cart on, I do this:

.gallery_###### .cartbuttons {visibility: visible;}

this is first time I ever used CSS, but, all that copy-past activities i've done really start to teach me something.

thanks again
joachim
Obviously, the reverse works as well....if you only have a couple of galleries where you don't want to cart visible....you can just go:

.gallery_###### .cartbuttons {visibility: hidden;}

[Oakley]

I want to be able to know how to make changes myself on my site. I'm getting used to how this CSS works...but if there is something I would like to change:

example - hidding "gallery pages: 1" on a particular gallery...how do I find the class name? Once I know that, I can figure out how to change the attributes of anything I want...without having to ask you guys for the code every single time...

Thanks,

[ReneesEyes]

First off "true" is not a possible value of the display property so display:true; isn't doing anything for you.

The following will hide all of the image information except for the number of comments part as well as the keywords (I was just playing around to see what I could do). Additionally, the keywords will be moved up to be directly below the comments line. If you don't want keywords take the #keywords out of the second declaration and remove the third one completely.

#imageInfo {
visibility:collapse;
}

#imageCommentSummary, #keywords {
visibility:visible;
}

#keywords {
position:relative;
top:-3.5em;
}
Mike, I tried this, and I am still getting everything. Do you have to do this for each gallery? I put your first two codes in, and took out "keywords" on my stylesheet box on the custom page. I want just the caption, comments, and "view other size" to show. What did I do wrong?

I've been reading and playing a lot and am starting to feel a little more comfortable with this stuff, but still have a very long way to go!

Thanks,

Renee
www.reneesumner.smugmug.com (http://www.reneesumner.smugmug.com)

[LOVEphotos]

Can you provide a link to the page in question?

Thanks Mike for tryin' to help ... I emailed u the link :thumb

[OvertheHill]

#content {display:none;}

Caution, this may have adverse effects when photos and galleries are added.
This seemed to be okay and did the trick, although I'll do a bit more in depth testing. The one that caused me problems was
.nophotos { display:none; }
which meant I had no mechanism for adding photos to an empty gallery.

Thanks for the help Mike

[OvertheHill]

This seemed to be okay and did the trick, although I'll do a bit more in depth testing. The one that caused me problems was
.nophotos { display:none; }
which meant I had no mechanism for adding photos to an empty gallery.

Thanks for the help Mike
.gallery_xxxxxx .nophotos { display:none; }

That's the ticket - just do it for those pages where I don't intend pictures. Blimey, might be starting to get the hang of this!!! :rolleyes

[Mike Lane]

Mike, I tried this, and I am still getting everything. Do you have to do this for each gallery? I put your first two codes in, and took out "keywords" on my stylesheet box on the custom page. I want just the caption, comments, and "view other size" to show. What did I do wrong?

I've been reading and playing a lot and am starting to feel a little more comfortable with this stuff, but still have a very long way to go!

Thanks,

Renee
www.reneesumner.smugmug.com (http://www.reneesumner.smugmug.com)
This has like