How to customize my page to look like Andydemo?

[sunnyt]

Hello Andy,
http://andydemo.smugmug.com/

I have spent the last two days following various threads. Just don't know enough to follow some of the instructions regarding CSS and Java scripts.
I am using "view source" in the IE right click menu to see the codes. Is this the proper way to do this?

Trying to accomplish the following:
1. Homepage with slide show playing from a Homepage Slideshow Gallery Folder plus a lsiting of Gallery/Category.
2. Have Gallery/Category thumbs that fit within a uniform frame size (just like your demo page) with description enabled (read the hack, just could not get it to work).
3. Learn how to control Gallery's display order? (it is provided for photos within a gallery, but not the gallery themselves?)
4. Learn how to duplicate your demo site where all thumbs within a gallery are fitted within a uniform farame/grid (just like you Gallery grid on your homepage.

Thanks so much in advance.
Sunny:dunno

http://sunnyt.smugmug.com/

[Andy]

Copy and paste this into your CSS, for starters.
:wave I'll be back soon


/*=========================*/
/*==== site defaults ======*/
/*=========================*/
a.title, .title {color:
#c2c2c2;
}

a.nav, .nav {
color: #c2c2c2;
}

a img.imgBorder, .imgBorder {border: solid 2px;}
a:hover img.imgBorder, .imgBorderOn {border: solid 2px;}
#categoryTitle {display:none;}
#userName {display: none;}
#userHome {display: none;}
.possess {display: none;}
.homepage .map_this {display: none;}
.play_slideshow {display: none;}
.map_this {display: none;}
.cartlink_footer { display: none; }
.loginLink {display: none;}


/*==============*/
/*== Lightbox ==*/
/*==============*/

/* fix the Safari pointer problem? */
.nav #lbNav a:link {cursor:pointer;}

#lightBoxNav {
background-color: #000;
margin: 10px 0px;
margin-top: 3px;
padding: 5px;
border-top: 3px solid #c0c1c1;
border-bottom: 3px solid #c0c1c1;
}

#lightBoxBG, #cartBG {
background-color: #000;
opacity: .7;
filter: alpha(opacity=70);
}

#lightBoxNav,
#lightBoxNav a,
#lightBoxNav .nav,
#lightBoxNav a.nav,
#lightBoxNav .foreground {
color: #c0c1c1;
cursor: pointer;
}

#lightBoxNav .title {
color: #c0c1c1;
font-weight: normal;
}

#lightBoxCaption {
background-color: #fff;
border: none;
color: #000;
font-weight: bold;
font-size: 16px;
position: relative;
top: 0px ;
border:2px inset grey;
border-color: #222;

}

#lightBoxImage {
background-position: center !important;
background-repeat: no-repeat !important;
}

#lightBoxImage {
border:8px inset grey;
vertical-align: top; }

/* Thanks to Ivar on Dgrin for the padding hack! */



/* IE hack */
* html #lightBoxPhoto {display:inline-block; width:1px;}


/*============*/
/*== Helpie ==*/
/*============*/

#helper {
color: #fff;
border: 4px double;
border-color: #c2c2c2;
background: transparent url(/img/gradients/small.gif) repeat-x;
}

/*====================*/
/*== User Interface ==*/
/*====================*/

input#stylebar select,
#toolbar select,
#photoTools select,
#stylebar select,
#searchWords,
#searchWordsShort,
#datesBox select,
.datePage select,
#AlbumCaptcha,
#albumCommentName,
#albumCommentLink,
#addImageComment textarea,
#addAlbumComment textarea,
#editKeywords textarea,
#editDescription textarea,
input#newTitle,
#imageCommentRating,
#ImageCaptcha,
#addAlbumComment select {
background-color: #2c2b2b;
/* background: transparent url(/img/gradients/small.gif) repeat-x; */
color: #fff;
}

#ImageCaptcha {
font-weight: bold;
color: #fff !important;
}

#ThemeID {
font-family: Verdana;
font-weight: normal;
background-color: #c2c2c2;
color: #000;
}

#editKeywords {
padding:5px 10px;
background: transparent url(/img/gradients/small.gif) repeat-x;
color: #c2c2c2;
}


/*====================*/
/*=== cart buttons ===*/
/*====================*/
.cart_add {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src='http://www.smugmug.com/photos/63361327-O.png');
width: 25px;
height: 22px;
}

.cart_add[class] {
background-image: url(http://www.smugmug.com/photos/63361327-O.png);
width: 25px;
height: 22px;
}

.cart_bulk {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src='http://www.smugmug.com/photos/63360746-O.png');
width: 25px;
height: 22px;
}

.cart_bulk[class] {
background-image: url(http://www.smugmug.com/photos/63360746-O.png);
width: 25px;
height: 22px;
}


/*===============*/
/*== style bar ==*/
/*===============*/

/* only needed when you have a custom header */
/*
.smugmug #stylebar,
.critique #stylebar {
position: relative;
top: 32px;
right: -105px;
}
.smugmug #breadcrumb {
position: relative;
width: 775px;
}

.Large #stylebar, .Original #stylebar {
position: relative;
top: 32px;
right: -25px;
}
.Large #breadcrumb, .Original #stylebar {
position: relative;
width: 625px;
}

#stylebar {
position: relative;
top: 32px;
right: 0px;
}
#breadcrumb {
position: relative;
width: 570px;
}

#altViews {
margin-top: -2px;
}
*/

/*==============*/
/*===dropcap====*/
/*==============*/
.dropcap
{
float: left;
width: 1.2em;
font-size: 4em;
line-height: 90%;
}


/*==============*/
/*===buttons====*/
/*==============*/

.buttons, .smbuttons {
color: #c2c2c2;
background: transparent url(/img/gradients/small.gif) repeat-x;
}

.play_slideshow {
width: 80px;
height: 15px;
vertical-align: bottom;
background: url(/photos/64763644-O.gif) no-repeat;
margin: 2px 0px 0px 10px;
}
.map_this {
width: 80px;
height: 15px;
vertical-align: bottom;
background: url(/photos/64763595-O.gif) no-repeat;
margin: 2px 0px 0px 10px;
}
.add_photos {
width: 80px;
height: 15px;
vertical-align: bottom;
background: url(/photos/64763613-O.gif) no-repeat;
margin: 2px 0px 0px 10px;
}


/*===============*/
/*==bulk zoom====*/
/*===============*/

#bulkzoom_toolbox {
background-color: #666666;
border: 2px white solid;
font-family: Verdana, Tahoma, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
position: absolute;
left: 25px;
top: 170px;
}

.smugmug #bulkzoom_toolbox {
left: 0px;
top: 0px;
}


/*=================================*/
/*==galleries, categories layout===*/
/*=================================*/

/* Line up the boxes properly */
#galleriesBox .miniBox {
margin:0 20px;
padding:0;
height:260px;
width:142px;}
#galleriesBox .miniBox .nav, #galleriesBox .miniBox .private, #galleriesBox .miniBox p.updated, #galleriesBox .miniBox p.description, #galleriesBox .miniBox p.albumTitle {display:block; text-align:center;}
#galleriesBox .miniBox .photo {
width:142px;
height:auto;
_height:1%;}


/* the above, just for logged-in user */

.loggedIn #galleriesBox .miniBox {
margin:0 20px;
padding:0;
height:340px;
width:142px;}
#galleriesBox .miniBox .nav, #galleriesBox .miniBox .private, #galleriesBox .miniBox p.updated, #galleriesBox .miniBox p.description, #galleriesBox .miniBox p.albumTitle {display:block; text-align:center;}
#galleriesBox .miniBox .photo {
width:142px;
height:auto;
_height:1%;}

.editDescription textarea {
width: 142px;
}

#category #galleriesBox .albumLarge {
width:342px;
height:260px;
margin:20px 11px;
padding:0;}
#category #galleriesBox .albumLarge .photoLarge {
width:342px;
height:auto;
_height:1%;}
#category #galleriesBox .albumLarge .albumTitle {
clear:both;
text-align:center;}

/* the above, just for logged-in user */

.loggedIn #category #galleriesBox .albumLarge {
width:342px;
height:390px;
margin:20px 11px;
padding:0;}
#category #galleriesBox .albumLarge .photoLarge {
width:342px;
height:auto;
_height:1%;}
#category #galleriesBox .albumLarge .albumTitle {
clear:both;
text-align:center;}

#category .editDescription textarea {
width: 322px;
}


#category #galleriesBox .albumLarge .smbuttons {
width: 154px;
margin-left: 94px;
}

#category #galleriesBox .smbuttons {
width: 104px;
margin-left: 19px;
}

.homepage #galleriesBox .smbuttons {
width: 104px;
margin-left: 19px;
}

#homepage #categoriesBox .miniBox {
margin:0;
padding:0;
height:160px;
width:182px;}
#homepage #categoriesBox .miniBox .nav, #homepage #categoriesBox .miniBox .private {display:block; text-align:center;}
#homepage #categoriesBox .miniBox .photo {
width:182px;
height:auto;
_height:1%;}


/*===============*/
/*== feeds ====*/
/*===============*/



/* center the feeds */

.galleryPage .feedLine {
float:none;
display: block;
width: 250px;
margin: 0px auto;
border: none;
}

.homepage .feedLine {
padding-left: 39px;
border: none;
margin: 0px auto;
}

.popularGallery .feedLine {
float:none;
display: block;
width: 250px;
margin: 0px auto;
border: none;
}

.keywordPage .feedLine {
float:none;
display: block;
width: 250px;
margin: 0px auto;
border: none;
}

/* no what are feeds link */
#feedHelp a.nav + a.nav {
display: none;
}

/* move the feeds line up a bit */
#feeds {
top: -20px;
}

#feeds .nav {
color: #c2c2c2;
}

#feeds .note {
color: #c2c2c2;
}

/* main feed button */
.feedStandard
{
width: 16px;
height: 16px;
vertical-align: bottom;

/* select all the normal state buttons */
background:url(http://www.smugmug.com/photos/64067564-O.png)
top no-repeat;
_background:transparent;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src='http://www.smugmug.com/photos/64067564-O.png'); /* make IE able to handle the png transparency */
border:0; /* we don't want a border for this example */
height:16px; /* Set the button height to be the same as the height of one of your buttons */
width:16px; /* Set the button width to be the same as the width of your buttons */
color:#000; /* set a text color that is readable on that button */
padding-bottom:3px;
}

[Andy]

Hello Andy,
http://andydemo.smugmug.com/

I have spent the last two days following various threads. Just don't know enough to follow some of the instructions regarding CSS and Java scripts.
I am using "view source" in the IE right click menu to see the codes. Is this the proper way to do this?
:nono THE BEST way is to get FIREFOX and the FIREFOX WEB DEV tool, links in my signature and a very short easy tute sticky in this forum :deal

Trying to accomplish the following:
1. Homepage with slide show playing from a Homepage Slideshow Gallery Folder plus a lsiting of Gallery/Category.
See BigWebGuy's hack thread, here:
http://www.dgrin.com/showthread.php?t=28348

2. Have Gallery/Category thumbs that fit within a uniform frame size (just like your demo page) with description enabled (read the hack, just could not get it to work).
you'll have that in the CSS from andydemo

3. Learn how to control Gallery's display order? (it is provided for photos within a gallery, but not the gallery themselves?)
Arrange/Sort galleries:
http://www.smugmug.com/help/arrange-albums

4. Learn how to duplicate your demo site where all thumbs within a gallery are fitted within a uniform farame/grid (just like you Gallery grid on your homepage.
Its' in the code in andydemo :D

I hope this helps! Holler if you want more. I actually hope to have what's on andydemo as a theme-variant at some point. OH BTW, you might also like, http://blackarts.smugmug.com that's coming out soon as a theme.

[sunnyt]

Andy, thanks for the prompt response.

[sunnyt]

Andy,

I got the slideshow working! Thanks.
Please take a look at my site now, http://sunnyt.smugmug.com/

Felt like being spoon fed...

The gallery thumbs are not being displayed within a fixed frame, nor are the photo thumbs themselves in a fixed frame, e.g. a fixed display size independent of the photo's native aspect ratio. (as in http://bigwebguy.smugmug.com/)

Can you educate me as to the proper code adjustments?
Thanks

[ivar]

Andy,

I got the slideshow working! Thanks.
Please take a look at my site now, http://sunnyt.smugmug.com/

Felt like being spoon fed...

The gallery thumbs are not being displayed within a fixed frame, nor are the photo thumbs themselves in a fixed frame, e.g. a fixed display size independent of the photo's native aspect ratio. (as in http://bigwebguy.smugmug.com/)

Can you educate me as to the proper code adjustments?
ThanksHi Sunny :wave

Can you give me some examples of what you are after, because i don't really understand what you are trying to say here ( i'm the dumb foreigner, i need subtitles :lol3 ) Are you talking about the square thumbs? Or is it something else?

[bwg]

Hi Sunny :wave

Can you give me some examples of what you are after, because i don't really understand what you are trying to say here ( i'm the dumb foreigner, i need subtitles :lol3 ) Are you talking about the square thumbs? Or is it something else?yeah, that makes 2 of us....more splanation please

[mdruiz]

yeah, that makes 2 of us....more splanation please

Someone shoot me...I really like Andy Demo site...its simple and too the point. I've been trying to follow the instructions. I need to be shot, I cant get it to work.