Info page help

[daves43]

In my navigation bar are different info pages I want to create. Can someone advise me how to create and link these pages or direct me to a tutorial explaining how to do this. Below is a link to my website.

http://davidstarkephotography.smugmug.com/

Thank you,
Dave

[J Allen]

David-

A couple different ways to make these pages....

Easy Way

1- make a new unlisted gallery, set to journal style

2- Add one photo, write some text in the photo caption.

3- Post back here for help on cleaning up the galleries and linking them to your nav-bar...be sure to include a direct link to the new gallery. :thumb


Another Way (http://www.allen-steve.smugmug.com/gallery/3819841_ywRwQ)

:ear

[daves43]

David-

A couple different ways to make these pages....

Easy Way

1- make a new unlisted gallery, set to journal style

2- Add one photo, write some text in the photo caption.

3- Post back here for help on cleaning up the galleries and linking them to your nav-bar...be sure to include a direct link to the new gallery. :thumb


Another Way (http://www.allen-steve.smugmug.com/gallery/3819841_ywRwQ)

:ear Thank you for the suggestions. I am very limited in my abilities with the codes or script so I tried the easy way you suggested. I look forward to your help on linking them to nav bar or in trying any other suggestions you may have to make it better. Thanks again for your help.

http://davidstarkephotography.smugmug.com/About%20me

[J Allen]

Thank you for the suggestions. I am very limited in my abilities with the codes or script so I tried the easy way you suggested. I look forward to your help on linking them to nav bar or in trying any other suggestions you may have to make it better. Thanks again for your help.

http://davidstarkephotography.smugmug.com/About%20me

The link you left is a category...you need to make a 'gallery'
Then post the link to the gallery and I'll walk ya through how to link to your nav-bar. :ear

[daves43]

The link you left is a category...you need to make a 'gallery'
Then post the link to the gallery and I'll walk ya through how to link to your nav-bar. :ear I hope this is correct. http://davidstarkephotography.smugmug.com/gallery/8739956_jGUhU#578168294_qoL68

[J Allen]

Remove the '#' and the gallery URL: http://davidstarkephotography.smugmug.com/gallery/8739956_jGUhU

Like this:




<div id="my-banner">David Starke Photography</div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/8739956_jGUhU">About Me</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
<div id="my-header-line"></div>


Set this gallery to 'Journal Style', remove the text from the description area and place it in the photo caption area, then add this to your CSS Box:




/*====About-Us-Page====*/
.gallery_8739956 #breadCrumbTrail,
.gallery_8739956 .play_slideshow,
.gallery_8739956 .share_button,
.gallery_8739956 #albumNav_top,
.gallery_8739956 #albumNav_bottom,
.gallery_8739956 .nophotos h3,
.gallery_8739956 .pageNav
{display:none;}
.gallery_8739956 .journal_entry
{border:none;}




Dont forget to set this gallery as 'unlisted', so doesnt show up on your galleries page to visitors.

[daves43]

Remove the '#' and the gallery URL: http://davidstarkephotography.smugmug.com/gallery/8739956_jGUhU

Like this:




<div id="my-banner">David Starke Photography</div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/8739956_jGUhU">About Me</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
<div id="my-header-line"></div>

Set this gallery to 'Journal Style', remove the text from the description area and place it in the photo caption area, then add this to your CSS Box:




/*====About-Us-Page====*/
.gallery_8739956 #breadCrumbTrail,
.gallery_8739956 .play_slideshow,
.gallery_8739956 .share_button,
.gallery_8739956 #albumNav_top,
.gallery_8739956 #albumNav_bottom,
.gallery_8739956 .nophotos h3,
.gallery_8739956 .pageNav
{display:none;}
.gallery_8739956 .journal_entry
{border:none;}



Dont forget to set this gallery as 'unlisted', so doesnt show up on your galleries page to visitors.I've tried making the changes you asked me to make but still cannot get it to work. I'm sure it is a result of my limited knowledge and understanding of the code. Not so sure what to do next.

[daves43]

I've tried making the changes you asked me to make but still cannot get it to work. I'm sure it is a result of my limited knowledge and understanding of the code. Not so sure what to do next. I am trying to link the about me in the nav bar to the about me page. Can someone take a look at my web page and tell me what I am doing wrong. http://davidstarkephotography.smugmug.com/galleries#

[Allen]

I am trying to link the about me in the nav bar to the about me page. Can someone take a look at my web page and tell me what I am doing wrong. http://davidstarkephotography.smugmug.com/galleries#
On the advanced site-wide customization page in your control panel, in the
header box change the # in this to the gallery link.

<li><a href="#">About Me</a></li>

like this (replace xxxxxxxx_xxxxx with the actual numbers/letters)

<li><a href="/gallery/xxxxxxxx_xxxxx">About Me</a></li>

I can't find your about gallery, must be unlisted.

[daves43]

On the advanced site-wide customization page in your control panel, in the
header box change the # in this to the gallery link.

<li><a href="#">About Me</a></li>

like this (replace xxxxxxxx_xxxxx with the actual numbers/letters)

<li><a href="/gallery/xxxxxxxx_xxxxx">About Me</a></li>

I can't find your about gallery, must be unlisted. That worked, thank you for your help.

[Waytodixon]

Allen,

I found a link to your instructions on HTML only pages here:
http://allen-steve.smugmug.com/gallery/3819841

...and I tried following the instructions. This is what I got:
http://www.rachelkabukala.smugmug.com/gallery/8753823_hcczs

I've added some corny text (and left some of the "text text text" unchanged) but I'm just trying to figure out this HTML only stuff. It looks like I've got big problems and I was wondering if you had any ideas.

Also, on a slightly different note, does anyone know how to get rid of the white lines on gallery pages???

Best,
Rachel

On the advanced site-wide customization page in your control panel, in the
header box change the # in this to the gallery link.

<li><a href="#">About Me</a></li>

like this (replace xxxxxxxx_xxxxx with the actual numbers/letters)

<li><a href="/gallery/xxxxxxxx_xxxxx">About Me</a></li>

I can't find your about gallery, must be unlisted.

[Allen]

Allen,

I found a link to your instructions on HTML only pages here:
http://allen-steve.smugmug.com/gallery/3819841

...and I tried following the instructions. This is what I got:
http://www.rachelkabukala.smugmug.com/gallery/8753823_hcczs

I've added some corny text (and left some of the "text text text" unchanged) but I'm just trying to figure out this HTML only stuff. It looks like I've got big problems and I was wondering if you had any ideas.

Also, on a slightly different note, does anyone know how to get rid of the white lines on gallery pages???

Best,
Rachel In the html add in the photo size. -S

<div class="myPhoto">
<img src="/photos/287495766_agmzW-S.jpg" height="300" width="200">
</div> <!-- closes myPhoto div -->


Change this in CSS to move photo to other side.

.gallery_8753823 .myPhoto {
float: right; /* allows the text to flow to the right */
padding: 0 0 10px 30px; /* top right bottom left */
} /* spacing of text around photo */
Remove all the gallery keys. They are not used in CSS except for links like in
your banner background CSS.

one example
.gallery_8753823_hcczs .myText {....

like this

.gallery_8753823 .myText {....


Add this to CSS to remove white lines

.galleryPage {border: none !important;}


Change the top in this so there's no gap and the mouse can slide down the drop.
20px works in Firefox

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:20px;
left:0;
width:75px; /* Size of the daughter cells */
}
add the z-index: 99; to this. The Children flyout is going behind the photos and this will bring it to the top.

/* style the outer div to give it width */
.menu {
z-index: 99;
margin-top 30px;
padding:10px 0px 15px 0px;
position:absolute; top:0; right:0; /*Make the container moveable*/
width:390px; /*Main bar total width*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}

[Waytodixon]

Thanks again, Allen. All of this worked very well, too!

Best,
Rachel



In the html add in the photo size. -S

<div class="myPhoto">
<img src="/photos/287495766_agmzW-S.jpg" height="300" width="200">
</div> <!-- closes myPhoto div -->


Change this in CSS to move photo to other side.

.gallery_8753823 .myPhoto {
float: right; /* allows the text to flow to the right */
padding: 0 0 10px 30px; /* top right bottom left */
} /* spacing of text around photo */
Remove all the gallery keys. They are not used in CSS except for links like in
your banner background CSS.

one example
.gallery_8753823_hcczs .myText {....

like this

.gallery_8753823 .myText {....


Add this to CSS to remove white lines

.galleryPage {border: none !important;}


Change the top in this so there's no gap and the mouse can slide down the drop.
20px works in Firefox

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:20px;
left:0;
width:75px; /* Size of the daughter cells */
} add the z-index: 99; to this. The Children flyout is going behind the photos and this will bring it to the top.

/* style the outer div to give it width */
.menu {
z-index: 99;
margin-top 30px;
padding:10px 0px 15px 0px;
position:absolute; top:0; right:0; /*Make the container moveable*/
width:390px; /*Main bar total width*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}