[Anthony]

Anthony

#2245

I’ve recently been given the task of designing the website for a local non-profit organization. The founder told me he thinks the http://www.ymca.net website is the perfect design to emulate. I think the Graphene theme is perfect for making a similarly designed website, except that the man in charge wants to take the squared look of Graphene and give it the rounded look of YMCA.net, as well as the gradient colors changing on mouseover and while active. I don’t think the drop-down menus on that page are quite necessary, but the overall look and feel of the navigation is what I’m going for. Also, I would like to keep the navigation bar beneath the header image on my site, NOT on top like the YMCA.net site, so I won’t need to worry about making the navigation bar change places, just appearance.

Can I accomplish this by editing the sprite_h.png file, or should I hard code it in with an image map or something like that? If so, which files would I edit to accomplish this? I’m not a very advanced PHP programmer, but if I have to edit specific code, I’m capable. Any ideas or suggestions?

[HonkeyZ]

HonkeyZ

#19498

Also, on my site, I have opted to remove the top bar from the header, and moved the search box to the nav bar. I would like to keep the search bar on the right hand side of the nav bar.

[Kenneth John Odle]

Kenneth John Odle

#19499

Graphene uses the “sprite_h.png” file to generate the background for that nav. It’s repeated on the x-axis. You could probably just round off the corners of the <div> that contain the navigation bar to get a rounded look.

I have lots of rounded corners on my blog. You can see how I achieved this here:

http://blog.kjodle.net/2011/08/30/creating-a-child-theme-for-this-blog/

But you should also check out: http://www.gendji.eu/

Ken

[Kenneth John Odle]

Kenneth John Odle

#19500

BTW, the link in your profile gives a 404 message.

[HonkeyZ]

HonkeyZ

#19501

Sorry about the 404 error. That’s fixed now, if you wanted to check out the early stages of my project. Rounding off the ‘<div>’ sounds super, but I’m also referring to the mouseover and click. When I change the colors of the gradients in the sprite_h.png to more fit my color scheme, it looks incredibly blocky and unprofessional with the contrast in colors, so I’m looking to get those vertical lines in between buttons as well. Any ideas?

[HonkeyZ]

HonkeyZ

#19502

Using border-bottom-left-radius and border-bottom-right-radius works beautifully to round off that div, but now I have the problem that the area right outside of the rounded corners is evidently transparent. Any way of fixing this?

[Kenneth John Odle]

Kenneth John Odle

#19503

It depends on what you want to appear there. What do you want to appear there?

vertical lines in between buttons as well

That should be a border-left or border-right between the first level line item (

<li>) in the navigation menu. I’m playing around with this as well, so I’ll let you know if I have any luck with it.

[HonkeyZ]

HonkeyZ

#19504

OK, the CSS is starting to make more sense to me now that I really dig into it, but is there any way to get the nav bar boxes closer together? I put the vertical lines in there, but there’s about a 5 pixel gap between them.

[Kenneth John Odle]

Kenneth John Odle

#19506

Try this custom css:

#header-menu > li > a {

padding: 9px 5px 10px 5px;

}

[HonkeyZ]

HonkeyZ

#19507

http://www.fashionfeedswarmth.org/wordpress If you would like to see my end results. Kenneth, I can’t thank you enough for the jumpstart on getting me where I needed to go, and for getting me back into the groove of the whole CSS thing and thinking like a designer again! I will be back if I have anymore roadblocks! Thanks again!