341 comments found.
Dear ColoredStrategies,
I can not seem to change the language dropdown indicator EN and ES to TR and EN. How can i change this?
Secondly, I do have a problem with the implementation of :mailto attribute to an object. it creates a bug and open not allow to open the pages.
Please help/
Hi,
EN and ES values are id properties at “localeOptions” variable in “src/constants/config.js”. These values get registered to i18 library at “src/main.js” file.
You may use mailto link like below.
<a :href="`mailto:test@mail.com`">test@mail.com</a>
<a :href="`mailto:${myMail}`">{{myMail}}</a>
Thank you.
Hi. I found that piaf dont have Datatables. I have purchase dore before and i like the datatable which has responsive fetaures. Can i more the dore datatables to piaf or any good idea can solve it? I need the responsive datatable.
Hi,
Unfrotunately, we don’t have any out of the box solution for it yet. We know that there are some work currently being done for Vuetable about responsive support and we are waiting for their update to implement it in our project.
We have thought on adding jQuery dependant plugins to the project while developing it but decided not to do it after doing some research about it. We also suggest you to do the same if your timeline is not tight.
All the best.
Hello.
For some reason, every time I have different arrows in the slider. First they are in the image, after refreshing the page they are under the image
https://drive.google.com/file/d/1ILXJbDZqQVTGXkNsutN62f60FYfoUz88/viewHi,
You are right about the problem. We haven’t noticed it until now, sorry about that.
You will need to remove below line from GlideComponentThumbs.vue file.
import "@glidejs/glide/dist/css/glide.theme.min.css";
And add below lines to “src/assets/css/sass/_piaf.style.scss” file.
.glide.thumbs {
.glide__arrows {
button {
position: absolute;
transform: translateY(-50%);
line-height: 1;
padding: 9px 12px;
}
}
}
This should fix the problem. Let us know if it does not.
All the best.
sorry, but not help it. i see this problem on you demo too https://drive.google.com/file/d/1TMGoDDfOrnMIa0e38i_ATv6DIdfwaC-I/view?usp=sharing
We have not updated the preview yet but you may check above solution via below link. It seems like working without a problem.
The solution is removing “glide.theme.min.css” file from the project and adding a small fix for thumbnails.
https://old-piaf-vue.coloredstrategies.comyeah, thx.
Hello, Unfortunately, I bought this item by mistake and it is useless for me. Now I want to cancel my purchase and return this item and get my money back. is this possible? Thanks and Best Regards,
Hi,
As you may have known, Envato made authors responsible for refund requests and created a refund policy to guide us. You may take a look at it here: https://themeforest.net/page/customer_refund_policy
We are trying to be fair with the requests and give refunds without question if the problem is ours or item has not been downloaded yet. To prevent possible confusions, we have included warnings at the top of our detail pages and added library or framework names to our item titles(e.g. Gogo React, Dore jQuery, Piaf Vue).
We have experienced some users are abusing the system when we try to be flexible, so we decided to stick with the principles provided by the refund policy which clearly states that accidental purchases may not be refunded.
Thank you for your understanding. All the best.
Hello, this is Can,
I have purchased your template a month ago and we are having difficulties to implement multilanguage features into the website. When we choose different languages on top, it brings the same page. How can we fix this? Thanks.
Problem solved. ( https://www.youtube.com/watch?v=CFGjn3yKMNc) But we could not figure out reversing the page on id: “enrtl”.. It simply doesn’t happen. We want to use this feature for arabic language implementation.
Hi,
I’m sorry but I could not comprehend the issue. It would be helpful for us if you may elaborate it a little more.
Is this something that also happens in the preview: https://piaf-vue.coloredstrategies.com
If not, do you think it might be related to the changes that you have made?
Are you trying to implement it differently than provided in the template?
Any error messages, code sample or a live version also might be helpful.
Finally; you may check out the guide about adding a new language at our docs, if you have not already: https://piaf-vue-docs.coloredstrategies.com/docs/guides/add-language
All the best.
Hi, does the theme allow customizing of sidebar colors out of the box (using variables) ? I don’t want to use an all-dark theme, but instead just make the menu bar dark. Thanks.
Hi,
We have thought about this while developing the template and examined the apps we use daily(Gmail, Clickup, Github etc). Lots of templates sold here provides the feature but we have not found usage in real world apps so decided that separation with background and shadow should be the way to go.
So, unfortunately it is not available as an out of the box feature. If you decide to implement it, you will need to work on the sass file and make adjustments manually.
All the best.
I won’t use vue, just HTML… Can I get a refund?
Hi,
As you may have known, Envato made authors responsible for refund requests and created a refund policy to guide us. You may take a look at it here: https://themeforest.net/page/customer_refund_policy
We are trying to be fair with the requests and give refunds without question if the problem is ours or item has not been downloaded yet. To prevent possible confusions, we have included warnings at the top of our detail pages and added library or framework names to our item titles(e.g. Gogo React, Dore jQuery, Piaf Vue).
We have experienced some users are abusing the system when we try to be flexible, so we decided to stick with the principles provided by the refund policy which clearly states that accidental purchases may not be refunded.
Thank you for your understanding.
How do I get started? He doesn’t have an index.html for me to use, can you help me transfer files to HTML?
I am buy this teampleate by error
Hi,
As you may have known, Envato made authors responsible for refund requests and created a refund policy to guide us. You may take a look at it here: https://themeforest.net/page/customer_refund_policy
We are trying to be fair with the requests and give refunds without question if the problem is ours or item has not been downloaded yet. To prevent possible confusions, we have included warnings at the top of our detail pages and added library or framework names to our item titles(e.g. Gogo React, Dore jQuery, Piaf Vue).
We have experienced some users are abusing the system when we try to be flexible, so we decided to stick with the principles provided by the refund policy which clearly states that accidental purchases may not be refunded.
Thank you for your understanding.
Hi.. How can i change the favicon showing on the google chrome tab?
found it!
Hello,
I’ve downloaded the template and looking for an installation guide to install the template to an existing Laravel project. Could you please provide me any documentation or tutorial on the same please?
Hi,
Unfortunately, we don’t have any experience with Laravel so we can’t provide any decent guidence for it.
All the best.
Hi,
First of all thanks for the great template, it is remarkable.
While trying to use the template it seems that my sidebar is not getting the rounded border-radius. I was trying to understand how and where have to attached the “rounded” class to the sidebar in the vue/js, but was unable to come up with an answer. Could you please clarify the same.
Thanks
Hi,
Thanks, it’s nice to hear you like the template.
As for your question, my guess is that you have removed right side color switcher and you would like to make it work without switcher.
To achive this, you need to add “rounded” class to the body of “public/index.html” file. You may also need to make some adjustments in “src/components/Common/ColorSwitcher.vue” file if you have not removed it. Deleting contents of “changeRadius” function should do the trick.
All the best.
Your suggestion was perfect, I had indeed removed the color switcher. My apologies for assuming it to be merely for color change.
On a side note, it seems there is a minor bug in the themes (which reveals only in the dark ones), where the user title text in the user profile in the TopNav is not using the $secondary-color. This causes the text to merge with the background color in case of the darker themes.
Thanks for the prompt reply 
Thanks for letting us know, we will look into it.
Have a good one.
Hi again, it appears that whenever I am clicking any of the buttons, it’s active color changes to a blue one. The style which gets picked up is referrenced from “https://localhost:3000/scss/mixins/_buttons.scss.
With the blue style details as – .btn-primary:focus, .btn-primary.focus { color: #fff; background-color: #0069d9; border-color: #0062cc;
Order of css imports : css: [ ’@assets/fonts/simple-line-icons/css/simple-line-icons.css’, ’@assets/fonts/iconsmind-s/css/iconsminds.css’, ’@assets/css/vendor/dropzone.min.css’, ‘bootstrap-vue/dist/bootstrap-vue.css’, ’@assets/css/vendor/bootstrap.min.css’, ’@assets/css/vendor/bootstrap.rtl.only.min.css’ ], The piaf styles get included as part of the layout templates hence would be the last one to get picked.
Please let me know where I am going wrong. It could very well be the case that I am importing the css files in a wrong order. Pardon me for the basic queries, I am just getting my hands went in frontend.
Hi,
No problem for questions, happy to help
Theme styles should override default Bootstrap styles as you have pointed out and at this point I am not sure what is preventing this. Here is the screenshot how it should be: https://ibb.co/YZvbYh5
For default “index.js” files loads the theme style file async and then loads “main.js” so cause of the problem might be this if you have modified the file.
Here is the async loading: https://ibb.co/QJHWzxf And here is the sync loading that should also work without any problem: https://ibb.co/t84Z9Gy
Let us know if you have any changes that might be cause of the problem.
Thanks for the detailed explanation.
It seems that the problem was not with the template, but the framework that I was using. In order to learn frontend I was trying to port this template from scratch in nuxt. While doing so I had imported the ‘botstrap-vue/nuxt’ moudle. This module by default includes both boostrap.css and bootstrap-vue.css as pre-compiled CSS. And this was messing up with the order in which the css were being imported.
Changing the behavior requires the following – bootstrapVue: { bootstrapCSS: false, // Or `css: false` bootstrapVueCSS: false // Or `bvCSS: false` },
The above will make sure that no css files are imported by default. There after your template is working flawlessly
Thanks again.
I was going through the image list and realized that the right click context menu seems to be positioned incorrectly. Please let me know if there is a quick fix for the same? Thanks.
Hi,
We have skipped checking context menu after implementing the footer. Sorry for the issue.
Adding below lines to “src/assets/css/sass/_piaf.style.scss” should solve the problem.
body:not(.no-footer) .v-contextmenu {
transform: translateY(-150px);
@include respond-below(xl) {
transform: translateY(-130px);
}
@include respond-below(lg) {
transform: translateY(-110px);
}
@include respond-below(sm) {
transform: translateY(-85px);
}
}
Thanks, it worked.
I was trying to use the image list mentioned in the pages. However, I noticed that if my images are of different aspect-ratios/sizes the cards don’t align well. It appears that the images which you have used are all of the same size and hence alignment isn’t an issue.
In my case the back-end serves images of different sizes and aspect ratios and hence the list becomes unaligned. Could you please guide me on how to align these images.
Example – https://ibb.co/LQBKVPg
Thanks
.card-img-top {
height: 180px; //you may change this for your needs
object-fit: cover;
}
Thanks, the center crop seems to look good and serves the purpose as well.
Hi, I extended the same concept to DataListItem, whereby since the height was already set, I tried to introduce a width:120px. However, in this case, the images are still unaligned. Could you please how to remedy this?
Hi,
I have not understand the problem, did you mean ThumbListItem instead of DataListItem since DataListItem does not contain image.
If that is the case, you may change ”.list-thumbnail” and add the desired width.
Here is a screenshot: https://pasteboard.co/INkuhDA.png
Hello, how are you ?, excellent template, I loved it a lot but I would like more components to be made for forms such as loading images with preview, as well as other components of forms that allow us to use the template even more. An example would be the change of the profile picture.
Hi,
Thanks for asking, hope you are doing well too.
Also thanks for the suggestions. We consider lots of angles when we get to decide which components should be included.
We try to avoid form components that require backend logic since we get requests to deliver backend code also. This causes a bit of extra work that we try to prevent.
Adding file uploads of any kind is also something we try to avoid since it also comes with a side work for cleaning uploaded files and such.
As you may see, we try to avoid this type of components to prevent keeping us busy with work that is not directly related to template. This approach provides us much needed time for actually working on the template.
Thank you for your understanding. All the best.
On top of my wish-list for the Piaf – Vue Admin Template, is the incorporation and use of firebaseui. It would be very easy and convenient to set up a login covering Googel, Facebook, Apple etc. Do you have any plans for this in near future releases? And, in the mean time, do you have any easy instructions on how to incorporate firebaseui with the template?
Hi,
First of all, we really don’t have any experience with Firebaseui and unfortunately can’t provide a decent guidance for it.
As for the implementation, I honestly don’t think it will be available any time soon. As you may see, we need to plan our updates for popular opinion and this is the first time we receive a request for Firebaseui. Users mostly use the template for small and enclosed applications and usually don’t require these many login options. We even got the impression that they use their own api rather than Firebase and next thing we will include about authorization will probably be Auth2.
Thank you for your understanding, All the best.
Hello. I’m trying to make few pages available for printing, but something with a template. It simply ignores the content and in printing showing only the left menu (sidebar). How to make pages printable?
Hi,
It is both because of Bootstrap and us. You may add below block at the end of “src/assets/css/sass/_piaf.style.scss” file. You may also do customizations like removing sidebar, footer etc.
@media print {
@page {
size: auto;
}
main .container-fluid .row:not(.invoice) {
display: initial;
}
.sidebar {
display: none;
}
footer {
display: none;
}
}
Hi, Template is great.
Just want to know, do you have future plan to seperate scss based on component? Currently _piaf.style.scss is over 9500 lines. If it is seperate, so people can easily remove unnecessary component scss.
Nice work.
Cheers, Ian
Hi Ian,
Thanks, it is nice to hear that you like the template.
You are totally right about style file. Separating the file should be good for removing unwanted parts and working on different parts as a team.
It is on our todo list for a long time and after each update the file got bigger and bigger. We will eventually work on it but I can’t say for sure when.
On the other hand, if your main concern is about file size, theme files are about 150kb on built version. So at the loading of the template, 9500 lines will only have 150kb impact.
All the best.
I am not worried about size.
It would be good if they are seperate files, so easy for the team, easy to remove unwanted components, easy to upgrade and easy to customise.
Thanks a lot.
Any future plan for mega menu?
If you mean by horizontal top menu, I don’t think it will be available any time soon. We are currently working on Angular version and will not be able to make any updates for Vue version in the mean time.
All the best.
Hi , I would like to swap out your Api of the color strategies for ours , could you please give me a quick breakdown of how I would do it and which files use the API to fetch data ?
And also I find the folder and file structure really confusing , trying to differentiate between JSON data and Api data .
Please clarify on this . Thanks
Hi,
We have tried to include examples for api based structures, hybrid apps and static data usage.
Making a quick search for “apiUrl” in the project reveals that api used for bestsellers at dashboards, chat, survey and list pages.
Rest of the data usage is mostly for presenting the ui so we have chosen to use static data for these pages. We have prevented direct hardcoded usage in view and separated the data in the data folder.
All the best.
I have replaced your base Url with my base Url and the remainder of the route api I in the page that I want to change (In this case it is the thumblistite.vue file) Then replaced the items you call e.g {{data.category}} with the properties in my api endpoint , but the page is blank . I there something I am missing or something I am doing wrong ?
Anything at the console that might be helpful?
No , the console runs okay , its only the thumblistitem.vue component that is not showing
With no errors and little information about the issue, my guess would be the data returned from api might be empty or not constructed as it should be.
Please check the data returned from your api and compare it with our demo. Here is the request that is sent to our api. https://api.coloredstrategies.com/cakes/fordatatable?sort=title&page=1&per_page=4&search=
Hello,
we really like the Piaf Admin Template. We have one problem: We underpinned the effort to integrate a vue app into our existing elixir/phoenix application. We have seen that there is also a jQuery version of the template. Would it be possible to convert our Vue license into a jQuery license?
That would be really great.
Best regards, Felix
Hi Felix,
I just answered the refund request.
All the best.
I have bought VueJs one, would be possible to swap to HTML version?
Hi, just replied the refund request.
Hello! I would like to know what would be the difficulties in using express.js for the application. Thank you! purchase code: 9c4e2e25-7802-4eeb-ba27-cd2a26e6cddf
Hi,
Unfortunately, I don’t have any experience with Express.js so I can’t provide a decent guidence for it.
As a side note, we have always chosen our backend and frontend separated for projects that contains Vue, React or Angular. We created the backend as a service and published it under a subdomain. This is an approach that pretty close to “serverless development” and it makes Vue developemnent easier.
All the best.
