308 comments found.
I want to change default card tile style into masonry style, how to change this page (/Html/Source/src/Pages.Profile.Portfolio.html)
Thank you.
Hi,
There is no masonry example in the project, but if you apply the html example in the link below and include the relevant css in your project, it will work.
https://getbootstrap.com/docs/4.3/components/card/#card-columnsAll the best.
Hello, my dev’s purchased this theme last year and also just purchased the most recent update. I have an issue w/ a “Checkbox” not lining up http://nimb.ws/JVG2fd Below is the code we’re using. Can you please tell me if this is written correctly or if we need to make an adjustment?
This is the entire DIV
<div class="mb-3">
<span class="handle card-icon" style="vertical-align: sub;"><i class="simple-icon-notebook clearance_status_btn not_close" style="font-size: 15px;cursor: pointer;margin-right: 10px;" current_notes="" job_user_id="4275" location_id="9120" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Clearance Status" /></span>
<span class="clearance_status_text" style="margin-right: 10px;" job_user_id="4275">Add a note</span>
<span class="custom-control custom-checkbox" style="vertical-align: top;display: initial;"> <input type="checkbox" job_user_id="4275" class="custom-control-input clearance_status_checkbox"> <label class="custom-control-label" for="customCheckThis">Cleared</label> </span>
</div>
Thanks for your help!!!
Hi,
You do not appear to have purchased the product. Please contact the account you purchased.
All the best.
Hello,
I’ve purchased the Dore Jquery theme and I’m satisfied. Now I’m trying to remove the main menu in the left side and just keep the sub menu as main menu of my dashboard. My developer is struggling with many javascript dependencies. Do you have any documentation or snippet to remove the main menu and just keep the submenu ? Best Regards, Raouf,
Hi,
You can find an example at https://dore-jquery.coloredstrategies.com/Menu.Mainhidden.html
This page is also included in the project you downloaded.
All the best.
Hi,
I have followed the guide for using single theme and included “js/scripts.single.theme.js” file instead of “js/scripts.js” however, now the default styling for data table gets disturbed. I followed the example from Datatables -> pagination and kept everything as is. As long as I include js/scripts.js styling gets as expected and matches with the example but including js/scripts.single.theme.js disturbs the styling and even removes the pagination.
Please let me know how to resolve it?
It would really help if you could give me any pointer? Thanks.
Hi,
Can you check the css path in the head.<head> ...Icons and vendor css files <link rel="stylesheet" href="css/dore.light.purplemonster.min.css" /> //Or other theme of your choice <link rel="stylesheet" href="css/main.css" /> </head>
If the css path is correct and the problem persists, can you share a screenshot with us?
All the best.
Hi,
Thanks for the reply!
Yes, both paths are correct. Here is a link with images indicating the issue.
https://imgur.com/a/nfgBRgCThanks.
Hi,
In the screenshots you send, it seems that the scripts are trying to run without html loaded.
To avoid this situation, you must add script tags to the end of body tag. I am sending a working sample page with script tags added as I mentioned.
https://dore-jquery.coloredstrategies.com/Ui.Datatables.Pagination.Single.htmlAll the best.
Hi,
Thanks for the support! That solved most part of the problem. The datatable styling works just fine when data is static but it remains distorted in the same way (i.e. previous/next visible in the text instead of < > and infinite pagination if I get the data from server-side. (screenshots: https://imgur.com/a/W2125mA)
Hi,
I reviewed the screenshots you sent earlier and I noticed the shortcomings in your code. You are experiencing this problem because the “language and drawcallback” features are missing in your datatable code.
I’m posting a screenshot for guidance. You can add by examining the sample datatable codes in the theme.
https://ibb.co/ts1NqR0All the best.
Hello, can you tell me about this code?
if ($(”#doubleSlider”).length > 0) { noUiSlider.create($(”#doubleSlider”)[0], { start: [100, 1200], connect: true, tooltips: true, direction: direction, range: { min: 500, max: 1500 }, step: 10, format: { to: function (value) { return “€” + $.fn.addCommas(Math.round(value)); }, from: function (value) { return value; } } }); }
I’d like to insert it on-page HTML, and set my functions for reading and send data, but now this code is only in “dore.script.js”, if I delete it no work.
Hi,
The corresponding code block is written for double slider on page https://dore-jquery.coloredstrategies.com/Ui.Forms.Components.html If you’re not using double slider , it’s okay to remove the code.
All the best.
yes, I see HTML code, but I need to read value about this double slider, and set a controller. How read this value? I try to use “document.getElementById(“doubleSlider”).value” but no work
Hi,
I update the code as described in the NoUiSlider documentation and share it below.
https://refreshless.com/nouislider/slider-read-write/
if ($("#doubleSlider").length > 0) {
var slider = $("#doubleSlider")[0];
noUiSlider.create(slider, {
start: [800, 1200],
connect: true,
tooltips: true,
direction: direction,
range: {
min: 500,
max: 1500
},
step: 10,
format: {
to: function (value) {
return "$" + $.fn.addCommas(Math.round(value));
},
from: function (value) {
return value;
}
}
});
}
..
..
formSubmit(){
var values = slider.noUiSlider.get();
console.log(">>>>: ", values)
}
All the best.
For dealing with multi level file directory. The theme will load for ever if you try to use it in a directorythat are one level lower than the rest of the them.
I added ”/” before “css/” at line 71 in scripts.js This fixed it.
Just wanted to share.
Hi,
Thanks for your interest and feedback. We will consider.
All the best.
Hi,
Excellent theme!
Could you please tell me about how to change the background color of the selected item from the left side menu in Default Dashboard? Currently, it shows a vertical line and changes the color, however, I would like to show the entire item’s background as color.
Thanks.
Hi,
You can make the relevant change by adding the css block below to the “src/css/sass/_dore.style.scss” file.
.menu .sub-menu ul li.active{
margin-left:0px;
padding-left:30px;
background-color:red;
}
All the best.
Hi, I’m getting this and the page loads indefinitely.
dore.script.js:595 Uncaught ReferenceError: nextClasses is not defined
Hi,
The problem seems to be solved when we assign the default value to the variable “nextClasses” when the “setMenuClassNames” function starts.
Related modification: line : 456
function setMenuClassNames(clickIndex, calledFromResize, link) {
var nextClasses = "";
menuClickCount = clickIndex;
var container = $("#app-container");
..
..
..
All the best.
Hi! i’m interested in you theme Dore jQuery – Bootstrap 4 Admin Template but i need know what archives you provide with the sell, I can modified backend? in which language is it developed? Thanks!
Hi,
Dore is just admin frontend template. When you purchase it does not include any projects on the backend side. You can use it with any backend technology you want.
All the best.
Hi,
Its me again! I’m loading a ready html form using jQuery in a dashboard div, but, some fields with class “select2” and “datepicker” didnt started corretly (of course), because the fields not exist before.
Please, how the best way to to call some function from dore.script.js to reload the new components (inputs)?
Hi,
You can create a public method in dore.script.js and add the initialization of the necessary plugins in it. Then call it from outside when you need it.
Here is how to create the public method in dore plugin.
$.dore = function (element, options) {
...
function init() {
...
}
init();
plugin.initLater = function() {
console.log('Init Later');
// Code to initialize necessary plugins
}
};
Here is how to reach and call it.
var instance = $("body").dore().data('dore');
instance.initLater();
Cheers.
Nice solution!
Follow your instructions, I created a new plugin function. But, using by example “select2”, repeated the code is the way or have another way to call using dore public method?
Example:
plugin.initLater = function() {
/* 03.18. Select 2 */
if ($().select2) {
$(".select2-single, .select2-multiple").select2({
theme: "bootstrap",
dir: direction,
placeholder: "",
maximumSelectionSize: 6,
containerCssClass: ":all:",
/* Eduardo Luiz Pereira */
language: {
errorLoading: function() {
return "Os resultados não puderam ser carregados."
},
inputTooLong: function(e) {
var n = e.input.length - e.maximum,
r = "Apague " + n + " caracter";
return 1 != n && (r += "es"), r
},
inputTooShort: function(e) {
return "Digite " + (e.minimum - e.input.length) + " ou mais caracteres"
},
loadingMore: function() {
return "Carregando mais resultados…"
},
maximumSelected: function(e) {
var n = "Você só pode selecionar " + e.maximum + " ite";
return 1 == e.maximum ? n += "m" : n += "ns", n
},
noResults: function() {
return "Nenhum resultado encontrado"
},
searching: function() {
return "Buscando…"
},
removeAllItems: function() {
return "Remover todos os itens"
}
}
});
}
}
or do you have some example like this:
plugin.initLater = function() {
$("body").dore($('body', 'select2').data('dore');
}
Hi,
Duplicating code is never a good idea. You may create a function “initSelect” and call it within the plugin by using “this.initSelect()” as shown below.
$.dore = function (element, options) {
...
function init() {
...
}
init();
plugin.initSelect = function() {
console.log('Init Later');
// Code to initialize necessary plugins
}
this.initSelect(); // <----- Calling the method in the plugin
};
This one is for to use outside of the dore plugin such as scripts.js.
var instance = $("body").dore().data('dore');
instance.initSelect(); <----- Calling it outside of the plugin
However when you call the method in the plugin and again after the ready html load, the select plugin will be initialized twice which is also not good. I recommend you to keep the external page’s plugins separated and call them with an id or different class.
plugin.initAfterExternalLoad = function() {
$("#externalSelect").select2();
$("#externalTags").tagsinput();
...
}
Cheers.
Tks for help. It was very smooth to implement 
Good morning, I just bought your package but when installing it throws an error you could give me a step by step of how to install thanks
Hi,
Documentation will help you.
https://dore-jquery-docs.coloredstrategies.com/docs/gettingstarted/developmentAll the best.
Hi, why “Top Labels Over Line” not work with radios?
<input type=”radio” id=”customRadio1” name=”customRadio” class=”custom-control-input”> <label class=”custom-control-label” for=”customRadio1”>Toggle this custom radio</label> <input type=”radio” id=”customRadio2” name=”customRadio” class=”custom-control-input”> <label class=”custom-control-label” for=”customRadio2”>Or toggle this other custom radio</label> Tipo de pessoaHi,
You can find two usage examples below.
<div class="form-group">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio"
class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio"
class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this</label>
</div>
</div>
<div class="form-group">
<div class="d-inline-flex custom-control custom-radio">
<input type="radio" id="customRadioInline1" name="customRadioInline"
class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this Inline</label>
</div>
<div class="d-inline-flex custom-control custom-radio">
<input type="radio" id="customRadioInline2" name="customRadioInline"
class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this Inline</label>
</div>
</div>
Cheers.
Tks again for yout help
Hi, its me again! The dashboard has a window confirmation message popup done?
Hi,
Bootstrap modal component will help you. You can customize buttons and content.
Examples: https://dore-jquery.coloredstrategies.com/ui.components.modal.htmlCheers.
Thanks
Hello, first of all: a beautiful dashboard, congratulations. I am very happy with it. But I have one question: is it possible not to close the submenu automatically after clicking a link but to leave it open? The reason is, I have checkboxes in the submenu that I want to switch on and off. I have to open the menu again after each click. thanks in advance
Hi,
It’s nice to hear that you like the template, thank you for that.
As for the question, there is no out of the box solution for that but you may achieve it by adding a condition.
Please search for below comment in src/script/dore.script.js file.
// Prevent sub menu closing on collapse click
After the if block please add another condition like the one below:
// Prevent sub menu closing on custom control click
if ($(event.target).parents(".custom-control").length > 0 ) {
return;
}
I will also add the html part with the checkbox.
...
<li>
<div class="custom-control custom-checkbox mb-4">
<input type="checkbox" class="custom-control-input" id="customCheckThis">
<label class="custom-control-label" for="customCheckThis">Check this custom
checkbox</label>
</div>
</li>
...
This should work for both mobile and desktop, let us know if it does not.
Cheers.
Thank you for the answer, unfortunately this suggestion didn’t bring the desired result. When I click on a main link in the sidebar the class “show-submenu-temporary” is added to the “body”. If I then select a checkbox in the submenu, the “body” receives the class “sub-menu-hidden”. maybe it’s because of it? Can I change that myself? Thanks in advance
The addition to the js part should prevent addition of ‘sub-menu-hidden’.
It may not be working if the checkbox you are using is a standard one and does not have custom-control class. Here is a more comprehensive example. Please notice the ‘dont-close-menu’ class, you need to put the checkboxes inside a container with that class.
HTML
<li>
<div class="custom-control custom-checkbox mb-2 dont-close-menu">
<input type="checkbox" class="custom-control-input" id="customCheckThis">
<label class="custom-control-label" for="customCheckThis">Check this custom
checkbox</label>
</div>
</li>
<li>
<div class="form-check dont-close-menu mb-2">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</li>
<li>
<div class="dont-close-menu">
<button class="btn btn-primary">This will also not close</button>
</div>
</li>
JS
// Prevent sub menu closing on dont-close-menu class
if ($(event.target).parents(".dont-close-menu").length > 0) {
return;
}
And here is a screnshot: https://ibb.co/ftyMr67
WOW!!! This is wonderful, it works! Many thanks for this fast support ….
Happy to help. Cheers.
Hi,
Theres a way to find in jquery if is mobile or dektop? A function or someonelse?
Hi,
This page can help you : https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-deviceCheers.
Nice!
But, in Dore, what is the width limit set fixed delimit the change of layout to mobile?
It’s under 768 px.
Tks again! \o/
Hi,
I working on ASPCore 3 latest, and trying to implement this theme on it it’s not working see this like https://prnt.sc/tfeamp
my code 1- https://prnt.sc/tfecvk 2- https://prnt.sc/tfed6p 3-https://prnt.sc/tfedhf
Please if you have any implementation on aspcore send it and I need it to working on Layout RTL
Hi,
Please see this: https://dore-jquery-docs.coloredstrategies.com/docs/guides/how-to-change-directory-structure
If it does not help please provide the error you are getting so we may look into it.
Cheers.
Hi, i am sorry but i don’t understand how can i do that, would you please help to fix this
thanks, i am remove the ~/ it’s working now
but i have anther error function not working, see the print scr https://prnt.sc/tfki8lHi,
I don’t think we can identify the error by a single screenshot. It looks like you have made lots of structure changes throughout the project. It looks like the best thing to do is trace your steps back and compare your project with the template.
Cheers.
Hello! Im changed de path of dore (css, js, etc) to adapt on my framework. When the link is opened, showed the error:
Chrome console: scripts.js:28 GET http://php7:7070/kredsys/css/dore.light.blue.min.css net::ERR_ABORTED 403 (Forbidden)
scripts.js: var mainCss = $(head).find(‘[href$=”main.css”]’); if (mainCss.length !== 0) { mainCss0.before(link); } else { head.appendChild(link); }
The file “dore.light.blue.min.css” is add in my project, but another folder: http://php7:7070/kredsys/app/src/plugins/dore/css/dore.light.blue.min.cssPlease, what I do?
Hi,
Please see this: https://dore-jquery-docs.coloredstrategies.com/docs/guides/how-to-change-directory-structure
If it doesn’t help, let us know.
Cheers.
Nice! It works! Thank you
thank you for these excellent template.
seems that the template doesn’t include the landing page in the demo, can we have the landing page template too?
the landing page are useful for summary descriptions of the site purpose.
Hi,
It’s nice to hear that you like the template. We really appreciate it.
As for your question, appearently it is not allowed by the platform to include landing pages in admin templates. We used have them with subpages and all but got a warning and had to remove them unfortunately.
However, we will include only index pages as a single page in our next version. Can’t provide an eta but currently working on it.
Cheers.
can we have the current landing page in the demo by mail then?
Unfortuntately, we can’t send send any files with email. It’s also against the rules of the platform.
dropzone, select2 and other js don’t work on pages loaded by ajax. How do I solve that?
If I make a new instance of dropzone it works halfway, the link to delete the loaded image is lost
Gracias!!!
Hi,
While making a new instance, using previewTemplate should solve the problem. You may find it in dore.script.js file under title /* 03.20. Dropzone */. Also for both of the plugins, make sure to initialize it with a custom class or id to prevent double initialization of the old ones.
/* 03.20. Dropzone */
if ($().dropzone && !$(".dropzone").hasClass("disabled")) {
$(".dropzone").each(function() {
if(!$(this).hasClass('async-dropzone')){
$(this).dropzone({
url: "https://httpbin.org/post",
init: function () {
this.on("success", function (file, responseText) {
console.log(responseText);
});
},
thumbnailWidth: 160,
previewTemplate: '<div class="dz-preview dz-file-preview mb-3"><div class="d-flex flex-row "><div class="p-0 w-30 position-relative"><div class="dz-error-mark"><span><i /></span></div><div class="dz-success-mark"><span><i /></span></div><div class="preview-container"><img data-dz-thumbnail="" class="img-thumbnail border-0" /><i class="simple-icon-doc preview-icon" /></div></div><div class="pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative"><div><span data-dz-name="" /></div><div class="text-primary text-extra-small" data-dz-size="" /><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress="" /></div><div class="dz-error-message"><span data-dz-errormessage="" /></div></div></div><a href="#/" class="remove" data-dz-remove=""><i class="glyph-icon simple-icon-trash" /></a></div>'
});
}
});
setTimeout(() => {
$('.async-dropzone').dropzone({
url: "https://httpbin.org/post",
init: function () {
this.on("success", function (file, responseText) {
console.log(responseText);
});
},
thumbnailWidth: 160,
previewTemplate: '<div class="dz-preview dz-file-preview mb-3"><div class="d-flex flex-row "><div class="p-0 w-30 position-relative"><div class="dz-error-mark"><span><i /></span></div><div class="dz-success-mark"><span><i /></span></div><div class="preview-container"><img data-dz-thumbnail="" class="img-thumbnail border-0" /><i class="simple-icon-doc preview-icon" /></div></div><div class="pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative"><div><span data-dz-name="" /></div><div class="text-primary text-extra-small" data-dz-size="" /><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress="" /></div><div class="dz-error-message"><span data-dz-errormessage="" /></div></div></div><a href="#/" class="remove" data-dz-remove=""><i class="glyph-icon simple-icon-trash" /></a></div>'
});
}, 2000);
}
Hi
Does your template support NodeJS?
Thanks
Hi,
We don’t provide any backend with the template but in theory it should work with Nodejs as well as with asp or php.
Cheers.
