Discussion on Elitepack Classic CSS3 Pricing Tables and Boxes

arrowthemes

arrowthemes supports this item

Supported

This author's response time can be up to 1 business day.

42 comments found.

Hi

I use Thesis Theme framework on WP. Will this pricing table be easy to implement on a page?

Thanks

Hi ProSpirity,

Thanks for your interest. Well, easy is relative. I would say since it’s not a Wordpress plugin, it won’t be a set and view, or drag and drop scenario. You may have to add the tables by short codes manually seeing that its pure HTML /CSS3.

Hope that explains.

Regards, Joel

Works on wordpress?

Very Good Work, i love it, works perfect on wordpress :D

Good job.

edit: rated 5 stars :)

muito obrigado! :D

Portuguese? Nice, Obrigado eu ;)

Hi, I did purchase your table. It is great! I have embed it in to WP but now I got a some problems and I hope you could help me. For some reason I get a border around the image when hovered over in Chrome (with css3 transitions) I tried to add price-col:hover img {border:none} but doesn’t help. Also is there any way to add height to the details column, so when it in hovered state it will cover everything underneath? Because in 2 columns I have not enough content to cover whole column below and it looks odd. This is a link to my table http://creative-business-academy.com/details-table/ Thank you

Hi,

1. Looks like its a known bug with chrome. You can check on a possible solution here:

http://stackoverflow.com/questions/5078186/webkit-transform-rotate-pixelated-images-in-chrome

2. You could set the height of the last section to a large size e.g. .details .call-action {height: 500px}

Thanks, Joel

Thank you for your speedy reply:) Works just perfect:)

You’re welcome.

Hello

I purchased your code however, I cannot get it work in WP. I know this is not a plug in but I tried to implement the css in the WP theme but it does not work. Do you mind if you help me with this? I really appreciate it. http://medicalcannatimes.com/MCT/add-your-business/

Hi,

I think the problem is that the pricing css is wrongly placed in your theme. I’m getting a ‘403 Forbidden’ error when I try to locate http://medicalcannatimes.com/wp-content/themes/medicalcannatimes/css/pricing-tabled-light.css

Could you check where you’ve placed the css to ensure it is in the css folder of the theme.

regards, Joel

Hi

How difficult is it to change the colors ?? I am looking for a more brighter green. The green theme attached is too dark.

Hi,

Thanks for your interest.

The colors are gradients that you can easily change. The way you’d do it is:

  1. identify the class you want to change (in this case .green)
  2. using this online tool import from css and paste the css gradient there
  3. you can then adjust the hue/saturation of the color to your preference.

regards, Joel

Hi Joel

Thanks for the help and how to. Much appreciated. Will be purchasing sometime today.

Regards, Moosa

Your welcome, Moosa.

Thanks too :)

Hi Joel

I sent you an email with some questions.

thanks, Moosa

I’ve replied to your email.

Thanks, Joel

How do I make the entire “frame/div/table/tab” clickable, and not just the small signup button?

You already have a’ cursor:pointer;’ on the div, which makes visitors think it’s clickable, which it is not. How do I fix that?

Hi,

In your respective pricing table css search for the class .price-col and remove the following code: cursor: pointer;

regards, Joel

Ye, but how do I make the entire block clickable?

This does not work:

.divclick { position:absolute; top:0; left:0; width:100%; height:100%; }

Then adding this link in the end of each div:

Any suggestions?

Hi,

You cannot make the whole area clickable as this will break the w3 validation rules; The only way to make it clickable will only violate this rule: you cannot put a div within an a tag but if validation is not a priority for you then you can place your .price-col div within your a tag.

Please note I can’t emphasize enough that this is not good practice and may cause other unexpected behaviors.

regards, Joel

using the class “price-col” did not work :(

sending you a PM, hope thats ok :)

Responded to your PM :)

Thanks,

To the ones interested; It’s not possible to make the entire div clickable.

You’re welcome :)

I actually found a solution, just wanted to post in case someone else needs it. Add this onclick JS to the main div:

<div class="price-col first" onclick="window.location = 'url_to_page_here'" />

Thanks for sharing :)

Hi Can this be implement in Yoo warptheme,

Thank you

I should think so owing to the fact that its purely html and css. Haven’t tried it though but it should work with no or minimal tweaks.

regards, Joel

I have a problemm with install the plugin. When I will upload & install the file he said: found no plugin.

I use a Wordpress CMS . What to do?

Thanks,

Hi Wixit,

Since this is simply CSS and not a wordpress plugin you cannot install it under plugins. What you can do (and what others have done) is add the css you find in the download pack to your wordpress theme CSS or custom css then add the markup to create pricing tables in the wordpress editor.

Sorry for the confusion.

regards, Joel

Hi Joel,

That was a miscommunication.

Can you help me? Where should I extract the files? There are two folders with CSS . One in /wp-includes and one in /wp-admin.

And then? Can I choose which pricing table in Wordpress I can use?

Thanks,

Hi,

Sorry, I think you misunderstood what this set of pricing tables is meant for. This is are pure CSS tables and not wordpress plugin so you can not extract them to a wordpress folder like wp-includes and edit/pick the choice that you want in wp dashboard.

The way you can have it work for wordpress (and what other people have done to make it work) is extract the content to a local folder, within you’ll find css folder that has the different pricing table styles. Copy the content to the bottom of your style.css of your wp theme. Then, follow the documentation on how to create the correct html markup in wp editor for the number of pricing columns that you want.

If you’d want pricing tables that work within wordpress the correct category is http://codecanyon.net/category/wordpress/miscellaneous.

I hope that clears any miscommunication.

regards, Joel

Is there a way to change the animation on the animated pricing boxes. I see the code is this;

-webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); }

what if I wanted to simply make the image slide down 20-30 pixels on the mouse-over, and then slide back up on the mouse out?

Any suggestions?

Hi dabomb,

Yes – you can actually do that using the following code:

.price-col:hover img{
-webkit-transform: translate(0, 3em);
-moz-transform: translate(0, 3em);
-ms-transform: translate(0, 3em);
-o-transform: translate(0, 3em);
transform: translate(0, 3em);
}

regards, Joel

Hi,

Are these responsive?

Cheers

Hi,

No, they aren’t.

regards, Joel

I’ve just bought this, but it isn’t easy to integrate at all. The classes used for the tables are not named very well, which means I have to rename it all!

What you could do about that is load the pricing table as the last stylesheet in the head section of your site. I did try doing what you suggested, and trust me, its got more unexpected behaviour than loading the css as the last stylesheet.

regards, Joel

“Simple to implement”...

I expect to be able to put in my data without having to mess around with stylesheets, else I might as well design it myself instead of paying $4.

I trust you will refund my account for this purchase.

Did you follow my guideline on adding it at the end of your css stylesheet list? Other buyers, authors and I have used them and implemented it in our templates and I haven’t had a complaint that its hard to implement. Moreover I’m always willing to give you snippets on what to change to correct if something is broken.

All in all, you are justified to express your feelings and if at all you are dissatisfied please contact envato for a refund since authors don’t handle any refunds.

Have a great day.

regards, Joel

Well, if you’re like me and you expect to find at least rudimentary instructions on what you can and can’t do, what files go with what and how to make basic changes, you’ll be disappointed.

There isn’t a single line of instruction or explanation. I’d advise anyone who doesn’t want to waste time fathoming it all out for themselves to buy something that the author can be bothered to write a few notes for. Only $4 so who cares….but rather than waste time, I’ve bought another pricing table elsewhere. I’d advise you to do the same.

Hi Brian,

So sorry that you went through that. Actually your comment made me realize a bug on my documentation which I hadn’t noticed and I do apologize for that mishap.

The documentation/instruction was there (now is) on my online documentation but the links got deleted mysteriously after upgrading my server. I have hence forth corrected the docs with instructions on:

The file structure | How to include the files | Creating the tables

Let me know if I can be of further assistance.

regards, Joel

Cane comone help me to integrate this to my wordpres site.

This is are pure CSS tables and not wordpress plugin so you CANNOT extract them to a wordpress folder like wp-includes and edit/pick the choice that you want in wp dashboard.

The way you can have it work for wordpress (and what other people have done to make it work) is extract the content to a local folder, within you’ll find css folder that has the different pricing table styles. Copy the content to the bottom of your style.css of your wp theme. Then, follow the documentation on how to create the correct html markup in wp editor for the number of pricing columns that you want.

See pricing tables documentation here: http://docs.arrowthemes.com/creating-pricing-tables/

regards, Joel

I know adding the class focus (price-col focus ) is a good way to highlight a certain plan, but the problem is removing that class after hover over the entire table so the table performs as normal. I’m guessing jquiry is the answer?

EDIT : Sorry, it’s been a long day. For anyone interested, simply add the class focus to the col you want featured, then add in this simple jquery $('div').hover(function() { return $("div").removeClass("focus"); });

Thanks for the tip on how to go about it :)

regards, Joel

i just recently purchased. i selected the PRICING BOXES layout, do i need to add all the css files under the CSS folder? Or each layout has a particular css style?

also what is the exact syntax to add the css files in the header of my html file?

please excuse the newbie question.

thank you.

Hello,

Thanks for the purchase. From the link you provided via email, I see you got the pricing tables working.

Please see the documentation here on how to include the pricing tables in your site.

Let me know if you need any further assistance.

regards, Joel

by
by
by
by
by
by