xavimages' help thread

[tfboy]

Rather than pollute other people's threads, I thought I'd start my own and post all my troubles in here :D

I thought that I had understood the basics of CSS and using Firefox's webdev, was able to figure out which classes and id needed changing.

However, I'm now confused :scratch

I've managed to change the title of the gallery shown in the breadcrumb trail so it's no longer green by using .title {color: #fff;} However, I'd also like to change the "tree" / "previous folders" colour and I can't figure it out. I thought it'd be something like .nav #breadcrumbTrail {color: #aaa;} but it doesn't work.

Also, I'd like to change the borders of the thumbnails so that on mouse over, they're not green but another colour. Again, could someone kindly point out the correct syntax? something like
.imgBorder a:hover {
border-color: #fff;
}
:scratch

Last point, is there someone on the forums / wiki / internet where there is a complete list of pre-defined classes and divisions? The webdev stuff help me figure it out but on occasions, it's addressed by something that's smugmug proprietary, if that makes sense. I do struggle to learn this all, but with your help, I'm hopeful I'll get there :ivar

Thanks in advance.

[jfriend]

This CSS will change the color of all parts of the bread crumb navigation:

#breadCrumbTrail, #breadCrumbTrail a.nav, #breadCrumbTrail .title {color:red;}

This will change the border on the thumbs when the mouse is over them:

.imgBorderOn {border-color:red;}


To get rid of the green in the page numbers you can use this:

.pageNav, .pageNav .title, .pageNav a.nav {color:red;}

Obviously, you can put in whatever color value you want. I just use red so I can tell if it's working properly everywhere.

I am not aware of any full documentation on classes, IDs and DIVs. The best way (even better than documentation) is to install two free add-ins for Firefox: Web Developer and Firebug. I used Firebug to right click on any element in the page and then see exactly where it is in the object hierarchy of the page, what classes and IDs are attached to it and what CSS rules are currently controlling its style. I use Web Developer to simulate CSS changes (live while I type) for changing styles.

[tfboy]

This CSS will change the color of all parts of the bread crumb navigation:

#breadCrumbTrail, #breadCrumbTrail a.nav, #breadCrumbTrail .title {color:red;}

This will change the border on the thumbs when the mouse is over them:

.imgBorderOn {border-color:red;}


To get rid of the green in the page numbers you can use this:

.pageNav, .pageNav .title, .pageNav a.nav {color:red;}

Obviously, you can put in whatever color value you want. I just use red so I can tell if it's working properly everywhere.

I am not aware of any full documentation on classes, IDs and DIVs. The best way (even better than documentation) is to install two free add-ins for Firefox: Web Developer and Firebug. I used Firebug to right click on any element in the page and then see exactly where it is in the object hierarchy of the page, what classes and IDs are attached to it and what CSS rules are currently controlling its style. I use Web Developer to simulate CSS changes (live while I type) for changing styles.Thanks John. I'll look at Firebug. It sounds like Firebug gives you similar stuff to Information -> Display Element Information feature in Webdev...

Anyway, will update my CSS. Chers :thumb

edit: how can I change the border color of the preview of the selected photo (on the right)? I've installed Firebug and see some hover stuff but can't figure it out. The thumbnails are OK now, it's just the bigger picture on the right.

edit2: the code above only seems to edit the mouse-over colour when inside a gallery. But if you go back one step to a gallery / category listing, it's still green on mouse-over. Looking at the attributes, I can't tell the difference between them so can't figure out why it works in a specific gallery but not in a gallery listing...

[jfriend]

Thanks John. I'll look at Firebug. It sounds like Firebug gives you similar stuff to Information -> Display Element Information feature in Webdev...

Anyway, will update my CSS. Chers :thumb

edit: how can I change the border color of the preview of the selected photo (on the right)? I've installed Firebug and see some hover stuff but can't figure it out. The thumbnails are OK now, it's just the bigger picture on the right.

edit2: the code above only seems to edit the mouse-over colour when inside a gallery. But if you go back one step to a gallery / category listing, it's still green on mouse-over. Looking at the attributes, I can't tell the difference between them so can't figure out why it works in a specific gallery but not in a gallery listing... A note for you. If you edit your posting after I've read it, I will never be notified of the edits as the message will show that I've already read it. It was blind luck that I found your edits here while looking for something else I had posted earlier in the day.

Anyway, on to your questions.

Change the previous border-color CSS to this to include the main image and category thumbs:

a:hover .imgBorder, .imgBorderOn {border-color: #39f;}

[tfboy]

Right, another one which I don't think can be fixed without a bit of reworking.

I'd like to have mouseovers on my navbar change the text to bold. That's fine, and it works fine.

Problem is that because my navbar is right-justified, as soon as the mouse hovers over any item in it, the text change to bold effectively pushes the other navbar items further out and it doesn't look too good.

I've looked at my css and html header and guess that this problem can't be fixed whilst I still just have an unordered list with line items.

Maybe a better option would be to define a table in html with fixed sizes and have the text centred in each cell so as long as it doesn't widen beyond the width of the cell, the cell size would stay fixed and adjacent cells would be moved around.

Is that the better / only way of doing it? Or can something smart be done with ul's and li's ? :scratch

TIA :rofl

[jfriend]

Right, another one which I don't think can be fixed without a bit of reworking.

I'd like to have mouseovers on my navbar change the text to bold. That's fine, and it works fine.

Problem is that because my navbar is right-justified, as soon as the mouse hovers over any item in it, the text change to bold effectively pushes the other navbar items further out and it doesn't look too good.

I've looked at my css and html header and guess that this problem can't be fixed whilst I still just have an unordered list with line items.

Maybe a better option would be to define a table in html with fixed sizes and have the text centred in each cell so as long as it doesn't widen beyond the width of the cell, the cell size would stay fixed and adjacent cells would be moved around.

Is that the better / only way of doing it? Or can something smart be done with ul's and li's ? :scratch

TIA :rofl

Your options are to go with hover attributes that don't change the width of the text (like color) or make each navbar be fixed width. I played with the fixed width idea, but it doesn't look good because you have one item that is so much long than all the others that you have to make the fixed width too long and it doesn't look good. If you changed "Image Galleries" to just "Galleries", then a fixed width can work OK.

You can implement fixed width by changing to this (you pick the width you like):

#navcontainer ul li {
width: 110px;
display: inline-block;
}

I personally would go with a stronger color change for hover and not have the text changing size.

[tfboy]

Thanks again for your help, John.

One more question, I can't seem to figure out where / how I can right justify the menu to the width of the slideshow / other pages. Where on earth is it ?!? :D

[jfriend]

Thanks again for your help, John.

One more question, I can't seem to figure out where / how I can right justify the menu to the width of the slideshow / other pages. Where on earth is it ?!? :D

You can't do it without changing the structure of your HTML. You would need to put both the banner image and your navcontainer inside a container div so you can set the width of the container div to the same as the slideshow. Then you right align the navbar inside the container and left align the banner inside that same container. Since the container is hard-wired to the width of the slideshow and centered just like it, everything would line up.

[tfboy]

You can't do it without changing the structure of your HTML. You would need to put both the banner image and your navcontainer inside a container div so you can set the width of the container div to the same as the slideshow. Then you right align the navbar inside the container and left align the banner inside that same container. Since the container is hard-wired to the width of the slideshow and centered just like it, everything would line up.
Thanks. That's what I thought. I'll have a quick play now. Just trying to figure out how to put the logo inside the navcontainer division... :gone

[jfriend]

Thanks. That's what I thought. I'll have a quick play now. Just trying to figure out how to put the logo inside the navcontainer division... :gone Follow this tutorial (http://dgrin.smugmug.com/gallery/1932865) for the banner (the only difference is you won't want the banner centered).

[tfboy]

Follow this tutorial (http://dgrin.smugmug.com/gallery/1932865) for the banner (the only difference is you won't want the banner centered).
Hmm. Problem is that if you don't have the banner centered (which I believe it is by default), then you end up having it on the extreme left (or right).

I thought I'd be able to define a div of a certain width and then have two divisions inside it: one for the logo which is left justified, and another for the text.

I can't believe there isn't a position: center property. Seems to be making my life very hard! :cry

[jfriend]

Hmm. Problem is that if you don't have the banner centered (which I believe it is by default), then you end up having it on the extreme left (or right).

I thought I'd be able to define a div of a certain width and then have two divisions inside it: one for the logo which is left justified, and another for the text.

I can't believe there isn't a position: center property. Seems to be making my life very hard! :cry

OK, answer a few questions for me and I'll show you how to do it. On the homepage, do you want banner on the left edge of the slideshow and navbar on the right edge?

In categories, do you want the same except lined up with the width of the category page?

In galleries, can we make it stretchy so banner is on the left edge of the screen and navbar right edge (both lined up with the appropriate edge of the gallery)?

[tfboy]

OK, answer a few questions for me and I'll show you how to do it. On the homepage, do you want banner on the left edge of the slideshow and navbar on the right edge?

In categories, do you want the same except lined up with the width of the category page?

In galleries, can we make it stretchy so banner is on the left edge of the screen and navbar right edge (both lined up with the appropriate edge of the gallery)?

OK, I'd like the banner to be on the left and the text to be on the right. But, I'd like the distance between extreme left of banner and extreme right of text to be controllable and not have it move to the left of the screen.

At the moment, or rather as I had it, the text would be offset from the right hand border of the web browser. I'd like to force the width of the screen to be a certain amount, if that makes sense.

And I'd like the whole top bit (logo + navbar) to stay fixed size no matter what page. I think it's good to have stretchy galleries so those with widescreen monitors can benefit, but I'd want the top to not be stretchy and remain at the width I define, be it 750px which I think is the smugmug default or around 920px as I have it at the mo.

Please excuse my poor mspaint skills.
http://img8.imageshack.us/img8/6577/smugmuglayoutue8.png

edit: I'd like it to remain fixed for everything. When you say "In galleries, can we make it stretchy so banner is on the left edge of the screen and navbar right edge (both lined up with the appropriate edge of the gallery)?", I don't want it stretch in that sense, but I'd like the thumbnails on left, photo on right to be stretchy if that makes sense.

Basically, I want the position top logo + navbar to remain fixed throughout the entire site, centered on screen with a width I can define and control.

p.s. Thanks again for your persistance. I really appreciate it and it does make this place really welcoming and friendly :)

[jfriend]

OK, answer a few questions for me and I'll show you how to do it. On the homepage, do you want banner on the left edge of the slideshow and navbar on the right edge?

In categories, do you want the same except lined up with the width of the category page?

In galleries, can we make it stretchy so banner is on the left edge of the screen and navbar right edge (both lined up with the appropriate edge of the gallery)?

OK, assuming the answers to all those questions above, here's what you do.

Step 1: Go to site-wide-customization and turn off the Smugmug header. You are going to totally replace it.

Step 2: Replace all your CSS with this:

/********************/
/* SITE SIZE & LOOK */
/********************/
#homepage {
margin: 0 auto;
width: 910px;
}

/****************/
/* NAVBAR STUFF */
/****************/
#navbar ul {
padding: 0;
list-style-type: none;
font-size: 16px;
font-variant: small-caps;
margin: 0;
}

#navbar ul li {
display: inline;
}

#navbar ul li a {
text-decoration: none;
padding: 0px 3px;
}

#navbar ul li a:hover {
color: #f60;
background-color: #000;
font-weight: bold;
}


#navbar {
position: absolute;
bottom: 0px;
right: 0px;
}

#myHeader {margin: 15px auto 5px auto; position:relative;}
.galleryPage #myHeader {margin-left:15px; margin-right:15px;}
.homepage #myHeader {width: 910px; }
.category #myHeader {width: 750px; }

#myBanner {
width: 138px;
height: 40px;
background: transparent url(http://xavimages.smugmug.com/photos/465250008_EajRJ-O.png) no-repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://xavimages.smugmug.com/photos/465250008_EajRJ-O.png') !important;
}


.homepage #breadcrumb {display: none;}
.cartbuttons {display: none;}
.photoSizes {display: none;}
#photoKeywords {display:none;}

/* gallery or category list */
a:hover .imgBorder, .imgBorderOn {
border-color: #f60;
border-width: 2px;
}

/* inside gallery */
.pageNav, .pageNav .title, .pageNav a.nav {color: #f60;}
.title {color: #f60;}
#breadCrumbTrail .title {color: #fff;}
#breadCrumbTrail, #breadCrumbTrail a.nav {color: #666;}
.imgBorderOn {
border-color: #f60;
border-width: 2px;
}

/* lightbox customisations */
#lightBoxNav .title, #cartNav .title, #popUpnav .title {color:#f60}

/* To display sharebutton only when logged in */
.share_button {display: none;}
.loggedIn .share_button {display:block; display:-moz-inline-box; display:inline-block;}




/****************/
/* LANDING PAGE */
/****************/

.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}

.galleries #bioBox {
display: none;
}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}



/****************/
/* BIOBOX STUFF */
/****************/
#bioBox .photo {
display: none;
}

.homepage #userBio {
text-align: center !important;
}


/*****************/
/* HEADER HIDERS */
/*****************/
#searchBox,
#toolbar.nav,
#toolbar a.nav {display: none;}


/*****************/
/* FOOTER HIDERS */
/*****************/
.cartlink_footer {display: none;}
.loginLink {display: none;}


/********************/
/* ABOUT ME GALLERY */
/********************/
.gallery_7275853 #albumDescription {
margin-top: 40px; /* gap from navbar at top */
background: #000; /* background of description box */
padding: 20px 40px 40px 40px; /* top right bottom left */
} /* spacing inside box from edges */

.gallery_7275853 .myPhoto {
float: left; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */

.gallery_7275853 .myTitle {
font-family: Trebuchet MS, Arial;
font-size: 200%;
color: #190;
font-weight: bold;
text-align: center;
margin: 0 auto 30px auto; /* top right bottom left */
}

.gallery_7275853 .myText {

font-size: 120%;
color: #aaa;
font-weight: normal;
text-align: justify;
font-style: italic;
}

.gallery_7275853 .myEmail {color: #444;}
.gallery_7275853 .myEmail:hover {color: red;}

.gallery_7275853 #albumNav_top,
.gallery_7275853 #albumNav_bottom,
.notLoggedIn .gallery_7275853 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_7275853 #breadcrumb {display: none;}


Step 3: Replace your entire custom header with this:

<link rel="SHORTCUT ICON" href="http://homepage.ntlworld.com/xavier.walker/xiicon.ico">
<div id="myHeader">
<div id="myBanner"></div>
<div id="navbar">
<ul>
<li><a href="/">Home</a></li><li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/">About</a></li>
<li><a href="javascript:norobotmail('xavier', 'xavimages.com')">Contact</a></li>
</ul>
</div>
</div>

You should end up with a homepage like this:

http://content.screencast.com/users/jfriend/folders/Jing/media/840fb01e-3670-4144-aede-630eaa8658e8/2009-02-07_1759.png

[jfriend]

OK, I'd like the banner to be on the left and the text to be on the right. But, I'd like the distance between extreme left of banner and extreme right of text to be controllable and not have it move to the left of the screen.

At the moment, or rather as I had it, the text would be offset from the right hand border of the web browser. I'd like to force the width of the screen to be a certain amount, if that makes sense.

And I'd like the whole top bit (logo + navbar) to stay fixed size no matter what page. I think it's good to have stretchy galleries so those with widescreen monitors can benefit, but I'd want the top to not be stretchy and remain at the width I define, be it 750px which I think is the smugmug default or around 920px as I have it at the mo.

Please excuse my poor mspaint skills.
http://img8.imageshack.us/img8/6577/smugmuglayoutue8.png

edit: I'd like it to remain fixed for everything. When you say "In galleries, can we make it stretchy so banner is on the left edge of the screen and navbar right edge (both lined up with the appropriate edge of the gallery)?", I don't want it stretch in that sense, but I'd like the thumbnails on left, photo on right to be stretchy if that makes sense.

Basically, I want the position top logo + navbar to remain fixed throughout the entire site, centered on screen with a width I can define and control.

p.s. Thanks again for your persistance. I really appreciate it and it does make this place really welcoming and friendly :) I had already posted a bunch of code when I saw this. Please implement what I posted and we can decide whether to tweak the width in categories and/or galleries if you want. Those would be one line changes. I think you will find that the header looks bad if it's width doesn't match the galleries. So, anyway implement what I just posted and tell me if you want to change anything and we can tweak it very simply.

[tfboy]

No, it's great John. I think I figured out what I was missing.

Anyway, it's all good now, thanks :clap

Another thought: is it possible to modify the links / text of the breadcrumb?

Because the home page is the slideshow and the galleries page is separate, whenever someone clicks on the xavimages > ... > ... bit, it takes them back to the home / slideshow page. (xavimages.smugmug.com). Is it possible to tweak it so that it takes them back to the gallery / category listing (xavimages.smugmug.com/galleries) ?

[jfriend]

No, it's great John. I think I figured out what I was missing.

Anyway, it's all good now, thanks :clap

Another thought: is it possible to modify the links / text of the breadcrumb?

Because the home page is the slideshow and the galleries page is separate, whenever someone clicks on the xavimages > ... > ... bit, it takes them back to the home / slideshow page. (xavimages.smugmug.com). Is it possible to tweak it so that it takes them back to the gallery / category listing (xavimages.smugmug.com/galleries) ?

Add this to your bottom javascript. It will change the top level of the breadcrumb to say "Galleries" and to take you to your galleries. This is a very popular script:



function AdjustBreadcrumb()
{
var str = this.innerHTML;
str = str.replace(/\n/g, " ");
str = str.replace(/^\s*<a .*?<\/a>/i, '<a href="/galleries" class="nav">Galleries</a>');
this.innerHTML = str;
}

YE.onContentReady("breadCrumbTrail", AdjustBreadcrumb);

[tfboy]

Top man! Cheers :clap

[tfboy]

Hi John et all,

For some reason, my colour change on mouseovers inside my gallery listing and galleries themselves no longer seems to work.

In my CSS, about half way down, there is


/* gallery or category list */
a:hover .imgBorder, .imgBorderOn {
border-color: #f60;
border-width: 2px;
}

/* inside gallery */
.pageNav, .pageNav .title, .pageNav a.nav {color: #f60;}
.title {color: #f60;}
#breadCrumbTrail .title {color: #fff;}
#breadCrumbTrail, #breadCrumbTrail a.nav {color: #666;}
.imgBorderOn {
border-color: #f60;
border-width: 2px;
}

Now the border-width can be changed, and using firefox webdev, I can see it happen live. But for some reason, the border-color no longer works :scratch

[jfriend]

Hi John et all,

For some reason, my colour change on mouseovers inside my gallery listing and galleries themselves no longer seems to work.

In my CSS, about half way down, there is


/* gallery or category list */
a:hover .imgBorder, .imgBorderOn {
border-color: #f60;
border-width: 2px;
}

/* inside gallery */
.pageNav, .pageNav .title, .pageNav a.nav {color: #f60;}
.title {color: #f60;}
#breadCrumbTrail .title {color: #fff;}
#breadCrumbTrail, #breadCrumbTrail a.nav {color: #666;}
.imgBorderOn {
border-color: #f60;
border-width: 2px;
}
Now the border-width can be changed, and using firefox webdev, I can see it happen live. But for some reason, the border-color no longer works :scratch
Did you by any chance turn right-click protection on recently or change your theme?

Any way, you can make it work again by adding the part in green and removing the part in red (which is redundant).

/* gallery or category list */
a:hover .imgBorder, .imgBorderOn {
border-color: #f60 !important;
border-width: 2px;
}

/* inside gallery */
.pageNav, .pageNav .title, .pageNav a.nav {color: #f60;}
.title {color: #f60;}
#breadCrumbTrail .title {color: #fff;}
#breadCrumbTrail, #breadCrumbTrail a.nav {color: #666;}
.imgBorderOn {
border-color: #f60;
border-width: 2px;
}

[tfboy]

Hi John.

I did change my theme, but quickly reverted back to what it was before to see if it corrected it. As it didn't, I thought it wasn't theme related.

Is there a quick explanation to what the !important bit means? Does it override other settings or force a refresh or something?

[tfboy]

Aha. I see how !important works. A quick search reveals all :rolleyes

Ta once again :thumb

[jfriend]

Hi John.

I did change my theme, but quickly reverted back to what it was before to see if it corrected it. As it didn't, I thought it wasn't theme related.

Is there a quick explanation to what the !important bit means? Does it override other settings or force a refresh or something?

There are generally three classes of CSS rules on any Smugmug page that are processed in this order.

The default Smugmug layout CSS
User customization CSS
Theme CSSIf the exact same rule is specified in each of these three locations, then the last one processed wins, thus the theme beats anything else. So, if the exact same rule exists in user CSS and theme CSS, the theme wins. The only way to make it so that the user CSS wins is increase the specificity of your user CSS rule so that it has a higher priority than the theme rule, even though the theme rule comes last. You can raise a rule to a higher specificity by either being more specific about it's declaration (thus .homepage #breadcrumb {color:red;} is more specific than #breadcrumb {color:blue;} because it declares more matching IDs. Or, you can add !important to the rule. These two pages have a pretty good overview of CSS specificity CSS Specificity: Things You Should Know (http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/) and HTML Dog: Specificity (http://htmldog.com/guides/cssadvanced/specificity/). There's actually a formula for calculating the specificity for any given rule. An HTML tag counts as 1, a matching class selector counts as 10 and a matching ID selector counts as 100. !important trumps all of those, but multiple things with !important will play by these same rules. Avoid using !important unless really necessary.

In your specific case, your theme has this rule:

a:hover .imgBorder, .imgBorderOn {
border-color: #f3f3f3;
background-position: center;
}

which is exactly line what you have so the theme wins. You could either raise the specificity (and limit the scope) with something like this:

#photos a:hover .imgBorder, #photos .imgBorderOn {
border-color: #f3f3f3;
background-position: center;
}

or keep the scope the same and just add !important.

[tfboy]

Hmm, doing a few updates now :D

But loading the page up in IE (version 6.0), the navbar format is wrong. I get something that looks like

Home Galleries
About
Contact

whereas in Firefox, the layout is all in a line and is what I want
Home Galleries About Contact

In both cases, the orange mouseover works, but the format? Is this something with IE6.0 that can't understand the CSS properly or is there a tweak that fixes it?

edit: looks ok in moonriverphoto so guess it's something with my code?

TIA :thumb

[tfboy]

bump. :scratch

[tfboy]

OK, I've sorted out the alignment issue by redoing the CSS.

But I can't for the life of me understand why in IE, the "Galleries" link is underlined in dark grey and the mouse over doesn't work. In firefox, it's OK and I can't see why IE would behave differently.

Interestingly, from the Blog page (google blogger with updated template to match the smugmug), it's fine in IE :scratch

Any tips would be appreciated. I'm completely stumped :thumb

[tfboy]

OK, I'm playing around with a new design for the front page. But I can't figure out why it seems to be centered off to the right and not in the middle of the page.

Any ideas?

http://xavimages.smugmug.com/gallery/8796420_jDPqY

Thanks in advance, as always :D

[jfriend]

OK, I'm playing around with a new design for the front page. But I can't figure out why it seems to be centered off to the right and not in the middle of the page.

Any ideas?

http://xavimages.smugmug.com/gallery/8796420_jDPqY

Thanks in advance, as always :D It's not centered because it's significantly wider than the container it's in. You either have to make the content fit in the 750px wide journal div that it's in or you have to make the journal div wide enough to accommodate your content. Your content is 884px wide. The container is 750px - 80px of margins = 670px wide.

[tfboy]

It's not centered because it's significantly wider than the container it's in. You either have to make the content fit in the 750px wide journal div that it's in or you have to make the journal div wide enough to accommodate your content. Your content is 884px wide. The container is 750px - 80px of margins = 670px wide.
Thanks John. I guess that makes sense as I didn't know one could have a journal div container and so I don't have any specifying the width.

I'm pretty sure it will all be academic once I replace my homepage with the content here as the CSS will already be in place for the homepage (bio section).

Another question: on the listing where you can specify to show either categories or galleries, is it possible to have it show sub-categories as well? As I've organised my photos into sub-categories, that would be the best option in my opinion as it offers the best level of detail without having endless lists of galleries the "galleries" view would provide. Sorry, I suppose this has already been asked / answered before, I'm being too lazy. Will search now :)

[Allen]

Thanks John. I guess that makes sense as I didn't know one could have a journal div container and so I don't have any specifying the width.

I'm pretty sure it will all be academic once I replace my homepage with the content here as the CSS will already be in place for the homepage (bio section).

Another question: on the listing where you can specify to show either categories or galleries, is it possible to have it show sub-categories as well? As I've organised my photos into sub-categories, that would be the best option in my opinion as it offers the best level of detail without having endless lists of galleries the "galleries" view would provide. Sorry, I suppose this has already been asked / answered before, I'm being too lazy. Will search now :)
Sorry, it's either all galleries or all cats. Cool idea though, might put in a
feature request for an all sub-cat view. Or you could move everything up a
level by creating a cat for each subcat, lot of work though.

[jfriend]

Another question: on the listing where you can specify to show either categories or galleries, is it possible to have it show sub-categories as well? As I've organised my photos into sub-categories, that would be the best option in my opinion as it offers the best level of detail without having endless lists of galleries the "galleries" view would provide. Sorry, I suppose this has already been asked / answered before, I'm being too lazy. Will search now :)

I don't understand what you want with a sub-category view. If you don't really need three levels (cat/subcat/gallery) and just want it to display two levels, then Smugmug already offers that (category/gallery). You can just change the way you organize your galleries to only use categories and get that level of display now. If the display you would like is what you now have in sub-categories, then change how things are classified so what you have now in a sub-category becomes a category and there are then no sub-categories. If I'm misunderstanding, then please explain further.

[tfboy]

I don't understand what you want with a sub-category view. If you don't really need three levels (cat/subcat/gallery) and just want it to display two levels, then Smugmug already offers that (category/gallery). You can just change the way you organize your galleries to only use categories and get that level of display now. If the display you would like is what you now have in sub-categories, then change how things are classified so what you have now in a sub-category becomes a category and there are then no sub-categories. If I'm misunderstanding, then please explain further.
Hi John. It's to do with my restructuring and branding of the sales side.
Up till now, I had a big shizam flash on the main page, and had already organised my galleries into categories (with no sub-categories).

But now I'm redesigning my home page, the plan is to have three main areas, one for portraits, one for weddings and social stuff and one to cover my travel and wildlife photography. These are to be my main three categories.

For example, for the weddings and social stuff, the plan was to have sub-categories which would be "weddings", "parties", "tango events". Then at a third level down, you'd have a list of weddings, a list of parties, etc. This final list can just be galleries and that's what I want :)

The problem with what smugmug offers today is that there's no "medium detail listing" which is what sub-categories would offer.

I can either have just the categories (3 of them), or all my galleries (about 30 of them and counting), but nothing in between that would be easy to navigate around if it was say half a dozen to a dozen or so.

The idea is to have people find quickly what they want with minimal clicks and not be swamped with information, and I thought that was specifically the design philosophy behind sub-categories. It's just a shame (and a bit of a design flaw IMPO) there's currently no way to list them :(:

[jfriend]

Hi John. It's to do with my restructuring and branding of the sales side.
Up till now, I had a big shizam flash on the main page, and had already organised my galleries into categories (with no sub-categories).

But now I'm redesigning my home page, the plan is to have three main areas, one for portraits, one for weddings and social stuff and one to cover my travel and wildlife photography. These are to be my main three categories.

For example, for the weddings and social stuff, the plan was to have sub-categories which would be "weddings", "parties", "tango events". Then at a third level down, you'd have a list of weddings, a list of parties, etc. This final list can just be galleries and that's what I want :)

The problem with what smugmug offers today is that there's no "medium detail listing" which is what sub-categories would offer.

I can either have just the categories (3 of them), or all my galleries (about 30 of them and counting), but nothing in between that would be easy to navigate around if it was say half a dozen to a dozen or so.

The idea is to have people find quickly what they want with minimal clicks and not be swamped with information, and I thought that was specifically the design philosophy behind sub-categories. It's just a shame (and a bit of a design flaw IMPO) there's currently no way to list them :(: You can have what you want, if you're willing to change your categorization and sub-categorization to reflect what you want shown on the web. For example, you have a "Weddings-Social" category that has three sub-categories in it, two with two galleries each and one with six. Supposed you decided that this is only 10 total galleries total so it would be better if the user went to the Weddings-Social category and just saw all 10 galleries without the intervening clicks (that's what I would think). You can make that happen. Just remove the sub-categories on those ten galleries and your Weddings-Social category will then show all ten galleries. You have the control over how this displays if you choose to use it.

Just because there's an extra level of sub-categorization doesn't mean you should use it if it isn't helping your viewers quickly get to their galleries. This is a common issue on Smugmug. People think they are doing the right thing by specifying category and sub-category, when really they are just making their web-site deeper than it needs to be.

[tfboy]

You can have what you want, if you're willing to change your categorization and sub-categorization to reflect what you want shown on the web. For example, you have a "Weddings-Social" category that has three sub-categories in it, two with two galleries each and one with six. Supposed you decided that this is only 10 total galleries total so it would be better if the user went to the Weddings-Social category and just saw all 10 galleries without the intervening clicks (that's what I would think). You can make that happen. Just remove the sub-categories on those ten galleries and your Weddings-Social category will then show all ten galleries. You have the control over how this displays if you choose to use it.

Just because there's an extra level of sub-categorization doesn't mean you should use it if it isn't helping your viewers quickly get to their galleries. This is a common issue on Smugmug. People think they are doing the right thing by specifying category and sub-category, when really they are just making their web-site deeper than it needs to be.

Hi John. Thanks for your post, I'm already aware of that. The bottom line is (should have said this before I guess!) is that I would prefer to have this level of separation. Purely because some main category will encompass various different styles and I think it would appear tidier if they remain separate. I appreciate it's "one more click", but people who want to look at wedding photos don't necessarily want to see a thumbnail of bowling photos at the same time. Ultimately, it would be nice to have styling possibilities for each sub category - is this possible? For example, have a flowery and white theme to weddings, but a more colourful balloon theme to parties.

If that level of customisation isn't possible, it becomes a little more academic and I suppose I could work around it by having another think of my top level categories.

[jfriend]

Hi John. Thanks for your post, I'm already aware of that. The bottom line is (should have said this before I guess!) is that I would prefer to have this level of separation. Purely because some main category will encompass various different styles and I think it would appear tidier if they remain separate. I appreciate it's "one more click", but people who want to look at wedding photos don't necessarily want to see a thumbnail of bowling photos at the same time. Ultimately, it would be nice to have styling possibilities for each sub category - is this possible? For example, have a flowery and white theme to weddings, but a more colourful balloon theme to parties.

If that level of customisation isn't possible, it becomes a little more academic and I suppose I could work around it by having another think of my top level categories. I still don't think you understand what's possible. You don't have to mix bowling galleries with wedding photos. I described how you could have one simple page of just your 10 wedding galleries because I thought that's what you were asking for. It doesn't require display by galleries - it only requires you rerranging your category/sub-category structure for optimal web display.

Categories and sub-categories have a theme's button right on the page. Click on it and customize that particular page to whatever theme you want.

[tfboy]

I still don't think you understand what's possible. You don't have to mix bowling galleries with wedding photos. I described how you could have one simple page of just your 10 wedding galleries because I thought that's what you were asking for. It doesn't require display by galleries - it only requires you rerranging your category/sub-category structure for optimal web display.

Categories and sub-categories have a theme's button right on the page. Click on it and customize that particular page to whatever theme you want.I have understood what's possible. :)

My concern is that I wanted to limit the categories to just three or four on my home page. I can do what you're suggesting and it would work, although this does involve me redesigning the homepage to have a greater number of sections than I initially wanted.

I'll have a think about it and see if I can come up with something I'm happy about.

Still doesn't detract that a sub-category listing would still be useful, especially for the folk who "don't really understand it" :lol3 <=== tongue in cheek comment :thumb

[tfboy]

OK, redesigned the categories again and now have a new home page I'm quite happy with.

Only thing I can't quite figure out (and admittedly I'm lazy and getting tired) is how I can remove the grey borders around the links.

Until I had made the buttons links, I had no box but with the a href in there, the bordering boxes have appeared and I can't quite figure out the syntax to hide them.

TIA as always :thumb

[tfboy]

Ignore that request, I've found it.

Was a rather obvious
#bioBox a img {border:none;}

:rolleyes :barb

[tfboy]

Carrying on from a question I had in a previous thread (http://www.dgrin.com/showthread.php?t=136525), I think I may have come a cropper :(

I want to have a dedicated header / title and footer for my homepage. So far, all's good, and declaring different IDs and showing / hiding them with CSS using the .homepage class works a treat.

Problem is I'm also using the slideshow on homepage / galleries listing on "/galleries" page mod with java.

And from experience, the galleries page is still classed under .homepage so it shows my homepage IDs and not my category/gallery ID

If I go to a category or gallery, it's fine of course, but if I just want the category listing, it shows the homepage stuff.

Is there a way around this? :dunno

[Allen]

Carrying on from a question I had in a previous thread (http://www.dgrin.com/showthread.php?t=136525) (http://www.dgrin.com/showthread.php?t=136525%29), I think I may have come a cropper :(

I want to have a dedicated header / title and footer for my homepage. So far, all's good, and declaring different IDs and showing / hiding them with CSS using the .homepage class works a treat.

Problem is I'm also using the slideshow on homepage / galleries listing on "/galleries" page mod with java.

And from experience, the galleries page is still classed under .homepage so it shows my homepage IDs and not my category/gallery ID

If I go to a category or gallery, it's fine of course, but if I just want the category listing, it shows the homepage stuff.

Is there a way around this? :dunno
the galleries page has two names

.homepage << applies to both
.galleries << applies to only galleries page

So order is important hiding/showing things.

[tfboy]

the galleries page has two names

.homepage << applies to both
.galleries << applies to only galleries page

So order is important hiding/showing things.
Thanks Allen :thumb:thumb:thumb

All fixed now :ivar

[jfriend]

the galleries page has two names

.homepage << applies to both
.galleries << applies to only galleries page

So order is important hiding/showing things.

This confusion and CSS complexity is a fault of the simple galleries page script that the tutorials specify. There is a better way to do the script. Allen, if you're ever interested in this, I use it in my page so I thought I'd share it here.

This has two main features above and beyond the classic galleries page javascript.

First, it arbitrarily supports any number of homepage versions without changing the script at all. Basically any text after your homepage URL that does not result in a category page, can automatically be a new version of your homepage (find, search, about, featured, etc...).

Second, it knows the difference between your actual home page and the other versions of your homepage so there's a different class assigned if it's just your homepage. This drastically simplifies one's CSS. The "homepage_only" class is assigned if it is only your homepage so you can target CSS just to that regardless of how many other pages you have.

.homepage_only {whatever}
.homepage_find {whatever}
.homepage_featured {whatever}

To use it, this goes in your top javascript:

//************************************************** **************
// MarkSpecialHomepage
//
// If we're on the homepage and there's a single piece of pathname after
// the domain, then add that as a classname to the body so we can
// have automatic versions of the homepage.
//
// Example:
// http://jfriend.smugmug.com/galleries
// Adds "homepage_galleries" class to the body tag
//
// http://jfriend.smugmug.com/find
// Adds "homepage_find" class to the body tag
//
// http://jfriend.smugmug.com/featured
// Adds "homepage_featured" class to the body tag
//
// http://jfriend.smugmug.com
// Adds "homepage_only" class to the body tag
//************************************************** **************
function MarkSpecialHomepage()
{
if (YD.hasClass(document.body, "homepage"))
{
var re = new RegExp(/^\/([a-zA-Z][^\/ ]*)[\/]?$/)
var matches = re.exec(window.location.pathname);
if (matches && (matches.length > 1))
{
YD.addClass(document.body, "homepage_" + matches[1]);
}
else
{
YD.addClass(document.body, "homepage_only");
}
}
}



This goes in your custom header:


<script type="text/javascript">
MarkSpecialHomepage();
</script>


And, you will then have the ability with CSS to use an infinite number of homepage copies all with their own CSS.

[Allen]

...
Very interesting. But not knowing this stuff a little confused. I assume any
time going to the homepage which it does with a bogus url it checks the
bogus part and assigns the new class which CSS rules follow. What happens
when another bogus url like a typing mistake is there? Is it assigned and no
CSS will apply? I don't see a var? list of correct new page classes to check
against. Make sense? Kinda dense here. :D

[jfriend]

Very interesting. But not knowing this stuff a little confused. I assume any
time going to the homepage which it does with a bogus url it checks the
bogus part and assigns the new class which CSS rules follow. What happens
when another bogus url like a typing mistake is there? Is it assigned and no
CSS will apply? I don't see a var? list of correct new page classes to check
against. Make sense? Kinda dense here. :D

My explanation was probably a little overly brief.

If you go to http://jfriend.smugmug.com/abc, then the page will automatically have a class assigned .homepage_abc. Same for any text after the URL that doesn't end up being a category page.

Then, what you would typically do is hide everything by default and then just add CSS to show what you wanted on each page you want. The main advantages are 1) that you don't have to mess with the JS to add new versions of your homepage since it automatically adds a class for anything and 2) it gives you a unique class for the actual homepage (.homepage_only) so you don't have to play the CSS games to determine what shows there. So, rather than showing things for .homepage, then hiding them for .galleries and .find and .featured, you can just hide everything by default and then just show things for .homepage_only and show different things for .homepage_galleries and different things for .homepage_find, etc... The whole CSS just seems cleaner to me.

I haven't thought much about what happens if the user ends up on some URL you didn't plan for.

[Allen]

...
I haven't thought much about what happens if the user ends up on some URL you didn't plan for.
I basically understood it all but if a not planned for url is entered the
homepage automagically comes up and there will be no CSS controlling it as it
is named .homepage. Looks like all CSS rules for .homepage_only will have to
have .homepage also.

But then I don't see what .homepage_only does, why not just .homepage?

[jfriend]

I basically understood it all but if a not planned for url is entered the
homepage automagically comes up and there will be no CSS controlling it as it
is named .homepage. Looks like all CSS rules for .homepage_only will have to
have .homepage also.

But then I don't see what .homepage_only does, why not just .homepage? The problem I was trying to solve is that .homepage doesn't do anything uniquely because it applies to every single version of your homepage. Then, any CSS rule you do for .homepage has to be respecified in the opposite sense for ALL the other versions of the homepage you are using. That's the part of homepage CSS that confuses the heck out of everyone and I find really awkward and confusing to read and maintain. That's why I invented .homepage_only so you could actually target a CSS rule to just your homepage.

I haven't thought much about the random "unplanned" URL.

[Allen]

The problem I was trying to solve is that .homepage doesn't do anything uniquely because it applies to every single version of your homepage. Then, any CSS rule you do for .homepage has to be respecified in the opposite sense for ALL the other versions of the homepage you are using. That's the part of homepage CSS that confuses the heck out of everyone and I find really awkward and confusing to read and maintain. That's why I invented .homepage_only so you could actually target a CSS rule to just your homepage.

I haven't thought much about the random "unplanned" URL.
Can another IF be added so only the new canned names apply and doesn't
assign new ones? ... or something like that :D

[jfriend]

Can another IF be added so only the new canned names apply and doesn't
assign new ones? ... or something like that :D Yes, a little more logic could be added to only add new class names for a pre-defined list of names or, perhaps even better to add .homepage_unexpected when an unexpected name was encountered.

What is the list of pre-defined names:

galleries
find
featured
bio
map

Anything else?