This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Use shortcodes with Button (PB)?

Open 7 replies plugin plugin-page-builder premium

Brandon Wolfe

10 years ago · Last reply by Andrew Misplon 10 years ago

Hello,

Is it possible when using the button (PB) widget in page builder to have it point to a shortcode instead of a web URL? custom CSS to do this or is there another product you offer than can do this?

Thank you for your assistance!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

Andrew Misplon Staff 10 years, 3 months ago
Hi Brandon
Unfortunately, not as far as I know. As an alternative you could trying using a Text widget and inserting something like:
```
<a href="[anythingpopup id="29"]">Button Text</a>
```
Brandon Wolfe 10 years, 3 months ago
I will def give that a try… i just like the crisp look of your button so was hoping there was a way to do this. shouldnt be too difficult to implement that into the interface.
Andrew Misplon Staff 10 years, 3 months ago
If possible, send a link to a page with the button you like and I’ll grab the markup for you to paste into a Text widget.
Brandon Wolfe 10 years, 3 months ago
link to the page is http://sportsgeekfantasy.com/nfl-h2h-fantasy-2 as you can see the "league rules" button is the widget in page builder and looks much better, you can tell a much bigger different on mobile devices if your able to view on one

Andrew Misplon Staff 10 years, 3 months ago

Try this in a Text widget:

<a href="[anythingpopup id="29"]" class="custom-white-button">Button Text</a>

To add styling, add the following to Appearance > Custom CSS:

/* Custom Button */
.custom-white-button {
    display: inline-block;
    padding: 10px 45px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #7B7B7B;
    font-size: 0.875em;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF;
    text-align: center;
    -webkit-box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    background: #F5F5F5;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#EBEBEB),color-stop(1,#FFFFFF));
    background: -ms-linear-gradient(bottom,#EBEBEB,#FFFFFF);
    background: -moz-linear-gradient(center bottom,#EBEBEB 0%,#FFFFFF 100%);
    background: -o-linear-gradient(#FFFFFF,#EBEBEB);
    border-top: solid 1px #CDCDCD;
    border-left: solid 1px #C2C2C2;
    border-right: solid 1px #C2C2C2;
    border-bottom: solid 1px #B7B7B7;
    min-width: 202px;
}
.custom-white-button:hover {
    background: #FAFAFA;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#F0F0F0),color-stop(1,#FFFFFF));
    background: -ms-linear-gradient(bottom,#F0F0F0,#FFFFFF);
    background: -moz-linear-gradient(center bottom,#F0F0F0 0%,#FFFFFF 100%);
    background: -o-linear-gradient(#FFFFFF,#F0F0F0);
    border-top: solid 1px #D2D2D2;
    border-left: solid 1px #C7C7C7;
    border-right: solid 1px #C7C7C7;
    border-bottom: solid 1px #BCBCBC;
}

Check this declaration out:

min-width: 202px;

See it above. You can adjust that value as required. I’ve inserted this so you don’t need to insert multiple spaces to wide the button.

Brandon Wolfe 10 years, 3 months ago
Hey Andrew!
Thank you first off all for your help, its much appreciated!
Plugged that in and button looks great, however it directs it to a url instead of the popup… try the button yourself and then try one of the ones above it.
also on the mobile version its just showing text and still redirecting to a url.

Andrew Misplon Staff 10 years, 3 months ago

Almost there. I hadn’t used this plugin before. Checked it all out now.

Change the HTML to:

<div class="custom-white-button">
[AnythingPopup id="1"]
</div>

With your shortcode ID instead of mine.

Change your Custom CSS to:

.custom-white-button {
    display: inline-block;
    padding: 10px 45px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #7B7B7B;
    font-size: 0.875em;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF;
    text-align: center;
    -webkit-box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 0 #FFFFFF,0 1px 2px rgba(0,0,0,0.1);
    background: #F5F5F5;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#EBEBEB),color-stop(1,#FFFFFF));
    background: -ms-linear-gradient(bottom,#EBEBEB,#FFFFFF);
    background: -moz-linear-gradient(center bottom,#EBEBEB 0%,#FFFFFF 100%);
    background: -o-linear-gradient(#FFFFFF,#EBEBEB);
    border-top: solid 1px #CDCDCD;
    border-left: solid 1px #C2C2C2;
    border-right: solid 1px #C2C2C2;
    border-bottom: solid 1px #B7B7B7;
    min-width: 202px;
}
.custom-white-button a {
  color: #7B7B7B;
  text-decoration: none;
}
.custom-white-button:hover {
    background: #FAFAFA;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#F0F0F0),color-stop(1,#FFFFFF));
    background: -ms-linear-gradient(bottom,#F0F0F0,#FFFFFF);
    background: -moz-linear-gradient(center bottom,#F0F0F0 0%,#FFFFFF 100%);
    background: -o-linear-gradient(#FFFFFF,#F0F0F0);
    border-top: solid 1px #D2D2D2;
    border-left: solid 1px #C7C7C7;
    border-right: solid 1px #C7C7C7;
    border-bottom: solid 1px #BCBCBC;
}
.custom-white-button a:hover {
  color: #7B7B7B;
  text-decoration: none;
}

Try that and then let me know if you want any tweaks like font size or spacing etc.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread