I'm building a page using Spring Boot and Thymeleaf and I want to use material components for web UI. So far everything is okay using the CDN.
<head>
<title th:text="${page?.name}">Temporary Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Required styles for MDC Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.css">
<!-- Required MDC Web JavaScript library -->
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.js"></script>
</head>
However, I wish to personalize the theme colors. I found this link, but it seems to use the npm.
Are there any other way to generate the theme css files without npm?
The material-components-web css uses custom properties for all colors. All of them default to some color, but you can easily overwrite those defaults like this:
<head>
<!-- ... -->
<style>
:root {
--mdc-theme-primary: #ff0000;
// ...
}
</style>
</head>
Be aware that there's a whole bunch of properties to set. For example, if changing the primary color like in the code above, there's also properties for the desired foreground color on primary background and so on.
For a list of custom properties you can set refer to the documentation.
Related
I want to add a few links in a Magento 2 store's head element, to serve a favicon bundle (OS specific link icons etc). In my theme directory I've added a new default_head_blocks.xml:
./app/design/frontend/MyTheme/std/Magento_Theme/default_head_blocks.xml
With following content:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<meta name="theme-color" content="#ffffff">
</head>
Problem is, these tags never show up in the html. I've added a default.xml in the same folder to remove the standard Report Bugs link and that link vanished faster than my salary on a Friday.
I can also browse the image URLs manually to get the icon images. But still, the links never show up.
What am I missing here?
PS. Must point out that the theme inherits Blank.
Problem solved. The link elements shall have a src attribute instead of a href. And if one element fails, all fail. This code works:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link rel="apple-touch-icon" sizes="180x180" src="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" src="favicon/favicon-32x32.png">
<meta name="theme-color" content="#ffffff">
</head>
I'm still learning Laravel 5.3 and started studying it a few days ago. One tutorial project I'm following made use of Fontawesome and Bootstrap where bootstrap link and fontawesome link was included within the <head></head> tag.
So I thought that if I disconnect the internet connection, it will fail to display the icons from fontawesome since no library file was downloaded and imported to project. But I was surprised that it still was able to display the fontawesome icons.
That's when I of thought of asking this simple question since I'm a beginner with Laravel and web programming. (Java programmer)
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>#yield('title')</title>
<!-- bootstrap link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- fontawesome link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- app.css link -->
<link rel="stylesheet" href="{{ URL::to('css/app.css') }}">
#yield('styles')
</head>
I read something from Laravel 5.3 documentation about the bootstrap directory that stores cached information. Is the caching the reason the fontawesome icons still displays even when it is not connected to the internet?
The Bootstrap Directory
The bootstrap directory contains files that bootstrap the framework
and configure autoloading. This directory also houses a cache
directory which contains framework generated files for performance
optimization such as the route and services cache files.
I'd appreciate any explanation to this so I can better understand how it works.
Your browser has cache too. Do hard refresh / reload - in Chrome you can do this by opening inspector and then right click on refresh button and click what suits you the most.
Describing what is actually going on would be too long for an answer.
Good description what is going on is here.
Google search terms: browser cache, web browser cache
If you use build system (gulp) you will most likely end up with large *.css file which contains bootstrap, font-awesome definitions etc.
More on that is right in documentation.
Im developing a golang webpage and am running into some troubles when deploying my page to google app engine (appspot.com). This is because Im running it using http when developing on my machine, but over https when deployed.
Google chrome doesnt like this so it blocks the content trying to be loaded over http. Im fine with this since I like security. But I cant find the source.
All my includes are https or //, or just local files.
Here is a image of the error in chrome.
This is some includes that I use. Maybe some of them is loading a font?
<link href="/static/css/googlefont.css" rel='stylesheet' type='text/css'>
<link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/static/css/style.css" rel="stylesheet" type="text/css">
<link href="/static/css/sweetalert2.css" rel="stylesheet" type="text/css">
<link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="/static/css/modal.css" rel="stylesheet" type="text/css">
<script src="/static/js/jquery.js"></script>
<!--<script src="/static/js/jquery.min.js"></script>-->
<script src="/static/js/register.js"></script>
<script src="/static/js/login.js"></script>
<script src="/static/js/sweetalert2.min.js"></script> <!-- Sweetalert -->
<script src="/static/js/spin.min.js"></script> <!-- ?? -->
<script src="/static/js/bootstrap.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/stuff.js"></script>
<script src="/static/js/flat-ui.min.js"></script>
<script src="/static/js/application.js"></script>
<script src="/static/js/bootbox.js"></script>
I cant seem to find the source..?
Thankful for any help in the right direction, i'm going crazy here..
Check all the CSS stylesheets your document is loading, including any CSS stylesheets that are getting loaded through an #import. In one of the CSS stylesheets, you most likely have a rule with a url(…) call something like this:
src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/fhNmDCnjccoUYyU4ZASaLVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
Use the Network tab (or equivalent) in your browser devtools to get a view of all the resources your document is loading. You can sort that resource view by type. So, set it to sort by type and then look through the source of all the type=stylesheet or type=css resources to see which one has a url(…) that uses an insecure http scheme.
If someone hasn't already, there really should be a feature request lodged with Google. The fact that Chrome knows the location of the error but just displays "(index):1" in the developer console just doesn't cut it.
In the meanwhile, the easiest way to find the offending CSS in Chrome (ver 68) is to "Customize and control DevTools" by clicking on the 3 dots in the top right corner of the development console and clicking "Search" ) or "Ctrl+Shift+S". You might have to drag up the horizontal pane at the bottom of the screen.
In the bootstrap application, what layout best suit both mobile and browser user interface? fixed-width layout or fluid-width layout? Do I need explicitly define the css media query styles for both design?
You may use Bootstrap's responsive deisgn by which your website will automatically adjust itself in order to give users a comfortable experience for whatever size device they’re using..
For it's application you need to include meta viewport tag under your <head>..</head> tags in addition to including Bootstrap’s responsive stylesheet
<head>
..
<meta name="viewport" content="width=device-width, initial-scale=1.0">
..
<link rel="stylesheet" href="responsive.css" />
..
</head>
You may check further details here and also this article
So, If you have correctly setup your page with containers, rows, and spans, Bootstrap will automatically adjust the layout for each device you are viewing the website on..
Is it possible to have a portable area feed into a ASP.Net MVC 3 razor section? I have a section in my for placing JS files, CSS, fiels, etc. I want to be able to target the head section from portable areas for any JS, CSS files the portable area needs. Is this possible?
Thanks
Tom
You can use master page concept just like _Layout.chtml to put portable sections. (It event works for header)
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet"
type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")"
type="text/javascript"> </script>
#{
//access your portable section here.
}
</head>
<body>
#RenderBody()
</body>
</html>