Oh.
Don't you think it is too bright?
Too white.
Make some blue? Red? Yello?
etc.?
I saw another template AdminLTE, its 3.0 dev version updated so slow so i found stisla.
But I think stisla should learn from it about its colors.
White is too harsh. ( Or "dazzling"? I am so sorry for my poor English.)

Hello, I am from China, I am very happy to use the template, but I have not been able to find rich text editors, can you help me?

Is it possible to make the sidebar dark, like in this site.

https://github.com/uxsolutions/bootstrap-datepicker

Don't u guys think that the colours like green are too light to read in Stisla?
The green button, which uses .btn-success class, with white texts, is hard to read on screens.

The code:

// Select2 if(jQuery().select2) { $(".select2").select2(); }

is in scripts.js.
It's better to put it in a page specific javascript file because you don't be able to modify select2 parameters without edit script.js

Hi.
As I mentioned before, I have a plan to refactoring the entire infrastructure of this project.

Behind this idea, I feel Stisla is just too boring to be a admin template, moreover everyone who uses Stisla will have the same layout, colors and components. And I also don't want to depend on Bootstrap and jQuery.

Recently I was interested in TailwindCSS, maybe we can use it as a base framework; with it, we can make some basic elements such as Card, Alert, Nav, etc. TailwindCSS is a utility-first framework so that it can reduce custom classes and use utility classes such as .p-5 (to add padding) instead.

I also plan to break the template into several parts, at least:

• Element
  This is the core part of the template, here are the basic elements such as buttons, alerts, navigation, typography and more.

• Layout
  You need to specify the layout you want to use for the current project interface.
  

• Section
  Next, specify a section. This section is easy, usually only the title, subtitle, description and post meta (author, published date).
  

• Block
  Blocks are pre-designed components that consist of elements and have a specific purpose. Each block consists of HTML, SCSS, JavaScript API (if any).
  

Each of the above parts is customizable (color, sequence of elements, etc). Will be better to have a code that can be adapted to the front-end framework, such as ReactJS (JSX), Vue Component, Angular and so on. Each of the parts above has its own documentation page and versioning, so, I think every part will have a public repository.

Besides that, I also think each part can be installed via Yarn/NPM. So, SCSS and JavaScript are automatically installed in the current project folder.

For example:

# layout
stisla use layout/style-1

# block
stisla add component/twitter-card

As such, this won't be the template admin only. You can also create templates for landing pages or others.

This will not delete the admin templates that currently exist. We will recreate the admin template with new concepts and architecture.

What do you think about this?

Thank you

hi，Where is the node_modules folder in the code?

Hi there! I'm new to this setup. Please tell me how to do a form validation in Firemodal function

Hi,

At the content area of a blank page, ".main-content" area is fitted to screen height by the code in row 107 of "scripts.js". According to top nav and footer, minus value should be at least 108 instead of 95. In the other way the page is overlowing down if there is no content.

Original Value:

$(".main-content").css({
    minHeight: $(window).outerHeight() - 95
})

Fixed:

$(".main-content").css({
    minHeight: $(window).outerHeight() - 108
})

Thank you.

Is it possible to use with VueJs? Am asking this because jQuery is included in the pack.

if this theme support right to left(rtl) its very good buy if not i can do it!

Hi, I'm sorry for reporting this error, I'm new to this gulp thing.

So I ran "npm install" and/or "npm install --save-dev" and I got this error

2323 verbose stack Error: premature close
2323 verbose stack     at PassThrough.onclose (C:\Program Files\nodejs\node_modules\npm\node_modules\end-of-stream\index.js:47:67)
2323 verbose stack     at PassThrough.emit (events.js:194:15)
2323 verbose stack     at emitCloseNT (internal/streams/destroy.js:59:8)
2323 verbose stack     at process._tickCallback (internal/process/next_tick.js:63:19)
2324 verbose cwd D:\Projects\stisla
2325 verbose Windows_NT 10.0.17763
2326 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
2327 verbose node v10.15.3
2328 verbose npm  v6.4.1
2329 error premature close
2330 verbose exit [ 1, true ]

I am using Node.js v10.15.3, npm v.6.4.1. Thank you for any help

i make integration this template into yii2 boilerplate here is my repo https://github.com/piantgrunger/yii2-stisla

Can you make nicescroll passive?

Edit
I got three of them in my console and if i open notifications or messages dropdown i get more.

Hi guys!

I tryed the tranparent sidebar, but for me, its not working. First of all, there is no documentation for this, although this is irrelevant.

This is in my header:

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
    <meta name="application-name" content="SilverWolf Hosting Kezelőfelület">
    <title>Kezelőfelület - SilverWolf Hosting</title>

    <!-- General CSS Files -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

    <!-- Plugins
    <link rel="stylesheet" href="../dist/modules/bootstrap-social/bootstrap-social.css">
    -->

    <!-- Template CSS -->
    <link rel="stylesheet" href="/admin/assets/css/style.css">
    <link rel="stylesheet" href="/admin/assets/css/components.css">
</head>

And this is in the end of my body:

<!-- General JS Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="/admin/assets/js/stisla.js"></script>

<!-- Template JS File -->
<script src="/admin/assets/js/scripts.js"></script>
<script src="/admin/assets/js/custom.js"></script>

<script src="/admin/assets/js/page/auth-register.js"></script>
<script src="/admin/assets/js/page/bootstrap-modal.js"></script>
<script src="/admin/assets/js/page/components-chat-box.js"></script>
<script src="/admin/assets/js/page/components-multiple-upload.js"></script>
<script src="/admin/assets/js/page/components-statistic.js"></script>
<script src="/admin/assets/js/page/components-table.js"></script>
<script src="/admin/assets/js/page/components-user.js"></script>
<script src="/admin/assets/js/page/features-post-create.js"></script>
<script src="/admin/assets/js/page/features-posts.js"></script>
<script src="/admin/assets/js/page/features-setting-detail.js"></script>
<script src="/admin/assets/js/page/forms-advanced-forms.js"></script>
<script src="/admin/assets/js/page/gmaps-advanced-route.js"></script>
<script src="/admin/assets/js/page/gmaps-draggable-marker.js"></script>
<script src="/admin/assets/js/page/gmaps-geocoding.js"></script>
<script src="/admin/assets/js/page/gmaps-geolocation.js"></script>
<script src="/admin/assets/js/page/gmaps-marker.js"></script>
<script src="/admin/assets/js/page/gmaps-multiple-marker.js"></script>
<script src="/admin/assets/js/page/gmaps-multiple-marker.js"></script>
<script src="/admin/assets/js/page/gmaps-route.js"></script>
<script src="/admin/assets/js/page/gmaps-simple.js"></script>
<script src="/admin/assets/js/page/index-0.js"></script>
<script src="/admin/assets/js/page/index.js"></script>
<script src="/admin/assets/js/page/modules-calendar.js"></script>
<script src="/admin/assets/js/page/modules-chartjs.js"></script>
<script src="/admin/assets/js/page/modules-datatables.js"></script>
<script src="/admin/assets/js/page/modules-ion-icons.js"></script>
<script src="/admin/assets/js/page/modules-slider.js"></script>
<script src="/admin/assets/js/page/modules-sparkline.js"></script>
<script src="/admin/assets/js/page/modules-sweetalert.js"></script>
<script src="/admin/assets/js/page/modules-toastr.js"></script>
<script src="/admin/assets/js/page/modules-vector-map.js"></script>
<script src="/admin/assets/js/page/utilities-contact.js"></script>

I copyed the whole code from the layout-transparent.html page, but it doesn't seem to work. It looks like the JS is not loading properly. the side menu is buggy, I can't open the sub menus. The loading animation is weird. And it seems like the scrolling animation is not working too. Does anyone have any idea?

Best alternatives :
https://docs.mapbox.com

how to download free stisla admin template?

i can't find modules

thanks

I tried running npm install since there is a package.json file in the root directory and the run command from the docs doesn't work.
but i got this error :

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm ERR! code ENOPACKAGEJSON
npm ERR! package.json Non-registry package missing package.json: jquery_upload_preview@git+https://github.com/opoloo/jquery_upload_preview.git.
npm ERR! package.json npm can't find a package.json file in your current directory.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/amine/.npm/_logs/2019-03-04T08_28_17_970Z-debug.log

the dependency doesn't have a package.json file.

I just came across this project and I really love Stisla. It is clean, simple and elegant.

However, does Stisla has plans to be compatible with front-end frameworks such as Angular, React or Vue? I believe this would be a great support for the frontend app developers.

Further introduction of Stisla UX in Adobe XD or Sketch would make the Stisla even more developer-friendly!

I'm Little bit confuse about licensing. Please make me clear. Can I remove footer copy right text and use it for professional purpose

uhm there is no node modules files for the select 2 etc.

Write the documentation properly. Write how to use each component, such as adding navbar, section, sidebar, and others.

Hi, first of all, thanks for taking your time on this project! Its awesome!

I have a question/feature request maybe.
In the demo pages, i couldnt see an example of multileve submenus. Also, the submenus doesnt have an icon. It would be great.

In my project i'm facing this problem:

When the items in menu have a larger text, it breaks down and add a big space/line height. How can we solve this?

Thank you very much!

i try to use FullCalendar but i can't change anything such as i try to hide sunday

custom.js

$("#myEvent").fullCalendar({
    hiddenDays:[0]
  });

index.php

<link rel="stylesheet" href="../assets/modules/fullcalendar/fullcalendar.min.css">
<script src="../assets/modules/fullcalendar/fullcalendar.min.js"></script>
<script src="../assets/js/page/modules-calendar.js"></script>

`<div id="myEvent"></div>`

i need to use badges in sidebar to show numbers, but it makes the sidebar nested menus deformed.

Please check the _variables.scss file located in the sources/scss folder.

Is there a way to use linear-gradient( ) in variables.scss? I keep getting the error

Error: argument $coloroflighten($color, $amount)must be a color\n on line 32 of scss/_variable.scss, in functionlighten\n from line 32 of scss/_variable.scss, in function color_lighten\n from line 79 of scss/_mixin.scss, in mixin form-control\n from line 5 of scss/override/_form.scss\n from line 63 of scss/style.scss\n>> \t@return lighten(map-get($colors, $key), $amount);\n\n

I have searched for an understandable solution on the net but I haven't found any.
Currently I am resorting to copy pasting all the styles in component and styles.css and overwriting them to custom.css . I kinda feel it isn't an efficient solution hence kindly give me pointers into this

Originally posted by @brianwachira in #38 (comment)

There's some problem to use it in some specific countries without CDN.
Could you guys just apply a pull request for stisla to CDNJS?

At IOS device when i open a side menu can't close. Also search box.

How to remember sidebar last state ? If on one page the sidebar is closed, then when I open another page, I need the sidebar state remain close. How do I do it ?

Hello,

In the side bar menu always an na-iitem is open, even clicking on the top to close it, can I allow all items to be closed?

I try to change All Button Color, but for .btn .btn-outline-{color} classes secondary info warning an danger still using old color.

Hi, if you have made something with Stisla. Reply this issue and put the link.

Thank you

Active class on li not working when open another dropdown-menu (ul)

1. It's active

2. when open another dropdown and back to first dropdown class active is missing
   

I am wondering while reading the readme docs Integrates. And i have planned to Contribute it for the laravel stisla

I want to clearly know the following thinks

• Do i need to develop in the Package way or Application (laravel)

• And Second thing Will You Add my name to the Contributors list

Hi,

I'm really not experienced with frontend so I hope this is the right place to ask my question.

Is there any documentation to add the whole Stisla theme to an existing (Symfony 4) project?
Maybe something like yarn add stisla?
Don't know if that can help you to answer but here is how to add bootstrap 4 to Symfony 4 : https://symfony.com/doc/current/frontend/encore/bootstrap.html

Currently I have downloaded the release and put everything in my assets folder, then require everything I need in a js files but I'm not sure this the right way to do it because I have some errors...

Halo,
Saya bingung mau ijin dimana, karena saya lihat ini dari share facebook.
Saya ijin menggunakan template admin untuk program sekolah, ketentuan menurut mit license hanya mencantumkan credit, kalo boleh tahu, pencatumannya gimana ya?

Is there any specific reason why this template is overriding bootstrap 4 css and not extending it using scss? I mean overriding is ok but extending with scss gives more flexibility and simplicity.

How to use fontawesome sizing on Stisla, such fas fa-download fa-5x. Because it seems like not working. Thank you !

Hi!

When a page with the sidebar-mini and does a toggle to show, the scrool goes wrong.

Add the below line 134:

sidebar_nicescroll.remove ();
sidebar_nicescroll = null;

Correct?

tks

Is There any tutorial on how to change the theme colors ?

Hello @nauvalazhar !
The Avatar Image Doesn't Appear in Chat Box Page. I think the path is wrong.
I attached the screenshot, maybe this issue just on my computer. Thank you in advance!

In the elements of sidebar the icon is always "caret-down".
It's better use "caret-right" when a element isn't active.

Hi,

When you set a option as selected on Select2 Multiple the size of the field break

                  <label>Select2 Multiple</label>
                  <select class="form-control select2" multiple="">
                    <option selected="selected">Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                    <option>Option 5</option>
                    <option>Option 6</option>
                  </select>

I want to use charts on admin dashboard but I am bit confused about how to insert and modify columns and values that the chart represents.
So please help me with this.

Recheck package.json files, last time i pushed to the branch the dependencies are still there, now its gone ?

I just came across this project and I really love Stisla. It is clean, simple and elegant.

However, does Stisla has plans to be compatible with front-end frameworks such as Angular, React or Vue? I believe this would be a great support for the frontend app developers.

Further introduction of Stisla UX in Adobe XD or Sketch would make the Stisla even more developer-friendly!

The tagsinput it does not work well. If I want to use the code

<div class="form-group">
     <label>Tags</label>
     <div class="bootstrap-tagsinput"><input type="text" placeholder=""></div>
     <input type="text" class="form-control inputtags" style="display: none;">
</div>

what is in the template's forms-advanced-form.html, it just doesn't work well. You can see there: http://prntscr.com/n15n41. I noticed, that by default, the required CSS and JS is not in the template. So I added

<link rel="stylesheet" href="https://demo.getstisla.com/assets/modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

to the header, and

<script src="https://demo.getstisla.com/assets/modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<script src="https://demo.getstisla.com/assets/modules/bootstrap-tagsinput/src/bootstrap-tagsinput.js"></script>

to the body. After that, there is some CSS, but its not the perfect, and the JS is not working. http://prntscr.com/n15oeo

So I decided to change the default tagsinput code to

<div class="form-group">
     <label>Tags</label><br>
     <input type="text" class="form-control" data-role="tagsinput">
</div>

Now, We can see, that the the input was changed. Now, its working.
http://prntscr.com/n15pd3
http://prntscr.com/n15pte
http://prntscr.com/n15pyw

But the CSS is still not good. It doesn't look like the original.

http://prntscr.com/n15qus
http://prntscr.com/n15qzk