How to make a locker to appear as a locker in the 3th example on the demo page?

Plugin: Social Locker for WordPress
Version: 2.0.0+

Decide which theme you will use as a base (that theme will be changed). In this example we will create a new theme by using the default theme as a base. As a result we want to get a theme of the view:

1. At first we have to upload the image with a lock, that is placed the left of the buttons, on a server . Save this image to your computer and upload it on your server:

http://onepress-media.com/storage/demo/social-locker-for-wordpress/img/lock-example.png

2. Open the file style.css of your current theme to edit (for example, move to the menu Editor):

3. Append the following code to the file:

.onp-sociallocker.onp-sociallocker-starter  {
	padding: 30px 10px 20px 220px;
	background: #f8f8f8 url("url/to/the/lock/image/on/your/server") 20px 20px no-repeat;
	overflow: hidden;
	min-height: 205px;
}
.onp-sociallocker.onp-sociallocker-starter .onp-sociallocker-text {
	text-align: left;
} 
.onp-sociallocker.onp-sociallocker-starter .onp-sociallocker-buttons {
	padding: 0px;
	text-align: left;
}
.onp-sociallocker.onp-sociallocker-starter .onp-sociallocker-button {
	width: 100px;
	margin: 10px 10px 0 0;
	overflow: hidden;
}

Dont’t forget to replace the value “url/to/the/lock/image/on/your/server” with the URL of the image uploaded on your server earlier.

4. Save the file style.css.

Now if you select the default theme for any locker, it will look as a locker on the image at the beginning of this article.