I was given a Laravel project and I manage to download it's configuration and get it started on php artisan serve.
When I open it on localhost:8000 It opens but only the html portion of it.
It seems like css files didn't load for it.
Is there some sort of package we need to install with composer in my environment.
To get the css working.
The public folder looks like this in the laravel project.
backend favicon.ico front images index.html index.php js robots.txt sql vendor
web.config
Laravel provides a helper function, asset(), which generates a URL for your assets. You can use this in blade syntax.
Put your css, js files on public folder. for example of a css file, put it on :
../public/bootstrap/css/bootstrap.min.css
In your blade you can access this file from header like this :
<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" >
hope this help
I made a custom theme that has the magento luma theme as parent, but all icons are not showing on the frontend. A few examples:
searchbar (and cart icon missing)
Stars missing in rating
There are a lot of other places missing these icons. I already tried to do a php bin/magento setup:static-content:deploy with my store languages but to no avail. In my browser console i dont see any 404 errors in resources, and if i look in my folders i can see the fonts are there.
Any ideas?
EDIT
as requested a bit of "code", but first the structure is as follows:
Vendor
- MyTheme
- web
-css
-source
-variables
---.less files
--- .less files
-images
-composer.json
-registration.php
-theme.xml
contents of my theme.xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>MyTheme</title>
<parent>Magento/luma</parent>
</theme>
Additional info
So i did some digging in the html itself. I found that a :before has the icon. When looking at its css its has the following:
content: '\e61d';
font-family: FontAwesome;
Found in static-m.css
so i tried to edit the content to something else from fontawesome and that works, so that means fontawesome is loaded correctly. So does that mean that the content code does not exists in fontawesome? or does the standard magento icons come from a different library like fontawesome?
I'm a web newbie programmer,
I'm trying to learn from home to make my own web.
I have notions of php, html, js and css.
But I've found something that is not how to solve.
I'm trying to use Composer to manage Bootstrap. I installed Composer and I have run this line of code
composer require twbs/bootstrap
that has dropped a folder with files.
I do not understand is how I make html links to find the js and css files, you should do indicating the full path?
vendor / twbs / bootstrap / dist / js / bootstrap.js
Excuse me if the question is stupid but I do not know how I should continue.
Amd excuse my English, I'm learning too but by now I use google translate
You could use a post update command in the composer.json file:
"scripts": {
"post-update-cmd": [
"rm -rf public/bootstrap",
"cp -R vendor/twbs/bootstrap/dist public/bootstrap"
]
}
And then just include the javascript- and css-files like this:
<script type="text/javascript" src="{{ ROOT_URL }}bootstrap/js/bootstrap.min.js"></script>
<link href="{{ ROOT_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet">
Yes, Composer downloads the dependencies by default into the vendor folder. So Bootstrap will also land in the vendor folder, which is not the correct place to reference it or include it.
composer require twbs/bootstrap ➔ vendor/twbs/bootstrap/dist/js/bootstrap.js
Your next step would be to write a little helper script to copy the Boostrap files you need, into your public/assets folder. You could copy the complete dist folder including sub-folders (vendor\twbs\bootstrap\dist) into public or public\assets.
Please overwrite existing files, e.g. if a file exists remove it, then copy it. This allows to easily update the files, when you need to update the Bootstrap vendor package again.
Of course, you could also just copy the files manually or create a symlink. It depends.
That gives you the following directory structure:
public
\- assets
|- css
|- js
\- fonts
\- index.html
When the Boostrap assets are copied you can start to include them, in your index.html or template (assets\js\bootstrap.min.js, etc.).
Referencing: https://stackoverflow.com/a/34423601/1163786 which shows also other solutions to this problem, e.g. fxp/composer-asset-plugin, bower, grunt.
Unless you need customization inside bootstrap (e.g. building scss), the most simple solution is relying on a CDN (as a bonus, you get super-fast caching of assets)
So, simply call your assets like so:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Composer is a super-excellent tool for backend dependencies, but not the best one for frontend.
If you want to have the files in your server, and you don't want to use npm, grunt or another frontend library manager, you can simply download the files listed in Massimiliano's answer and put them inside your js/css folders:
First download these files (updated to the most recent Bootstrap 3 version):
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
http://code.jquery.com/jquery-2.2.4.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
And put them in these folders (starting from the root of your project):
public/css/bootstrap.min.css
public/js/jquery-2.2.4.min.js
public/js/bootstrap.min.js
Now, you want to be able to call them in the blade templates for your views. It's simple: just add <link> and <script> tags as normal for any css/js file, adding the following to your blade template:
<link href="{{ url('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url('js/jquery-2.2.4.min.js')}}"></script>
<script src="{{ url('js/bootstrap.min.js')}}"></script>
P.s.: if you see the console, it shows something as the following error message:
Source map error: request failed with status 404
Resource URL: http://localhost:8000/css/bootstrap.min.css
Source Map URL: bootstrap.min.css.map
This will not affect the style of your page, and you can simply ignore this message, or remove a line from the bootstrap file as the answers to this question suggest. This answer explain a bit more.
I am looking at installing this theme in my SF2 project, and I note that there are 4 files at the top of the page to download, namely:
bootstrap.min.css
bootstrap.css
variables.less
bootswatch.less
I have the less.php (oyejorge/less.php) parser successfully installed along with bootstrap itself, and I have Assetic setup compressing all my CSS together and outputting this to the page:
<link href="/app_dev.php/css/425e28c.css" type="text/css" rel="stylesheet">
However, I would like to install the Superhero theme in the link above but I can't find any tutorials on how to do this? Is it just a case of overwriting variables.less and importing bootswatch.less?
Also read the Usage and Customization sections of the docs at https://github.com/thomaspark/bootswatch.
If you want to use the theme as is (without customization) you only should include the bootstrap.min.css OR bootstrap.css into your HTML:
<link href="/bootstrap.min.css" type="text/css" rel="stylesheet">
Alternatively you can compile your own version of the theme:
Download Bootstrap's source files at http://getbootstrap.com/getting-started/#download
In the source files replace the less/variables.less file with that download from bootswatch
copy the bootswatch.less into the less directory of the bootstrap sources files
Than, open the less/bootstrap.less and add the following line of code at the end of this file: #import "bootswatch"
compile the modified bootstrap as described at: Error while executing assetic dump (parse error: failed at `&:extend(.clearfix all);`)
Also notice that Bootstrap adds the autoprefixer for vendor prefixes into their build process. The vendor prefix mixins in less/mixins/vendor-prefixes.less are deprecated as of v3.2.0. So you should add https://packagist.org/packages/bit3/assetic-autoprefixer to your assetic configuration too.
I've got a custom theme running on the latest stable Concrete5 version.
It's all working great - but tonight I've come to create a variation of an existing template.
Inside the theme/themename/ folder I copied the PHP file for the template.
In the theme/themename/css folder I copied the CSS file used by the existing template.
In the CMS itself I created a new pageType with the alias to match both the php and css file's filename I'd created by copying the previous files.
The PHP / template file is loading fine when chosen as the template for a page, but it's now loading in the associated CSS file.
Cache cleared but to no avail.
Can anyone give me any clues what I'm missing?
This usually is because the css and/or js is hardcoded in the header.
Check the html head (in the template) if the path to the css/js is correct.