1769 comments found

  • Has been a member for 5-6 years
  • Exclusive Author
  • Bought between 1 and 9 items

Hi before i buy i try to do something but i can not i need to put div at down of main section and to be docked in bottom of page and fixed it try many ways like bottom:0px;position:fixed !important;

displayinline

Hi!

Actually, fixed elements are always relative to the viewport, whatever element they are in. So you code is right, but you’ll need to set left and right margins – the same as #main.

Basically, the default style could be (in style.css):

.dock-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

Then look for each occurrence of #main in the responsive stylesheets (768.css and 992.css), and duplicate the left and right margins for the style created above.

For instance, if you find this:

.with-shortcuts #main {
    margin-left: 68px;
}

You should add this below:

.with-shortcuts .dock-bottom {
    margin-left: 68px;
}

Also remind to set a large enough bottom padding for #main to ensure there is enough room for your fixed block to fit when the user scrolls down to the bottom of the page.

Hope this helps ;)

  • Bought between 50 and 99 items
  • Has been a member for 3-4 years
promosync Purchased

I have a model window like this:

var mode = ''; /* Value from the calling /
 var valW =''; / Value from the calling /
var isEdt = boolean value; / Value from the calling */
j$.modal({
                     title: ((valW=='Ph') ? nme : ((valW=='Dr') ? (nme + ' ' + lstnme): '')) + "'s Details",
                     content: j$("#idDetails"),
                     width: 400,
                     scrolling: false,
                     actions: {
                       'Close' : {
                         color: 'red',
                         click: function(modal){
                             j$("#idDetails").html('');
                             modal.closeModal(); 
                         }
                       }
                     },
                     buttons: {
                         'Close': {
                             classes: 'button blue-gradient glossy center',
                             click: function(win) { j$("#idDetails").html(''); win.closeModal(); }
                         },
                         'Edit':{
                             classes: (mode=='true' && !isEdt) ? 'button green-gradient glossy center' : 'disabled',
                             click: function(win)
                             {
                                 if(mode=='true' && !isEdt){
                                     j$("#idDetails").html(''); 
                                     j$("#idDetails").append("   ");
                                     j$("#idDetails").append("");
                                     j$("#tblData").append("<tbody></tbody>");                           
                                     if(valW == 'Ph'){
                                         isEdt = true;
                                         j$("#tblData").append("");                                                                     
                                         j$("#tblData").append("");                                   
 //alert(j$.modal.current.getModalWindow().html());
 //j$.modal.current.getModalWindow().({button:{'Edit':{classes: 'disabled'}}});
         }
                                     else if(valW == 'Dr'){
                                         isEdt = true;
                                         j$("#tblData").append("");                                  
                                         j$("#tblData").append("");  
                                     }
                                     j$("#idDetails").centerModal(true);
                                 }
                             }
                         }
                     },
                     buttonsAlign: 'center',
                     buttonsLowPadding: true,
                     onClose:function(){},
                     onOpen:function(){
                         j$("#idDetails").append("   ");
                         j$("#idDetails").append("
Pharmacy Name <input type=\"text\" value=\"" + nme + "\" id=\"txtMNNF\" class=\"input validate[required]\"/>
Phone <input type=\"text\" value=\"" + phone + "\" id=\"txtMNNF\" class=\"input validate[required]\"/>
First Name <input type=\"text\" value=\"" + nme + "\" id=\"txtMNNF\" class=\"input validate[required]\"/>
Last Name <input type=\"text\" value=\"" + lstnme + "\" id=\"txtMNNF\" class=\"input validate[required]\"/>
"); j$("#tblData").append("<tbody></tbody>"); if(valW == 'Ph'){ j$("#tblData").append(""); j$("#tblData").append(""); } else if(valW == 'Dr'){ j$("#tblData").append(""); j$("#tblData").append(""); } } });

When ever a user clicks on “EDIT” button of the model, 1. “EDIT” button should be disabled 2. A new button should appear “SAVE” and it should be having its click event for further processing in the likely event that the user feels to save the info entered in the edit mode.

Pharmacy Name " + nme + "
Phone " + phone + "
First Name " + nme + "
Last Name " + lstnme + "
displayinline

Hi,

If you want to change the modal buttons, you can easily retrieve them this way in your existing buttons functions:

var buttons = win.find('.modal-buttons button');

So if you want to disable the edit button, just do:

buttons.filter(':contains("Edit")').disableInput();

And to add another button:

var button = $('<button ... >Save</button>').appendTo(win.find('.modal-buttons'));
button.click(function()
{
    var win = $(this).getModalWindow();
    /* Your code here */
});

Hope this helps! ;)

  • Bought between 50 and 99 items
  • Has been a member for 3-4 years
promosync Purchased

It would be great if there is any demo code documentation (example js/jQuery code) for using 1. input checkbox 2. select 3. select (multi) 4. Switches

As these elements are replaced by the framework for better look and feel, they become hard to work with the normal way. Example: <input id=”chkBWeeklySun” name=”chkBWeeklySun” type=”checkbox” class=”checkbox”> Sunday </input> in order to set the value (eg checked) using script, we need to use j$(’#chkBWeeklySun’).prop(‘checked’, true).change(); but in order to get the value (checked /unchecked), what should be the script ? j$(’#chkBWeeklySun’).closest(“span.checkbox.replacement.checked”).hasClass(“checked”); as when try to do j$(’#chkBWeeklySun’).selected —> it results in “undefined” Also, if we try to stop the element from being checked (depending on some other variable value), like j$(”#chkBWeeklySun”).change(function(){ var Selectable = (tot>4) ? false : true; if(!Selectable && this.checked) this.checked = false; } }).change() This does not work as desired

Any demo documentation is greatly helpful on all above four elements

displayinline

Hi again,

The template only wraps those elements in a styling span, so you may read and change your inputs as if they were untouched (accessing them via name or ID) – just use regular jQuery code.

To retrieve the state of a checkbox, just read its internal property:

var checked = $('#id').prop('checked');

(Note to all: you must use prop() instead of attr(), read the method documentation to learn why)

About your last code snippet, you may do something like this:

j$('#chkBWeeklySun').change(function()
{
    var Selectable = (tot>4) ? false : true;
    if (!Selectable && this.checked)
    {
        this.checked = false;
        $(this).change();
    }
});

Hope this helps!

  • Bought between 100 and 499 items
  • Has been a member for 4-5 years

Hey,

I must say first, this template is awesome! It has truly been a pleasure working with this.

I am having a few slight issues that I am stuck.

1) On tablet landscape layout, latest version chrome, when i click on a select input in a form, it flashes open and closes, I cannot seem to open it. However, if i open the menu and close it, the select works perfectly. see code below of select input

2) Regarding confirm tooltip. I read in doc <a href="link.html" class="confirm">Do some action</a>. This does not seem to work for me, am i missing anything?

3) I was wondering if there is a way to make sidebar shortcuts wider so that I can have text to right of the icon.

Any advice would be greatly appreciated

<select name="selectaction" class="select check-list blue-gradient glossy mid-margin-left">
    <option value="" selected="selected">Please Select</option>                    
    <option value="d">Delete</option>
    <option value="u">Mark as Unread</option>
    <option value="r">Mark as Read</option>
    <option value="dl">Download</option>
</select>
displayinline

Hi, and thanks! :)

Here are my answers:

1) There was an issue on touchscreens with selects in a few special cases with the previous version of the template: if you upgrade to the latest update (published today!), everything should work fine. If you don’t want to upgrade everything, just replace the files js/developr.input.js and js/developr.navigable.js.

2) Make sure you have included the script developr.confirm.js along with developr.tooltip.js – both files are required for this feature. Tell me if you still can’t make it work!

3) Actually no, though it should be possible – but it would require many tweaks in several stylesheets and some changes in the markup.

Tell me if you have more questions! ;)

Default-user

Thanks for the quick reply, i got the confirm to work, uploading the new files fixed it, thanks. I was still unable to fix the select issue, I will play around with it over the weekend and let you know.

Thanks again!

Default-user

Just uploaded the newest version to server. It is running PERFECTLY .

Thanks, I appreciate you taking the time!

displayinline

Glad I could help! ;)

  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 1-2 years
  • United Kingdom
Hi, I think about purchasing this theme but somes questions still.
  • will i be able to have future updates on this theme (the version 1.4 for example)
  • What kind of documentation is included ? I mean, do i have to inspect the example provided here to reproduce it on my app ?

thanks by the way you can reply on french

displayinline

Salut ! :)

  • Bien sûr, toutes les mises à jour sont disponibles gratuitement pour tous les acheteurs. Suivez-moi sur Twitter pour en être informé, il suffit ensuite de re-télécharger le package pour obtenir la dernière version.
  • La documentation couvre l’intégralité des styles et des fonctionnalités de la maquette, avec des références détaillées de toutes les options, des exemples prêts à l’emploi et des conseils. Et bien sûr, il est possible de piocher dans les 35 pages d’exemples fournies ;)

N’hésitez pas si vous avez besoin d’autres renseignements !

  • Sure, all updates are available freely for all buyers. Follow be on Twitter to be notified when an update is ready, and re-download the package to get the latest version.
  • All styles and features of the template are detailed in the documentation, with complete options references, ready-to-use examples and tips. And you can use any of the 35 example files as a start ;)
Default-user
0x1gene Purchased

Thank for the answer. I bought it ;)

displayinline

Thanks! :)

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

I’ve searched the comments here, but haven’t found a solution to this. When i use the tooltips from the theme, the browser tooltips are still showing in addition to the themed ones. Any idea why that would happen? Thanks Rod

displayinline

Hi,

Well, I have never seen this issue before… The tooltips plugin is supposed to remove the browser’s tooltip before showing the custom ones.

Do you use one of the data-tooltip-content or data-tooltip-title attributes to pass the tooltip content (or set them using data())? If so, adding target[0].title = ''; above the return statement in js/developr.tooltip.js at lines 101 or 108 may solve your issue.

Also, if you have an online demo I may check, I will see if I can find what’s not working ;)

Hope this helps!

Default-user

Well, I am not using data values, I’m just adding a title and the with-tooltip class. I don’t have a demo, I’m afraid. But I was tinkering and found this.

It seems to have something to do with the restoretitle function. If I comment out the line that assigns the text value back to the title, the tooltip displays correctly and the browser tooltip does not. Unfortunately, the next time you mouse over the icon, the tooltip doesn’t display at all. I’m not sure what’s going on.

Rod

displayinline

Actually, here is how the tooltips work by default:

  • On hover, the title attribute is stored, and an empty value is set instead
  • Then the template tooltip is shown, using the retrieved value
  • On mouse out, the tooltip is removed, and the original title attribute is restored using the _restoreTitle() function

Hard to tell why it is not working in this case… Can you tell me more about your issue? For instance, post a sample of your markup, check if this issue occurs in every browser on only in some of them, and if you have errors showing in the browser’s console… This will help me find a solution ;)

Default-user

Sorry for the delay. Been busy.

Here’s the markup:

I don’t see any errors in the console. And it does the same with firefox and chrome. I’m sorta at a loss.

Rod

Default-user

Oh man, do I feel foolish. I had the js file for tooltips loading twice in my file. Removed the extra reference, and all works perfectly. Ugh!

Thanks Rod

displayinline

We’ve all been here, with this obvious bug in front of us we just can’t find… ;) Glad to hear you found out!

  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
brobar Purchased

I’m sure it is probably an iOS 6 problem (I seriously doubt it has anything to do with your code), but I wanted to throw it your way and see what you thought. I’ll use the following URL of your template as an example (it does the same thing on my own code locally as well): http://www.display-inline.fr/demo/developr/template/inbox.html

If I load that URL in either my iPhone 5 (iOS 6) or iPad 3 (iOS 6) in portrait mode, everything displays as expected. However, if I load that page (or any page in your template) in the iPhone 5 or iPad 3 in landscape mode… the page is blank white. I can load it in portrait and then turn it to landscape and it displays fine… but it doesn’t display correctly if I try and load it directly in landscape. This does NOT happen, however, when testing out the same page(s) on my wife’s iPad 2 with iOS 5.

I did lots of testing to try and narrow down the problem and it appears to be connected with the stylesheet links in the header under
<!-- For progressively larger displays -->
If I remove those 4 links… the page loads fine and as expected and when I add the links back… it won’t load in landscape mode again.

After narrowing it down this far… I thought it might have something to do with iOS 6 caching those links… so I setup PHP calls at the end like this…

<!-- For progressively larger displays -->
    <link rel="stylesheet" media="only all and (min-width: 480px)" href="css/480.css?version=<?php echo time(); ?>">
    <link rel="stylesheet" media="only all and (min-width: 768px)" href="css/768.css?version=<?php echo time(); ?>">
    <link rel="stylesheet" media="only all and (min-width: 992px)" href="css/992.css?version=<?php echo time(); ?>">
    <link rel="stylesheet" media="only all and (min-width: 1200px)" href="css/1200.css?version=<?php echo time(); ?>">

...to make sure that it was a unique call each time. Now interestingly when doing this… it will load the page in landscape mode, but the URL section stays half blue (like it is still loading) and the spinning “loading” icon up in the bar next to the wifi signal… it will sit there and spin like crazy as well and never stop unless I click on the “x” in the address bar to stop it. See image below:

http://i47.tinypic.com/23vjkav.png

Do you have any idea what could possibly be causing that and/or know of a fix? Isn’t that a little weird? I’ve never stumbled upon anything like this before. Have you seen this anywhere before?

Thanks in advance for the response.

displayinline

Hi!

Indeed, this is a really weird issue… Everything works fine on my iPad2 on iOS6, so this may be related to a bug on iOS6 devices with retina screen. Hard to tell what causes this… The blank screen tends to make me think the rendering engine fails somewhere.

The 4 responsive stylesheets are not required on iPhone, this is why it works fine without them. But i really have no idea why they cause this bug – especially since it only happens on landscape mode, so it is not related to the code, as you said.

I will keep investigating on this issue, I will tell you if I find any solution or workaround. In the meantime, let’s just hope Apple will fix it ;)

Default-user
brobar Purchased

I am curious if it may be related somewhat to the inline media query of those 4 sheets. That doesn’t explain why it semi-works with a unique value at the end of each call. Later today, I’m going to combine those 4 files into one and do the media query from inside that single CSS file. We do that elsewhere and it does fine so maybe/hopefully it will here as well. I know it isn’t ideal since your way would keep it leaner on mobile devices, but it might be worth a shot. I don’t THINK it has anything to do with any of the actual CSS in those 4 files… I think I remember emptying (but still calling) those 4 files yesterday and it still bugged out… which has me thinking it may not be playing nice with those inline media queries.

I’ll keep you posted.

  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Panama
saruman Purchased

Hi! Today, I update the new version and some stuff don’t work as before, specially the menu (http://s18.postimage.org/dghnz24p5/menu_firefox.jpg). Check the image link. Every last option of the menu after load de page is shrink it… but, while is animating (like the demo) all works good. That is in Firefox, I tested in chrome and works fine… Before was the buttons, now the menu :D

Another thing, the textarea with class “input full-width autoexpanding” dont work well (http://s9.postimage.org/4po5d2p5r/textarea.jpg) in chrome and firefox. When you start to type the input start increase the height, but, it’s pretty ogly when you open the form to fill out and see that like that :) The height have to be equal to the input, so, when someone start typing the textarea will increase it’s height.

Hope you can help us.

Thank you and good to have the new version :)

displayinline

Hi!

About the menu, I wasn’t able to replicate the issue, even in Firefox. Maybe is this related to a specific setup: can you show me the markup you are using? I will make some more tests and try to find what’s wrong.

About the textarea height issue, I added a simple fix for this, you can get the latest version here. Tell me if this fixes it! :)

saruman
saruman Purchased

Hi.

Thank you so much for the fix of the textarea, now works perfectly awesome!

I sent you a private message with a video explaining more about the menu issue. Let me know about anything.

Cheers!

  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
brobar Purchased

Re: the 4 CSS files not working in landscape on retina iOS 6

Ok… I couldn’t wait ‘till later to test it out. hehe So I went through and confirmed that even if I empty all 4 of those CSS files but leave the calls to them, it continues to bug out like before. If I made the version number static… it would show a blank screen and if I made the version number dynamic and unique… it would show in horizontal but the loading indicators would never go away after the page loaded.

So I took all 4 CSS files and combined them into one CSS file called sizes.css and put relating media queries for each batch of code in there. It works perfectly fine now on the iPad 3 and iPhone 5 (both with iOS 6)... doesn’t matter if we keep the version number static or dynamically unique now.

Does that tell us that it isn’t playing nicely with those inline media queries to css files? It doesn’t seem to have a problem and bug out with the media query in the css link right below it calling the css/2x.css file. So that seems to narrow it down even more… showing that it doesn’t want to play nicely with the min-width: part of an inline media query of a linked css file.

I agree with you though… hopefully Apple fixes that soon! =) Your way seems like it would have been leaner for mobile devices on slower connections. At least this sort of works around the issue for now.

displayinline

Hey!

Thanks for the detailed feedback, this will be precious if anyone else has the same issue.

Really hope they’ll fix that soon ;)

  • Bought between 10 and 49 items
  • Has been a member for 1-2 years

Hi there. Loving the template, great work.

Regarding the visitor/user stat’s, do you have any documentation on getting it working?

Thanks, Paul

displayinline

Hi, and thanks! :)

On your question, there is no specific documentation, as every project has its own requirements.

You may either create your own stats (you can start with this tutorial for instance) or pull the data from an existing service, such as Google Analytics.

Then it is up to you to choose what kind of data to show, and how to show it. There are many guides and tutorials available, just choose the one that fits best your project ;)

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
c101756b Purchased

Love your template! Having a blast using it, with only the occasional difficulty.

I am baffled over this strange occurrence, however.

It seems that delete key events fire in textareas, but only delete the text intermittently.

The events log as fired, but will only actually do so, if the delete key is held down for a long time (or I random press on space/backspace keys… lol).

It will begin to behave normally for a couple more delete operations… Then back to the same problem.

Any ideas?

Thanks again, Carl Bailey

displayinline

Hi, and thanks! ;)

I just checked on all major browsers, everything seems to work fine here, so it is maybe related to a special case.

Does it happens on all browsers, or only in one? Also, do you have the same issue on the online demo too?

Also, if you have an online demo I can check, I will see if I can find what may cause this ;)

  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
xingyi998 Purchased

Hi,

I really like this theme, and have been used it for several projects.
Therefore, I find out a bug for the current version.
On the right navigation panel, the last row in the child menu is always covered by the following unstyled-list, but when I click the menu to go back to parent menu and return again, it become normal.
By the way, all the the example file act the same on this bug, and I tested it on different browsers (chrome 22, Firefox 16, IE 10 ) and still get the same result.

I attached the screen shoot here:
#1
bug

#2
bug

displayinline

Hi!

I had some other buyers telling me about this issue, the latest version of the navigable menu plugin should fix it: can you try downloading the latest version and tell me if this fixes the issue?

Thanks! :)

  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
xingyi998 Purchased

Thank you, the latest version that you sent me fix the menu problem. It works fine now.

displayinline

Glad I could help! And thanks for your feedback ;)

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
youngguy Purchased

I got a question on style select. I use Jquery to add another option to the SELECT but now how can I make the engine re-render the styled one?

Thank you a alot man. This template rocks!

displayinline

Hi, and thanks! :)

To force a refresh of the drop-down list, just trigger the corresponding special event:

$('#select').trigger('update-select-list');

If the value of the select also changes in the process, you may chain it with a change event:

$('#select').trigger('update-select-list').change();

Tell me if you need more details!

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
youngguy Purchased

Also, a color picker input would be great and easy to implement to this nice template in the next update right?

Cheers, SZ

displayinline

Sure, that’s a good suggestion, thanks! ;)

Default-user
youngguy Purchased

Thank you! Also, that event “update-select-list” works great. I think you should include these events, functions into the DOC too. Same with modal windows, currently I want to make the input of $.modal.prompt as a color picker, but still finding the way to do it without modifying your JS source code.

Maybe add a callback function in {options} ?

displayinline

Actually, you may just use the onOpen callback to instantiate your color picker on the prompt input – something like this:

$.modal.prompt(message, callback, cancelCallback, {
    onOpen: function()
    {
        $(this).find('input').colorpicker();
    }
});

Hope this helps! ;)

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
Stan92 Purchased

Hi, I’ve a little problem using the modal plugin with IE9 . My modal can see its height resized when the user performs an action (means the content can change without closing or reopening the modal itself). With IE, when the height becomes smaller than the original height, it leaves a track.. Here’s a an example : The original height :

when the content has changed :

Is there a way to remove this track ? Thanks for your help.

displayinline

Hi!

This looks like a rendering engine bug – the browser fails to redraw everything correctly. You may fix this by changing any property of a parent element: this will force the redraw. For instance, add this function and call it after each change:

var modals = $('#modals');
function redrawModals()
{
    modals.css('opacity', '0.99');
    setTimeout(function() {
        modals.css('opacity', '');
    }, 20);
}

(The timeout is required for the redraw to happen)

Seems to work fine here, tell me if you still have issues ;)

Default-user
Stan92 Purchased

Yes :) It works fine… I thank you :)

displayinline

Glad I could help :)

  • Bought between 10 and 49 items
  • Has been a member for 3-4 years
Lucky1968 Purchased

Hi, I have installed your 1.4 version but I have a small problem with the navigable menu. When I click an item the submenu appears but the last item of the submenu is not displayed completely. It is partly covered by the carbon from the bottom.

Also I would like to ask how to keep the navigable menu set to the selected menu item when the linked content is loaded by a page refresh instead of using ajax? Because then the menu is refreshed also to the top level.

Thanx for your help.

displayinline

Hi!

I just pushed an update with a fix for this issue, but the update has not been approved yet – you can download the corresponding file here. Everything should work fine then ;)

On your second question, this is easy: just add the class navigable-current to the anchor or span that should be open on page load. You may also add the class current to add a visual hint.

Hope this helps! ;)

  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
rtcoms Purchased

I have few questions :

I don’t know if it’s related to you or themeforest. I bought this theme just one month back, do I need to buy it again for latest version ?? Download link also doesn’t have any version number.

Does this theme scale elegantly for retina display ??

is it possible to not have full width for body other than header and footer ?

displayinline

Hi!

Here are my answers:

- As a buyer, you have access to all updates for free: just go to your downloads page, and download the file again – there is no version number, but you will always get the latest version (check the documentation for the exact version number) ;)

- The template is retina-ready: CSS3 effects are used everywhere possible, and raster icons are provided in high resolution too.

- If you want to set a max width for the content, you may simply do this on the wrapping div inside of #main:

<div class="with-padding" style="max-width: 800px; margin: 0 auto">
    <!-- Your content -->
</div>

Of course, you may create a special class instead of using inline styling, this would be much cleaner.

Hope this helps! ;)

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
youngguy Purchased

There’s another annoying thing is the setup.js, you have to edit the respondPath every time you update the template (js files). I think you should add this “detect path” function into your setup.js for more convenient!

Detect Path:
        /**
         * Detect Script Path
         */

        detectPath : function() {
            var e = document.getElementsByTagName('script');
            for(var i=0; i<e.length; i+=1) {
                if(e[i].src && /(^|\/)setup\.js([?#].*)?$/i.test(e[i].src)) {
                    var patern = "/setup\.js.*/i";
                    var src = (e[i].src).replace(/setup\.js.*$/i,"")+"libs/";
                    return src;
                }
            }
            return false;
        }

Cheers :)

displayinline

That’s pretty neat, thanks for sharing!

I will add this for sure ;)

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

I’m very interested in purchasing this theme and am wondering if there is a simple way to have the sidebar be text with a smaller icon, instead of just the large icon. Thanks!

displayinline

Hi!

This is not possible by default, because the icons must have the same size across the various template responsive layouts. But I guess this may be possible with a few CSS changes and an extra element or two in the markup.

Let me know if you purchase the template, I will give you instructions ;)

by
by
by
by
by
by