PDA

View Full Version : Journal mode with writing under picture

My3Sons
Mar-14-2009, 08:13 PM
If I force the style of a gallery (with one picture) to Journal style, can I place the writing underneath my one picture, instead of out to the side. I don't have very much writing (just contact info), so it looks a little strange out to the side of the picture. How do I put my text under the photo, instead of out to the side?

Also, how can I create a link to my e-mail, within this gallery
J Allen
Mar-15-2009, 05:46 AM
If I force the style of a gallery (with one picture) to Journal style, can I place the writing underneath my one picture, instead of out to the side. I don't have very much writing (just contact info), so it looks a little strange out to the side of the picture. How do I put my text under the photo, instead of out to the side?

Also, how can I create a link to my e-mail, within this gallery

Do you have a link to the gallery where you want help....

An example e-mail link, change the red to your email address, and the yellow will be the text displayed:

<html>
<a href="mailto: john@pageresource.com">Give me some mail!</a>
</html>
My3Sons
Mar-16-2009, 12:25 PM
Do you have a link to the gallery where you want help....

An example e-mail link, change the red to your email address, and the yellow will be the text displayed:

<html>
<a href="mailto: john@pageresource.com">Give me some mail!</a>
</html>

Where do I add the e-mail link? I tried adding to CSS, but it did not do anything. I'm guessing maybe it's because I didn't tell it which gallery to add it to? Need help.

This gallery link is actually to my mom's site... I am trying to help her customize it. There's not much here yet, just starting out...

http://onceuponadream.smugmug.com/gallery/7602496_XdU7s

-Melissa
J Allen
Mar-16-2009, 12:37 PM
Where do I add the e-mail link? Is it to the CSS?

This gallery link is actually to my mom's site... I am trying to help her customize it. There's not much here yet, just starting out...

http://onceuponadream.smugmug.com/gallery/7602496_XdU7s

-Melissa

Any where you want it to appear in a gallery, if you want an e-mail link to show on all your pages at the bottom, add this to your custom footer box:



<div id="my_footer">
<a href="mailto:cpassmore1@cox.net">Give me some mail!</a>
</div>


When putting html codes in a gallery, you 'll always need html tags:

<html></html>


when putting in the footer or header box you dont need those tags.
If you put it in your footer box for it to show on all your pages, you can style it anyway you want, since you will be giving it an ID:

#my_footer


Now just make some rules, for example try this one in your CSS box::



#my_footer
{border: 1px solid red;
font-size:120%
font-weight: bold;}
My3Sons
Mar-16-2009, 12:58 PM
Any where you want it to appear in a gallery, if you want an e-mail link to show on all your pages at the bottom, add this to your custom footer box:



<div id="my_footer">
<a href="mailto:cpassmore1@cox.net">Give me some mail!</a>
</div>


When putting html codes in a gallery, you 'll always need html tags:

<html></html>


when putting in the footer or header box you dont need those tags.
If you put it in your footer box for it to show on all your pages, you can style it anyway you want, since you will be giving it an ID:

#my_footer


Now just make some rules, for example try this one in your CSS box::



#my_footer
{border: 1px solid red;
font-size:120%
font-weight: bold;}



That worked great to add it as a footer. HOw do I center it?
www.onceuponadream.smugmug.com (http://www.onceuponadream.smugmug.com)

Thank you so much for your help!
J Allen
Mar-16-2009, 01:04 PM
That worked great to add it as a footer. HOw do I center it?
www.onceuponadream.smugmug.com (http://www.onceuponadream.smugmug.com)

Thank you so much for your help!

Delete this from your CSS Box:

<a href="mailto: cpassmore1@cox.net">Contact Me!</a>


Add this to your 'Custom Footer' Box:


<center>
<div id="my_footer">
<a href="mailto: cpassmore1@cox.net">Contact Me!</a>
</div>
</center>



Add this to your CSS box:


#my_footer
{font-size:120%
font-weight: bold;}
J Allen
Mar-16-2009, 01:09 PM
Are you wanting a nav-bar on your site?
My3Sons
Mar-16-2009, 01:51 PM
Are you wanting a nav-bar on your site?

Most deffinetly wanting a navbar. I am titleing the categories, as the same buttons that I want in the navbar.

hmmm.... could the e-mail link work with one of the buttons on the navbar, so that when you click Contact it takes you directly to e-mail? That would be too cool.

www.onceuponadream.smugmug.com
J Allen
Mar-16-2009, 02:01 PM
hmmm.... could the e-mail link work with one of the buttons on the navbar, so that when you click Contact it takes you directly to e-mail? That would be too cool.



:nod Yes you could do that....
My3Sons
Mar-20-2009, 12:21 PM
:nod Yes you could do that....

Ok, so what are the steps for creating this? Should I make the navbar first?
J Allen
Mar-20-2009, 04:19 PM
For your Footer E-mail link, if you dont want the border to stretch the length of the page, then add the red:





#my_footer
{border: 1px solid pink;
font-size:120%
font-weight: bold;
width:190px}




If you would like to create your own buttons for your nav-bar, do so, then up load them to an unlisted gallery on your smug-mug site. If you would like to try some html buttons and style them, give this a try and see if you like:



Add this to your 'Custom Header Box':





<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/7593772_R84Vi">Available</a></li>
<li><a href="/gallery/7602496_XdU7s">Contact</a></li>
<li><a href="/gallery/7593644_EpncN">About Me</a></li>
</ul>
</div>







Then Add this to your CSS:





/*=====Nav-Bar=====*/
#navcontainer ul
{margin: 10px auto;
padding: 0;
list-style-type: none;
text-align: center;}

#navcontainer ul li
{display: inline;}

#navcontainer ul li a
{text-decoration: none;
padding: .2em 3em;
color: red;
background-color: pink;
border: 3px ridge red;
font-size:118%}

#navcontainer ul li a:hover
{color: red;
background-color: white;}





/*====Tighten Homepage====*/
#userBio {padding:0;}
#homepage {padding-top:0;}
.homepage #breadcrumb
{display:none;}






This CSS will clean-up those info galleries:




/*====Available-Page====*/
.gallery_7593772 #breadCrumbTrail,
.gallery_7593772 .play_slideshow,
.gallery_7593772 #albumNav_top,
.gallery_7593772 #albumNav_bottom,
.gallery_7593772 .nophotos h3,
.gallery_7593772 .pageNav
{display:none;}
.gallery_7593772 .journal_entry
{border:none;}







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








/*====Contact-Page====*/
.gallery_7602496 #breadCrumbTrail,
.gallery_7602496 .play_slideshow,
.gallery_7602496 #albumNav_top,
.gallery_7602496 #albumNav_bottom,
.gallery_7602496 .nophotos h3,
.gallery_7602496 .pageNav
{display:none;}
.gallery_7602496 .journal_entry
{border:none;}


















:ear
My3Sons
Mar-21-2009, 12:27 PM
Deffinetly going to give all of this a try.

One quick question on my site (totally unrelated). I can't find anyone who know the answer, or maybe I just haven't asked the question right, so I'll try it out on you...

On my website (not my mom's, which we have been working on), I have a gallery that is forced to slideshow. I noticed that if I check "thumbs", it will show them at the bottom, highlighting each one, as it appears in the slideshow. I love this. Is there any way to force it so that the thumbs always appear with the gallery slideshow (and the viewers don't have to check thumbs in order to see them)? If so, can I then get rid of the slideshow toolbar? I really hope there is a way to do this...

Here's the link to the gallery:
http://www.naturalphotography.smugmug.com/gallery/7650044_5ZsBP/1/494198171_n8TuU

Thank you again- Melissa
J Allen
Mar-21-2009, 02:36 PM
Deffinetly going to give all of this a try.

One quick question on my site (totally unrelated). I can't find anyone who know the answer, or maybe I just haven't asked the question right, so I'll try it out on you...

On my website (not my mom's, which we have been working on), I have a gallery that is forced to slideshow. I noticed that if I check "thumbs", it will show them at the bottom, highlighting each one, as it appears in the slideshow. I love this. Is there any way to force it so that the thumbs always appear with the gallery slideshow (and the viewers don't have to check thumbs in order to see them)? If so, can I then get rid of the slideshow toolbar? I really hope there is a way to do this...

Here's the link to the gallery:
http://www.naturalphotography.smugmug.com/gallery/7650044_5ZsBP/1/494198171_n8TuU

Thank you again- Melissa


The only way I can think of, is to just make this gallery in to a flash slide-show......

So to do this, make a new gallery, 'Journal Style' with no pictures, add this code to the Album Description area:





<html>
<center>
<script>
var ssConfig = {
AlbumID: '7650044',
newWindow: 'false',
transparent: 'true',
showLogo: 'false',
showThumbs: 'true',
showButtons: 'true',
crossFadeSpeed: '750'
};

SM.flash.insertSlideshow(600, 600, ssConfig, 'transparent');
</script>
</center>
</html>




Then add this to your CSS, to clean up that gallery, changing the 'X' to your gallery number:


/*====Slide Show Gallery====*/
.gallery_XXXXXX #breadCrumbTrail,
.gallery_XXXXXX .play_slideshow,
.gallery_XXXXXX #albumNav_top,
.gallery_XXXXXX #albumNav_bottom,
.gallery_XXXXXX .nophotos h3,
.gallery_XXXXXX .pageNav
{display:none;}
.gallery_XXXXXX .journal_entry
{border:none;}




Here is a link for info parameters on the slidehsow:

http://wiki.smugmug.net/display/SmugMug/Flash%20Slideshow
My3Sons
Mar-25-2009, 09:15 PM
The only way I can think of, is to just make this gallery in to a flash slide-show......

So to do this, make a new gallery, 'Journal Style' with no pictures, add this code to the Album Description area:





<html>
<center>
<script>
var ssConfig = {
AlbumID: '7650044',
newWindow: 'false',
transparent: 'true',
showLogo: 'false',
showThumbs: 'true',
showButtons: 'true',
crossFadeSpeed: '750'
};

SM.flash.insertSlideshow(600, 600, ssConfig, 'transparent');
</script>
</center>
</html>




Then add this to your CSS, to clean up that gallery, changing the 'X' to your gallery number:


/*====Slide Show Gallery====*/
.gallery_XXXXXX #breadCrumbTrail,
.gallery_XXXXXX .play_slideshow,
.gallery_XXXXXX #albumNav_top,
.gallery_XXXXXX #albumNav_bottom,
.gallery_XXXXXX .nophotos h3,
.gallery_XXXXXX .pageNav
{display:none;}
.gallery_XXXXXX .journal_entry
{border:none;}




Here is a link for info parameters on the slidehsow:

http://wiki.smugmug.net/display/SmugMug/Flash%20Slideshow

Great job with the codes!!! I did all of this and it made a duplicate copy of the gallery, featuring the options that I wanted. I now have 2 copies of the gallery though, and the one that I want to use does not show a feature photo (it only shows up as empty gallery). Did I do this right? How can I make it look like it's not an empty gallery, and can I hide the original without causing the duplicate to be hidden?

Here's a link to the way it appears in the Category. The new gallery (which appears empty) is at the bottom of the page.

http://www.naturalphotography.smugmug.com/Family

-Melissa