Breadcrumbs and other stuff

[JEphotography]

I have not done changes to me customization in a long time so I am needing some help. I am wanting to remove breadcrumbs everywhere on the web site but I want to keep the style, share and slideshow buttons. When I use this code,

#breadcrumb {visibility: hidden;}
#altViews {visibility: visible;}
.loggedIn #breadcrumb {visibility: visible;}

it removes the breadcrumbs great but it also remove style, share and slideshow button. Is there something i can do to just remove breadcrumbs.

Then, the new journal and slideshow views are messing up my navbar and I need it to be on the same spot as smugmug view.

www.jephotography.smugmug.com

thanks for the help

Jonathan

[jfriend]

To hide the breadcrumb everywhere, when you are not logged in, replace all of these lines of CSS:

#breadcrumb {visibility: hidden;}
#altViews {visibility: visible;}
.loggedIn #breadcrumb {visibility: visible;}

with this:

.notLoggedIn #breadCrumbTrail {display:none;}

[jfriend]

You have CSS for your navbar that names specific viewing styles. There are now two new viewing styles. If you want your navbar to work the same in all viewing styles, then you should either use generic CSS that just works the same for all viewing styles or you need to add the new views to your CSS. Your choice, but the generic CSS that does not name specific views would be less likely to break in the future (like it just did).

[denisegoldberg]

Congratulations! You've successfully removed the breadcrumb, and you haven't replaced it with any indication of what gallery your viewer is perusing.

Are you really sure you want to hide the breadcrumb? Think of your viewers! (http://www.dgrin.com/showthread.php?t=111484)

--- Denise

[JEphotography]

You have CSS for your navbar that names specific viewing styles. There are now two new viewing styles. If you want your navbar to work the same in all viewing styles, then you should either use generic CSS that just works the same for all viewing styles or you need to add the new views to your CSS. Your choice, but the generic CSS that does not name specific views would be less likely to break in the future (like it just did).

Ok so what do i need to fix? I really like the smugmug view with the navcontainer on the left and would like the navcontainer in journal style to be the same. What do I need to change?

Thanks in advance!:thumb

Jonathan

[jfriend]

Ok so what do i need to fix? I really like the smugmug view with the navcontainer on the left and would like the navcontainer in journal style to be the same. What do I need to change?

Thanks in advance!:thumb

Jonathan

You have CSS that is trying to do different things with your navbar in different gallery styles. If you can tell us where you want the navbar in each of the five gallery styles, we can help you get what you want. Your CSS broke in the new gallery style because you were listing each of the different views and thus you don't have anything for the new style. It would be better to set a default behavior that should work everywhere (and then new views in the future will get that automatically). I can help you do that, but I need to know if you want the navbar left aligned in all views or you want it centered in some and left in others?

[JEphotography]

You have CSS that is trying to do different things with your navbar in different gallery styles. If you can tell us where you want the navbar in each of the five gallery styles, we can help you get what you want. Your CSS broke in the new gallery style because you were listing each of the different views and thus you don't have anything for the new style. It would be better to set a default behavior that should work everywhere (and then new views in the future will get that automatically). I can help you do that, but I need to know if you want the navbar left aligned in all views or you want it centered in some and left in others?

Ok.

The only ones that don't look right are slideshow and journal. I want the navbar to be aligned left in-line with the logo. I basically want to the logo and navbar aligned left, but only if the style calls for (stretchy). traditional and all thumb look right now until they become stretchy.

[jfriend]

Ok.

The only ones that don't look right are slideshow and journal. I want the navbar to be aligned left in-line with the logo. I basically want to the logo and navbar aligned left, but only if the style calls for (stretchy). traditional and all thumb look right now until they become stretchy. OK, I think that means you want the navbar to be flush with the left of every view. For the stretchy views, that's the left edge of the screen, for the others, that's the left side of their view. I need to understand all of the views in order to decomplicate your CSS.

Back in a bit.

[JEphotography]

OK, I think that means you want the navbar to be flush with the left of every view. For the stretchy views, that's the left edge of the screen, for the others, that's the left side of their view. I need to understand all of the views in order to decomplicate your CSS.

Back in a bit.

Yes I think that you understood what i was trying to explain...:clap

[jfriend]

Yes I think that you understood what i was trying to explain...:clap

OK, change all your navcontainer CSS to this CSS which should be a lot simpler and a lot less likely to break in the future. Your core problem was that your navbar had no height and that was causing all sorts of other issues that all the rest of the CSS was trying to fix. Give it a height and most of that goes away.

Note that we only have one reference to only two view styles. This code is stretchy by default, and specifies a width only for the two styles that have a specific width. Further, only the first three lines are different than the stock navbar code which also makes it simpler.



#navcontainer {height: 20px;}

.traditional #navcontainer,
.allthumbs #navcontainer {width: 780px; margin: 0 auto;}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: none;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: none;
}

[JEphotography]

OK, change all your navcontainer CSS to this CSS which should be a lot simpler and a lot less likely to break in the future. Your core problem was that your navbar had no height and that was causing all sorts of other issues that all the rest of the CSS was trying to fix. Give it a height and most of that goes away.

Note that we only have one reference to only two view styles. This code is stretchy by default, and specifies a width only for the two styles that have a specific width. Further, only the first three lines are different than the stock navbar code which also makes it simpler.



#navcontainer {height: 20px;}

.traditional #navcontainer,
.allthumbs #navcontainer {width: 780px; margin: 0 auto;}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: none;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: none;
}




Client Home has the nav container aligned left but not the logo. Is there a way to stretch the catagory view so that everything is aligned left?
like this
http://www.moonriverphotography.com/Galleries

Same thing with Galleries. Nav bar is on the only thing on the left.

It works well in the individual galleries.

[jfriend]

Client Home has the nav container aligned left but not the logo. Is there a way to stretch the catagory view so that everything is aligned left?
like this
http://www.moonriverphotography.com/Galleries

Same thing with Galleries. Nav bar is on the only thing on the left.

It works well in the individual galleries. OK, you didn't mention (and I didn't think about) all the other fixed width pages (category, sub-category, keyword, search, etc...). In the interest of keeping the CSS as simple as possible, let's change the default to match a 750px width and then specify the three stretchy gallery types as stretchy. That should take care of the categories and other fixed width pages. The categories could be made stretchy too, but that's another conversation. I'd rather get the navbar to a stable spot first.

Go with this CSS for your navbar:

#navcontainer {height: 20px; width: 780px; margin: 0 auto;}

.smugmug #navcontainer,
.slideshow #navcontainer,
.journal_new #navcontainer {width: auto; margin: 0;}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: none;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: none;
}

[JEphotography]

OK, you didn't mention (and I didn't think about) all the other fixed width pages (category, sub-category, keyword, search, etc...). In the interest of keeping the CSS as simple as possible, let's change the default to match a 750px width and then specify the three stretchy gallery types as stretchy. That should take care of the categories and other fixed width pages. The categories could be made stretchy too, but that's another conversation. I'd rather get the navbar to a stable spot first.

Go with this CSS for your navbar:

#navcontainer {height: 20px; width: 780px; margin: 0 auto;}

.smugmug #navcontainer,
.slideshow #navcontainer,
.journal_new #navcontainer {width: auto; margin: 0;}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: none;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: none;
}






:clapYeah! thanks for helping me get this fixed. I really appreciate it. Maybe tomorrow i will have the willingness to make the categories stretchy. Thanks again!

Jonathan