Code

Discussion on CSS3 Ribbon Pack

Discussion on CSS3 Ribbon Pack

Cart 822 sales

cosmocoder supports this item

Supported

51 comments found.

Please look at this url and tell me why the before and after spans are not working.

http://www.tibetskyvillage.org/

I believe it has to do with z-index. But when I change the z-index. then I can’t get the tails behind the banner.

Thanks for purchasing!

The tails of the red ribbon are not showing because they are going behind the parent container. Give the parent container a z-index (zero will do), and don’t forget to set position relative on the parent container.

The ribbon for the menu has a missing tail on the left because you seem to have removed the relevant piece of code while editing.

This thing is more problem than it is beneficial. Too much effort just to make it work. I am just going to stick to css classes using images for my ribbons for now. May give it a go later, but right now it is not worth my time.

The Ribbons are very easy to use, you just have to place a few class names to get the ribbon of your choice.

Nice pack, thanks. IE9 displays a “IE restricted this page from running scripts…” warning and no gradients when I load it locally from the file. If I “Allow Blocked Content” locally then IE9 displays the gradients.

However, I can’t get IE9 to display the gradients when loaded from a website.

Any tips?

Thanks for purchasing

IE9 needs CSS3 PIE to display css gradients. This htc file will not be loaded by IE9 if your server does not provide the correct mime-type. All this has been explained in the documentation where you will find the correct mime-type to use.

Thanks for the quick reply, Nilok. I looked but missed the detailed docs you included in the /readme/index.html file. Very nice.

How do I use these in Dreamweaver? Can I install them as an extension?

How can I cut the width in half, for the normal left-corner wrap ribbon, there are so many style rules. I just want the height from 40px to 20px and it is just not happening for me

Replied to your email.

Can i use these on wordpress blogs?

Yes you can. Just include the ribbon css files and add the relevant html code to your page.

How to change location? It jump from the actual place to top!

Set “top” position in the css according to your needs.

Best approach for integrating these into Wordpress? They display just fine outside of WP. Have tried importing Stylesheet into theme using @import, but still getting wonky results. I can provide more info, of course, but didn’t know if there was a best practice for this already. Thanks !

Thanks for purchasing!

You of course have to include the ribbon css file in the page. Take care to have the proper path to the ribbon css file. Look up the WP Codex on how to include css files. Then you will need to apply the appropriate ribbon html in your page.

some update soon for the firefox problem? nice ribbons!

I am working on it. It will take some time.

I have updated the ribbons where the Firefox problem has been fixed. The update is now available for download.

Hello cosmocoder,

I understand you are busy, but wait for a month for me is a long time.

Later a bit research I found how fix:

in definition: .right-corner > span:before { replace -moz-transform: skew to -moz-transform:skewX

in definition: .right-corner > span:after { replace -moz-transform: skew to -moz-transform:skewX

you can replace the other similar definitions.

I hope this help.

RunFer

I was already aware of this. It may have solved the problem for you for a particular ribbon, but for other ribbons more tweaks are needed to get them to display correctly, so that’s why I need time.

I have updated the ribbons where the Firefox problem has been fixed. The update is now available for download.

Bookmark saved to collection ‘My Private Bookmarks’ —Waiting updates, good product! :)

We are using this on one of our websites and an ex employee bought it under their account. Now that there are issues under FF 14 , I’ll need the fix. Please let me know how I can best get your fix when you have it.

Thanks very much.

Check the item page regularly for updates. I will also give a reply to this comment when the update is available. But you will have to download the package from the account from which it was purchased. I cannot give the updated package to you directly.

Once you have a fix, I’ll just purchase it again. Thanks. Do you have a timeframe in mind?

I will work on the fix whenever I find time. It may take a month.

Hello cosmocoder,

Please send email when we can download the fixed version.

Thank You Very Much

I have updated the ribbons where the Firefox problem has been fixed. The update is now available for download.

Hi,

With the new Firefox 14 not working fine. :-(

Thanks for purchasing!

I also noticed the problems now that you mention it. Newer versions of Firefox have changed the implementation of CSS Transforms and also has some bugs. I will look into it and try to release a fix as son as possible.

Hi Cosmocoder,

I'm having trouble with though is that whenever I have a hanging-ribbon with a stitch, my gradient does not work.  Any ideas?

Btw, I really like your css3 plugin and it’s a hundred times better than the CSS3 ribbon generator that I was using before!

Here are a couple screenshots of the ribbon :

http://www.designwell.co/ddf/sh1.png http://www.designwell.co/ddf/sh2.png

Thanks for purchasing!

Have you edited the ribbon CSS code? If you have then that maybe the cause. Also what browser are you using?

Not yet, but it looks like my gradients stop at the pointy parts when I add in the stitch class. It is working on the demo though, so I’m thinking it’s just some conflict with something else on my site.

Also, the large left/right curl effect for hanging ribbons is working, but the small and medium, left-curl and right-curl, aren’t rendering correctly ( for Chrome , it works on FF ). It looks like the curled side doesn’t create a point and doesn’t curl.

I’m using Chrome + FF :]

Please provide a link to your page.

Hi, thanks for these brilliant ribbons! I can’t wait to use them. I’m actually really new to making websites and was wondering how I actually use the downloaded files. I don’t even know where to upload this to. I work with wordpress and use plugins which are pretty straightforward. Can you tell me where I should upload the folder I downloaded from you to use the code from your readme page?

Please help, thanks!

Thanks for purchasing!

You don’t actually have to upload any files but instead use the ribbon html/css code in your existing page. If you have no idea about html/css then it is better to hire a web developer to do it for you.

Excellent item! Well worth the money. Comprehensive documentation, easy to implement. I even used it to help create my image preview! :-)

Thanks for purchasing! I am glad to know that you like the item. Also nice use of ribbons in your item preview image.

Thanks! ;-)

I noticed that IE9 shows the crease as well. Have you checked this? I really want to use the ribbons.. I hate being bound to IE, but I am due to it’s ongoing usage.

Please let me know.

I just checked the wrapping ribbons in IE9 , and they show up well. I see no creases. You can contact me through my profile page about this problem and give me a link to your page.

Wonderful styling here..

Any updates on the IE issue with wrapping ribbons? I’m referring to the crease going down the center.

Unfortunately, IE seems to be hanging in there for a while.. It’s a shame Microsoft can’t catch up.

Thanks for purchasing!

IE8 and below cannot render the corner wrapping ribbons properly like the modern browsers. I have tried to ensure that this browser gets an acceptable fallback.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey