My Page.ss wont load css and script SilverStripe v4.2.1 - html

I have WAMP as my local server. I followed instructions carefully and i cant get my css and script loaded on my Page.ss. I flushed the cache and refresh the page and update the hrefs but none of them seem to have worked.
Page.ss
<html>
<head>
<title></title>
<meta charset = "UTF-8">
<meta name="description" content= "">
<meta name="author" content= "Lisandro">
<meta name="keywords" content= "">
<meta name="viewport" content="width=device-width" initial-scale="1">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="themes/u-mart/css/slick.css">
<link rel="stylesheet" type="text/css" href="themes/u-mart/css/slick-
theme.css">
<link rel="stylesheet" type="text/css" href="themes/u-mart/css/style.css">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
"TONS OF HTML CODES"
</body>
</html>

Found the answer. All you have to do is add these lines in your .SS file.
<% require css("<my-module-dir>/css/some_file.css") %>
<% require themedCSS("some_themed_file") %>
<% require javascript("<my-module-dir>/javascript/some_file.js") %>
These were not mentioned on the lessons in their website neither on the videos. You will have to dig on your own.

Related

Why my layout doesn't work properly in welcome.blade

i'm working on a laravel project and i prepared a layout for welcome.blade but css and html don't work properly . somehow the project can't read them .
i make you sure that my paths is correct
even i change folders and paths in public but it didn't work
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="description" content="MealOrder">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="HiBootstrap">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Fafo - قالب رستوران و فست فود</title>
<link rel="icon" src="/assets/images/tab.png" type="image/png" sizes="16x16">
<link rel="stylesheet" src="/assets/css/bootstrap-reboot.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/bootstrap.rtl.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/animate.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/owl.carousel.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/owl.theme.default.min.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" src="/assets/css/responsive.css" type="text/css" media="all" />
#livewireStyles
</head>
<body>
.
.
.
.
<script src="/assets/js/jquery-3.5.1.min.js"></script>
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/jquery-ui.js"></script>
#livewireScripts
</body>
</html>
I assume you use Laravel 9 because Laravel now is using vite instead of webpack/laravel-mix as we used to see, and the way vite injects styles & scripts in layouts pages are not the same as it was.
you will need to add the following blade directive into your layout file:
#vite(['resources/css/app.css', 'resources/js/app.js'])
and then re-run npm run build or npm run dev to re-bundle your assets.
more about Bundling Assets (Vite)
its better change all src to asset() for example:
instead of
write
<link rel="stylesheet" src="{{asset('assets/css/animate.min.css')}}" type="text/css" media="all" />
and for scripts do same

CSS won't render on IE11

I'm trying to see why our CSS won't render on IE. I'm thinking maybe it is something to do with linking the stylesheet? This is hosted on Salesforce Marketing Cloud if it matters. I've included everything in the header below:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><link rel="icon" type="image/ico" href="contents/ui/theme/i/favicon.ico">
<meta name="robots" content="noindex,follow"><link rel="dns-prefetch" href=""><link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="stylesheet" id="them-style-css" href="https://xx.com/b2c-general-css" type="text/css" media="all">
<link rel="stylesheet" id="g-font-css" href="//fonts.googleapis.com/css?family=Roboto%3A300%2C500%2C700&ver=4.9.8" type="text/css" media="all">
<script type="text/javascript" src="%%=CloudPagesURL(XX)=%%"></script>
<script type="text/javascript" src="%%=CloudPagesURL(XX)=%%"></script>
use the meta in head
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Angular page reload issue due to browser cache

A Page on my website loads perfectly for very first time but if i reload it, it gets struck untill we clear browser cache.
Why is this happenng?
How can we resolve it?
Below is the code
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="ENoESU-ILobE1sHAs8D6mm3S3CohuUHq9ivlMeT2szI" />
<title>My Activity Sheet</title>
<!--Favicon-->
<link rel='shortcut icon' type='image/x-icon' href="<%url('favicon.ico')%>" />
<!-- Core Css -->
<link href="<% asset('static/vendors/angular-select/ui-select.css') %>" rel="stylesheet">
<link href="<% asset('css/mas.css') %>" rel="stylesheet">
<link href="<% asset('css/responsive.css') %>" rel="stylesheet">
<link href="<% asset('static/vendors/bootstrap/dataTables.bootstrap.min.css') %>" rel="stylesheet">
<link href="<% asset('static/vendors/dateipcker-angular/angular-datepicker.min.css') %>" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt-plugins.min.css"/>
#yield('pageLevelCSS')
<style>
.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
#yield('pageLevelHeadJs')
<script>

Thymeleaf functionality on Meta tag

I'm not sure if this could be a known scenario. But I'm confused since I couldn't find any discussions on this.
Raising my clarification. Does thymeleaf based html page allow meta tags within its head?
I've this code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Data Services Platform Support</title>
<div th:replace="fragments/header :: header-css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}"
href="../../css/main.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
which displays the page I'm looking for.
But when I tried adding the meta tag to upgrade my page with few functionalities(which require a meta tag), Whitelabel Error Page is all what I get.
My modified code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Data Services Platform Support</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div th:replace="fragments/header :: header-css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" th:href="#{/css/main.css}"
href="../../css/main.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
Is there something I need to consider? Please help.
Yes, Thymeleaf supports all tags. If you are using an old version of thymeleaf, it may be likely that it needs to be valid xhtml. So your meta tags should looks like this:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
(with the ending slash). The server log error message will contain the details of the error.

My stylesheet isn't linking to my HTML

Really new to HTML & CSS but have created sites in the past and linked the CSS to the HTML quite easily. I can't understand where I'm going wrong (although I am sure it's massively obvious!) Any help would be great, thank you in advance!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Katgrog</title>
<meta name="description" content="My first try at my own website">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
Copy and paste it in your html, it will work. It seems you are forgetted to add slash(/) at the end before >.
you need to specify the type, so do something along these lines: (The type is not required)
<link rel="stylesheet" type="text/css" href="theme.css">