Set bootstrap background - html

http://getbootstrap.com/css/#overview-type-links
And I have seen the solutions here - such as this:
html, body {
width: 100%;
height: 600px;
background:red !important;
}
This isn't working - I need the background for a single page in the application to be all red - I don't want it applied universally - so I need to override the bootstrap.min.css for one page - therefore I cannot specify this color when creating the bootstrap.min.css using there online generator.
Help?

You can go to the .html file for the particular page you want in all red, and modify the background color within the .html file itself by adding a style="background-color:#FFFFFF" to the <body> tag. You can change #FFFFFF to the shade of red as you wish.
For example say we have the code for index.html below:
<html>
<head>
<!-- some code here -->
</head>
<body, style="background-color:#FFFFFF">
</body>
</html>
If that does not work, bootstrap typically has wrappers within each main body tag to represent something or the other. Take a look at the following example:
<html>
<head>
<!-- some code here -->
</head>
<body>
<div id="wrapper">
<!-- some more code here -->
</div>
</body>
</html>
You can also change it to:
<body>
<div id="wrapper", style="background-color:#FFFFFF">
<!-- some more code here -->
</div>
</body>
</html>
You can also use this technique to override any of the Bootstrap CSS files temporarily for a particular page or particular component of the page and it will NOT be applied universally.

Is it important do to it using online HTML and CSS? If I were you, I would have used JavaScript to determine if its the specific page and then assign the background color.
<script>
var location = window.location.href;
if(location =="file:///C:/Users/Fahad/Desktop/index.html")
{
document.body.style.backgroundColor = "red";
}
</script>
You will have to change the url to the link of the specific page where you want to change the color.

Related

Front end printing emulator `paper.css` not working with background color

I am using a solution, called paper.css, to emulate a printed text which is type-set in html using these css rules.
I noticed that when I create an element with background-color, and then use my Chromium Print menu to "Save as PDF", the background color becomes white, just like the whole page.
How one can print the html file to pdf and still keep the background color?
A MMW, based on the A4 example in the project's repository, is this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
<style>
#page {
size: A4
}
</style>
</head>
<body class="A4">
<!-- Each sheet element should have the class "sheet" -->
<!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
<section class="sheet padding-10mm">
<!-- Write HTML just like a web page -->
<article style="background-color: red;">This is an A4 document.</article>
</section>
</body>
</html>
Compare with the printed PDF:
Make sure you have the More settings > Options > Background graphics option checked in the Chrome print dialog.

Running into some problems linking my CSS

So I've got down my basic html framework down and some basic CSS to make it look centered and adjust the background color, but I've tried a couple different adjustments and none seem to work properly when linking my CSS.
I've attempted to adjust the path to my CSS, tried to change the encoding between utf-8 and a few other random Windows 'save as' ones, and tried adjusting spacing:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html>
<body>
<link rel=stylesheet type=text/css href=/Computer/C:/Users/JohnDoe/Downloads/Test.css>
</body>
</html>
And in the .css file:
body {
text-align: center;
background: powderblue;
}
Whenever I run my program it just comes out looking like a normal black and white page that is off centered.
So it would probably be good to read up on building a website. But in the meantime, here are some things you need to fix:
link elements go in the <head>
link href should be an absolute server link (starting with https://...) or a relative path
quote attribute values
remove stray css at the end of the doc and put in css file
Relative path means it's the path relative to the file being served (for example, "index.html"). So if your index.html file is in /Computer/C:/Users/JohnDoe and your css file is in /Computer/C:/Users/JohnDoe/css/ then the relative file path is css/Test.css
Example
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/Test.css">
</head>
<body>
<p>This text appears in the browser</p>
</body>
</html>
You got a few things going on here:
First, for externally linked style sheets, the link goes in the <head>...</head> tags, rather than the <body> tags.
Here's a quick reference:
https://www.dummies.com/web-design-development/html5-and-css3/how-to-use-an-external-style-sheet-for-html5-and-css3-programming/
Note the quote:
The <link> tag only occurs in the header. Unlike the <a> tag, the <link> tag can occur only in the header.
you're asking to link to an external style sheet, but also including some inline CSS (the body stuff you have a t the bottom. Also note that when including inline CSS you need to wrap it in <style> tags.
Lastly, that href path looks odd to me ...

Providing link to background url html

I am setting up a new app on GoodBarber and using the html section as I want to be able to more personalize my app. However, I am trying to set a background to a section and it will not display the file that I had uploaded to Google Drive as my background.
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
body {
background-image: url(https://images.app.goo.gl/16UbvTJEEPf8AuNG9);
}
<body>
</body>
</html>
You have two problems. Firstly, you need to include your CSS within your <style> tag.
<style>
body {
background-image: ...
}
</style>
The next issue is that the URL you're using isn't actually an image at all. It's a link to a page with images on it. The actual image URL is https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg. You can find that by right clicking the image on the page and opening the image in a new tab, then copying the URL.
Once you use the right URL, and put your CSS in the right place, it will work fine: https://jsfiddle.net/nx4wc8pd/

How can I embed inline styling on a page using an existing css file as a source data?

Assuming i have a css file called inline.css which contains some css,
how can i inline this css into the markup ?
I want it to be inlined to the markup, NOT included as an external css resourcs .
so assuming my slim markup is:
<html><head>
<!-- code to make the style inlined here ... -->
</head>
<body>hello</body></html>
and assuming my inline.css is:
body { background-color: green; }
i want the final output markup to be:
<html><head>
<style>
body { background-color: green; }
</style>
<body>
hello
</body>
I don't know why you are trying, but it is possible if you are using server side rendering. Read CSS file and render it:
<html>
<head>
<style>
<%= Data from css file here %>
</style>
</head>
<body>
...
</body>
</html>
but remember, including CSS into your HTML increases file size. Also you can't cache stylesheets if you are using inline styles. Please reconsider what you are trying to do.

CSS loading fonts from internet

I'm using foundation.min.css in my project.
Every time I load the above in my HTML file, my browser tries to fetch the fonts online.
But the strange part is that it works even if there's no internet access.
I need to know:
How to disable foundation from fetching the fonts online?
Why there's no change in functionality even if it gets loaded?
How to edit this to remove online fetching functionality without harming the original file? foundation.min.css code:
#import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
HTML code:
<!doctype html>
<html ng-app ng-csp>
<head>
<link href="styles/foundation.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="libs/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<style>
body {
padding: 10px;
overflow: auto;
}
</style>
</head>
<body>
<div>
<div>
<h3>Sample Application</h3>
<input type="text" ng-model="name" placeholder="Your text here..">
<h1>{{name}}</h1>
</div>
<button>Submit</button>
<table>
<tr><th>Name</th><th>Age as on 1/1/2014</th></tr>
<tr><td>Sourabh Sharma</td><td>21</td></tr>
<tr><td>Shourya Sharma</td><td>23</td></tr>
<tr><td>Vinay Kumar</td><td>18</td></tr>
</table>
</div>
</body>
</html>
When your offline, removing the web-font import will not prevent the font from displaying if you have the font on your computer. It will only prevent the font from displaying if its viewed by someone who doesn't have the font installed.
If at some point you plan to use the fonts then leave the #import alone and just add an override that you can easily toggle on and off.
body { font-family:arial,sans-serif !important; }
If you only want to affect specific fonts and not the entire document then just search and replace in your editor of choose for the font-family declaration you want to replace.
How to disable foundation from fetching the fonts online?
remove the following code from foundation.min.css (you've mentioned above)
#import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
Why there's no change in functionality even if it gets loaded?
because it describes the required css locally