[Post count: 8]

swisskud

July 16, 2014 at 1:32 am #1730

Hi, in a same page, how can i have a different color of title background?

I mean i want to change this css for each pricing item on a same page/post :

.pricing-col-wrapper h3, .light .pricing-col-wrapper h3 {
background: #1abc9c;
…
}

I thought the easiest way to do this was to create an additional css class, but I can’t see a field for additional class in “JKreative – Pricing item”?

[Post count: 2689]

Rai

July 16, 2014 at 7:32 am #1756

Hi swisskud,

It seem’s we forget to add additional class to Pricing Widget. Don’t worry, we will add it and will be available on next update. For now, you can use nth-child css selector for customising each item. For example:

CSS

/* First column */ .pricing-col:nth-child(1) .pricing-col-wrapper h3 { background: red; } /* Second column */ .pricing-col:nth-child(2) .pricing-col-wrapper h3 { background: red; }

1 2 3 4 5 6 7 8 9

/* First column */ .pricing-col:nth-child(1) .pricing-col-wrapper h3 {    background: red; }   /* Second column */ .pricing-col:nth-child(2) .pricing-col-wrapper h3 {    background: red; }

Best regards,
Rai

• This reply was modified 4 years, 7 months ago by  Rai. Reason: add example

[Post count: 48]

glibero

June 17, 2015 at 5:10 pm #12313

Hey there! Can you tell me if this was fixed in an update? I ran into the same situation where I want to alter the colors of the pricing wrapper (text and background).

Please let me know! I will try the above solution in the meantime to see if it works.

Thanks!
Gary

[Post count: 11438]

Adek

June 21, 2015 at 2:07 am #12404

Hi Gary,

It seems you will need to edit several file to achieve that. You can follow the instruction below :

1. Go to this file jkreativ-themes/admin/vc/element.php and jump into line 2152, it’s look like :

class WPBakeryShortCode_Jeg_Pricing_Wrapper extends WPBakeryShortCodesContainer {} vc_map( array( "name" => "Jkreativ - Pricing Wrapper", "base" => "jeg_pricing_wrapper", "as_parent" => array('only' => 'jeg_pricing_item'), "icon" => 'jeg_pricing_wrapper_block', "category" => 'Jkreativ', "content_element" => true, "show_settings_on_create" => true, "params" => array( array( 'type' => 'slider', 'min' => 3, 'max' => 5, 'step' => 1, 'std' => 3, 'heading' => "Pricing Column Number", 'param_name' => "column", 'holder' => 'span', ), ), "js_view" => 'VcColumnView' )); class WPBakeryShortCode_Jeg_Pricing_Item extends WPBakeryShortCode {} vc_map( array( "name" => "Jkreativ - Pricing Item", "base" => "jeg_pricing_item", "content_element" => true, "as_child" => array('only' => 'jeg_pricing_wrapper'), "icon" => 'jeg_pricing_item_icon', "category" => 'Jkreativ', "params" => array( array( 'type' => 'textfield', 'heading' => 'Pricing Title', 'param_name' => 'title', 'description' => 'example : Basic Plan', 'holder' => 'div', ), array( 'type' => 'textfield', 'heading' => 'Currency', 'param_name' => 'sign', 'description' => 'example : $' ), array( 'type' => 'textfield', 'heading' => 'Price', 'param_name' => 'price', 'description' => 'example : 50' ), array( 'type' => 'textfield', 'heading' => 'Duration', 'param_name' => 'duration', 'description' => 'example : per month' ), array( 'type' => "checkbox", 'heading' => "Hightlight this Pricing Block", 'param_name' => "highlight", 'value' => array( "Highlight Pricing" => 'true' ), ), array( 'type' => 'textfield', 'heading' => 'Additional Alternate Text', 'param_name' => 'alt', 'description' => 'example : Best Option', 'dependency' => array('element' => "highlight", 'value' => array('true')) ), array( 'type' => "checkbox", 'heading' => "Show Button", 'param_name' => "showbutton", 'value' => array( "Show Pricing Button" => 'true' ), ), array( 'type' => 'textfield', 'heading' => 'Button Text', 'param_name' => 'buttontext', 'dependency' => array('element' => "showbutton", 'value' => array('true')) ), array( 'type' => 'textfield', 'heading' => 'Button URL', 'param_name' => 'buttonurl', 'dependency' => array('element' => "showbutton", 'value' => array('true')) ), array( 'type' => 'textarea_html', 'heading' => 'Pricing Detail Content', 'param_name' => 'content', 'std' => '<ul><li>Pricing Detail Content</li><li>Pricing Detail Content</li><li>Pricing Detail Content</li></ul>' ), ) ));

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

class WPBakeryShortCode_Jeg_Pricing_Wrapper extends WPBakeryShortCodesContainer {} vc_map( array(     "name"                      => "Jkreativ - Pricing Wrapper",     "base"                      => "jeg_pricing_wrapper",     "as_parent"                 => array('only' => 'jeg_pricing_item'),     "icon"                      => 'jeg_pricing_wrapper_block',     "category"                  => 'Jkreativ',     "content_element"           => true,     "show_settings_on_create"   => true,     "params" => array(         array(             'type'          => 'slider',             'min'           => 3,             'max'           => 5,             'step'          => 1,             'std'           => 3,             'heading'       => "Pricing Column Number",             'param_name'    => "column",             'holder'        => 'span',         ),     ),     "js_view" => 'VcColumnView' ));   class WPBakeryShortCode_Jeg_Pricing_Item extends WPBakeryShortCode {} vc_map( array(     "name"                      => "Jkreativ - Pricing Item",     "base"                      => "jeg_pricing_item",     "content_element"           => true,     "as_child"                  => array('only' => 'jeg_pricing_wrapper'),     "icon"                      => 'jeg_pricing_item_icon',     "category"                  => 'Jkreativ',     "params" => array(         array(             'type'          => 'textfield',             'heading'       => 'Pricing Title',             'param_name'    => 'title',             'description'   => 'example : Basic Plan',             'holder'        => 'div',         ),         array(             'type'          => 'textfield',             'heading'       => 'Currency',             'param_name'    => 'sign',             'description'   => 'example : $'         ),         array(             'type'          => 'textfield',             'heading'       => 'Price',             'param_name'    => 'price',             'description'   => 'example : 50'         ),         array(             'type'          => 'textfield',             'heading'       => 'Duration',             'param_name'    => 'duration',             'description'   => 'example : per month'         ),         array(             'type'          => "checkbox",             'heading'       => "Hightlight this Pricing Block",             'param_name'    => "highlight",             'value'         => array( "Highlight Pricing" => 'true' ),         ),         array(             'type'          => 'textfield',             'heading'       => 'Additional Alternate Text',             'param_name'    => 'alt',             'description'   => 'example : Best Option',             'dependency'    => array('element' => "highlight", 'value' => array('true'))         ),         array(             'type'          => "checkbox",             'heading'       => "Show Button",             'param_name'    => "showbutton",             'value'         => array( "Show Pricing Button" => 'true' ),         ),         array(             'type'          => 'textfield',             'heading'       => 'Button Text',             'param_name'    => 'buttontext',             'dependency'    => array('element' => "showbutton", 'value' => array('true'))         ),         array(             'type'          => 'textfield',             'heading'       => 'Button URL',             'param_name'    => 'buttonurl',             'dependency'    => array('element' => "showbutton", 'value' => array('true'))         ),         array(             'type'          => 'textarea_html',             'heading'       => 'Pricing Detail Content',             'param_name'    => 'content',             'std'           => '<ul><li>Pricing Detail Content</li><li>Pricing Detail Content</li><li>Pricing Detail Content</li></ul>'         ),     ) ));

Replace those code with this one below :

class WPBakeryShortCode_Jeg_Pricing_Wrapper extends WPBakeryShortCodesContainer {} vc_map( array( "name" => "Jkreativ - Pricing Wrapper", "base" => "jeg_pricing_wrapper", "as_parent" => array('only' => 'jeg_pricing_item'), "icon" => 'jeg_pricing_wrapper_block', "category" => 'Jkreativ', "content_element" => true, "show_settings_on_create" => true, "params" => array( array( 'type' => 'slider', 'min' => 3, 'max' => 5, 'step' => 1, 'std' => 3, 'heading' => "Pricing Column Number", 'param_name' => "column", 'holder' => 'span', ), array( 'type' => 'textfield', 'heading' => 'Extra class name', 'param_name' => 'el_class', 'description' => 'If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.' ), ), "js_view" => 'VcColumnView' )); class WPBakeryShortCode_Jeg_Pricing_Item extends WPBakeryShortCode {} vc_map( array( "name" => "Jkreativ - Pricing Item", "base" => "jeg_pricing_item", "content_element" => true, "as_child" => array('only' => 'jeg_pricing_wrapper'), "icon" => 'jeg_pricing_item_icon', "category" => 'Jkreativ', "params" => array( array( 'type' => 'textfield', 'heading' => 'Pricing Title', 'param_name' => 'title', 'description' => 'example : Basic Plan', 'holder' => 'div', ), array( 'type' => 'textfield', 'heading' => 'Currency', 'param_name' => 'sign', 'description' => 'example : $' ), array( 'type' => 'textfield', 'heading' => 'Price', 'param_name' => 'price', 'description' => 'example : 50' ), array( 'type' => 'textfield', 'heading' => 'Duration', 'param_name' => 'duration', 'description' => 'example : per month' ), array( 'type' => "checkbox", 'heading' => "Hightlight this Pricing Block", 'param_name' => "highlight", 'value' => array( "Highlight Pricing" => 'true' ), ), array( 'type' => 'textfield', 'heading' => 'Additional Alternate Text', 'param_name' => 'alt', 'description' => 'example : Best Option', 'dependency' => array('element' => "highlight", 'value' => array('true')) ), array( 'type' => "checkbox", 'heading' => "Show Button", 'param_name' => "showbutton", 'value' => array( "Show Pricing Button" => 'true' ), ), array( 'type' => 'textfield', 'heading' => 'Button Text', 'param_name' => 'buttontext', 'dependency' => array('element' => "showbutton", 'value' => array('true')) ), array( 'type' => 'textfield', 'heading' => 'Button URL', 'param_name' => 'buttonurl', 'dependency' => array('element' => "showbutton", 'value' => array('true')) ), array( 'type' => 'textarea_html', 'heading' => 'Pricing Detail Content', 'param_name' => 'content', 'std' => '<ul><li>Pricing Detail Content</li><li>Pricing Detail Content</li><li>Pricing Detail Content</li></ul>' ), array( 'type' => 'textfield', 'heading' => 'Extra class name', 'param_name' => 'el_class', 'description' => 'If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.' ), ) ));

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109

class WPBakeryShortCode_Jeg_Pricing_Wrapper extends WPBakeryShortCodesContainer {} vc_map( array(     "name"                      => "Jkreativ - Pricing Wrapper",     "base"                      => "jeg_pricing_wrapper",     "as_parent"                 => array('only' => 'jeg_pricing_item'),     "icon"                      => 'jeg_pricing_wrapper_block',     "category"                  => 'Jkreativ',     "content_element"           => true,     "show_settings_on_create"   => true,     "params" => array(         array(             'type'          => 'slider',             'min'           => 3,             'max'           => 5,             'step'          => 1,             'std'           => 3,             'heading'       => "Pricing Column Number",             'param_name'    => "column",             'holder'        => 'span',         ),         array(             'type'          => 'textfield',             'heading'       => 'Extra class name',             'param_name'    => 'el_class',             'description'   => 'If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.'         ),     ),     "js_view" => 'VcColumnView' ));   class WPBakeryShortCode_Jeg_Pricing_Item extends WPBakeryShortCode {} vc_map( array(     "name"                      => "Jkreativ - Pricing Item",     "base"                      => "jeg_pricing_item",     "content_element"           => true,     "as_child"                  => array('only' => 'jeg_pricing_wrapper'),     "icon"                      => 'jeg_pricing_item_icon',     "category"                  => 'Jkreativ',     "params" => array(         array(             'type'          => 'textfield',             'heading'       => 'Pricing Title',             'param_name'    => 'title',             'description'   => 'example : Basic Plan',             'holder'        => 'div',         ),         array(             'type'          => 'textfield',             'heading'       => 'Currency',             'param_name'    => 'sign',             'description'   => 'example : $'         ),         array(             'type'          => 'textfield',             'heading'       => 'Price',             'param_name'    => 'price',             'description'   => 'example : 50'         ),         array(             'type'          => 'textfield',             'heading'       => 'Duration',             'param_name'    => 'duration',             'description'   => 'example : per month'         ),         array(             'type'          => "checkbox",             'heading'       => "Hightlight this Pricing Block",             'param_name'    => "highlight",             'value'         => array( "Highlight Pricing" => 'true' ),         ),         array(             'type'          => 'textfield',             'heading'       => 'Additional Alternate Text',             'param_name'    => 'alt',             'description'   => 'example : Best Option',             'dependency'    => array('element' => "highlight", 'value' => array('true'))         ),         array(             'type'          => "checkbox",             'heading'       => "Show Button",             'param_name'    => "showbutton",             'value'         => array( "Show Pricing Button" => 'true' ),         ),         array(             'type'          => 'textfield',             'heading'       => 'Button Text',             'param_name'    => 'buttontext',             'dependency'    => array('element' => "showbutton", 'value' => array('true'))         ),         array(             'type'          => 'textfield',             'heading'       => 'Button URL',             'param_name'    => 'buttonurl',             'dependency'    => array('element' => "showbutton", 'value' => array('true'))         ),         array(             'type'          => 'textarea_html',             'heading'       => 'Pricing Detail Content',             'param_name'    => 'content',             'std'           => '<ul><li>Pricing Detail Content</li><li>Pricing Detail Content</li><li>Pricing Detail Content</li></ul>'         ),         array(             'type'          => 'textfield',             'heading'       => 'Extra class name',             'param_name'    => 'el_class',             'description'   => 'If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.'         ),     ) ));

2. Go to this file jkreativ-themes/admin/vc/view.php and jump into line 1426, it’s look like :

function vc_theme_jeg_pricing_wrapper ($atts, $content) { $atts = shortcode_atts( array( 'column' => '', ), $atts ); $column = ''; if($atts['column'] === '3') { $column = 'three-col'; } else if($atts['column'] === '4') { $column = 'four-col'; } else if($atts['column'] === '5') { $column = 'five-col'; } return "<div class='pricing-table {$column} clearfix'> " . do_shortcode($content) . " </div>"; } function vc_theme_jeg_pricing_item ($atts, $content) { $atts = shortcode_atts( array( 'title' => '', 'sign' => '', 'price' => '', 'duration' => '', 'highlight' => '', 'alt' => '', 'showbutton' => '', 'buttontext' => '', 'buttonurl' => '', ), $atts ); $highlight = ''; if($atts['highlight']) { $highlight = 'pricehighlight'; } $buttontext = ''; if($atts['showbutton']) { $buttontext = "<div class='price-btn'> <a href='{$atts['buttonurl']}' class='btn'>{$atts['buttontext']}</a> </div>"; } return "<div class='pricing-col {$highlight}'> <div class='pricing-col-wrapper'> <div class='price-heading'> <h3> {$atts['title']} <span>{$atts['alt']}</span> </h3> </div> <div class='pricing-content'> <div class='price'> <h4> <span class='sign'>{$atts['sign']}</span> {$atts['price']} </h4> <em>{$atts['duration']}</em> </div> " . do_shortcode($content) . " " . $buttontext . " </div> </div> </div>"; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

function vc_theme_jeg_pricing_wrapper ($atts, $content) {     $atts = shortcode_atts(         array(             'column'    => '',         ),         $atts     );       $column = '';     if($atts['column'] === '3') {         $column = 'three-col';     } else if($atts['column'] === '4') {         $column = 'four-col';     } else if($atts['column'] === '5') {         $column = 'five-col';     }       return "<div class='pricing-table {$column} clearfix'> " . do_shortcode($content) . " </div>"; }   function vc_theme_jeg_pricing_item ($atts, $content) {     $atts = shortcode_atts(         array(             'title' => '',             'sign' => '',             'price' => '',             'duration' => '',             'highlight' => '',             'alt' => '',             'showbutton' => '',             'buttontext' => '',             'buttonurl' => '',         ),         $atts     );       $highlight = '';     if($atts['highlight']) {         $highlight = 'pricehighlight';     }       $buttontext = '';     if($atts['showbutton']) {         $buttontext =         "<div class='price-btn'>     <a href='{$atts['buttonurl']}' class='btn'>{$atts['buttontext']}</a>     </div>";     }       return     "<div class='pricing-col {$highlight}'> <div class='pricing-col-wrapper'> <div class='price-heading'> <h3> {$atts['title']} <span>{$atts['alt']}</span> </h3> </div> <div class='pricing-content'> <div class='price'> <h4> <span class='sign'>{$atts['sign']}</span> {$atts['price']} </h4> <em>{$atts['duration']}</em> </div> " . do_shortcode($content) . " " . $buttontext . " </div> </div> </div>"; }

Replace those code with this one below :

function vc_theme_jeg_pricing_wrapper ($atts, $content) { $atts = shortcode_atts( array( 'column' => '', 'el_class' => '' ), $atts ); $column = ''; if($atts['column'] === '3') { $column = 'three-col'; } else if($atts['column'] === '4') { $column = 'four-col'; } else if($atts['column'] === '5') { $column = 'five-col'; } return "<div class='pricing-table {$column} {$atts['el_class']} clearfix'> " . do_shortcode($content) . " </div>"; } function vc_theme_jeg_pricing_item ($atts, $content) { $atts = shortcode_atts( array( 'title' => '', 'sign' => '', 'price' => '', 'duration' => '', 'highlight' => '', 'alt' => '', 'showbutton' => '', 'buttontext' => '', 'buttonurl' => '', 'el_class' => '' ), $atts ); $highlight = ''; if($atts['highlight']) { $highlight = 'pricehighlight'; } $buttontext = ''; if($atts['showbutton']) { $buttontext = "<div class='price-btn'> <a href='{$atts['buttonurl']}' class='btn'>{$atts['buttontext']}</a> </div>"; } return "<div class='pricing-col {$highlight} {$atts['el_class']}'> <div class='pricing-col-wrapper'> <div class='price-heading'> <h3> {$atts['title']} <span>{$atts['alt']}</span> </h3> </div> <div class='pricing-content'> <div class='price'> <h4> <span class='sign'>{$atts['sign']}</span> {$atts['price']} </h4> <em>{$atts['duration']}</em> </div> " . do_shortcode($content) . " " . $buttontext . " </div> </div> </div>"; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

function vc_theme_jeg_pricing_wrapper ($atts, $content) {     $atts = shortcode_atts(         array(             'column'    => '',             'el_class'  => ''         ),         $atts     );       $column = '';     if($atts['column'] === '3') {         $column = 'three-col';     } else if($atts['column'] === '4') {         $column = 'four-col';     } else if($atts['column'] === '5') {         $column = 'five-col';     }       return "<div class='pricing-table {$column} {$atts['el_class']} clearfix'> " . do_shortcode($content) . " </div>"; }   function vc_theme_jeg_pricing_item ($atts, $content) {     $atts = shortcode_atts(         array(             'title' => '',             'sign' => '',             'price' => '',             'duration' => '',             'highlight' => '',             'alt' => '',             'showbutton' => '',             'buttontext' => '',             'buttonurl' => '',             'el_class'  => ''         ),         $atts     );       $highlight = '';     if($atts['highlight']) {         $highlight = 'pricehighlight';     }       $buttontext = '';     if($atts['showbutton']) {         $buttontext =         "<div class='price-btn'>     <a href='{$atts['buttonurl']}' class='btn'>{$atts['buttontext']}</a>     </div>";     }       return     "<div class='pricing-col {$highlight} {$atts['el_class']}'> <div class='pricing-col-wrapper'> <div class='price-heading'> <h3> {$atts['title']} <span>{$atts['alt']}</span> </h3> </div> <div class='pricing-content'> <div class='price'> <h4> <span class='sign'>{$atts['sign']}</span> {$atts['price']} </h4> <em>{$atts['duration']}</em> </div> " . do_shortcode($content) . " " . $buttontext . " </div> </div> </div>"; }

Thank you you

[Post count: 48]

glibero

July 31, 2015 at 2:38 pm #13255

Sorry I never replied to this! Thanks so much for the code! I’m finally getting a chance to try this out. I will let you know if it works or not.

Thanks!
G

[Post count: 48]

glibero

July 31, 2015 at 8:01 pm #13263

This seems to have worked, but I’m wondering exactly what I should be seeing now. I thought this was going to add functionality to VC so I could change the background color on the pricing wrapper. Do I have to do that manually using the Additional Style section?

Thanks!
G

[Post count: 11438]

Adek

August 1, 2015 at 6:42 am #13276

Hi glibero,

If you’ve add the code on above you will be able to create an additional css class on Pricing Table element. So you can use it as selectors when you create custom css on Additional Style.

Thank you