PTR Theme Walk Through (version 2.9.4 and below)

[Reba]

PTR themes allow you control of the design of the page members see after clicking a paid to read ad on your website. By default the script displays a very basic Bootstrap 3 panel with no extra ad space. Using the PTR Theme tool allows you to create your own designs as well as house many themes so you may keep them ready for holidays, special events, etc.

To find the page in admin open admin and find "PTR Themes" towards the bottom of the advertising panel or in the side menu under Manage Ads > Functions > PTR Themes.

The first thing you see is a setting for which template type to use:


"Default bootstrap panel (settings based)" is exactly what it says, the default panel. The (settings based) means simply that a setting is being used to load the css file (bootstrap) that controls the panel styling.

"Customized theme chosen below (SQL based)" is to be selected only once you have created a theme and it is enabled. This option will use the database to load css you have created with the fields found below.

If no custom theme has been enabled the members will see the default panel regardless of this setting.

Now lets create a theme...


Theme name This is only for your reference, members will not see the theme name. It shows only in admin, viewing the page source will not even reveal this name.

Main body background Controls the color of the page body background, fill in even when using an image as it is the fallback color should a browser be blocking images from your domain etc.

Main body background image You are able to leave this field blank if you do not want a background image on the page body. If you do want a background image this is where you put the URL to your image. You may use an image from anywhere by simply putting in the image URL however I am going to explain how to use an image hosted on your own domain as this is the best practice.

Simply put in the file path, in the image above it shows how. To find your file path start at the root (usually public_html), then the folder the image is in. In this case the image is in two additional directories before we get to the image itself. By creating the second directory in the images folder I am sure my images will not be overwritten in future updates of the script. The third directory you see here is just my keeping a dev site cleaned up. If you do not know how to create a folder in cpanel you can check here http://auroracoderz.info/index.php?topic=48.0

Background image behavior If a body background image is used this will control the image behavior. If you are not using a background image just ignore this field.
The options explained:
Repeat This will allow the image to repeat both vertically and horizontally.
Repeat Horizontally This will allow the image to repeat itself from left to right only.
Repeat Vertically This will allow the image to repeat itself from top to bottom only.
No Repeat - Top Left This will not allow the image to repeat and will begin the display at the top left of the screen.
No Repeat - Center This option sets the image in the center of the page and does not allow it to repeat.
Stretch Full Screen From Center This option sets an image to full screen and does not allow it to repeat.

In the demo we are creating we are going to set the image to No Repeat - Center.



Div width Width of the div containing the member ad in pixels. You only need to fill in the actual number, not the px.
Main div background Controls the background color of the div containing the member ad, fill in even when using an image as it is the fallback color should a browser be blocking images from your domain etc. You should be able to leave this blank to allow for transparent background images to be used instead but there's a little bug that forces a color in this field that will be fixed in the next release. For now we will just leave it set to white, the edit page will allow us to leave it blank.
Main div background image This will set an additional background image inside the div members ads show in. I use this to create a transparent background color for the most part. You are free to use it as you choose of course.
Div background image behavior This is the same as the body background image behavior just for the div background image instead.



What good is a custom theme without being able to choose a font that is complimentary? For this demo we are going to use fonts.google.com so in a new tab open google fonts and pick your font. I have chosen sriracha and so in the top right corner of it's box I will click the plus icon:



Now in the bottom right hand corner a black rectangle will have appeared, click it and you will see this:



Font link will be the full and exact link as shown in google under embed on google fonts.
Font face will be the font family as shown under Specify in CSS on google fonts.
Font size is the default font size on the page in pixels, it should not be less than 14.
Font color is the default font color of the page.
Title size is the font size of the title, it should be larger than the default font.
Title font color is the font color of the title and can be the same or different than the rest of the text.


Border radius This defines whether you have square or rounded borders on the div holding the ad. If you want square borders set it to 0, anything higher will create a round border. For this demo I am setting mine to 8.
Border style This is if you wanted a border around your main div. For the demo I am setting it to hidden as I have set a transparent background. The other options are self explanatory, solid will be a solid line, dashed will be dashed, dotted will be dotted.
Border size This is the size of the border in pixels. Since I do not want a border on the demo I have set it to 0.
Border color This is the color of the border for the div containing the member ad, it should be set even if you have set the border to hidden.


Button color This is the color of the button at the bottom of the div that tells the user to proceed.
Button text color This is the text color of the button.
Button hover color This is the color of the button when a user hovers over it.
Button text hover color This is the color of the button text when a user hovers over it.
Button border radius This defines whether you have square or rounded borders on the proceed button. If you want square edge set it to 0, anything higher will create a round edge. For this demo I am setting mine to 8.
Button border style This is if you wanted a border around your proceed button. For the demo I am setting it to hidden. The other options are self explanatory, solid will be a solid line, dashed will be dashed, dotted will be dotted.
Button border size This is the size of the border in pixels. Since I do not want a border on the demo I have set it to 0.
Button border color This is the color of the border, it should be set to a fall back color even if you have set the border to hidden.


Box shadow This will enable or disable ashadow around the member ad div.
Box shadow inset? Yes will place the box shadow inside the div, No will place it outside the div.
Horizontal offset (box-shadow) A positive number means the shadow will be on the right side of the div, a negative number will put the shadow on the left side of the div, set to 0 to center the shadow.
Vertical offset (box-shadow) A positive number means the shadow will be below the div, a negative number will put the shadow above the div, set to 0 to center.
Blur radius (box-shadow) The higher the number here the more blurred the shadow, and the further out the shadow will extend, set to 0 for a sharp box shadow.
Vertical offset (box-shadow) This is optional, a positive value will increase the size of the box shadow, a negative value will decrease the size, default is 0. The title here is a mistake that will be fixed in the next release, it should actually say Box shadow spread.
Box shadow color This is the color of the box shadow and should be set even when not in use.


Top third party ad and bottom third party ad allow you to paste ad codes from places like adhitz.com or a-ads etc. directly into your paid to read page. You do not need to do anything special to the codes here, just paste them in. I am using simple image tags to demonstrate as the site I am doing this on is not in any ad network sites.

Now we click save and our newly created theme will show up at the top of the page:


To preview the page we must enable SQL based themes above in the template type setting, if you have not done that yet do that now. After that is set we will click preview next to the created theme... this is what the demo gave me:


Now, lets edit the theme...
First I am going to edit the body background color to get as close as I can to the image background color.
Second I am going to remove the main div background color as the edit page will allow for it though the main page did not.
Third I am going to add two break tags above the first ad just to bring it all down a bit. <br> is a break tag.
Last I am going to change the box shadow size from 10 to 0 (Remember, it's the second Vertical offset (box-shadow) title we are changing to change the box shadow size).

Save and refresh and we now have this:


I am happy with this so I am going to go back to the edit page and under status I am going to set it to enabled and save. Members will now be seeing this same theme.


*All bugs mentioned in this how to will be fixed as of Deluxe v2.9.5.

**The feather background came from pixabay.com - this is an awesome site that allows you to use their images commercially with no attribution required if you need to find some images of your own.

[CashnClicks]

Thank you, Reba.

[Reba]

No problem... I am adding a walk through of custom click images next, hopefully by the end of tonight

[Cougarbucks]

Thank you!