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.