-
Post count: 8swisskudJuly 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: 2689RaiJuly 16, 2014 at 7:32 am #1756Hi 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:CSS123456789/* 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: 48gliberoJune 17, 2015 at 5:10 pm #12313Hey 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!
GaryPost count: 11438AdekJune 21, 2015 at 2:07 am #12404Hi 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 :12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697class 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 :
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109class 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 :1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374function 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 :
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576function 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: 48gliberoJuly 31, 2015 at 2:38 pm #13255Sorry 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!
GPost count: 48gliberoJuly 31, 2015 at 8:01 pm #13263This 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!
GPost count: 11438AdekAugust 1, 2015 at 6:42 am #13276Hi 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
-
This reply was modified 4 years, 7 months ago by
You must be logged in to reply to this topic.