Docs

[E]

Hi, I’m trying to get 3 buttons, on the same line, and I’m willing to use columns if needed. 2 of the 3 buttons need their own background colors, separate from the theme’s global colors in this Renew stack.

In attempting this, however, I’ve encountered three problems:
1. grey boxes around 3 buttons and another empty grey box. I don’t want any grey boxes at all, so I need these gone, and don’t know why they’re there, or where they are coming from. See screenshot.

Thinking maybe it copied some invisible-to-the-eye code from the button page I copied it from, I manually typed it in just the button code on a separate line to no avail.

2. haven’t yet been able to add inline style for 2 of the buttons. First, I guessed, and tried adding color=”FFBA00″ for one, to no avail. Then, I found this article here: https://community.theme.co/forums/topic/button-color-change/ , and tried adding style=”background:red;color:blue;” , except I changed it to the hex colors I wanted, also to no avail.

3. Even though I changed the buttons to “small”, they are not fitting even two/line. When I tried the columns, they looked the same as they do without them.

So, what is the reason for the grey boxes, and how do I prevent them from appearing at all in the future, and how do I remove the current ones? Why the empty box?

What’s the easiest, quickest way to get the button colors I want? is there a dif. inline style for renew for color that I missed, or got wrong? If so, what is it? If not, can this be done, just for individual buttons of my choice, w/o having to add classes? If so, how? If not, will you please tell me exactly how to achieve this?

How do I get the buttons on the same line?

working in dev/site not yet live. latest versions of X and WP.

[Rue Nel]

Hello There,

Thanks for writing in!

Are you using Cornerstone in building your page with the buttons in it? You can always have a row with 3 columns in it. In each of the column, you can insert a button just like what I have here: http://prntscr.com/awj35h

And then if you want to have the other button with different color, you must add a custom class or a unique ID to that button (http://prntscr.com/awj3xf).

With the ID, we can use css so that it will look different from the others. You can insert the following custom css in the settings tab, Settings > Custom CSS

#my-button {
  background-color: green;
  border-color: green;
  color: yellow;
}

#my-button:hover {
  background-color: blue;
  border-color: blue;
  color: red;
}

http://prntscr.com/awj5gn

I am not sure of the grey box because it is now showing on my test server.

Hope this helps.

[E]

Hi,

Thx for your reply. No, it was a non-cornerstone page where I was using X shortcodes with the Renew stack. I seemed to eliminate the problem- I found for some reason the code there was set to preformatted. So, I removed that, and all is well, for the grey boxes that were there. 🙂

I’ll check out your tips for the buttons and other issues.

[Nico]

Let us know how it goes.

Thanks.

[Author]

Posts