Protected galleries question

Montec · January 1, 2007

I was wondering if this is possible;

I have a link on my navbar called CLIENTS that send my clients to a page with private galleries to view and purchase photos.

I have several clients that I would like grouped into one gallery but with separate galleries within that gallery for each client. Is this possible?

What I did was shoot about 30 families at a fundraiser, I want to have a single gallery icon in my Clients page for this shoot with individual galleries inside that within pw protected galleries. Make sense?

Thanks in advance

www.kootenayphotography.com

Allen · January 1, 2007

Montec wrote:

I was wondering if this is possible;

I have a link on my navbar called CLIENTS that send my clients to a page with private galleries to view and purchase photos.

I have several clients that I would like grouped into one gallery but with separate galleries within that gallery for each client. Is this possible?

What I did was shoot about 30 families at a fundraiser, I want to have a single gallery icon in my Clients page for this shoot with individual galleries inside that within pw protected galleries. Make sense?

Thanks in advance

www.kootenayphotography.com

Create a sub-category under PRIVATE category for each group and then place what-ever galleries in each group.
Al

Montec · January 1, 2007

I have created my SubCategory under my PRIVATE category.

This Subcategory is named PAC PHOTOS.

I cannot create subcategories under a Subcategory for all the family galleries I want to add to the PAC PHOTOS subcategory.

Is this somehow possible?

www.kootenayphotography.com

Go here and click on the CLIENTS button to see what I mean, I want to put several galleries in the PAC subcategory. I cannot seem to figure this out.

Allen · January 1, 2007

Montec wrote:

I have created my SubCategory under my PRIVATE category.

This Subcategory is named PAC PHOTOS.

I cannot create subcategories under a Subcategory for all the family galleries I want to add to the PAC PHOTOS subcategory.

Is this somehow possible?

www.kootenayphotography.com

Go here and click on the CLIENTS button to see what I mean, I want to put several galleries in the PAC subcategory. I cannot seem to figure this out.

Sounds like three levels, not possible without some trickery or direct links in navbar.

Random thoughts. Two ways I can think of.

1. Add dropdown under Clients. Will be able to point to different categories.
Only need two levels this way. Make new categories for different client or
event that dropdowns link to.

2. Add journal page with links different clients or events. In journal entries
add thumbnail for each new category with link.

If you decide on the dropdown I can help there.

Either of these would require on-going edit to add new clients but to get
the levels you want (three) your PAC PHOTOS would need to be a category.
Al

Montec · January 1, 2007

Allen wrote:

Sounds like three levels, not possible without some trickery or direct links in navbar.

Random thoughts. Two ways I can think of.

1. Add dropdown under Clients. Will be able to point to different categories.
Only need two levels this way. Make new categories for different client or
event that dropdowns link to.

2. Add journal page with links different clients or events. In journal entries
add thumbnail for each new category with link.

If you decide on the dropdown I can help there.

Either of these would require on-going edit to add new clients but to get
the levels you want (three) your PAC PHOTOS would need to be a category.
Al

I think the dropdown menu under Clients sounds good.
If you have some spare time to explain to me how to do this I would appreciate it imensely.

Allen · January 1, 2007

Montec wrote:

I think the dropdown menu under Clients sounds good.
If you have some spare time to explain to me how to do this I would appreciate it imensely.

First go here and get an understanding of the code. You'll probably want a
simple version of it.

Did a quicky on yours.

<div id="navcontainer">
 <ul>
   <li><a href="http://www.kootenayphotography.com/">Home</a></li>
   <li><a class="drop" href="Place link here">Clients
       <!--[if IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]-->
       <ul>
          <li><a href="Place link here">Client 1</a></li>
          <li><a href="Place link here">Client 1</a></li>
          <li><a href="Place link here">Event 1</a></li>
          <li><a href="Place link here">Event 2</a></li>
          <li><a href="http://kootenay.smugmug.com/PRIVATE/267960">PAC Photos</a></li>
       </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="http://kootenay.smugmug.com/gallery/1962897">About Me</a></li>
   <li><a href="http://www.kootenay.smugmug.com/gallery/1767112">Weddings</a></li>
   <li><a href="http://kootenay.smugmug.com/gallery/1963004">Portraiture</a></li>
   <li><a href="http://www.kootenay.smugmug.com/gallery/1964519/">Photo Editing</a></li>
 </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

You'll also need to add some CSS to surport the dropdowns.

Fire back with any questions,
Al

Montec · January 1, 2007

So...I replaced my nav bar code in the footer with the code below but it scrambled my navbar...

<div id="navcontainer">
<ul>
<li><a href="http://www.kootenayphotography.com/">Home</a></li>
<li><a class="drop"http://kootenay.smugmug.com/PRIVATE">Clients
</a>

<ul>
<li><a href="http://kootenay.smugmug.com/gallery/2293965">Martin Family</a></li>
<li><a href="http://kootenay.smugmug.com/gallery/2297290">Vayro Family</a></li>
<li><a href="http://www.kootenayphotography.com/gallery/2301769">PAC Photos</a></li>
<li><a href="http://kootenay.smugmug.com/gallery/1769690">Custom Wedding Albums</a></li>
<li><a href="http://www.kootenayphotography.com/gallery/1738192">Salmo HomeComing 2006</a></li>
</ul> 
</li>
<li><a href="http://kootenay.smugmug.com/gallery/1962897">About Me</a></li>
<li><a href="http://www.kootenay.smugmug.com/gallery/1767112">Wedding Photography</a></li>
<li><a href="http://kootenay.smugmug.com/gallery/1963004">Portraiture</a></li>
<li><a href="http://www.kootenay.smugmug.com/gallery/1964519/">Photo Enhancements</a></li>
</ul> 
</div>

Allen · January 1, 2007

Montec wrote:

So...I replaced my nav bar code in the footer with the code below but it scrambled my navbar...

Hope you did it in your header not footer.

Got your CSS all worked out and about ready to put here and cable went out.:cry My grandson unplugged the amp.

You need the CSS to unscramble it.
Any way here it is. Replace the navcontainer CSS with this.

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

            /* Common Styling */
#navcontainer {
      position:relative;
      display:block;
      z-index:99;
      padding:20px 0px 30px 0px; /* spacing around menu - top right bottom left */
      height:20px;   /* menu container (div #navcontainer) */
      width:780px;   /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
      margin:0 auto; /* this should center navbar, if not tweak with left's below */
  /*  left:0px;         tweak this to center navbar */
  /* _left:0px;         tweak this to center navbar for IE */
}

#navcontainer ul {
      padding:10px 0px 10px 0px;  /* this effects menu centering if too big, maybe not needed? */
      margin:0 auto;              /* this maybe not needed?  */
      list-style-type: none;
}

#navcontainer ul li {
      float:left;
      position:relative;
}

#navcontainer ul li a, 
#navcontainer ul li a:visited {
      display:block;
      font-size:1em;         /* main buttons */
      color: #FFCC00 ;           /* main buttons text non-hover*/
      text-decoration:none;
      text-align:center;     /* centers text in buttons */
      width:auto;           /* main box width */
      height:20px;           /* main box height */
      background:#000000;    /* main button color */
      padding-left:0px;
      line-height:20px;      /* positions text up/down in box */
}


* html #navcontainer ul li a, #navcontainer ul li a:visited {
      width:150px; w\idth:146px;      /* IE main button */
}

#navcontainer ul li ul {
      display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

#navcontainer ul li:hover a { 
      color:white;       /* main when hover DD */
      background:#000000;  /* main when hover DD */
}

#navcontainer ul li:hover ul {
      display:block;
      position:absolute;
      top:-4px;            /* FF DD up down */
      margin-top:17px;     /* FF main mouse active vertical */
      left:-25px;            /* FF DD right left */
      width:104px;         /* unknown */
}

#navcontainer ul li:hover ul li ul {
      display: none;
}

#navcontainer ul li:hover ul li a {
      display:block;
      background:#000000;  /* DD FO non-hover */
      color:#FFCC00;           /* DD FO non-hover */
      height:auto;
      line-height:20px;      /* DD FO box height */
      padding:0px 0px;
      width:100px            /* DD FO box width */
}

#navcontainer ul li:hover ul li a:hover {
      background:#000000;     /* DD FO hover */
      color:white;      /* DD FO hover */
}

#navcontainer ul li:hover ul li:hover ul {
      display:block;
      position:absolute;
      left:102px;           /* FF FO right left  */
      top:-27px;            /* FF FO up down  */
      width:146px;          /* FF FO box width */
}

#navcontainer ul li:hover ul li:hover ul.left {
      left:-134px;          /* unknown - previously defined */
}                           /*  class of .left for left flyouts? */

      /* +++++++++++++++++++++++++++ */
      /*   Specific to IE browsers   */
      /* +++++++++++++++++++++++++++ */

#navcontainer ul li a:hover {
   /* text-decoration:none;        /* might be needed */ */
      color:white;               /* main hover */
      background:#000000;        /* main hover */
}

#navcontainer ul li a:hover ul {
      display:block;
      position:absolute;
      top:2px; left:0;        /* DD container up down */
      background:none;        /* gets rid of DD container */
      margin-top:7px;
      margin-top:7px;         /* DD container up down */
      left:0px;               /* DD right left */
}

#navcontainer ul li a:hover ul li a {
      display:block;
      background:#000000;        /* IE DD color non-hover */
      color:#FFCC00;               /* IE DD color non-hover */
      height:auto;
      line-height:20px;        /* IE DD FO box height */
      padding:0px; 
      width:145px;             /* IE DD FO box */
}

#navcontainer ul li a:hover ul li a ul {
      visibility:hidden;
      position:absolute;
      height:0;
      width:0;
}

#navcontainer ul li a:hover ul li a:hover {
      background:#FFCC00;                  /* DD FO hover includes menu 6 */
      color:#000000;                   /* DD FO hover includes menu 6  */
}

#navcontainer ul li a:hover ul li a:hover ul {
         display:block;
         position:absolute;  
         top:-22px;                    /*   FO up down    */
         color:#000000;                /*   unknown       */
         left:147px;                   /*   FO right left */
} 

#navcontainer ul li a:hover ul li a:hover ul.left {
         left:-134px;
}

          /*ADD TO FIX IE*/
          /* a hack so that IE5.5 faulty box model is corrected */

* html #navcontainer a, * html #navcontainer a:visited {
         width:125px; 
         w\idth:139px;
}

    /* another hack for IE5.5 */

* html #navcontainer ul ul {
         top:30px;
         t\op:31px;       /* IE gap between main bar and the dropdown items */
}

          /* style the table so that it takes no part in 
             the layout - required for IE to work */
#navcontainer table {
         position:absolute;
         top:auto 0; left:0;
}

      /* yet another hack for IE5.5 */

* html #navcontainer ul ul a{
         width:125px;             /* unknown */
         w\idth:104px;             /* DD FF width */
}

         /*END EXTRA ADDS FOR IE*/

          /* ADD TO HIDE EXTRA LEVELS */
          /* make the 2nd level visible when 
             hover on 1st level list OR link */
#navcontainer ul a:hover ul,  /* IE */
#navcontainer ul:hover ul {   /* FF */
         visibility:visible; 
}

Montec · January 1, 2007

I replaced the code....but the drop down doesn't work.

The CLIENTS button now takes up more space...

Allen · January 1, 2007

Montec wrote:

I replaced the code....but the drop down doesn't work.

The CLIENTS button now takes up more space...

You need the navcontainer html replaced also in your header. Works perfert, noticed you're changing button text also.

See message above #6

You replaced the CSS but not the header html.
Al

Montec · January 1, 2007

Thanks Al,

Seem to have it figured out.

A couple of minor things though...my menu boxes changed position, the HOME and CLIENTS box shifted to the right side of the navbar somehow.

And in FireFox the DD menu flys out to the left.

Is there fixes for these problems, no biggee if there isn't.

www.kootenayphotography.com

Thanks for your help this evening.

Allen · January 1, 2007

Montec wrote:

Thanks Al,

Seem to have it figured out.

A couple of minor things though...my menu boxes changed position, the HOME and CLIENTS box shifted to the right side of the navbar somehow.

And in FireFox the DD menu flys out to the left.

Is there fixes for these problems, no biggee if there isn't.

www.kootenayphotography.com

Thanks for your help this evening.

I have it figured out what to put in, hang on a sec.

Allen · January 1, 2007

Montec wrote:

Thanks Al,

Seem to have it figured out.

A couple of minor things though...my menu boxes changed position, the HOME and CLIENTS box shifted to the right side of the navbar somehow.

And in FireFox the DD menu flys out to the left.

Is there fixes for these problems, no biggee if there isn't.

www.kootenayphotography.com

Thanks for your help this evening.

Here's the whole nav code

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

            /* Common Styling */
#navcontainer {
      position:relative;
      display:block;
      z-index:99;
      padding:20px 0px 30px 0px; /* spacing around menu - top right bottom left */
      height:20px;   /* menu container (div #navcontainer) */
[COLOR=Lime]       width:680px; [/COLOR]  /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
      margin:0 auto; /* this should center navbar, if not tweak with left's below */
  /*  left:0px;         tweak this to center navbar */
  /* _left:0px;         tweak this to center navbar for IE */
}

#navcontainer ul {
      padding:10px 0px 10px 0px;  /* this effects menu centering if too big, maybe not needed? */
      margin:0 auto;              /* this maybe not needed?  */
      list-style-type: none;
}

#navcontainer ul li {
[COLOR=Red]       float:left;[/COLOR]
      position:relative;
}

#navcontainer ul li a, 
#navcontainer ul li a:visited {
      display:block;
      font-size:1em;         /* main buttons */
      color: #FFCC00 ;           /* main buttons text non-hover*/
      text-decoration:none;
      text-align:center;     /* centers text in buttons */
      [COLOR=Lime]width:90px;[/COLOR]           /* main box width */
      height:20px;           /* main box height */
      background:#000000;    /* main button color */
      padding-left:0px;
      line-height:20px;      /* positions text up/down in box */
}


* html #navcontainer ul li a, #navcontainer ul li a:visited {
      width:100px; w\idth:100px;      /* IE main button */
}

#navcontainer ul li ul {
      display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

#navcontainer ul li:hover a { 
      color:white;       /* main when hover DD */
      background:#000000;  /* main when hover DD */
}

#navcontainer ul li:hover ul {
      display:block;
      position:absolute;
      top:-4px;            /* FF DD up down */
      margin-top:17px;     /* FF main mouse active vertical */
  [COLOR=Lime]    left:0px;            /* FF DD right left */[/COLOR]
      width:104px;         /* unknown */
}

#navcontainer ul li:hover ul li ul {
      display: none;
}

#navcontainer ul li:hover ul li a {
      display:block;
      background:#000000;  /* DD FO non-hover */
      color:#FFCC00;           /* DD FO non-hover */
      height:auto;
      line-height:20px;      /* DD FO box height */
      padding:0px 0px;
      width:100px            /* DD FO box width */
}

#navcontainer ul li:hover ul li a:hover {
      background:#000000;     /* DD FO hover */
      color:white;      /* DD FO hover */
}

#navcontainer ul li:hover ul li:hover ul {
      display:block;
      position:absolute;
      left:102px;           /* FF FO right left  */
      top:-27px;            /* FF FO up down  */
      width:146px;          /* FF FO box width */
}

#navcontainer ul li:hover ul li:hover ul.left {
      left:-134px;          /* unknown - previously defined */
}                           /*  class of .left for left flyouts? */

      /* +++++++++++++++++++++++++++ */
      /*   Specific to IE browsers   */
      /* +++++++++++++++++++++++++++ */

#navcontainer ul li a:hover {
   /* text-decoration:none;        /* might be needed */ */
      color:white;               /* main hover */
      background:#000000;        /* main hover */
}

#navcontainer ul li a:hover ul {
      display:block;
      position:absolute;
      top:2px; left:0;        /* DD container up down */
      background:none;        /* gets rid of DD container */
      margin-top:7px;
      margin-top:7px;         /* DD container up down */
      left:0px;               /* DD right left */
}

#navcontainer ul li a:hover ul li a {
      display:block;
      background:#000000;        /* IE DD color non-hover */
      color:#FFCC00;               /* IE DD color non-hover */
      height:auto;
      line-height:20px;        /* IE DD FO box height */
      padding:0px; 
      width:145px;             /* IE DD FO box */
}

#navcontainer ul li a:hover ul li a ul {
      visibility:hidden;
      position:absolute;
      height:0;
      width:0;
}

#navcontainer ul li a:hover ul li a:hover {
      background:#FFCC00;                  /* DD FO hover includes menu 6 */
      color:#000000;                   /* DD FO hover includes menu 6  */
}

#navcontainer ul li a:hover ul li a:hover ul {
         display:block;
         position:absolute;  
         top:-22px;                    /*   FO up down    */
         color:#000000;                /*   unknown       */
         left:147px;                   /*   FO right left */
} 

#navcontainer ul li a:hover ul li a:hover ul.left {
         left:-134px;
}

          /*ADD TO FIX IE*/
          /* a hack so that IE5.5 faulty box model is corrected */

* html #navcontainer a, * html #navcontainer a:visited {
         width:125px; 
         w\idth:139px;
}

    /* another hack for IE5.5 */

* html #navcontainer ul ul {
         top:30px;
         t\op:31px;       /* IE gap between main bar and the dropdown items */
}

          /* style the table so that it takes no part in 
             the layout - required for IE to work */
#navcontainer table {
         position:absolute;
         top:auto 0; left:0;
}

      /* yet another hack for IE5.5 */

* html #navcontainer ul ul a{
         width:125px;             /* unknown */
         w\idth:104px;             /* DD FF width */
}

         /*END EXTRA ADDS FOR IE*/

          /* ADD TO HIDE EXTRA LEVELS */
          /* make the 2nd level visible when 
             hover on 1st level list OR link */
#navcontainer ul a:hover ul,  /* IE */
#navcontainer ul:hover ul {   /* FF */
         visibility:visible; 
}

We still have to format IE, once we get FF looking ok
Al

Edit: changing to float right reverses the menu - see Red above

Also remove the extra text at the bottom of your CSS

Montec · January 1, 2007

height:20px; /* menu container (div #navcontainer) */
width:680px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering

Thanks again Al...Everything looks good in both browsers. The only thing I would like to see is the text in the DD menu be left justified, it looks a little odd the way it comes out.

I also need to leave the width of the navbar at 890px or it wraps.

Allen · January 1, 2007

Montec wrote:

Thanks again Al...Everything looks good in both browsers. The only thing I would like to see is the text in the DD menu be left justified, it looks a little odd the way it comes out.

I also need to leave the width of the navbar at 890px or it wraps.

Try these changes
#navcontainer ul li:hover ul li a {
display:block;
text-align:left;
background:#000000; /* DD FO non-hover */
color:#FFCC00; /* DD FO non-hover */
height:auto;
line-height:20px; /* DD FO box height */
padding:0px 0px;
width:146px /* DD FO box width */
}

Montec · January 1, 2007

That's got it!

Thanks very much!

Protected galleries question

Comments