I am building a web page and i have a problem about the page. In the 'routes', I created a custom link:
Route::get('/customization/footer', 'Controller#footer');
So, the page will be loaded using https://myweb.com/customization/footer. But, using that link, the page didn't load the style (css and js). And then, when I changed the link on 'routes' becoming:
Route::get('/footer', 'Controller#footer');
the page loaded perfectly (no problem found).
The reason I used a longer link is to make it tidier. Does anyone know about how to solve this problem? I need help 🙏
P.S.: The problem is not in how the style files (like css and js files) are called. The problem is in the link I used as I stated in my question
You havent shown how to include styles on your page.
The best way to connect styles is via a helper asset()
<link href = "{{asset('css/app.css')}}" rel = "stylesheet">
(for path /public/css/app.css)
Related
I started learning VS Code through Udemy and I already have one problem that I can't find answer anywhere. In the project I have index.html, style.css and script.js. Now when I try to save the html, the page reloads and everything from the html is applied, the same with javascript, but when I try to save the CSS, the page reloads but everything from the CSS is not applied to the page.
How can I fix this?
First try to add internal CSS then it works check that you correctly linked your style.css and js to index.html.if you provide a screen shot of your vs code i think it's better and easy to give a solution because when linking to html you need to mention correctly file paths.
Make sure that your style.css is linked correctly to your html page.
Then clear the cache of your browser when you reload.
On chrome => ctrl + f5
So I'm working on a micro-frontend architecture POC right now, using Web Components to wrap around code from any other framework out there. The goal is to have pieces of the UI be individually deployable to different hosts and simply pulled into the "parent" app (ie, the one that the user navigates to).
I've got most of my architecture working, but right now I'm trying to integrate the Shadow DOM into my work. My current design is to load both the JS and CSS through global static link/script tags, as shown below. Without the Shadow DOM, this works perfectly.
<html>
<head>
<link rel="stylesheet" href="http://micro-fe.com/file.css" />
</head>
<body>
<web-component></web-component>
<script src="http://micro-fe.com/file.js"></script>
</body>
</html>
Once I mount the content inside my Web Component using the Shadow DOM, however, this breaks down. The stylesheet I am loading in the page header is no longer able to touch the content within the Web Component. That is my ultimate goal for using the Shadow DOM, but that means I need a different way of loading my CSS. The goal is to load it from an external stylesheet like it is now, and not have it inlined in a tag. Something like this:
// Code is inside Web Component. "this" is HTMLElement
const shadowRoot = this.attachShadow({ mode: 'open' });
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'http://micro-fe.com/file.css';
shadowRoot.appendChild(link);
I haven't tested that yet, but I've read that tags are supposed to work from within the Shadow DOM. This, in theory, will get me my scoped styles in the Web Component.
My final challenge, and the reason I am posting this question, has to do with conditional rendering. My won't always be on the page. Other logic around it will determine when I want that content rendered. So my concern is that I don't want the CSS file to have to be re-loaded each time the component gets rendered.
I'm considering browser caching as a possible solution, but in general I'm wondering if there are any tips that can be provided. I know this is a bit complicated and non-standard, but my ultimate goal is to solve all of these problems and publish a library that does it all out of the box to make it easier for others.
I haven't tested that yet, but I've read that tags are supposed to work from within the Shadow DOM. This, in theory, will get me my scoped styles in the Web Component.
Yes, you can use <link> inside Shadow DOMs.
So my concern is that I don't want the CSS file to have to be re-loaded each time the component gets rendered. I'm considering browser caching as a possible solution, but in general I'm wondering if there are any tips that can be provided.
Yes, thanks to browser caching the CSS file will only be downloaded the first time it is needed.
I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:
I was following this tutorial on Microsoft's developer network concerning using asp.net and mvc model with sql database. Here is the link to the tutorial that I was following
http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started.
So basically, I wanted to play around with the design of the file which is defined in these three files bootstrap.css, bootstrap.min.css, and web.css.
As to my understanding , bootstrap is an html, css, and javascript framework which has the design for the elements already defined. In Visual Studio, I began to edit the bootstrap.css file by changing background-color of the jumbotron element. However, when I saved the file and ran my web application , I noticed that the color remained the same and did not change. But, when I defined the design for the .jumbotron element in the web.css file, the element's background color changed accordingly to red.
Essentially, what I want to know is if bootstrap.css is restricted for editing within the template?
What is Bootstrap
I think you're trying to refer to the Twitter Bootstrap that is used all around the Internet. It contains most of the Styling techniques for the Elements, such as buttons, inputs etc.
When you edit a website's Stylesheet, (Bootstrap.css is a Style sheet and its name doesn't make it write/edit protected file) you get the style that you've applied to it.
http://getbootstrap.com/
Web.css
This file might be the default Style sheet that was created by the Developers at Microsoft while creating the Template for the Website that you're using.
Secondly, when you edit and create this file, it is also a Style Sheet which means it would apply the style to your website and all the web pages who are refering to it.
You're right. It has all the pre-defined methods and contains all of the contents and styles required to make a web page responsive. For more: https://en.wikipedia.org/wiki/Responsive_web_design
What might have caused this problem would be cache. When you first loaded the web page, it would have captured the New Style sheet from the file System and would have applied the styles. But second time it would have loaded the File from the Cache.
https://en.wikipedia.org/wiki/Cache_(computing)
This way, the browser would load the last successive layout of the Web Page. Without loading a new StyleSheet from the File System.
I really think, you need to reload the page using CTRL + F5 button. This would be helpfull in this manner! Because Bootstrap.css is editable and you can edit it. It doesn't prevent editing, only caching would be the problem here.
I'm creating a simple website and now I'm using the Ajaxify library to make page transitions look great.
The problem is: my pages have both a global CSS file (used in the whole site) and specific CSS files (one file for each page, with specific content).
When I change page with Ajaxify, it pushes the content, however doesn't push the specific CSS links in the head, so the site gets buggy. Any ideas on how to modify Ajaxify to also look for link tags and push them?
Thanks in advance.
If you are using jQuery (which I think is a requirement for Ajaxify), then you can easily manually append new style sheets to the head after the page transition has completed:
$('head').append('<link rel="stylesheet" href="page-specific-style.css" type="text/css" />');