Advanced Photoshop: Merging Bracketed Exposures
MacGyver: Eyepiece Magnifier for Prosumer DSLR's
Basic Photoshop: Push-Processing
BASIC Photoshop: Channel Mixing B&W
SmugMug Customization Tips
![SmugMug Customization Tips : /*
Since Smugmug offers an incredible ammount of customization, it is sometimes confusing and frustrating to try and "get things the way you want". A number of people seem to DETEST the green color that Smugmug now uses a lot, and so on and so forth. If you're a Power or a Pro account user, you can go into your control panel and click "customize". Along with being able to put a titlebar image and a footer such as a hit counter in, you an also edit the "stylesheet" which is the very bottom box. Plain and simple, I thought I'd help out by posting EXACTLY what I've done to my site, as far as CSS goes. Here's my collection of CSS scripting thus far: (To help you, I've put CSS in yellow. You don't need to worry about it if you're cutting and pasting it into your "stylesheet" box, it's just a simple html code that's invisible now...)
/* 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/extensio...einfo.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-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?
And, as if that wasn't enough, check out "colorzilla", also for firefox:
https://addons.mozilla.org/extensions/moreinfo.php?id=271
This nifty add on creates a little dropper tool in the bottom left corner of your browser, and you can use it to get the hex color of any pixel on any website, among other things I'm sure. Just click the dropper, hover oveer a location on a web page, and you can see the color "values", including the six digit hex color that HTML and CSS code uses, such as #379D49 which is the green I use on my smugmug. And if you don't like writing things down on a piece of paper each time, just right click and select "color picker" and you can cut-and-paste your color values.
Enjoy!
-Matt-
*/](/photos/random.mg?AlbumID=777747&Size=Thumb&AlbumKey=EdNCu&rand=6108 "SmugMug Customization Tips : /*
Since Smugmug offers an incredible ammount of customization, it is sometimes confusing and frustrating to try and \"get things the way you want\". A number of people seem to DETEST the green color that Smugmug now uses a lot, and so on and so forth. If you're a Power or a Pro account user, you can go into your control panel and click \"customize\". Along with being able to put a titlebar image and a footer such as a hit counter in, you an also edit the \"stylesheet\" which is the very bottom box. Plain and simple, I thought I'd help out by posting EXACTLY what I've done to my site, as far as CSS goes. Here's my collection of CSS scripting thus far: (To help you, I've put CSS in yellow. You don't need to worry about it if you're cutting and pasting it into your \"stylesheet\" box, it's just a simple html code that's invisible now...)
/* 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/extensio...einfo.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-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?
And, as if that wasn't enough, check out \"colorzilla\", also for firefox:
https://addons.mozilla.org/extensions/moreinfo.php?id=271
This nifty add on creates a little dropper tool in the bottom left corner of your browser, and you can use it to get the hex color of any pixel on any website, among other things I'm sure. Just click the dropper, hover oveer a location on a web page, and you can see the color \"values\", including the six digit hex color that HTML and CSS code uses, such as #379D49 which is the green I use on my smugmug. And if you don't like writing things down on a piece of paper each time, just right click and select \"color picker\" and you can cut-and-paste your color values.
Enjoy!
-Matt-
*/")
