Responsive Pricing Table - Version 1.0

Version Description

Download this release

Release Info

Developer spwebguy
Plugin Icon 128x128 Responsive Pricing Table
Version 1.0
Comparing to
See all releases

Version 1.0

Files changed (3) hide show
  1. css/dk_pricr.css +158 -0
  2. dk_pricr.php +68 -0
  3. readme.txt +39 -0
css/dk_pricr.css ADDED
@@ -0,0 +1,158 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ #dk_pricr br, #dk_pricr p {
2
+ display:none;
3
+ }
4
+
5
+ #dk_pricr .dk_plan {
6
+ margin-right:1.4%;
7
+ margin-left:1.4%;
8
+ text-align:center;
9
+ }
10
+
11
+ .dk_plan {
12
+ border:transparent 1px solid;
13
+ background:white;
14
+ float:left;
15
+ /* transition */
16
+ -webkit-transition: all 150ms ease;
17
+ -moz-transition: all 150ms ease;
18
+ -o-transition: all 150ms ease;
19
+ transition: all 150ms ease;
20
+ }
21
+
22
+ .dk_2_plans .dk_plan {
23
+ width:47%;
24
+ }
25
+
26
+ .dk_3_plans .dk_plan {
27
+ width:30.3%;
28
+ }
29
+
30
+ .dk_plan:hover{
31
+ border:lightgrey 1px solid;
32
+ /* box shadow */
33
+ -moz-box-shadow: 1px 1px 5px 0px #c0c0c0;
34
+ -webkit-box-shadow: 1px 1px 5px 0px #c0c0c0;
35
+ -o-box-shadow: 1px 1px 5px 0px #c0c0c0;
36
+ box-shadow: 1px 1px 5px 0px #c0c0c0;
37
+ filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=134, Strength=5);
38
+ }
39
+
40
+ .dk_title {
41
+ background:#333;
42
+ color:white;
43
+ padding:15px 10px 15px;
44
+ font-weight:300;
45
+ }
46
+
47
+ .dk_plan:hover .dk_title {
48
+ background:#222;
49
+ }
50
+
51
+ .dk_price {
52
+ font-size:28px;
53
+ font-weight:300;
54
+ margin-bottom:16px;
55
+ }
56
+
57
+ .dk_title h4 {
58
+ font-size:40px;
59
+ margin:18px 0px 10px;
60
+ color:white;
61
+ }
62
+
63
+ .dk_subtitle {
64
+ color:grey;
65
+ font-size:18px;
66
+ font-weight:300;
67
+ line-height:24px;
68
+ margin-top:10px;
69
+ padding:10px 10px;
70
+ }
71
+
72
+ .dk_features {
73
+ padding:10px 0px;
74
+ background:whitesmoke;
75
+ }
76
+
77
+ .dk_feature {
78
+ text-align:center;
79
+ padding:0px 20px;
80
+ font-size:15px;
81
+ }
82
+
83
+ .dk_feature div {
84
+ border-bottom: 1px dotted lightgrey;
85
+ padding:8px 0px;
86
+ }
87
+
88
+ .dk_plan .dk_feature:first-child {
89
+ padding-top:20px 20px;
90
+ }
91
+
92
+ .dk_disable {
93
+ color:lightgrey;
94
+ }
95
+
96
+ .dk_link {
97
+ padding:20px;
98
+ background:whitesmoke;
99
+ }
100
+
101
+ .dk_link a {
102
+ display:block;
103
+ text-align:center;
104
+ font-size:20px;
105
+ font-weight:300;
106
+ padding:14px;
107
+ color:white;
108
+ text-decoration:none;
109
+ -webkit-transition: all 550ms ease;
110
+ -moz-transition: all 550ms ease;
111
+ -o-transition: all 550ms ease;
112
+ transition: all 550ms ease;
113
+ }
114
+
115
+ .dk_link a:hover {
116
+ opacity:0.7;
117
+ color:white;
118
+ }
119
+
120
+ /* fonts */
121
+ .dk_price, .dk_title h4, .dk_link a, .dk_feature {
122
+ font-family:'Helvetica', Arial, sans-serif;
123
+ }
124
+
125
+ /* TABLETS */
126
+
127
+ @media only screen and (min-width: 40em) and (max-width: 64.063em) {
128
+ .dk_feature {
129
+ font-size:13px;
130
+ }
131
+ .dk_subtitle {
132
+ color:grey;
133
+ font-size:15px;
134
+ }
135
+ .dk_price {
136
+ font-size:22px;
137
+ }
138
+ .dk_title h4 {
139
+ font-size:32px;
140
+ }
141
+ .dk_link a {
142
+ font-size:14px;
143
+ }
144
+ }
145
+
146
+
147
+ /* MOBILE SCREENS */
148
+
149
+ @media only screen and (max-width: 40em) {
150
+ #dk_pricr .dk_plan {
151
+ margin-left:0px;
152
+ }
153
+
154
+ .dk_2_plans .dk_plan, .dk_3_plans .dk_plan {
155
+ width:100%;
156
+ margin-top:30px;
157
+ }
158
+ }
dk_pricr.php ADDED
@@ -0,0 +1,68 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Plugin Name: Responsive Pricing Table
4
+ * Plugin URI: http://wpdarko.com/darko-tools/dk-pricr/
5
+ * Description: A responsive, easy and elegant way to present your offer to your visitors. Find support and [shortcodes] explanation on the <a href='http://wpdarko.com/darko-tools/dk-pricr/'>Plugin's site</a>. This plugin has been tested with WordPress 4.0. Make sure you check out all our useful themes and plugins at <a href='http://wpdarko.com/'>WPDarko.com</a>.
6
+ * Version: 1.0
7
+ * Author: WP Darko
8
+ * Author URI: http://wpdarko.com/
9
+ * License: GPL2
10
+ */
11
+
12
+ //adds stylesheet
13
+ add_action( 'wp_enqueue_scripts', 'add_pricr_style' );
14
+ function add_pricr_style() {
15
+ wp_enqueue_style( 'dk_pricr', plugins_url('css/dk_pricr.css', __FILE__));
16
+ }
17
+
18
+ //adds dk_pricr shortcode
19
+ add_shortcode( 'dk_pricr', 'dk_pricr_shortcode' );
20
+ function dk_pricr_shortcode( $atts , $content = null ) {
21
+
22
+ $a = shortcode_atts( array(
23
+ 'plans' => 3,
24
+ ), $atts );
25
+
26
+ return "<div id='dk_pricr' class='dk_". esc_attr($a['plans']) ."_plans'>". do_shortcode($content) ."<div style='clear:both;'></div></div>";
27
+ }
28
+
29
+ //adds dk_plan shortcode
30
+ add_shortcode( 'dk_plan', 'dk_plan_shortcode' );
31
+ function dk_plan_shortcode( $atts, $content = null ) {
32
+
33
+ $a = shortcode_atts( array(
34
+ 'title' => '',
35
+ 'sub_title' => '',
36
+ 'price' => '',
37
+ 'button_url' => '#',
38
+ 'button_text' => '',
39
+ 'color' => 'grey',
40
+ ), $atts );
41
+
42
+ return "
43
+ <div class='dk_plan'>
44
+ <div class='dk_title'>
45
+ <h4>" . strip_tags($a['title'], '<strong></strong>') . "<br/><div class='dk_subtitle'>" . strip_tags($a['sub_title'], '<strong></strong>') . "</div></h4>
46
+ <div class='dk_price' style='color:". esc_attr($a['color']) .";'>" . esc_attr($a['price']) . "</div>
47
+ </div>
48
+ <div class='dk_features'>". do_shortcode($content) ."</div>
49
+ <div class='dk_link'>
50
+ <a style='background:". esc_attr($a['color']) .";' href='". esc_attr($a['button_url']) ."'>". strip_tags($a['button_text'], '<strong></strong>') ."</a></div></div>";
51
+ }
52
+
53
+ //adds feature shortcode
54
+ add_shortcode( 'dk_ft', 'dk_ft_shortcode' );
55
+ function dk_ft_shortcode( $atts ) {
56
+
57
+ $a = shortcode_atts( array(
58
+ 'name' => '&nbsp;',
59
+ 'available' => 'yes',
60
+ ), $atts );
61
+
62
+ $is_available = esc_attr($a['available']);
63
+ if ($is_available == 'no' || $is_available == 'No') {
64
+ $ava = 'dk_disable';
65
+ } else {$ava = '';}
66
+
67
+ return "<div class='dk_feature ".$ava."'><div>". strip_tags($a['name'], '<strong>') ."</div></div>";
68
+ }?>
readme.txt ADDED
@@ -0,0 +1,39 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Responsive Pricing Table ===
2
+ Tags: pricing table, wpdarko, shortcode, responsive, price table, pricing, shortcodes
3
+ Requires at least: 3.6
4
+ Tested up to: 4.0
5
+ Stable tag: 1.0
6
+ License: GPL2
7
+ License URI: http://www.gnu.org/licenses/gpl.html
8
+
9
+ A responsive, easy and elegant way to present your offer to your visitors. Find support and [shortcodes] explanation on the Plugin's site.
10
+
11
+ == Description ==
12
+ ### Responsive Pricing Table
13
+ A responsive, easy and elegant way to present your offer to your visitors. Find support and [shortcodes] explanation on the Plugin’s site. This plugin has been tested with WordPress 4.0.
14
+
15
+ ### Usage
16
+ Go to [the plugin's page](http://wpdarko.com/darko-tools/dk-pricr/) for information on how to use the shortcodes.
17
+
18
+ ### Support
19
+ Find help in [our forums](http://wpdarko.com/forums/forum/plugins/dk-pricr/) for this plugin (we’ll answer you fast, promise).
20
+
21
+ == Installation ==
22
+ ### Installation
23
+ 1. In your WordPress admin panel, go to Plugins > New Plugin
24
+ 2. Search for DK Pricr - Responsive Pricing Table and click "Install now"
25
+ 3. Alternatively, download the plugin and upload the contents of dk_pricr.zip to your plugins directory, which usually is /wp-content/plugins/
26
+ 4. Activate the plugin
27
+
28
+ ### Usage
29
+ Go to [the plugin's page](http://wpdarko.com/darko-tools/dk-pricr/) for information on how to use the shortcodes.
30
+
31
+ == Frequently Asked Questions ==
32
+ ### How do I use this plugin?
33
+ Go to [the plugin's page](http://wpdarko.com/darko-tools/dk-pricr/) for information on how to use the shortcodes.
34
+
35
+ ### Where can I get help with this plugin?
36
+ Find help in [our forums](http://wpdarko.com/forums/forum/plugins/dk-pricr/) for this plugin (we’ll answer you fast, promise).
37
+
38
+ == Screenshots ==
39
+ 1. DK Pricr front-end view