Looking for Some CSS Assistance on Challenges

[Kahuna Ki'i]

Hey all,



I've been reading and taking copious notes on all of the great CSS information Mike and everyone else has been posting and have put the wealth of newfound knowledge to work in co-branding my site. Now I have a few small glitches that I have not been able to get past and wondered if I could get some help.



My site is http://kahuna-kii.smumug.com

Challenges::dunno



On the About Me page, I have managed to turn the "gallery pages" to not display but I cant get rid of the page number.



On the About Me page, I am trying to figure out how to disable having a user click the picture and get a choice of the sm, med, lg pictures. On this one gallery, its really a static gallery and there is no need for this. Note that I haven’t progressed to making the rest of my page navigation buttons live yet and am thinking I may want to combine the "guest Book" and "About Me" into a single page - I just haven’t made it that far.



On the home page, I used the "shuffle the friends section to the bottom of the page" javascript trick but would actually love to keep the featured galleries up top and just move the friends to the bottom.



Also, all co-branding I have learned from everyone here is working great, but occasionally, I find in-between loggin in and out that the URL takes me to www.smugmug.com with a nickname reference in the URL that seems to bypass my cobranding. Anyone see that before and is there anything I can do to insure that the pages are not visited in this manner?




Any help you all can provide would be great. PLEASE feel free to criticize the web site, suggest improvements, corrections, etc. and suggest any tips or anything else I can do to improve the site. Take a look around and give me a comment or two about the photos as well should you have the time to do so...

Thanks a bunch:D

Andy

[Kahuna Ki'i]

In case I may have posted this in an incorrect location, please let me know. I didnt think you'd want this in the existing CSS Cobranding thread, as it might be too much of a newbie issue:scratch

Any assistance would be appreciated.

Thanks:):

[Andy]

In case I may have posted this in an incorrect location, please let me know. I didnt think you'd want this in the existing CSS Cobranding thread, as it might be too much of a newbie issue:scratch

Any assistance would be appreciated.

Thanks:):

hang in there andy - i'm sure one of the gurus will pick this up.

[{JT}]

On the About Me page, I have managed to turn the "gallery pages" to not display but I cant get rid of the page number.

.gallery_802004 #albumNav_bottom {
display: none;
}

On the About Me page, I am trying to figure out how to disable having a user click the picture and get a choice of the sm, med, lg pictures.

Upload a smaller picture and it might not be linked to the other page. Or you can turn off the image hover and pointer cursor for the image on that page:

.gallery_802004 .imgBorder, .gallery_802004 .imgBorderOn {
border: 0px;
cursor: default;
}

On the home page, I used the "shuffle the friends section to the bottom of the page" javascript trick but would actually love to keep the featured galleries up top and just move the friends to the bottom.

Remember that everthing has an ID and that you can reference it the same way as the example I gave. Try this code:

// look to swap after the page is loaded
onload = swapFF;
// the swap function
function swapFF() {
// look at the body tags classes, if it is the homepage then swap
bodyClass = document.getElementsByTagName("body")[0].className;
if (bodyClass.indexOf("homepage") != -1) {
swap = document.getElementById("ffBox").innerHTML;
document.getElementById("ffBox").innerHTML = document.getElementById("featuredBox").innerHTML;
document.getElementById("featuredBox").innerHTML = document.getElementById("galleriesBox").innerHTML;
document.getElementById("galleriesBox").innerHTML = swap;
}
}




Also, all co-branding I have learned from everyone here is working great, but occasionally, I find in-between loggin in and out that the URL takes me to www.smugmug.com with a nickname reference in the URL that seems to bypass my cobranding. Anyone see that before and is there anything I can do to insure that the pages are not visited in this manner?

Yes, this is a known problem and probably will not be fixed any time soon. Just ignore it as you are the only person that is probably logging in and out on your page.

[Kahuna Ki'i]

hang in there andy - i'm sure one of the gurus will pick this up.
Hey,

From one Andy to another - thanks.

Appreciate your voice of seasoning and reasoning....:rofl

[Kahuna Ki'i]

.gallery_802004 #albumNav_bottom {
display: none;
}



Upload a smaller picture and it might not be linked to the other page. Or you can turn off the image hover and pointer cursor for the image on that page:

.gallery_802004 .imgBorder, .gallery_802004 .imgBorderOn {
border: 0px;
cursor: default;
}



Remember that everthing has an ID and that you can reference it the same way as the example I gave. Try this code:

// look to swap after the page is loaded
onload = swapFF;
// the swap function
function swapFF() {
// look at the body tags classes, if it is the homepage then swap
bodyClass = document.getElementsByTagName("body")[0].className;
if (bodyClass.indexOf("homepage") != -1) {
swap = document.getElementById("ffBox").innerHTML;
document.getElementById("ffBox").innerHTML = document.getElementById("featuredBox").innerHTML;
document.getElementById("featuredBox").innerHTML = document.getElementById("galleriesBox").innerHTML;
document.getElementById("galleriesBox").innerHTML = swap;
}
}






Yes, this is a known problem and probably will not be fixed any time soon. Just ignore it as you are the only person that is probably logging in and out on your page.
JT - thanks a bunch - this looks like it will set me straight:thumb :clap

I really love following all of the great tips and information that you, Mike, Andy and all the rest are willing to share.

Cheers,

[Kahuna Ki'i]

Ok - a couple of more basic questions because I dont seem to quit get it yet.

I turned off some elements on my GUESTBOOK page through the following:

.gallery_807734 .nav {display: none; }

which is what I want to do, however I do need the ability to add comments or "signatures" from guests without returning some other aspects of what dot.NAV knocks out. Can I add back in selectively using perhaps

.gallery_807734 #comment_nav {???: ???; }

would I use display: something or visibility: something? I tried a few and didnt get what I was looking for.

I tried to refer to the class and ID reference Mike made available via http://matthewsaville.smugmug.com/photos/34394575-O.jpg but wasnt able to interpret correctly. Can you use this to explain so I can learn versus having to bug you wizards:D

Trying to learn how to fish versus constantly having to be fed....:wink

Thanks

[{JT}]

I turned off some elements on my GUESTBOOK page through the following:

.gallery_807734 .nav {display: none; }

This is definetly NOT what you should do. Let's start out by determining what you do not want to be seen, then go from there :)

[Kahuna Ki'i]

This is definetly NOT what you should do. Let's start out by determining what you do not want to be seen, then go from there :)
JT - thanks.

Im trying to make it a clean page the way it currently looks (no gallery page numbers, etc.) and when I remove the dot-NAV {display: none} code, I get the divider line ( | ) that shows as well as the gallery pages number above the photo. I just commented out the display:none code so when you look you'll see what i mean.

I suppose youll perhaps be able to show me how to individually not display those items while leaving the ADD COMMENTS visible and enabled, but a bigger question for me pertaining to the process is - can you make something in a class not visible and then selectively show something within the class using a ID or is this faulty logic?

I was trying to get an overall better understanding of the class and ID reference Mike made available via http://matthewsaville.smugmug.com/photos/34394575-O.jpg but wasnt able to decipher whether all items having an ID and belonging within the class NAV could be selectively controlled despite having the class NAV set to display:none. Does my rambling make sense?:dunno

Also, ideally, rather than say ADD COMMENTS, I would love to have the text read something more pertinent like SIGN GUESTBOOK. I would think this is not within the realm of CSS but perhaps can be done through javascript?

Thanks again for your assist.

[Kahuna Ki'i]

Bumping message up - my last post may have been missed

JT - thanks.


Im trying to make it a clean page the way it currently looks (no gallery page numbers, etc.) and when I remove the dot-NAV {display: none} code, I get the divider line ( | ) that shows as well as the gallery pages number above the photo. I just commented out the display:none code so when you look you'll see what i mean.

I suppose youll perhaps be able to show me how to individually not display those items while leaving the ADD COMMENTS visible and enabled, but a bigger question for me pertaining to the process is - can you make something in a class not visible and then selectively show something within the class using a ID or is this faulty logic?

I was trying to get an overall better understanding of the class and ID reference Mike made available via http://matthewsaville.smugmug.com/photos/34394575-O.jpg but wasnt able to decipher whether all items having an ID and belonging within the class NAV could be selectively controlled despite having the class NAV set to display:none. Does my rambling make sense?:dunno

Also, ideally, rather than say ADD COMMENTS, I would love to have the text read something more pertinent like SIGN GUESTBOOK. I would think this is not within the realm of CSS but perhaps can be done through javascript?

Thanks again for your assist.

[Kahuna Ki'i]

Bumping message up - my last post may have been missed
JT, Mike, anyone...

Is there a better place to post this within one of the threads or did I say something wrong? :huh The last response was to ask me specifics of what I was looking to accomplish - perhaps I didnt answer adequately?

Thanks for any assistance.

[flyingdutchie]

JT, Mike, anyone...

Is there a better place to post this within one of the threads or did I say something wrong? :huh The last response was to ask me specifics of what I was looking to accomplish - perhaps I didnt answer adequately?

Thanks for any assistance.
I don't think you said anything wrong :):
But it takes time to figure out individual solutions... Try this, it may help you (if you haven't done so yet); it helped me a lot:

- Get a book on CSS
- Install the latest Firefox browser.
- Download and install the 'Web Developer Extension (http://chrispederick.com/work/firefox/webdeveloper/download/)

The 'Edit CSS' function of the 'Web Developer Extension' let's you try out CSS rules (while you type them, the page changes.. it is really cool), and it provides all kinds of information which items are on the screen (shows IDs, classes, box-sizes, etc).
Then upload your changes and check if your page still looks good in other browsers.

Good luck!
-- Anton.

[Mike Lane]

First off, can you please give a link to the exact gallery and a screen shot of what you're seeing and point out what you want to go away.

Here's the thing about hiding things. Well first off take a look at the "CSS, Cobranding, and You" thread, I discuss this very thing there. If you use display:none, the element in question will not load at all. It will be as if the code for it doesn't even exist. So there is no undoing that and making something else inside of that element visible.

However, if you use visibility:hidden the whole element loads like it typically would except it is hidden. You can selectively unhide various child elements by using visibility:visible on them. Again, I discuss this in the "CSS, Cobranding, and You" thread near the beginning so if you have questions about this look there first.

[Kahuna Ki'i]

First off, can you please give a link to the exact gallery and a screen shot of what you're seeing and point out what you want to go away.

Here's the thing about hiding things. Well first off take a look at the "CSS, Cobranding, and You" thread, I discuss this very thing there. If you use display:none, the element in question will not load at all. It will be as if the code for it doesn't even exist. So there is no undoing that and making something else inside of that element visible.

However, if you use visibility:hidden the whole element loads like it typically would except it is hidden. You can selectively unhide various child elements by using visibility:visible on them. Again, I discuss this in the "CSS, Cobranding, and You" thread near the beginning so if you have questions about this look there first.
Mike - thanks I had mentioned that what I was trying to do is below but the reference was to the GUEST BOOK gallery located at http://kahuna-kii.smugmug.com/gallery/807734

Im trying to make it a clean page the way it currently looks (no gallery page numbers, etc.) and when I remove the dot-NAV {display: none} code, I get the divider line ( | ) that shows as well as the gallery pages number above the photo. I just commented out the display:none code so when you look you'll see what i mean.

Believe me i have been following your CSS Cobranding and You thread as an avid fan and now that you mention it, I actually recall your reference in some of the earlier pages - in retrospect, I can only say DUH - I should have realized the fact the element is not loading prevents later displaying.

FLYINGDUTCHIE had some great ideas and I already picked up the O'Rielly CSS books to learn. His comment about the Web Dev extensions sounds absolutely great except that its for FF - before i do that, Ill look to see if there isnt similar capability in an IE add-on (dont recall if the IE toolbar you told everyone about has the same functionality but Ill find and re-read). This interests me tremendouly because if I can better understand the various parent-child class and ID elements, I think I might better muddle through.

Tell me one other thing - i hesitate to add something like these questions into your ongoing CSS Cobranding and You because I thought it might not rise to the level of training you are providing in that - can I add questions like this in the future (hopefully better researched on my part) into the CSS Cobranding and You thread?

The one other thing I was attemtping was to see if the ADD COMMENT could be substituted with alternative text to read somethign else - I had thought perhaps throough java rather than any CSS.

Anyway - thanks for your assist.:thumb

[Kahuna Ki'i]

I don't think you said anything wrong :):
But it takes time to figure out individual solutions... Try this, it may help you (if you haven't done so yet); it helped me a lot:

- Get a book on CSS
- Install the latest Firefox browser.
- Download and install the 'Web Developer Extension (http://chrispederick.com/work/firefox/webdeveloper/download/)

The 'Edit CSS' function of the 'Web Developer Extension' let's you try out CSS rules (while you type them, the page changes.. it is really cool), and it provides all kinds of information which items are on the screen (shows IDs, classes, box-sizes, etc).
Then upload your changes and check if your page still looks good in other browsers.

Good luck!
-- Anton.
Anton, Thanks for your assist. I was really trying to bump the note back to the top to see if someone could steer me in the right direction and didnt really thing I was being ignored because of something i said...:D

I really like your tip on the extensions, but before I jump on another browser, I guess I need to double-check to see if the toolbar Mike reccomended for IE might hopefully give me similar capability. Im not against FF, i just rather not have another browser if not needed (and im trying to avaoid flames from the dedicated FF users/IE bashers:rofl )

The ORielley books on CSS ought to help me a little. but that extension tip might be the best to get a better understanding of the various element relationships.

Thanks a bunch.

[flyingdutchie]

Anton, Thanks for your assist. I was really trying to bump the note back to the top to see if someone could steer me in the right direction and didnt really thing I was being ignored because of something i said...:D

I really like your tip on the extensions, but before I jump on another browser, I guess I need to double-check to see if the toolbar Mike reccomended for IE might hopefully give me similar capability. Im not against FF, i just rather not have another browser if not needed (and im trying to avaoid flames from the dedicated FF users/IE bashers:rofl )

The ORielley books on CSS ought to help me a little. but that extension tip might be the best to get a better understanding of the various element relationships.

Thanks a bunch.
Unless your computer is low on harddisk space or other resources, install FireFox... it won't hurt you :D
I installed a whole bunch of browsers: Mozilla, various Netscape versions, Firefox, various Opera versions, to see if my galleries look fine on those ones as well. The only ones i can't check are IE5.5 and Safari (IE5.5 i check at work).

For development of my galleries pages, i use mostly FireFox, because i use the Web Developer Extension a lot ('Edit CSS' tool). IE has a similar tool (AIS Web Accessibility Toolbar, 'CSS - Test Styles'), but that one is a little buggy. WDE works a lot better.

Good luck with your CSS-ing.
-- Anton.

[Mike Lane]

Mike - thanks I had mentioned that what I was trying to do is below but the reference was to the GUEST BOOK gallery located at http://kahuna-kii.smugmug.com/gallery/807734

Im trying to make it a clean page the way it currently looks (no gallery page numbers, etc.) and when I remove the dot-NAV {display: none} code, I get the divider line ( | ) that shows as well as the gallery pages number above the photo. I just commented out the display:none code so when you look you'll see what i mean.

Believe me i have been following your CSS Cobranding and You thread as an avid fan and now that you mention it, I actually recall your reference in some of the earlier pages - in retrospect, I can only say DUH - I should have realized the fact the element is not loading prevents later displaying.

FLYINGDUTCHIE had some great ideas and I already picked up the O'Rielly CSS books to learn. His comment about the Web Dev extensions sounds absolutely great except that its for FF - before i do that, Ill look to see if there isnt similar capability in an IE add-on (dont recall if the IE toolbar you told everyone about has the same functionality but Ill find and re-read). This interests me tremendouly because if I can better understand the various parent-child class and ID elements, I think I might better muddle through.

Tell me one other thing - i hesitate to add something like these questions into your ongoing CSS Cobranding and You because I thought it might not rise to the level of training you are providing in that - can I add questions like this in the future (hopefully better researched on my part) into the CSS Cobranding and You thread?

The one other thing I was attemtping was to see if the ADD COMMENT could be substituted with alternative text to read somethign else - I had thought perhaps throough java rather than any CSS.

Anyway - thanks for your assist.:thumb


I need a screen shot. Sorry, I'm not seeing what you're describing as being the problem. Sometimes I just need visuals. Sorry.

As far as IE is concerned, when you find that IE toolbar that I posted you'll find that it does in fact work but it's kind of a pain in the butt. It's not nearly as easy as the Web Developer Extension in firefox and you really have to know a lot more about CSS and HTML in order to get the most out of it. It's mostly handy for testing out CSS dynamically in IE but it's not nearly as good at that as the WDE is in firefox.

As for where to ask questions. I'm subscribed to the CSS, Cobranding, and You thread so I'm notified any time anyone asks a question in there. If you post something to the room in a brand new thread, I have no way of knowing about it until I actually check the room. For the basic stuff like changing colors, hiding certain things, etc. I'd use that thread. For more advanced things or non-css things like javascripting or CSS things that you think everyone could learn from, put them in their own thread.

Mike

[Kahuna Ki'i]

I need a screen shot. Sorry, I'm not seeing what you're describing as being the problem. Sometimes I just need visuals. Sorry.

As far as IE is concerned, when you find that IE toolbar that I posted you'll find that it does in fact work but it's kind of a pain in the butt. It's not nearly as easy as the Web Developer Extension in firefox and you really have to know a lot more about CSS and HTML in order to get the most out of it. It's mostly handy for testing out CSS dynamically in IE but it's not nearly as good at that as the WDE is in firefox.

As for where to ask questions. I'm subscribed to the CSS, Cobranding, and You thread so I'm notified any time anyone asks a question in there. If you post something to the room in a brand new thread, I have no way of knowing about it until I actually check the room. For the basic stuff like changing colors, hiding certain things, etc. I'd use that thread. For more advanced things or non-css things like javascripting or CSS things that you think everyone could learn from, put them in their own thread.

MikeMike,

I attached a screenshot of the page.

Space on my system is not an issue - so you and Anton have me convinced to try out the FF browser (I feel like im giving up on Bill.....sigh...:cry )

Thanks

[Mike Lane]

Mike,

I attached a screenshot of the page.

Space on my system is not an issue - so you and Anton have me convinced to try out the FF browser (I feel like im giving up on Bill.....sigh...:cry )

Thanks Bill let us all down with IE6, trust me. IE7 will be out next year (I think) and it looks like most of the issues will be solved so you can go back to IE after that if you really want.

I'll get to your issues after I get home from work.

[Kahuna Ki'i]

Bill let us all down with IE6, trust me. IE7 will be out next year (I think) and it looks like most of the issues will be solved so you can go back to IE after that if you really want.

I'll get to your issues after I get home from work.
Mike,

Thanks a bunch. I have far too many issues for you to get to them all (i work for the gov as an IT mgr) but if you can help solve my CSS stuff, that would be great :rofl :rofl :rofl

Meanwhile, its good to expand one's horizons.......FF here I come:D

[flyingdutchie]

Mike,

Thanks a bunch. I have far too many issues for you to get to them all (i work for the gov as an IT mgr) but if you can help solve my CSS stuff, that would be great :rofl :rofl :rofl

Meanwhile, its good to expand one's horizons.......FF here I come:DTry these CSS selectors:
.gallery_807734 .pageNav
{
display: none;
}
.gallery_807734 #comment_header
{
display: none;
}
.gallery_807734 #breadcrumb #albumTitle
{
color: white;
}


The first one makes your page-selection go away.
The second one make your 'add comments' section go away.
(making text color black, like the background, will not prevent users from accidentally clicking on them...)
The third one makes your 'Guest Book' in your breadcrumbs visible (by making the text color white instead of black.

-- Anton.

[Kahuna Ki'i]

Try these CSS selectors:
.gallery_807734 .pageNav
{
display: none;
}
.gallery_807734 #comment_header
{
display: none;
}
.gallery_807734 #breadcrumb #albumTitle
{
color: white;
}


The first one makes your page-selection go away.
The second one make your 'add comments' section go away.
(making text color black, like the background, will not prevent users from accidentally clicking on them...)
The third one makes your 'Guest Book' in your breadcrumbs visible (by making the text color white instead of black.

-- Anton.
Anton,

Thanks - that made it look a lot better, but now the question is how will visitors be able to "sign" the guest book or add a comment? I believe I will need to keep the ADD COMMENTS in place and unless I manage to find a way to re-title the ADD COMMENTS to SIGN GUESTBOOK, this might be as close as I get. Any thoughts?

Thanks

[flyingdutchie]

Anton,

Thanks - that made it look a lot better, but now the question is how will visitors be able to "sign" the guest book or add a comment? I believe I will need to keep the ADD COMMENTS in place and unless I manage to find a way to re-title the ADD COMMENTS to SIGN GUESTBOOK, this might be as close as I get. Any thoughts?

ThanksThat is the easiest way, yes:
Your 'Guestbook' gallery, containing only your picture, keeps the galleries' 'Add Comments' button, allowing users to sign your guestbook. Be sure to remove your picture's 'Add Comment' button.

There is a way to add a 'sign guestbook' button, add it in your footer.
- Do a "view source", copy the galleries' 'Add Comment' button and all the corresponding javascript code and paste it into your footer.
- In your footer, change the ids/classes and change the 'Add Comment' text into 'Sign Guestbook'.
- Style the current galleries' 'Add comment' area to be invisible (display: none).
- Style your 'Sign guestbook' area any way you want it.

What you've done now, is make an exact copy of the galleries' 'Add comment' section (including the javascript behavior and such), hide the original, and show the copy in your footer with a different text...
Now it is still a question of how to show current comments (euh... signatures) left earlier.
-- Anton.

PS: I have not tried this myself... it's just an idea. :thumb

[Kahuna Ki'i]

That is the easiest way, yes:
Your 'Guestbook' gallery, containing only your picture, keeps the galleries' 'Add Comments' button, allowing users to sign your guestbook. Be sure to remove your picture's 'Add Comment' button.

There is a way to add a 'sign guestbook' button, add it in your footer.
- Do a "view source", copy the galleries' 'Add Comment' button and all the corresponding javascript code and paste it into your footer.
- In your footer, change the ids/classes and change the 'Add Comment' text into 'Sign Guestbook'.
- Style the current galleries' 'Add comment' area to be invisible (display: none).
- Style your 'Sign guestbook' area any way you want it.

What you've done now, is make an exact copy of the galleries' 'Add comment' section (including the javascript behavior and such), hide the original, and show the copy in your footer with a different text...
Now it is still a question of how to show current comments (euh... signatures) left earlier.
-- Anton.

PS: I have not tried this myself... it's just an idea. :thumb
Anton,

Sounds doable. I just finally managed to get back online after a almost two week outage at home (Comcast....sigh) so after I get caught up, i may try your suggestions.

Cheers,

[Mike Lane]

That is the easiest way, yes:
Your 'Guestbook' gallery, containing only your picture, keeps the galleries' 'Add Comments' button, allowing users to sign your guestbook. Be sure to remove your picture's 'Add Comment' button.

There is a way to add a 'sign guestbook' button, add it in your footer.
- Do a "view source", copy the galleries' 'Add Comment' button and all the corresponding javascript code and paste it into your footer.
- In your footer, change the ids/classes and change the 'Add Comment' text into 'Sign Guestbook'.
- Style the current galleries' 'Add comment' area to be invisible (display: none).
- Style your 'Sign guestbook' area any way you want it.

What you've done now, is make an exact copy of the galleries' 'Add comment' section (including the javascript behavior and such), hide the original, and show the copy in your footer with a different text...
Now it is still a question of how to show current comments (euh... signatures) left earlier.
-- Anton.

PS: I have not tried this myself... it's just an idea. :thumb
Very interesting idea... I hope that works!