Jump to content
Sign in to follow this  
gokayak1

How to use an image as the buttons in navigation.

Recommended Posts

gokayak1

I have seen posts on how to change the color and gradient of navigation buttons but I would love to know how to do the navigation buttons like this site in the featured showcase. http://colombiaholidays.com I am tired of doing sites with rectangle buttons. The green ribbons are great. Anyone know how to do it? My new site only has a few key pages so I could do it with boxes this time, but I want to be able to do it for deeper sites like this one.

Share this post


Link to post
Share on other sites
Rob
That would require a level of customization greater than we can provide here in the forums. One of our pros could easily help you though. Please write to hello@pagelines.com and ask for Pro Help. We'll be happy to assist at that level.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Martin Bay
Can't figure what buttons you talk about :) but to add an images in stead of text add something like this to the functions.php [code]add_filter('continue_reading_link_text', 'more_function'); function more_function($more_function){ return ''; }[/code]

Share this post


Link to post
Share on other sites
gokayak1
Thanks for the suggestion. I am talking about the green flags that hang down on http://colombiaholidays.com. I have used boxes containing images with links attached and placed in the header section as a workaround. I just can't have dropdowns or more than 6 links doing it that way.

Share this post


Link to post
Share on other sites
Rob
@gokayak1 What's your site? May we have a link? The green ribbons are a background image set on active state. When you actually navigate to one of the links, that background appears and remains there until you navigate elsewhere outside that group. The drop down menu is set with a semi-transparent background. The padding of the menu is key to allowing room for the green flags. The submenu opacity (transparency) is within a div that includes rounded corners. Is your limit of 6 due to some technical reason or that they bleed off the page? Here are some links that will help you. http://www.w3schools.com/css/css_background.asp http://w3schools.com/cssref/css3_pr_opacity.asp http://www.w3schools.com/css/css_image_transparency.asp

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gokayak1
Thanks rangeone. The site I am/was working on is affordabletankrentals.com. I was limited to 6 as I understand that is the max number of Boxes you can have in a row. Thanks for your input. In the end it looks like a little too much heavy lifting for me.

Share this post


Link to post
Share on other sites
Rob
I think you'd find any more than 6 in a row would squeeze each box quite tight because there's padding around each. They'd look pretty bad if they're very narrow. Very nice site by the way!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×