Jump to content
Sign in to follow this  
17sirens

Ribbon-Effect as Navigation Bar Background?

Recommended Posts

17sirens

Hi, I wanted to recreate a ribbon-effect much like the one I see on (http://www.recipegirl.com/) in the navigation section. Is there a way for me to create a ribbon-effect like that one for my navigation bar section? Thanks, Aly 17sirens.com

Share this post


Link to post
Share on other sites
mackenzie
The ribbon in that blog (and others I have seen) is actually a PNG or JPG that is created by a web designer or someone with Illustrator/Photoshop, etc. Using FireFox and FireBug I was able to hover over it and find the information under #topnav.

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

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

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
17sirens
Hi Mackenzie, Thanks so much. My only question now would be after I make an image like that in Photoshop, what would the code be that I would need to put in the Settings>Custom CSS area so that it would work on my site? Thanks, Aly

Share this post


Link to post
Share on other sites
mackenzie
I would recommend checking out http://www.w3schools.com/css/css_background.asp which should help with the CSS format for the image. You will need to know the name of your navigation menu (#topnav for example) to use the CSS code. I also recommend FireFox with FireBug since you can look at HTML and CSS code and make changes in sandbox mode.

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

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

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
17sirens
Thanks for your help! I will try this out.

Share this post


Link to post
Share on other sites
17sirens
Hi Catrina, I made my image like Mackenzie suggested, but I'm having a hard time coding it. I tried this section: #nav .content-pad, #secondnav .content-pad { background-image: url("http://17sirens.com/wp-content/uploads/2012/02/Wrap1.png"); background-repeat: no-repeat; padding-bottom: 5px; padding-top: 5px; } and it didn't work. Is that the correct section, or did I do something wrong? Thanks much, Aly

Share this post


Link to post
Share on other sites
Danny
For this to work, you will need to change the following setting: Go to PageLines > Settings > Color Control and change from "Content Width Page" to "Full-Width Sections". Once you have done this can you reply here please.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
17sirens
Hi Danny, I changed from Content-Width Page to Full-Width Sections (although I'm not sure I like it that way without a background) but am ready to move forward. Thanks, Aly

Share this post


Link to post
Share on other sites
Rob
Aly, something on your site keeps your page cycling continuously. That's not necessarily a good thing. It could be the site counter.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
17sirens
Hi Rangelone, I checked on Safari, Google Chrome, and Firefox and this problem occurred to me only in Firefox. I removed the site counter and that fixed the problem on my end. Thanks for letting me know. Aly

Share this post


Link to post
Share on other sites
mackenzie
Let us know if you need further assistance.

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

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

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
17sirens
I am waiting for Danny to help me code it into my site. I followed his instructions to change from Content-Width Page to Full-Width Sections, and so now just waiting for the proper code. Thanks!

Share this post


Link to post
Share on other sites
Danny
Hi, Add the following code to Settings > Custom Code > CSS Rules, this will give you the basic layout, you will need to adjust your menu slightly and probably alter the text colors: [code]#site .content, #footer .content {width: 100%;max-width: 980px;} #nav .texture { background: transparent url(http://17sirens.com/wp-content/uploads/2012/02/Wrap2.png) no-repeat;width: 1020px;z-index: 99;margin: auto;height: 58px;} #nav .content {background:transparent;} #page, #dynamic-content {margin-top: -25px;}[/code] I highly recommend you use Firebug or Chromes Inspection tool, this will allow you to inspect the code of the site you wanted your menu like and allow you to use that code as a base to style your website.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
17sirens
Thanks Danny! The code worked for the image. How can I make it so the background of the navigation block is transparent so that the words just sit on the banner I made? Right now it just looks like a block. (17sirens.com) Thanks, Aly

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  

×