PDA

View Full Version : Newbie looking for help please

hogfaninga
Jan-31-2009, 02:18 PM
I have been looking at this site for the past week and decided to join. I just got me a new Smugmug (Power account). I want to create a website as a present to my wife for our photos. I want it to be mostly basic without all the Smugmug stuff at top. I saw this Smugmug site that I like: http://soloshots.smugmug.com/. I don't know if that is too hard to do or just get the code and plug in my info. Problem is I don't know how to do it.

My website address is:

www.williamsphotography.me
www.williamsfamilyphotography.smugmug.com

I have tried copying and paste code on here, but it doesn't work for me. I'm a slow learner on things like this.

Anything you can do to help me will be appreciated. If that one I like is too hard please help me with a simpler one.

Thanks,

Chris
jfriend
Jan-31-2009, 05:17 PM
If you follow this tutorial (http://dgrin.smugmug.com/gallery/2160039) and the banner you create is the right size for the layout you want, it will get you 75% of the way there. Then, post back to this thread (so I see it) and I can help you with the last bit of CSS to get it to look like the site you referenced. If you get stuck somewhere, just post here and we'll make this thread about helping you get your site the way you want it.
hogfaninga
Jan-31-2009, 08:51 PM
If you follow this tutorial (http://dgrin.smugmug.com/gallery/2160039) and the banner you create is the right size for the layout you want, it will get you 75% of the way there. Then, post back to this thread (so I see it) and I can help you with the last bit of CSS to get it to look like the site you referenced. If you get stuck somewhere, just post here and we'll make this thread about helping you get your site the way you want it.

Thanks for that link. I had a lot of time tonight and I did it. It is a major improvement. What else do I need to do to make it similar to the site I linked above?

BTW when visitors click on the Galleries button they see the About Us, Favorite Photos, and Guestbook page. I would like it where they can't see it in the Galleries forum, but have to click on it from the link below the banner on the home page. Plus I don't like how it says Williams Photography's Home on the home page below the links on it.

Thanks for everything.

Chris
jfriend
Jan-31-2009, 09:09 PM
Thanks for that link. I had a lot of time tonight and I did it. It is a major improvement. What else do I need to do to make it similar to the site I linked above?

BTW when visitors click on the Galleries button they see the About Us, Favorite Photos, and Guestbook page. I would like it where they can't see it in the Galleries forum, but have to click on it from the link below the banner on the home page. Plus I don't like how it says Williams Photography's Home on the home page below the links on it.

Thanks for everything.

Chris

Here's what I would suggest. Change all of your custom header to this:

<div id="myHeader">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/7242876_Cc79U">About Us</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/7242965_PwMcd">Favorite Photos</a></li>
<li><a href="/gallery/7242896_caaeG">Guestbook</a></li>
</ul>
</div>

<div id="myBanner">
<h2>Williams Photography</h2>
</div>
</div>

Then, add this to your site-wide-customization CSS:

#myHeader {
position:relative;
margin: 10px 0 20px 15px;
border-bottom: 1px solid #777777;
padding-bottom: 3px;
font-family: Segoe Print;
font-variant: small-caps;
}
#myBanner h2 {margin:0; font-size: 275%;}
#navcontainer {position:absolute; right:15px; bottom:5px;}
.homepage #breadcrumb {display:none;}

Then, replace these two blocks of CSS with these changes:

#navcontainer ul li a {
text-decoration: none;
padding: .10em 0.3em;
color: #FFFFFF;
font-size: 110%;
}

#navcontainer ul li a:hover {
color: #888888;
}

That should get you this:
http://content.screencast.com/users/jfriend/folders/Jing/media/9996ba9b-5b55-4825-8b43-0152ff7409c1/2009-01-31_2217.png

At some point in the future, if you want to get fancy, you can substitute a graphic in place of the Williams Photography text where you use fancier fonts or some graphics design.
hogfaninga
Jan-31-2009, 09:25 PM
Everything worked besides the very last change you made which I liked.

Thanks for helping me.
jfriend
Jan-31-2009, 09:29 PM
Everything worked besides the very last change you made which I liked.

Thanks for helping me.

I couldn't tell from your last post. Is there still a question you have? Or are you cool with what you have?
hogfaninga
Jan-31-2009, 09:35 PM
I couldn't tell from your last post. Is there still a question you have? Or are you cool with what you have?


The last part of your code didn't work for me.
#navcontainer ul li a {
text-decoration: none;
padding: .10em 0.3em;
color: #FFFFFF;
font-size: 110%;
}

#navcontainer ul li a:hover {
color: #888888;
}

I liked how you made the words on the home page have italics. I guess that is what that code was for, but it didn't work for me. Your example looks a little different than my actual page. Can you help me with that?

Thanks again.
jfriend
Jan-31-2009, 09:43 PM
The last part of your code didn't work for me.
#navcontainer ul li a {
text-decoration: none;
padding: .10em 0.3em;
color: #FFFFFF;
font-size: 110%;
}

#navcontainer ul li a:hover {
color: #888888;
}

I liked how you made the words on the home page have italics. I guess that is what that code was for, but it didn't work for me. Your example looks a little different than my actual page. Can you help me with that?

Thanks again. I may have been editing my posting while you were copying from it.

Change this last part of your CSS:
#myHeader {position:relative; margin: 10px 0 20px 15px; border-bottom: 1px solid #777777; padding-bottom: 3px;}
#myHeader h2 {margin:0;}
#navcontainer {position:absolute; right:15px; bottom:5px;}
.homepage #breadcrumb {display:none;}

to this and it should end up like the screen shot:

#myHeader {
position:relative;
margin: 10px 0 20px 15px;
border-bottom: 1px solid #777777;
padding-bottom: 3px;
font-family: Segoe Print;
font-variant: small-caps;
}
#myBanner h2 {margin:0; font-size: 275%;}
#navcontainer {position:absolute; right:15px; bottom:5px;}
.homepage #breadcrumb {display:none;}
hogfaninga
Jan-31-2009, 09:47 PM
Thank you so much. It worked perfectly. I can't tell you how much I appreciate all you did. If you can think of anything else please let me know.

Thanks again,

Chris
jfriend
Jan-31-2009, 09:57 PM
Thank you so much. It worked perfectly. I can't tell you how much I appreciate all you did. If you can think of anything else please let me know.

Thanks again,

Chris

To fix up your guestbook and contact pages, first make the following changes in the customize gallery screen for each gallery:

Turn off printing
Turn off easy sharing
Turn off comments (leave them on in guestbook if you want people to leave comments)Then, add this CSS:

.gallery_7242896 .pageNav,
.gallery_7242896 #breadcrumb,
.gallery_7242876 .nophotos,
.gallery_7242876 #breadcrumb {display:none;}
J Allen
Feb-01-2009, 05:22 AM
Here's a few things also.......






/*====About Us Page====*/
.gallery_7242876 #albumNav_top,
.gallery_7242876 #albumNav_bottom,
.gallery_7242876 .nophotos h3,
.gallery_7242876 .pageNav
{display: none;}
.gallery_7242876 .journal_entry {border: none;}
.gallery_7242876 #journal img.imgBorder,
.gallery_7242876 #journal img.imgBorderOn {
border-width: 0px;}
.gallery_7242876 #journal .photo.right {
cursor: auto;}
.gallery_7242876 #journal .photo a {
cursor: auto;}
.gallery_7242876 #journal .photo img {
cursor: auto;}


/*====Guestbook Page====*/
.gallery_7242896 #albumNav_top,
.gallery_7242896 #albumNav_bottom,
.gallery_7242896 .nophotos h3,
.gallery_7242896 .pageNav
{display: none;}
.gallery_7242896 .journal_entry {border: none;}
.gallery_7242896 #journal img.imgBorder,
.gallery_7242896 #journal img.imgBorderOn {
border-width: 0px;}
.gallery_7242896 #journal .photo.right {
cursor: auto;}
.gallery_7242896 #journal .photo a {
cursor: auto;}
.gallery_7242896 #journal .photo img {
cursor: auto;}







Put this in your Bottom java-script:




function ModifyText ()
{
if (YD.hasClass(document.body, "gallery_7242896"))
{
var objElement = YD.get("comment")
if (objElement != null)
{
var str = new String(objElement.innerHTML);
str = str.replace(/\gallery/gi, 'Guestbook');
objElement.innerHTML = str;
}
}
}









YE.onAvailable("comment", ModifyText);


function doOnLoad() {
if (window.AlbumID && (window.AlbumID == "7242896" || window.AlbumID == "7242876"))
//
removeLinkFromImg();
}

function removeLinkFromImg()

{

var links = document.getElementsByTagName("A");

for (var i = 0; i < links.length; i++)

{

var link = links[i];

var divElm = link.parentNode;

if (!divElm)

continue;

divElm = divElm.parentNode;

if (!divElm)

continue;

if (divElm.className.indexOf("photo")<0)

continue;

link.href = "javascript:void(0);";

}

}
hogfaninga
Feb-01-2009, 10:02 AM
Thank you both so much. If you have the time check my site out and tell me if you think there needs to be any changes. Right now it looks nice, but you guys are better at knowing what is nice or not.

Also is there anyway I can get rid of some of the Smugmug links at the bottom of each page? I know they require you to have it there, but does it have to be so big with so many links?