How to implement the Gentelella Bootstrap Admin theme?

Asked

Viewed 2,110 times

0

Guys I’m starting now with web development in Visual Studio. I already understood the MVC, I have some knowledge of HTML and I started to study the bootstrap. I discovered on the web this beautiful model Free Bootstrap 3 Admin Template There’s an online example here: https://colorlib.com/polygon/gentelella/index.html

I downloaded the files and tals as they are in this image... inserir a descrição da imagem aqui

But I have no idea how to put it in my project. In other words, I have already created a new clean Dot.Net MVC project in Visual Studio Community 2015. I did some tests... I created some controllers and stuff... Now how do I change the standard bootstrap that came in the project to this one that I downloaded?

asp.net-mvc asp.net bootstrap

2 answers

1

So, remembering your knowledge of HTML: you remember that inside the element <head> you reference the files CSS that you will use on your site to change the appearance of the elements html, right? It’s the element <link rel="stylesheet" href="/css/estilos.css" /> or anything worth.

Hence, you need to load the styles of this theme there after loading the bootstrap styles. If you look at the demo code of the site, so is the order of loading the style sheets:

<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">

<!-- bootstrap-progressbar -->
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<!-- JQVMap -->
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet">
<!-- bootstrap-daterangepicker -->
<link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

<!-- Custom Theme Style -->
<link href="../build/css/custom.min.css" rel="stylesheet">

That is: he brings the bootstrap in the first line of this excerpt, then brings the other things he uses (Font Awesome, Nprogress and such) and at the end brings the custom style of the theme. That’s because the CSS last loaded always overwrites the previous loader, so are "Cascading Style Sheets" (Cascading Style Sheets).

Study HTML well, the worst thing you have is a web programmer who doesn’t get HTML and HTTP.

Anyway, good studies for you.

  • 1

    Thank you @Daniel ! So I copy all those files and folders that I downloaded into my project folder. And I change the _Layout.cshtml of the Views Shared folder to load these styles... That’s it? I need to change some configuration on Web.config... or something like that?

  • You probably don’t need to do anything, just load the files that are in the project folder. But I also don’t know so much about the IIS, forehead and see if it works.

  • 1

    Basically that’s what @Daniel said, I’ve used this theme in a panel and just satisfy the calls in the file '_Layout'. Just as in the use of bootstrap you must respect the order of the insertions of style files (css) and scripts (javascript) for everything to work. Some pages may require extra scripts to work. One tip is that if something goes wrong check in the browser debugging console the error to see if nothing is missing or not in the expected order

0


So... I found everything I needed here:

Youtube video entitled "Plantilla Bootstrap en Proyecto ASP.NET MVC" (obviously in Spanish)

There are many steps: Adding the files to the project, setting _Layout, references, Bundles, etc. And in the end it worked.

Browser other questions tagged asp.net-mvc asp.net bootstrap

You are not signed in. Login or sign up in order to post.