I am experiencing some trouble with configuring the CoreUI Admin Template

I've encountered an issue where I've tried various methods to implement this theme but haven't had any success.

1. I followed the steps in the documentation by cloning the repo of the template and then using npm install (npm run serve) -> it never works for me. I also tried using the CDN multiple times with both the bootstrap template and the Laravel template, even though my project is based on Laravel. However, I'm attempting to use the template with a new theme.

2. I watched a tutorial on YouTube by Laravel Daily where they used the starter template. I decided to give it a try, but the CSS is still not working.

This is the code for app.blade.php

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CoreUI CSS -->
    
    <link rel="stylesheet" href="https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css" crossorigin="anonymous">

    <title>{{ config('app.name', 'Laravel') }}</title>
</head>
<body class="c-app">

@include('partials.menu')
@yield('content')

<!-- Optional JavaScript -->
<!-- Popper.js first, then CoreUI JS -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.min.js"></script>
</body>
</html>

Additionally, this is the code for the home page

@extends('layouts.app')

@section('content')
{{-- <base href="{{ \URL::to('/')}}"> --}}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    {{ __('You are logged in!') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

And here is the code for the sidebar file located in partials->menu.blade.php

<div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show" id="sidebar">
    <div class="c-sidebar-brand d-lg-down-none">
        <svg class="c-sidebar-brand-full" width="118" height="46" alt="CoreUI Logo">
            <use xlink:href="assets/brand/coreui.svg#full"></use>
        </svg>
        <svg class="c-sidebar-brand-minimized" width="46" height="46" alt="CoreUI Logo">
            <use xlink:href="assets/brand/coreui.svg#signet"></use>
        </svg>
    </div>
    <ul class="c-sidebar-nav">
       [content shortened for brevity]
    </ul>
    <button class="c-sidebar-minimizer c-class-toggler" type="button" data-target="_parent" data-class="c-sidebar-minimized"></button>
</div>

Lastly, this is the output I'm currently experiencing

Link to Image of the Home Page

Answer №1

After successfully setting up the Vue version using npm, everything is running smoothly, even if Vue is not your preferred choice.

  1. npm install
  2. Include
    @import '@coreui/coreui/dist/css/coreui.min.css';
    (as well as any other necessary CSS files) into the resources/css/app.css file
  3. Repeat the same process for JavaScript files

Answer №2

  1. Start by completing the steps to set up the git repository
  2. npm install
  3. npm start
  4. You will be able to view the compiled version on port 3000
  5. Access this particular file: \coreui-free-bootstrap-admin-template-main\dist\index.html
  6. Replace occurrences of "node_modules/" with "../node_modules/"
  7. Double click on the index.html file to open it normally. The Admin Template should display correctly. Now, focus on fixing the icons.
  8. For further guidance, refer to: [http://glivera-team.github.io/svg/2019/03/15/svg-sprites-2.en.html]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transition smoothly between two images with CSS or jQuery

I am working on a project where I need to implement a hover effect that fades in a second image above the initial image. The challenge is to ensure that the second image remains hidden initially and smoothly fades in without causing the initial image to fa ...

Modify opacity of displayed items in image list with ng-repeat

My application showcases a list of images using ng-repeat. +---------------------------------------------+ | | Previous Image 0 | | | +------------------------------------+ | | +------------------------------------+ | | ...

React dependency installation problem encountered

npm install axios moment react-file-base 64 redux redux-thunk npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url. npm ERR! A complete log of this run can be found in: C:\Users\apa10 ...

Show side by side using javascript

My dilemma lies in having a set of cards that are meant to be displayed inline, but I have to initially hide them using "display: none". When a specific button is clicked, I aim to reveal these cards; however, upon doing so, each card seems to occupy its o ...

Laravel incorrectly updates primary keys when interacting with MySQL

When working with Laravel 6.x and setting a custom string typed primary key, I encountered an issue. The $node=Node::create() method works fine but when trying to update using $node->save(), it uses where ‘instanceId’=0 to match the primary key, res ...

Tips for increasing a variable by one with each button click?

I have a simple JavaScript function called plusOne() that is designed to increment a variable by 1 each time a button is clicked, and then display the updated value on a webpage. However, I'm encountering an issue where the addition only occurs once. ...

Ensure that the container div is filled by the image if the image exceeds the dimensions of

I have a footer menu with a background image that is larger than the div itself (2000x168). Even though I have set the width to 100%, it seems like the whole image isn't displaying. Instead, only a portion of it is visible, matching the size of my sc ...

Is there a way to align my anchor tag so that my link appears perfectly centered both vertically and horizontally on the page?

Despite my efforts to find a solution, I am stuck with this issue. Here is the code I have been working on: <a href='/Customers' class='centre'>Start</a> I attempted to wrap it in a div tag and also wanted to add a small gr ...

What does it mean when the error message "invalid" appears after running "npm install"?

https://i.stack.imgur.com/0HmUZ.png Please review the image. My assumption is that it pertains to the package.json, but I cannot be certain. Responding to the comment for additional information Initially, I was in the process of installing material-ui. ...

Positioning Data Labels Outside of Pie or Doughnut Charts in Chart.js

I am currently working on a large-scale project and I am in need of a way to position the labels outside of pie charts or doughnut charts. I came across a plugin called outerLabels on GitHub which seems to be the perfect solution for what I need, but I am ...

Using `overflow: hidden` on a table will result in the bottom and right borders disappearing

I am facing an issue where the border of my table is being cut off when using overflow: hidden. Below is an example code snippet illustrating this problem. <style> table { border-collapse: collapse; } table { ...

Certain CSS styles do not function properly, requiring me to include them directly in the HTML code

After successfully creating a button in HTML and applying CSS to add border effects, I ran into an issue when trying to change the background color or text color. Despite adding styles directly to the HTML file, these specific changes did not take effect. ...

Having issues with installing @angular/cli globally using npm on Windows 7, the process gets stuck and does not

Encountering an issue while attempting to install the Angular CLI from npm, as it gets stuck asking to loadAllDepsIntoIdealTree. Here are the steps taken: C:\Windows\system32\node -v v6.11.1 C:\Windows\system32\npm -v 3.1 ...

IE6 disrupts stored layouts

I've encountered a strange issue with my design in IE6. It loads perfectly at first, but after reloading it a couple of times, everything suddenly collapses. The strange part is that when I upload an updated version, it fixes the issue, only to break ...

Bazel: Utilizing the nodeJS_binary rule for executing "npm run start" - A Guide

Is there a way to utilize the nodejs_binary rule in order to execute a standard npm run start? While I can successfully run a typical node project using this rule, I am struggling to run the start script specified in package.json. Below is what I currently ...

Issues with the CSS property clear:both causing a significant gap

Coding in HTML <div id="site-content"> <div class="site-content"> <div id="site-content-left"> <h1>NEW COURSE OFFERINGS</h1> <div id="site-conten ...

Tips for improving the styling of a django form with mixed elements

Here are two different forms I am working with: class InitialForm(Form): trn = IntegerField(widget=NumberInput, required = False) klient = ChoiceField(choices=KLIENTS, required = False) class SecondForm(Form): faktura = CharField(max_length = ...

What is preventing me from applying styles to the first word in my Angular ngFor iteration?

I'm currently attempting to customize the initial word of a string within my Angular ngFor loop. Strangely, the class gets applied but the style defined in my CSS file is not. Inline styling also does not seem to work - any ideas why? This is the CSS ...

Conceal anchor links using jQuery by targeting their title attribute

Looking at the html below <li class="static"> <a title="blog" class="static menu-item" href="http://google.com">Blog</a> </li> <li class="static"> <a title="profile" class="static menu-item" href="http://profile.com"> ...

What is the best way to display a child div without impacting the position of other elements within the same parent container?

As I work with a div html tag within a login form, encountering an error inside this form has presented a challenging issue. The error div sits at the top of its parent div, and ideally, upon activation, should remain within the form div without disrupting ...