Buttons

Posted in: Newspaper
Post count: 52

Hi, another problem from my side:
In new BACKEND editor I tried to use buttons, but they don’t work properly. Have a look:
1 I choose http://pumpshooter.com/4oX8RfdC
2 Tune it the way I need http://pumpshooter.com/0LomFA3c
3 But it looks like this http://pumpshooter.com/8wWMe8wf

+ below

1 I choose http://pumpshooter.com/8x45jRrY
2 Make it look red http://pumpshooter.com/icJaJSGp
3 But it is not http://pumpshooter.com/jkKpHIGD

Here is the page with how it looks: http://weddingphotoandvideo.ru/pomolvka-v-chexii-yany-i-denisa/
Thank you

Post count: 322

Yeah, having an issue with the buttons as well. Even the shortcodes for the buttons show all button options but they’re all for the small size.

Post count: 3343

Hi,
Some elements from VC are not styled.
All can be fixed via CSS

Use this CSS, add it in Theme panel -> Custom CSS

.vc_call_to_action {
    padding: 10px;
}
.vc_call_to_action h2 {
    margin-top: 0px;
}

Thanks!

Post count: 52

Marius, the problem still occurs. Not all the colours work and it style doesn’t look nice. Please have a look http://pumpshooter.com/kYNHezSe

Post count: 171

Where I can find all the quotes buttons? Since last update they just disspeared.

Post count: 3343

Hi,

@Novaque
use this CSS

.vc_btn_blue {
    background-color: #4FB4F7;
    color: #FFFFFF;
    display: inline-block;
    height: 32px;
    line-height: 30px;
	text-align: center;
    width: 100%;
}
.post .wpb_btn-danger {
    background-color: #EC4D4D !important;
    clear: both;
    display: inline-block;
}
.wpb_googleplus {
    margin-top: 10px;
}
.twitter-share-button {
    margin-bottom: 5px;
}


@Arved007
DO you have latest version 3.8? http://screencast.com/t/hit4V7K8U

Post count: 52

Thanks, Marius
The code works perfectly well!

Post count: 20

After the last update I have the same problem as Novaque’s.
All the buttons (button 2 in Visual Composer) in my pages were well stylized. Now they appear just like common links.
But in page editor they are always styled like i set in the VC options.

I also checked that in visual composers css, the code to get them good looking is still there.
How can I reactivate it?
But above all, how come did you disabled it?

Thanks guys!

Post count: 6600

Hi,

Please send me an example with this, a screenshot would be helpful, also please provide your site’s URL and point me where you use this button so I can inspect this.

Thanks

Post count: 20

Hi Lucian,
here’s what I see in edit page with Visual Composer
http://www.screencast.com/t/w0gQLdhOtNs
The upper two are made with “Button 2” element while the second on the right side is made with “Button” element.

On this link there’s my page
http://mailneo.biz/about-neomobile/

Below the video you can see links instead of buttons, but the second red one is styled as your tagDiv buttons.

Thanks!

Post count: 6600

Hi,

I have tested this using the latest theme version 4.3 and with WPBakery Visual Composer version 4.3.4 and worked fine for me: http://screencast.com/t/h8547NHbMdVa
As you noticed the css to style the buttons dose not apply in your case, this is because the classes used by css are missing: http://screencast.com/t/V3LhNREDXhGB
Please make sure you install the WPBakery Visual Composer plugin from the plugins folder that came with themes files like this: https://forum.tagdiv.com/update-the-visual-composer-plugin-wpbakery/
Also try to deactivate all plugins and then check if this issue is still there.

Thanks

Post count: 20

Ciao Lucian!
I will try your solution as soon as I can.
Do you think that happened maybe because I’m running the child theme?

Post count: 6600

Hi,

It could be due to child theme also, try using the main theme to check for this if re-installing the VC dose not work.
Please let me know.

Thanks

Post count: 20

Hi Lucian,
nothing we talked about solves the problem in my case =(
I have:

  • Theme Version 4.3
  • Visual Composer Version 4.3.4 (deactivated, uninstalled and reinstalled several times from your package)
  • Child theme running (I also tried to activate the main theme)
  • I deactivated all plugins and tried again but it doesn’t work

Anyways, in your screenshot http://screencast.com/t/h8547NHbMdVa Button 2 is not stylized like Visual Composer edit page does, but they come out both with your own style. Instead I’d like to have both different styles, Visual Composer’s and yours.
In your example what should be the actual difference between “Button” and “Button 2”?

Thanks!

Post count: 6600

Hi,

The button form the left is VC “Button 2” element the one from the right is “Button” element.
You can use this custom css to style the buttons: http://screencast.com/t/8RwBagtAG8OG

.vc_btn{
border-radius: 0px;
background-image: none;
background: #4db2ec !important;
color: white;
border: none;
text-shadow: none;
font-family: 'Roboto Condensed', sans-serif;
font-weight: normal;
font-size: 14px;
padding: 5px 12px 7px 12px !important;
margin-bottom: 4px;
transition: opacity 0.4s;
}

.vc_btn:hover {
text-shadow: none;
opacity: 0.8;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
text-decoration: none !important;
color: white;
}

You can change the style as you like.
Hope this helps!

Thanks

Post count: 7

Hi There,

I too am having the same problem with the CTA blocks and buttons.

See CTA block on this page: https://www.kidsonkeysnyc.com/k/about-us/

I have reinstalled Visual composer using the plugin file included in the download and that didn’t help.

Please advise.

Post count: 20

@reenamm
I just solved in this way, but I’d like to know from TagDiv’s crew if it’s ok:
in my child theme’s custom css, I’m importing the right css from Visual Composer’s assets folder, in this way:
@import url("../../plugins/js_composer/assets/css/js_composer.css");
Look at my page now
http://mailneo.biz/about-neomobile/

Why doesn’t the theme load it by itself?

Post count: 6600

Hi,


@sgaddo

We still have incompatibility issues regarding VC style, we are currently working to a new grid which will support all VC elements.
If you like the buttons styled that way you can keep that solution but I can’t tell in what way will affect your site, you will have to keep in mind this changes and refer to it if you encounter any issues.


@reenamn

In the last version of Visual Composer the classes have changed and the buttons that we haven styled lost their css, we have this on our todo list and we are working on it. Sorry for the inconvenience. You could try to use a plugin for that until we can provide a fix for this.

Thanks for the message!

Post count: 20

Hmmmmm…so, to avoid unexpected behaviors, instead of importing the whole js_composer.css file, I could just extract all the classes that I need (such as the buttons and the “call to action” button) and style them as I like (which sounds like a normal css override =) ).

Thanks to you Lucian, you all are very kind.

Post count: 7

Thanks for the advice. I copied the lines for the button styling from the js_composer.css file into another css file and then imported that new btn_styling.css file into the child theme. Works great.

This is a quick fix for anyone else with the same problem.

Post count: 6600

Hi,

Glad you have managed!
Thanks for the message/sharing!

Post count: 50

Thanks, importing the js_composer.css fixed button styling problem.

🙂

/J

  • This reply was modified 11 years by bananaj.
Post count: 73

I am having a problem using the buttons shortcodes. When I use the shortcode from the editor, the buttons never have any style, they appear as text.

The only way I have been able to successfully get the buttons to work is to go directly to the source code and use this code: < a class=”wpb_button_a” title=“BUTTON TEXT” href=“#” target=”_blank”><span class=”wpb_button wpb_btn-danger wpb_btn-large” >BUTTON TEXT</span>< /a > (Note: Spaces inserted in this code so you can see code fully)

Ultimately I will be training others to use this website and they will need to use the buttons — customizing the html source code is too advanced for them. So it’s imperitave that the shortcodes work and that buttons can be inputted as different colors and sizes.

Thanks for your help!

Example of button appearing correctly when I manually insert in the source code: http://wordpress.mauimagazine.net/the-edible-landscape/ (Planting Guide)

Example of button not appearing correctly by using shortcode: http://wordpress.mauimagazine.net/restaurants-with-a-view/ (Button text is toward bottom: “Get Chef Lofaro’s hamachi carpaccio recipe”)

Post count: 7909

Hi,

Unfortunately not all colors are supported by the button shortcodes, you can customize using custom css, use the color like an extra class – http://screencast.com/t/iJtKxey3idGhttp://screencast.com/t/X6dDu9fQp
On the article where the button is displayed fine, you use custom css for it – http://screencast.com/t/qVG5q0zt
You can also add a button using the Visual Composer in a page(design it) and copy the shortcode in the post content, check this topic – https://forum.tagdiv.com/topic/creating-buttons-in-posts/#post-56162

Hope this helps!

Post count: 73

I don’t particularly care what color the button is, as long as it’s bright and visible (not gray or muted color).

What colors ARE supported by the button shortcodes? I need the easiest solution for a non-web person to be able to create a new post and add a color button.

I need this to be very easy…. the whole point of shortcodes is to make it user-friendly, correct? That is what I need.

I did not manually create any custom codes in the past. I simply copied & pasted the working button code from a source code and pasted it into the source code of another post so the button would work. This is not a solution that will work for my company long-term. I require the shortcodes to work as expected.

I hope I’m making sense! I appreciate your guidance.

Viewing 25 posts - 1 through 25 (of 29 total)
You must be logged in to reply to this topic.