PDA

View Full Version : Need Customization help... let the headaches begin

Zach23
Oct-09-2008, 11:17 AM
Ok so I just got into smug mug and I am trying to design my site myself since I'm to poor to pay someone. A couple of my initial questions...

How can I do a hover over my links so that when the mouse is over them they look like this " :link: " and when it is not it looks like this " link "? I would also like to make the colons a color when present.

How do I move things around on my home page. For example I want to move my navbar so it aligns with the body, as well as align my header image with my nave bar. Much like http://www.photoscapedesign.com/

How do I get rid of all the options on the top of the page in my guestbook? http://zachmahone.smugmug.com/gallery/6181766_vxgmi
I want it to look like http://www.photoscapedesign.com/gallery/617021
Allen
Oct-09-2008, 12:04 PM
Ok so I just got into smug mug and I am trying to design my site myself since I'm to poor to pay someone. A couple of my initial questions...

How can I do a hover over my links so that when the mouse is over them they look like this " :link: " and when it is not it looks like this " link "? I would also like to make the colons a color when present.

How do I move things around on my home page. For example I want to move my navbar so it aligns with the body, as well as align my header image with my nave bar. Much like http://www.photoscapedesign.com/

How do I get rid of all the options on the top of the page in my guestbook? http://zachmahone.smugmug.com/gallery/6181766_vxgmi
I want it to look like http://www.photoscapedesign.com/gallery/617021
Welcome to Dgrin :wave

See this page (http://allen-steve.smugmug.com/gallery/3819841) for your guestbook.

See if you like this for your banner/header/nav alignment.

Change your header html to this.

<div id="my_header">

<div id="my_banner">
Place image here
</div>

<div id="navcontainer">
<ul>
<li><a href="/">home</a></li>
<li><a href="/gallery/6142604_nHq4g#386635574_qdGus">gallieries</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">sale &amp; hire</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">find</a></li>
<li><a href="/gallery/6181766_vxgmi">guestbook</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">blog</a></li>
</ul>
</div> <!-- closes navcontainer -->

</div> <!-- closes my_header -->

Here's your whole CSS, replce it all. It has the formating for the alignment incorporated.

#my_header {
height: 50px;
border-bottom: 1px solid #ccc;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0 20px;
}

#my_banner {
margin: 10px 0 10px 20px;
font-size: 300%;
font-family: Lucida Grande;
}

#navcontainer {
float: right;
margin: -30px 0; /* top/bottom right/left */
}

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

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
font-size: 100%;
font-family: Lucida Grande;
}

#navcontainer ul li a:hover {
color: #ddd;
background-color: #000;
}


#bioBox {background: none;}


/* hides the word home */
#userHome {
display: none;
}



/* hides your name (including any 's) */
#userName {
display: none;
}



#feeds {
display:none;
}


/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}


/* turn off the login link on the minifooter */
.loginLink {
display: none;
}

.gallery_6181766 .pageNav {
display: none;
}

When you get a banner photo come back and we'll show you how to add it
in place of the text.
Zach23
Oct-09-2008, 02:38 PM
Thanks Allen. The alignment looks good for now. I will want to bring it in tighter eventually.

As far as the guestbook is concerned I already have a functioning one, however I need to get rid of (share, slideshow, view cart, buy) buttons as well as the Zachmahone > Guestbook > guestbook text. As well as the Style drop down.

I made my banner photo and am now ready to get it on the site. Let me know what I need to do or point me in that diresction.


My next big help is my gallieries link.... The way I want it to work is Gallieries links to categories (EX Music, Weddings, Animals, Children, etc) Then I want to categories linked to specific gallieries... From what I read so far this is pretty complicated....
Allen
Oct-09-2008, 04:23 PM
Thanks Allen. The alignment looks good for now. I will want to bring it in tighter eventually.

As far as the guestbook is concerned I already have a functioning one, however I need to get rid of (share, slideshow, view cart, buy) buttons as well as the Zachmahone > Guestbook > guestbook text. As well as the Style drop down.

I made my banner photo and am now ready to get it on the site. Let me know what I need to do or point me in that diresction.


My next big help is my gallieries link.... The way I want it to work is Gallieries links to categories (EX Music, Weddings, Animals, Children, etc) Then I want to categories linked to specific gallieries... From what I read so far this is pretty complicated....
Remove the red from your nav hrml, the font type and size is now covered in your CSS.


<div id="navcontainer">
<ul>
<font face="Lucida Grande" size="2">
<li><a href="http://www.zachmahone.com/">home</a></li>
<li><a href="/gallery/6142604_nHq4g#386635574_qdGus">gallieries</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">sale &amp; hire</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">find</a></li>
<li><a href="/gallery/6181766_vxgmi">guestbook</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">blog</a></li>
</font></ul>
</div><font face="Lucida Grande" size="2"> <!-- closes navcontainer -->

</font>
</div>
<font face="Lucida Grande" size="2"> <!-- closes my_header -->
Covered in this in your CSS

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
font-size: 100%;
font-family: Lucida Grande;
}
Guestbook gallery
Set the style under customize gallery to journal to hide the stylebox. Also
under there set printing to no, check no for sharing and add this to your
CSS.

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

This might help with your banner. Your CSS will probably need to tweaked
depending on the banner size.

CSS to define image and format banner if using a transparent png

#my_banner {
width: 750px;
height: 100px;
margin: 0 auto;
background: url(/photos/xxxxxxxx_xxxxx-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingmethod=image, src='/photos/xxxxxxxx_xxxxx-O.png');
}

or if using a jpg

Banner using jpg.

#my_banner {
width: 750px;
height: 100px;
margin: 0 auto;
background: url(/photos/xxxxxxxx_xxxxx-O.jpg) no-repeat;
}

Creating a gallery page is easy, cut and paste. Go to this tutor (http://dgrin.smugmug.com/gallery/2160039) and scroll
down to "The Gallery Page" sections and add the js and CSS.

Set your gallery box to "display by category".

Your navbar link would be like this.

<li><a href="/gallieries">gallieries</a></li>

Have you been to this slideshow tutor yrt?
http://dgrin.smugmug.com/gallery/3624147
Zach23
Oct-09-2008, 04:59 PM
I put the following code in my CSS and it didn't do anything. So I put it in the Header Html where I had " image goes here" and it didn't work either.

Then when i took the code out none of my links work now. I feel like I'm going backwords.....


CSS to define image and format banner if using a transparent png

#my_banner {
width: 750px;
height: 100px;
margin: 0 auto;
background: url(/photos/6191281_vya8h-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingmethod=image, src='/photos/6191281_vya8h-O.png');
}


Banner using jpg.

#my_banner {
width: 750px;
height: 100px;
margin: 0 auto;
background: url(/photos/6191281_vya8h-O.jpg) no-repeat;
}
Allen
Oct-09-2008, 06:33 PM
I put the following code in my CSS and it didn't do anything. So I put it in the Header Html where I had " image goes here" and it didn't work either.

Then when i took the code out none of my links work now. I feel like I'm going backwords.....

...
You lost some of your header html, this is the whole thing.
I also had the galleries link spelled wrong, fixed in this.

<div id="my_header">

<div id="my_banner"></div>

<div id="navcontainer">
<ul>
<li><a href="http://www.zachmahone.com/">home</a></li>
<li><a href="/galleries">galleries</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">sale &amp; hire</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">find</a></li>
<li><a href="/gallery/6181766_vxgmi">guestbook</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">blog</a></li>
</ul>
</div> <!-- closes navcontainer -->

</div> <!-- closes my_header -->

I think your galleries are hidden in your control panel. Go there under the
homepage and and click "show" for them.

Your banner photo doesn't show here, make sure external links are on in it's
gallery and its not checked "hide" and originals are checked.
http://zachmahone.smugmug.com/photos/6191281_vya8h-O.png
Zach23
Oct-09-2008, 06:47 PM
You lost some of your header html, this is the whole thing.
I also had the galleries link spelled wrong, fixed in this.

<div id="my_header">

<div id="my_banner"></div>

<div id="navcontainer">
<ul>
<li><a href="http://www.zachmahone.com/">home</a></li>
<li><a href="/galleries">galleries</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">sale &amp; hire</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">find</a></li>
<li><a href="/gallery/6181766_vxgmi">guestbook</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">blog</a></li>
</ul>
</div> <!-- closes navcontainer -->

</div> <!-- closes my_header -->
I think your galleries are hidden in your control panel. Go there under the
homepage and and click "show" for them.

Your banner photo doesn't show here, make sure external links are on in it's
gallery and its not checked "hide" and originals are checked.
http://zachmahone.smugmug.com/photos/6191281_vya8h-O.png


I pasted that code into my header html and is didn't seem to work. Infact it looks like it move the whole nave bar for the worse :(

I did show my gallery page that helps.

does thins link ? http://zachmahone.smugmug.com/gallery/6191281_vya8h/1/390459941_xQ95w/Large work for you? Its my banner
Allen
Oct-09-2008, 07:24 PM
I pasted that code into my header html and is didn't seem to work. Infact it looks like it move the whole nave bar for the worse :(

I did show my gallery page that helps.

does thins link ? http://zachmahone.smugmug.com/gallery/6191281_vya8h/1/390459941_xQ95w/Large work for you? Its my banner
Replace these in yoru CSS with below.

#my_header {
height: 93px;
border-bottom: 1px solid #ccc;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0 20px;
}

#my_banner {
width: 332px;
height: 93px;
margin: 5px 0; /* top/bottom right/left */
background: url(/photos/390459941_xQ95w-O.jpg) no-repeat;
}
Zach23
Oct-09-2008, 08:19 PM
Allen your a lifesaver. I put that code in and everything worked perfectly

Now.... lol

How do I hide the "guest book" and "other" galleries so they don't show up on the site.?

How do I disable the right click for the entire site?

Where is my banner's dimensions in the code? I'd like to make a little smaller as well as move towards center a little.

Also how can I put little blue squares in between my links similar to this page. http://www.photoscapedesign.com/ I also would like to bring the nav links to the left a little - (bring blog over to where find is) As well as bring all the links closer together...

Id also like to link my banner to my homepage how do I do that?

Thanks for all your help!!!