My manifest.json is:
{
"manifest_version": 2,
"name": "Test",
"version": "1.0.0",
"web_accessible_resources": [
"public/*"
]
}
public/base.htm is:
<style>
body {
background-image:url('chrome-extension://__MSG_##extension_id__/background.png');
}
</style>
<link rel="stylesheet" href="chrome-extension://__MSG_##extension_id__" type="text/css" />
<link rel="stylesheet" href='chrome-extension://##extension_id/public/style_override.css' type="text/css" />
Whenever I am visiting view-source:chrome-extension://omjmnflgeadkeenialehggjcffaeonam/public/base.htm I am getting:
<style>
body {
background-image:url('chrome-extension://__MSG_##extension_id__/background.png');
}
</style>
<link rel="stylesheet" href="chrome-extension://__MSG_##extension_id__" type="text/css" />
<link rel="stylesheet" href='chrome-extension://##extension_id/public/style_override.css' type="text/css" />
I don't understand why these are not replaced by the chrome extension id.
Update: Just noticed it apparently works only with CSS format. Chrome don't allow inline JS. So I am still looking for an option to import external CSS/JS in this html page
Related
This question already has answers here:
How to add a browser tab icon (favicon) for a website?
(13 answers)
Closed 7 months ago.
I would like to know how to add my upcoming website logo as an icon to every tab. Where exactly does it fit in in the <head> space. Can I have a simple example of a simple html page with this?
Insert the following code in the <head> section of your pages:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
site.webmanifest:
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
You are talking about Favicon.
You can use a Favicon by adding something like this in your <head> tags.
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
You can place it wherever you want in the <head> tags.
Here's an exaple:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<p>Page content</p>
</body>
</html>
My static website has broken css and possibly js over https only. http works fine.
I know the issues of loading mixed content, however most of my style sheets are relative.
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/font-awesome/css/fontawesome-all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,500,600">
What could be the issue?
I am trying to link three CSS stylesheets to my index.php file:
bootstrap-337.min.css
font-awesome.min.css
style.css
I have successfully linked bootstrap stylesheet but I am unable to link font-awesome and style stylesheet.
I had separately tested for all three and style.css is the css file I am creating for this project.
I have also tried to put css code in style tags in php file and that worked but I am unable to link css in separate stylesheet
HTML CODE:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>online store</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-337.min.css" >
<link rel="stylesheet" href="/font-awsome/css/font-awesome.min.css">
</head>
style.css:
/*
Template Name : E-commerce
Author Name : Pulkit Jain
Theme URL : localhost/e-commerce
Theme ver : 1.1
*/
/*General Styles*/
body {
font-size: 14px;
line-height: 1.40;
color: #333333;
background-color: #f0f0f0;
overflow-x: hidden;
}
/* Top Style */
#top {
background-color: #555555;
padding: 10px 0;
}
I am working on VS Code with Xampp Server for Ubuntu
I have tried using type attribute, '/' in the end of link tag, using '/' at the starting of the path in href:
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
edit: Image of the directory containing the file style.css that didn't load
edit: Image of the directory containing the file font-awesome.css that didn't load
Looking at the images you posted and from comments made I think you were not correctly referencing the files in whichever folders they were in - from the images I think the paths might be as follows.
<link rel='stylesheet' href='/e-commerce/css/bootstrap-337.min.css' />
<link rel='stylesheet' href='/e-commerce/css/style.css' />
<link rel='stylesheet' href='/e-commerce/font-awesome/css/font-awesome.css' />
<link rel='stylesheet' href='/e-commerce/font-awesome/css/font-awesome.min.css' />
You just have to do this:
<link rel = 'stylesheet' type = 'text/css' href = 'style.css'>
I have a local /swagger-ui.html that is served from a different package/library. I want modify the style, thus I thought about embedding it into my own index.html and adding some css style overrides to it:
index.html:
<head>
<link rel="stylesheet" href="styles.css">
<link rel="import" href="/swagger-ui.html">
</head>
styles.css (same folder):
.swagger-ui .scheme-container,
.swagger-ui .topbar {
background-color: red !important;
display: none !important;
}
Result: I'm not seeing any changes on the styles. Why?
Try to switch the following lines
<link rel="stylesheet" href="styles.css">
<link rel="import" href="/swagger-ui.html">
to:
<link rel="import" href="/swagger-ui.html">
<link rel="stylesheet" href="styles.css">
Hi there I would like to import a stylesheet import from another folder/ file when I put it on the other file and import it, it seems to have appear nothing...
folderpath:
app/css/stylesheeta.css
app/css/stylesheetb.css
app/css/stylesheetc.css
app/css/stylesheetd.css
app/module/module.js
app/lib/module/abc.js
In the html page,
app/views/stylsheet.html:
<link rel="stylesheet" href="../css/stylesheeta.css" />
<link rel="stylesheet" href="../css/stylesheetb.css" />
<link rel="stylesheet" href="../css/stylesheetc.css" />
<link rel="stylesheet" href="../css/stylesheetd.css" />
<link rel="stylesheet" href="../module/module.css" />
<link rel="stylesheet" href="../lib/module/abc.css" />
In the main index.html
/index.html:
I include the stylesheet.html:
<head>
<link rel="import" href="app/views/stylsheet.html" />
</head>
<body>
//some other stuff here
</body>
however there isn't any output of the stylesheet at all.. im wondering if what I do is permissable