Alright, so I have a question. How do I make a header exactly like the one on this site (www.notyouraveragescene.com)? The only thing I'd like different would be my itssurreal logo.

Here is my SmugMug right now: itssurreal.smugmug.com (or www.itssurreal.com)

What's important to me is to get a simple, yet clean look. I feel that this header achieves that.

So to lay this out a little more...

1) How do I create a header with my logo and navigation buttons?

2) How do I create a contact page (like the one on the NYOS site)?

3) How do I change the highlight color on said navigational header?

-----------------------------------------------------------------------

Also, as a sort of side-request...

How do I create a slideshow-er like the one this photographer has? I really dislike the SmugMug grey box thingy around my current slideshow.


Thanks,

Nick/BigK

Okay, so I just tried the JFriend HTML5 Slideshow, and it works great! Only problem is that my photos are TINY! Anyone mind sharing ideas on how to make 'em bigger?

Originally Posted by BigK Okay, so I just tried the JFriend HTML5 Slideshow, and it works great! Only problem is that my photos are TINY! Anyone mind sharing ideas on how to make 'em bigger?

Your header is quite large. The slideshow photos are being scaled as large as possible without causing scrolling. If you want larger photos, you'll need to give them more room by making your header a lot smaller (it takes up almost half the screen on my laptop). In a nutshell, you have to decide what's the most important on your homepage, your banner or your photos and allow the important one to be large by making the less important one smaller. The same comment applies to your galleries too.

Alright, well I resized the logo... I didn't realize it was that big. Yikes! For whatever reason I uploaded the 300dpi version... rookie mistake! Anyway, the photos still look WAY small to me. (?)

Originally Posted by BigK Alright, well I resized the logo... I didn't realize it was that big. Yikes! For whatever reason I uploaded the 300dpi version... rookie mistake! Anyway, the photos still look WAY small to me. (?)

What are you looking for. This is what I see on my laptop:

This is how I see it.



This is how I'd like to see it:

Originally Posted by BigK This is how I see it.

You have a very, very wide screen (more than 2x wider than tall). What would you like to have happen? Images can only be scaled proportionally (or they look horrible). If your images were scaled larger, they would no longer fit vertically and would either require scrolling or be clipped on top/bottom.

If you want them to expand to fill left/right and consequently clip on the top/bottom, you can set the superSize: "true" parameter for the slideshow. There are diagrams and explanation of the superSize parameter in the reference documentation for the slideshow.

Well I guess the big thing is that I was wondering if there is a way to set it up where it's "x" pixels away from the edge of any/all screens. So that it doesn't look as "right" on all computers.. if that makes sense.

To expand on that, I was wondering if I could set it up to where the left, right, top, and bottom are all in a fixed position in comparison to the edges of the screen so that when I minimize my window, or view my site on a computer with a smaller screen it looks proportionally the same.

Originally Posted by BigK Well I guess the big thing is that I was wondering if there is a way to set it up where it's "x" pixels away from the edge of any/all screens. So that it doesn't look as "right" on all computers.. if that makes sense. To expand on that, I was wondering if I could set it up to where the left, right, top, and bottom are all in a fixed position in comparison to the edges of the screen so that when I minimize my window, or view my site on a computer with a smaller screen it looks proportionally the same.

Here's the puzzle for you to solve. It's a geometry problem. Your images are a given aspect ratio (height/width). A browser window is a random aspect ratio (every one is different). My laptop browser window is basically square. Your browser window is more than 2x wider than tall. How do you possibly make a single aspect ratio image match all possible browser windows is could be put in?

You can try the superSize: "true" parameter and see if you like it. It will do what you want, but at the cost of clipping one dimension of the photo a bit (depending upon how much of a mismatch the browser window aspect ratio is to the photo aspect ratio).

Hmm...I'll try both and see what I like. Hey, I really appreciate the help by the way. It really means a lot to me!

Now for the header... How do I make a nice, crisp header like that? Like with the line, and the flatness? I apologize for all of the stupid questions, this sort of stuff is WAY new to me.

Also... is there a way with the slideshow to make it just fade from one picture to the next? I'm not a huge fan of how it changes how the picture changes... (ex: photo 1: wipe, photo 2: fade, photo 3: spin away, etc...)

Originally Posted by BigK Also... is there a way with the slideshow to make it just fade from one picture to the next? I'm not a huge fan of how it changes how the picture changes... (ex: photo 1: wipe, photo 2: fade, photo 3: spin away, etc...)

It's all in the reference documentation for the slideshow. You can control which transitions are used. If you only want fade, you can specify that.

Originally Posted by BigK Hmm...I'll try both and see what I like. Hey, I really appreciate the help by the way. It really means a lot to me! Now for the header... How do I make a nice, crisp header like that? Like with the line, and the flatness? I apologize for all of the stupid questions, this sort of stuff is WAY new to me.

Make a very short banner (less than 50px high - mine is 31px high). Put that in your header. Adding the line under it is one line of CSS once you've done that.

How do I put it in my header without removing my logo? Also, what CSS do I need to create the line? I know literally nothing about this..

Also, what I like about the site that I posted earlier specifically in regards to the photo slideshow viewer-thing, it's a fixed size. Is that possible with the HTML5 thing?

Originally Posted by BigK Also, what I like about the site that I posted earlier specifically in regards to the photo slideshow viewer-thing, it's a fixed size. Is that possible with the HTML5 thing?

Yes, the JFriend HTML5 slideshow can be a fixed size. It's all described in the tutorial and reference documentation.

Sweet! I got it to work! Thanks, John!

...Now I'm back to trying to figure out the header/top-navbar-thingamajig. I'm cruising around with the sites search feature to see if I can find anything, because I still can't get it to align right or anything. :/

Originally Posted by BigK Sweet! I got it to work! Thanks, John! ...Now I'm back to trying to figure out the header/top-navbar-thingamajig. I'm cruising around with the sites search feature to see if I can find anything, because I still can't get it to align right or anything. :/

I can't follow what you're asking about the header/top-navbar-thingamajig. If you want to try a fresh description of what you want to change or what you're trying to accomplish, I can take a look. I didn't answer that before because I didn't understand what you were asking.

Also, please add a link to your site to your dgrin signature so it's automatically in every post and people don't have to find it in some previous post.

Okay, a fresh desciption... here we go.

I would like my header/nav-bar to be like the one listed in this photo:



I would like it to be fixed at the top. Logo in the left. With the navigational options to the right that light up when hovered over. I would also like to add the dividing line underneath because I think it is neat and helps break up the page.

Link to the page: www.notyouraveragescene.com

Originally Posted by BigK Okay, a fresh desciption... here we go. I would like my header/nav-bar to be like the one listed in this photo: I would like it to be fixed at the top. Logo in the left. With the navigational options to the right that light up when hovered over. I would also like to add the dividing line underneath because I think it is neat and helps break up the page. Link to the page: www.notyouraveragescene.com

Add this CSS to get the line under it and tweak the spacing:

#customHeaderContainer {border-bottom: 1px solid #FFF; margin: 0 15px; padding: 0;}
#customLogo {font-size: 12px !important;}

It looks like you already have logo on left, navbar on right.