Laravel registering routes affecting CSS - css

I am using Laravel 6 and want to change the structure of some of my routes in the web.php file. When registering the following route like this:
Route::view('/my-article', 'articles.my-article')->name('my-article');
everything works as it should.
But when changing the URL like this, adding /articles:
Route::view('/articles/my-article', 'articles.my-article')->name('my-article');
Suddenly no CSS is applied anymore. No Bootstrap, Fontawesome or own stylesheet. JS script on the other hand, and HTML of course, were loaded.
Oddly (for me): The other routes worked fine, all CSS stylesheets loaded.
I tried the same with another route that had a Controller action. I changed it from
Route::get('/{continent}', 'ContinentController#index')->name('continent');
to (adding /continents)
Route::get('/continents/{continent}', 'ContinentController#index')->name('continent');
And again, no styles were applied. Only JS scripts and HTML.
Why is that so? Why can't I add something to the URL by hand and why does it affect the loading of the CSS stylesheets?
Thanks and best regards.
EDIT:
Here is the part of my template.blade.php file where the styles are included:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Font Awesome Icons CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Own CSS -->
<link rel="stylesheet" href="css/style.css?{{ time() }}">

Related

Stylesheet doesn't gets applied on website after bundle (MVC)

The issue is CSS Does not effect on website after bundle although all of bundle process is fine
From the view source code page i can see the css file but it does not take any effect on website. The code bellow is what i used to call css and saw from view source code page and from my layout file.
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
Does anyone have any idea for this?
Thank you.
You used
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
your code
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
try like ths
src should change to href
<head>
<link rel="stylesheet" type="text/css" href="/path/yourcssfilename.css">
</head>

How use bootstrap with thymleaf in jhipster application

I'm currently working on an email template with thymeleaf in a jhipster application.
My problem is that i can't use bootstrap css in thymeleaf template.
I understand that thymeleaf is a server-side technology and cannot load bootstrap css that exists on client-side (via node_modules), but when i saw answers to these two questions question1 and question2 i tried by similarty to import my css like this
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/vendor.css|}" />
but thymleaf still can't load this two files, i have no errors on console but css classes (bootstrap and mine) are just ignored.
PS : global.css contains my css classes, and vendor.css is the default jhipster file that calls bootstrap
vendor.css
#import '~bootstrap/dist/css/bootstrap.min.css';
#import '~font-awesome/css/font-awesome.css';
My template is located under
/src/main/resources/mails/applicationReport.html
My css is located under
/src/main/webapp/content/css/vendor.css
/src/main/webapp/content/css/global.css
So how can i use css classes from global.css and vendor.css in thymleaf?
UPDATE
After Gaƫl Marziou's answser i added these two lines to /demain/webpack/webpack.common.js
{ from: './src/main/webapp/content/css/global.css', to: 'global.css' },
{ from: './src/main/webapp/content/css/vendor.css', to: 'vendor.css' },
and in /src/main/resources/mails/applicationReport.html i call these two files like that
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/vendor.css|}" />
but Thymleaf stills ignore my css classes
Your CSS files are bundled by webpack, so content/css/global.css does not exist in your built webapp and cannot be accessed by URL, check it by unzipping your war file.
However, you could have both bundled stylesheets and original css files in your war file by adding these files to the configuration of CopyWebpackPlugin see in webpack-common.js file.

Bootstrap Flask Custom CSS not showing, browser caching issue

I have checked external css file doesn't work in Flask framework etc. other SO questions and my original Udemy source tutorial, but I still can't seem to get my Flask Boostrap app. to pick up my custom CSS file.
From base.jinja2 HTML template file:
{% include 'html_dependencies.jinja2' %}
</head>
<body>
Entire CSS test file in Source/static/css/style.css:
body {
background-color: yellow;
}
(This is test file, body does not change to yellow currently, therefore my CSS appears not to be loading.. I don't really want a yellow background if any style police reading!)
Complete HTML Dependencies file below code, which is loading the main bootstrap files fine, my custom CSS is last file, with url_for and static format syntax as I understand should be correct. Maybe I got the order wrong or some interference from one of Bootstrap files here? Also, I have problem with Bootstrap collapsed nav menu not functioning when window minimised, not sure if this is same cause, the standard lines in box icon shows for navigation when window is below cutoff width, but nothing happens when I click on it.:
<!-- Latest versions available at 31-8-17 -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<!-- link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" -->
<!--Font Awesome from https://www.bootstrapcdn.com/fontawesome/ on 31/8/17 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Flatly theme from bootstrapcdn.com on 31/8/17 -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- do I need jquery as well for the pop-up to work? Maybe already in the JS import -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- custom changes / over-rides to Boostrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
I'm quite a Bootstrap newbie, any suggestions grateful.
I found it is the browser caching that is the problem. On the server this code works fine for me. In both IE and Chrome on my local computer, if I change the custom CSS code, it doesn't pick it up, unless I open code inspector in the browser, click on "Disable cache" option in the code inspector, and keeping code inspector window still open, then reload the localhost website. The below SO question finally sorted me out, and now I am downloading the Chrome extension Cache Killer as per second answer here, otherwise extremely irritating to have to open window and disable cache to check every change in custom CSS! Disabling Chrome cache for website development
I did also fix other mentioned error of collapsed menu issue was due to Bootstrap jQuery import line being below the Bootstrap min.js file. Opening the code inspection in browser showed this error, so moved jQuery line above js line and it loads properly.
Thanks again #senaps pointing me in right direction, confirming to me that posted code itself seems right.

Bootstrap won't work properly

I've tried this exact code on my other computer and once run it is shown differently. Could you correctly show me how I should insert the references? Also how could I override the style of the default bootstrap?
I think that's all the info you need, but if you need anything else just ask.
I assume that you html file is inside wwwroot folder, so:
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<style>
...
</style>
</head>
Where you have:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove the ~.
I believe that the ~ is a Windows only thing used for finding the path. If it's your mac where Bootstrap is not working, then I'm 98% sure that was the issue. ~ isn't used in the mac environment for paths like it is on Windows.
You will also need to do that for your other paths being found this way.
Going in and changing the bootstrap CSS can get a little complicated so I usually create a new CSS file with my edits. Since CSS is cascading stylesheets, I make sure that my CSS file is the last stylesheet in the head section so it overrides the stylesheets above it.
The location of your CSS file in reference to your HTML file will determine what the file path looks like in your reference. If your HTML file is in the root directory, the reference/paths mentioned in the other answers should work.
As stated above:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove ~.
If you want to overwrite CSS place the default.css or your own css after the one you want to overwrite for example:
<!-- Bootstrap and Custom CSS Style Sheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">

Bootstrap glyphicons without changing fonts

I am using Bootstraps glyphicons, including them like this:
<!-- Load Bootstrap CSS (Flatly) and Javascript -->
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Before I loaded the glyphicons CSS file my fonts were fine. I did not set the font, instead using whatever Bootstrap or jQuery sets the font by default.
Now I have included that glyphicon CSS file, my fonts have changed. Can I utilize the glyphicons whilst ignoring the fonts?
As you can see here http://www.bootply.com/5Amv5odg7X you don't need to load the glyphicons separately, just be sure to load stock Bootstrap before flatly, and you're good to go.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
Also, it's usually considered best practice load your .js files after all html content, so it doesn't impact page load.
You are using a custom version of Bootstrap css that already includes the icons and imports a custom Google font. Check the file you're linking to here:
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
This file contains all of the styles for the glyphicons embedded in it, so no need to separately add the link to the cdn for <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">.
As for you fonts "changing", the first line in this file imports the Lato font from Google and sets as the body font. If you don't want to use the custom font, download the flatly css file (instead of linking to the remote file) and remove the import statement at the top of the css file. Or, override the styles in your own css file. (Better to do the former, as it would be a waste to have your site visitors download the Google fonts, if you're not using them).

Resources