I'm trying to find out why I cannot remove the remaining drupal 8 default stylesheets. I'm currently using libraries-override to omit the necessary stylesheets inside .info.yml file
libraries-override:
system/base:
css:
component:
/core/themes/stable/css/system/components/ajax-progress.module.css: false
/core/themes/stable/css/system/components/align.module.css: false
/core/themes/stable/css/system/components/autocomplete-loading.module.css: false
/core/themes/stable/css/system/components/fieldgroup.module.css: false
/core/themes/stable/css/system/components/container-inline.module.css: false
/core/themes/stable/css/system/components/clearfix.module.css: false
/core/themes/stable/css/system/components/details.module.css: false
/core/themes/stable/css/system/components/hidden.module.css: false
/core/themes/stable/css/system/components/item-list.module.css: false
/core/themes/stable/css/system/components/js.module.css: false
/core/themes/stable/css/system/components/nowrap.module.css: false
/core/themes/stable/css/system/components/position-container.module.css: false
/core/themes/stable/css/system/components/progress.module.css: false
/core/themes/stable/css/system/components/reset-appearance.module.css: false
/core/themes/stable/css/system/components/resize.module.css: false
/core/themes/stable/css/system/components/sticky-header.module.css: false
/core/themes/stable/css/system/components/system-status-counter.css: false
/core/themes/stable/css/system/components/system-status-report-counters.css: false
/core/themes/stable/css/system/components/system-status-report-general-info.css: false
/core/themes/stable/css/system/components/tabledrag.module.css: false
/core/themes/stable/css/system/components/tablesort.module.css: false
/core/themes/stable/css/system/components/tree-child.module.css: false
/core/themes/stable/css/contextual/contextual.module.css: false
/core/assets/vendor/jquery.ui/themes/base/core.css: false
/core/assets/vendor/jquery.ui/themes/base/button.css: false
/core/assets/vendor/jquery.ui/themes/base/resizable.css: false
/core/assets/vendor/jquery.ui/themes/base/dialog.css: false
/core/themes/stable/css/quickedit/quickedit.module.css: false
/core/themes/stable/css/views/views.module.css: false
/core/themes/stable/css/toolbar/toolbar.module.css: false
/core/themes/stable/css/tour/tour.module.css: false
/core/themes/stable/css/contextual/contextual.toolbar.css: false
/core/themes/stable/css/toolbar/toolbar.menu.css: false
/core/themes/stable/css/contextual/contextual.theme.css: false
/core/themes/stable/css/contextual/contextual.icons.theme.css: false
/core/assets/vendor/jquery.ui/themes/base/theme.css: false
/core/themes/seven/css/components/quickedit.css: false
/core/themes/stable/css/quickedit/quickedit.theme.css: false
/core/themes/stable/css/quickedit/quickedit.icons.theme.css: false
/core/themes/stable/css/toolbar/toolbar.theme.css: false
/core/themes/stable/css/toolbar/toolbar.icons.theme.css: false
/core/themes/stable/css/user/user.icons.admin.css: false
/core/themes/stable/css/shortcut/shortcut.theme.css: false
/core/themes/stable/css/shortcut/shortcut.icons.theme.css: false
Below are the remaining drupal 8 default stylsheets. Despite adding them inside the libraries-override I cannot seem to omit them. I've already tried clearing the cache
<link rel="stylesheet" href="/barebones/core/themes/stable/css/contextual/contextual.module.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/assets/vendor/jquery.ui/themes/base/core.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/assets/vendor/jquery.ui/themes/base/button.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/assets/vendor/jquery.ui/themes/base/resizable.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/assets/vendor/jquery.ui/themes/base/dialog.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/quickedit/quickedit.module.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/views/views.module.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/toolbar/toolbar.module.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/tour/tour.module.css?ozteii" media="screen">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/contextual/contextual.toolbar.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/toolbar/toolbar.menu.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/contextual/contextual.theme.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/contextual/contextual.icons.theme.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/assets/vendor/jquery.ui/themes/base/theme.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/seven/css/components/quickedit.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/quickedit/quickedit.theme.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/quickedit/quickedit.icons.theme.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/toolbar/toolbar.theme.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/toolbar/toolbar.icons.theme.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/user/user.icons.admin.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/shortcut/shortcut.theme.css?ozteii" media="all">
<link rel="stylesheet" href="/barebones/core/themes/stable/css/shortcut/shortcut.icons.theme.css?ozteii" media="all">
this is what's needed in the .info.yml file:
libraries-override:
system/base: false
Related
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<script src="/assets/js/jquery-2.1.4.min.js"></script>
<script src="/assets/js/bootstrap.min.js" rel="script"></script>
<script src="/assets/js/bootstrap.js"></script>
<link href="/assets/css/style.css" rel="stylesheet" type="text/css"/>
<title>
Title
there is no error , but when i run program , css and script don't run and in view source when i click on link, i get 404 error
I'm using kalendae calendar in my site.When there are no other stylsheets other than kalendae's stylesheet and script src then it works properly.But when i add all of them then it behave abnormally.I also tried removing all the links one by one to see what is causing the problem but could not figure it out.It only works normally when i remove all the stylesheets and script src.Here are the two images that will make my question clear.
When i remove all stylesheets and script src
After adding them
And here are the stylesheets and script src.I'm really sorry for using so many bootstrap link but some were not doing the tasks i wanted so i added so many of them.
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="js/wheelnav.min.js"></script>
<script src="js/wheelnav.js"></script>
<script src="js/raphael.icons.min.js"></script>
<script src="js/raphael.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/Livie_ccs1.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
Please help.
Here is the code for kalendae
<html>
<head>
<title>JavaScript calendar</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
</head>
<body>
<div class="auto-kal" ></div>
</body>
</html>
Here is the fiddle link. https://fiddle.jshell.net/qyf96yrk/.
The Kalandae is not appearing on the fiddle though i have added the link.Also the src code is very long.That is the reason why i was not adding my code.Sorry for the onconvenience
The button color is not blue when i use the btn-info class, but works fine when i tried in jsfiddle.
<!DOCTYPE html>
<html>
<head>
<title>my app</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">
</head>
<body>
<!-- carousel code here -->
Click here
</body>
</html>
screenshot
I think there are conflict between the material-bootstrap and bootstrap stylesheets. Try commenting one ans leave the other one, it should work. And if you do not want that way ,try manually via CSS coding, try the following:
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;}
Did you try :
"background-color:#000;"
for example on .btn-info ?
I think you have some problem with your bootstrap file try using these cdns.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Working fine here
<!DOCTYPE html>
<html>
<head>
<title>my app</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-material-design.min.css">
<link rel="stylesheet" type="text/css" href="css/ripples.min.css">
</head>
<body>
<!-- carousel code here -->
Click here
</body>
</html>
Where am I going wrong please guys, tried a lot of variations from various sources, but to no avail - Here is the code, I hope you can help as going slightly bonkers - thanks in advance guys...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="shortcut icon" href="assets/img/favicon.ico">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.jpg">
<link rel="apple-touch-icon" sizes="72x72" href="assets/img/apple-touch-icon-72x72.jpg">
<link rel="apple-touch-icon" sizes="114x114" href="assets/img/apple-touch-icon-114x114.jpg">
<link rel="stylesheet" type="text/css" href="assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
First: I would try adding an additional forward-slash before your CSS paths, e.g.
<link rel="stylesheet" type="text/css" href="/assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
If that doesn't work, then try testing the absolute paths in place of the relative ones, e.g.
<link rel="stylesheet" type="text/css" href="http://www.daveswebsite.com/assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="http://www.daveswebsite.com/assets/css/style.css" />
If the latter still doesn't work, then there could be a problem with the formatting of your CSS file(s).
I am experiencing a strange issue while trying to print in Internet Explorer. I have only tested with IE8.
My stylesheets with media="screen" are being applied even when printing. My page prints properly in Firefox/Chrome.
My head element:
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link type="text/css" rel="stylesheet" href="/styles/reset.css" media="all" />
<link type="text/css" rel="stylesheet" href="/styles/global.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/site.css" media="screen" />
<link type="text/css" rel="Stylesheet" href="/styles/jquery.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/forms.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/print.css" media="print" />
<script src="/scripts/jquery-1.4.4.min.js"></script>
<script src="/scripts/jquery-ui-1.8.8.custom.min.js"></script>
<script src="/scripts/modernizr-1.6.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/scripts/selectivizr-1.0.1.min.js"></script>
<![endif]-->
<script src="/scripts/colorbox/jquery.colorbox-min.js"></script>
<script src="/scripts/global.js"></script>
<script src="/scripts/site.js"></script>
</head>
I have tried searching, and I have not been able to find any related issues. Any help is greatly appreciated.
Can you provide us a link?
This might be a probable solution.
Try switching your print stylesheets' rel value to rel="alternate"