Jump to content
Keith Vaugh

Place a shortcode for a button in a Widget or other element

Recommended Posts

Keith Vaugh

Hi All

I'd like to place a shortcode for a button in a widget, but am unsure what I need to do. In the past this is what I used (DMS2 days)

[pl_button type="magva-contact" link="https://www.magva.com/contact/"] Say Hello[/pl_button]

and this was the CSS I used:

.btn-magva-contact {
	border-radius: 0px;
  	color: #ffffff;
  	border: 1px solid rgba(93,34,72,1);
  	background: transparent;
  	font-family: "Open Sans","Helvetica Neue","Helvetica",Arial,serif;
  	border-color: rgba(255,255,255,0.6);
 	letter-spacing: 0px;
  	padding: 2px 10px;
  	font-size: 11.9px;
  	-webkit-border-radius: 0px;
  	-moz-border-radius: 0px;
  	border-radius: 0px;
  	display: inline-block;
  	margin-bottom: 0; 
  	line-height: 20.7px;
  	text-align: center;
  	vertical-align: middle;
  	text-transform: uppercase;
  	cursor: pointer;
  	font-weight: 300;
  	text-shadow: none;
  	margin-top: 0px;
}
a.btn-magva-contact {
color: #fff;
}
a.btn-magva-contact:hover {
	color: rgba(93,34,72,1);
  	background: rgba(255,255,255,1);
  	border: 1px solid rgba(93,34,72,1);
}

I have adapt this to so that I am using (BTW can't seem to get the icons working either):

[plsc_button color="magva-contact" link="https://www.magva.com/contact/"]<i class=" pl-icon-envelope"></i>   Say Hello</a>[/plsc_button]

and the CSS:

.pl-btn-magva-contact {
	border-radius: 0px;
  	color: #ffffff;
  	border: 1px solid rgba(93,34,72,1);
  	background: transparent;
  	font-family: "Open Sans","Helvetica Neue","Helvetica",Arial,serif;
  	border-color: rgba(255,255,255,0.6);
 	letter-spacing: 0px;
  	padding: 2px 10px;
  	font-size: 11.9px;
  	-webkit-border-radius: 0px;
  	-moz-border-radius: 0px;
  	border-radius: 0px;
  	display: inline-block;
  	margin-bottom: 0; 
  	line-height: 20.7px;
  	text-align: center;
  	vertical-align: middle;
  	text-transform: uppercase;
  	cursor: pointer;
  	font-weight: 300;
  	text-shadow: none;
  	margin-top: 0px;
}
a.pl-btn-magva-contact {
color: #fff;
}
a.pl-btn-magva-contact:hover {
	color: rgba(93,34,72,1);
  	background: rgba(255,255,255,1);
  	border: 1px solid rgba(93,34,72,1);
}

Resulting in the attached image (site is on a localhost as I migrate to PL5 so unable to share). It should appear as the second attached image.

I'mm sure its something simple that I have overlook but would appreciate being pointed in the correct direction.

Thanks in advance.

 

Screen Shot 2016-12-30 at 19.31.53.png

Screen Shot 2016-12-30 at 19.33.05.png

Share this post


Link to post
Share on other sites
Aires

Either one of those methods in the post will work I have tried them both.

It is useful if you want to add images or ads into your sidebar or other information.

 

  • Like 2

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×