I've spent the last 7 hours trying to load my assets folder to my view file but for some reason it didn't work ! i read the docs , stackoverflow posts & tried everything but nothing seems to be working.
here's my folder structures:
htdocs
CRM
app-assets
css
pages
dashboard-ecommerce.css
bootstrap.css
bootstrap-extended.css
vendors
css
vendors.min.css
charts
apexcharts.css
extensions
swiper.min.css
Applications
controllers
dashboard.php
views
dashboard.php
assets
(+ the rest of the files with .htaccess included)
Now here's the dashboard's header part:
<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="app-assets/vendors/css/vendors.min.css">
<link rel="stylesheet" type="text/css" href="app-assets/vendors/css/charts/apexcharts.css">
<link rel="stylesheet" type="text/css" href="app-assets/vendors/css/extensions/swiper.min.css">
<!-- END: Vendor CSS-->
<!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="app-assets/css/pages/dashboard-ecommerce.css">
<!-- END: Page CSS-->
Note that i did change the config file to
$config['base_url'] = 'http://localhost/CRM'
but nothing worked.
Here is simple solution for this problem
<link rel="stylesheet" type="text/css" href="<?=base_url('app-assets/vendors/css/vendors.min.css')?>">
<link rel="stylesheet" type="text/css" href="<?=base_url('app-assets/vendors/css/charts/apexcharts.css')?>">
<link rel="stylesheet" type="text/css" href="<?=base_url('app-assets/vendors/css/extensions/swiper.min.css')?>">
base_url will proper base URL to the asset path.
Related
I have two CSS links in the head of my PHP file.
<link rel="stylesheet" type="text/css" href="../styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../styles/style.css">
The first one (Bootstrap) works. The second one doesn't. They are both in the same path. I've double and triple checked that the second one is spelled correctly. What should I do?
Check the location of your file in a web site's folder structure.
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
css is located in the same folder as the current page
<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css">
css is located in the styles folder in the current folder
<link rel="stylesheet" type="text/css" href="/styles/bootstrap.min.css">
css is located in the styles folder at the root of the current web
<link rel="stylesheet" type="text/css" href="../styles/bootstrap.min.css">
css is located in the folder one level up from the current folder
In my root, I have index.php which references css files like this:
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/custom.css" type="text/css" />
I have a rewrite rule that makes my path example.com/products/.....
RewriteRule ^products/([0-9a-zA-Z-]+)$ product-detail.php?slug=$1 [NC,L]
The issue I have is that the css links are now broken on the products pages because the reference to the css files is incorrect as it should change to:
<link rel="stylesheet" href="../css/style.css" type="text/css" />
<link rel="stylesheet" href="../css/custom.css" type="text/css" />
I would like to have a header.php file where I can just make changes once if I need to add or remove css references but now I have to have 2 make changes twice. Is there a way around this?
you can start the include with the root path
<link rel="stylesheet" href="/css/style.css" type="text/css" />
I solved this by adding this to the head:
<base href="//localhost:8888/mysite/" />
Currently have a site built using SASS, however due to the fact it was not compiling we decided to edit the cw-styles CSS in our DEV environment and upload this to the FTP instead.
This is how we are linking the css in the Head section currently:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="/<?php echo SITE_FOLDER; ?>/css/all.css" rel="stylesheet" type="text/css" />
<link href="/common/js/image/swipe.css" rel="stylesheet" type="text/css" />
<link href="/mse/css/cw-styles.css" rel="stylesheet" type="text/css" />
However on uploading this, in the Head section the link to the stylesheet on the Live site has broken, giving us a link that looks like this:
<link href="/mse,_uploads,_all.crush.css,q23409834296+common,_js,_image,_swipe.css+mse,_css,_cw-styles.css+common,_js,_lightbox,_lightbox.css+common,_js,_image,_swipe.css.pagespeed.cc.0Keg4MRi-i.css" rel="stylesheet" type="text/css"/>
Anyone experienced this, or clues as to why this is happening?
So, I've had a look around, become somewhat overwhelmed by the variety of different answers I've come across and would like a hand.
My included PHP header CSS files currently look like this:
<meta name="viewport" content="initial-scale=1.0">
<link href="CSS/header.css" type="text/css" rel="stylesheet" />
<link href="CSS/ufc-blog.css" type="text/css" rel="stylesheet" />
<link href="CSS/ufc205.css" type="text/css" rel="stylesheet" />
<link href="CSS/cerrone-lawler.css" type="text/css" rel="stylesheet" />
How can I specify the path and then enter a variable from the page with the included header that set the stylesheet to display the CSS specifically for that page?
I can't figure it out what could cause this issue, but i'am pretty sure it simple. I am extending main view main.blade.php (located in views folder). This includes css from partials folder.
I have two pages: Enquire, Approved enquire. (both located in views/trader/ folder.) only difference is routing, one would have /enquires the other would have /enquires/approved.
Blade/Css working if on main route: Route::get('/enquires','Trader\PagesController#getEnquires');
Blade/Css does not work when using suburl: Route::get('/enquires/approved','Trader\PagesController#getApproved');
Please refer to this image:
routing display error
If you require any other information please let me know,
Tahnks in advance,
Dan
It seems the problem is in how you're creating links to assets (images, CSS and JS files). To make it work, use Laravel asset() helper:
<link rel="stylesheet" href="{{ asset('css/theme.css' }}">
Which will create full path to an asset.
Also, you must keep all assets inside public directory of your project, for example: /laravel_project/public/css/theme.css
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#yield('title')</title>
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Trusted Workers - Find local tradesmen">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800%7CShadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-blog.css">
<link rel="stylesheet" href="css/theme-shop.css">
<link rel="stylesheet" href="css/theme-animate.css">
<!-- Current Page CSS -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="vendor/rs-plugin/css/layers.css" media="screen">
<link rel="stylesheet" href="vendor/rs-plugin/css/navigation.css" media="screen">
<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/default.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.js"></script>