Adding sass folder to codeigniter public folder - html

I have a codeigniter application where I am trying to implement the design I have currently implemented the design but some of the functionality is not working due to the sass not getting called I was wondering if anyone knows where I should be placing the sass folder and or if I should be altering the css files to call the sass.
Any help would be appreciated, thanks
My call to the css is as follows:
<link href="<?=base_url()?>public/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="<?=base_url()?>public/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="<?=base_url()?>public/assets/global/css/components-md.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="<?=base_url()?>public/assets/global/css/plugins-md.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="<?=base_url()?>public/assets/layouts/layout4/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/layouts/layout4/css/themes/light.min.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="<?=base_url()?>public/assets/layouts/layout4/css/custom.min.css" rel="stylesheet" type=
I also have the sass just placed in the public/assets folder.

Your application should not be calling the SASS file. Instead app should call the CSS - compiled from the SASS.
I was wondering if anyone knows where I should be placing the sass
folder and or if I should be altering the css files to call the sass.
You can actually place it on any folder and when compiled will be placed in your assets folder.

Related

Boostrap image slider not working when publishing site online

I have a Bootstrap image slider in my project, I only need the bootstrap js and css file for that slider. Everything works fine till I publish my site online. Then the imageslider is nowhere, the images aren't shown, just a white space.
I included jquery and popper because I read that is necessary but still it does not work. Why is that?
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script defer src="./scripts/popper.min.js"></script>
<link href="./styles/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="./styles/reset.css" type="text/css" rel="stylesheet" />
<link href="./styles/allstyles.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="shortcut icon" href="./img/huisstijl/logo.png" type="image/x-icon">
<script src="./scripts/bootstrap.bundle.min.js"></script>

I'm trying to get my CSS working locally again

I can't get my CSS to be rendered locally. It was up before and I'm wondering if it is the order in which it appears in the head tag or if I am simply using the wrong path.
I've tried changing the order and different file paths including:
<link rel="stylesheet" href="css/styles.css"> (this one I thought should work but doesn't).
<head>
<meta charset="utf-8">
<title>SoundOff</title>
<!-- Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Favicon -->
<link rel="icon" href="/docs/4.1/assets/img/favicons/favicon.ico">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Poppins:300,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Montserrat:900|Ubuntu" rel="stylesheet">
<!-- <!All fonts-->
<link href="http://allfont.net/allfont.css?fonts=antonio-bold"
rel="stylesheet" type="text/css">
<!-- CSS -->
<link href="css/styles.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous">
<link rel="canonical"
href="https://getbootstrap.com/docs/4.1/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
</head>

Link stylesheet from another html

Hi there I would like to import a stylesheet import from another folder/ file when I put it on the other file and import it, it seems to have appear nothing...
folderpath:
app/css/stylesheeta.css
app/css/stylesheetb.css
app/css/stylesheetc.css
app/css/stylesheetd.css
app/module/module.js
app/lib/module/abc.js
In the html page,
app/views/stylsheet.html:
<link rel="stylesheet" href="../css/stylesheeta.css" />
<link rel="stylesheet" href="../css/stylesheetb.css" />
<link rel="stylesheet" href="../css/stylesheetc.css" />
<link rel="stylesheet" href="../css/stylesheetd.css" />
<link rel="stylesheet" href="../module/module.css" />
<link rel="stylesheet" href="../lib/module/abc.css" />
In the main index.html
/index.html:
I include the stylesheet.html:
<head>
<link rel="import" href="app/views/stylsheet.html" />
</head>
<body>
//some other stuff here
</body>
however there isn't any output of the stylesheet at all.. im wondering if what I do is permissable

Laravel Asset Links not working

I want to install the "Metronic" Admin Theme in Laravel and therefore adjust the links in the header to the correct paths.
The current header looks like this:
<head>
<meta charset="utf-8" />
<title>Metronic Admin Theme #1 | Blank Page Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="Preview page of Metronic Admin Theme #1 for blank page layout" name="description" />
<meta content="" name="author" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME LAYOUT STYLES -->
<link rel="shortcut icon" href="favicon.ico" /> </head>
<!-- END HEAD -->
I copied all the folders needed into the resources/assets/ folder, but still it is not found when loading the page and no matter how I change the path it is not found. How would I need to adjust this correctly?
you can use {{asset}} which allows you to link to an asset within
your public directory
try
<link href="{{ asset('/global/css/components.min.css') }}"" rel="stylesheet" type="text/css" />
https://laravel.com/docs/5.4/helpers#method-asset
Copy assets folder of Metronic theme and past to your application's public folder. Add your resource link by following line:
<link href="/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
By Metronic you maybe forgot to call
npm run dev
or
npm run prod
according to docs
Metronic Laravel

How to ensure custom css file called within WHMCS bootstrap?

I am using a free WHMCS template and customising it to match the rest of my site. In the head.tpl file of my template i have included my additional stylesheets as per the standard procedure, and whereby the are showing in the source code, the styles are not being applied. I am guessing this is due to bootstrap being used? I have been hunting around for a while and cannot seem to pinpoint how i can include these external styles within bootstrap? Please can any one advise me how i may achieve this? Is there a file within the bootstrap framework i need to edit?
Best Regards
Donna
I have added the stylesheets into the head.tpl file in WHMCS as below:
<!-- Bootstrap -->
<link href="{$BASE_PATH_CSS}/bootstrap.min.css" rel="stylesheet">
<link href="{$BASE_PATH_CSS}/font-awesome.min.css" rel="stylesheet">
<!-- Styling -->
<link href="{$WEB_ROOT}/templates/{$template}/css/overrides.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/styles.css" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/style.css" rel="stylesheet" type="text/css" />
<link href="{$WEB_ROOT}/templates/{$template}/css/slicknav.css" rel="stylesheet" type="text/css" />
<link href="{$WEB_ROOT}/templates/{$template}/css/mobile.css" rel="stylesheet" type="text/css">
<!--External Stylesheets-->
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/css/small.desktop.css" media="(max-width: 1150px)">
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/css/tablet.css" media="(max-width: 1030px)">
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/css/small.tablet.css" media="(max-width: 820px)">
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/css/mobile.css" media="(max-width: 580px)">
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/css/override.css">
<link rel="stylesheet" href="https://www.mydomain.co.uk/templates/gk_simplicity/style1.css">
<!-- jQuery -->
<script src="{$BASE_PATH_JS}/jquery.min.js"></script>
<!-- Custom Styling -->
<link rel="stylesheet" href="{$WEB_ROOT}/templates/{$template}/css/custom.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
As i said they are included in the source code of the page, but the syle is not being applied?