I want to have the background color fill the entire page. So far, I have an image that is the background, but sometimes doesn't load.
So I would like to set it with css.
This is my body section:
body {
background-color: gray;
margin: 0;
}
This is my entire html files that is not working.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://sammyandsam.x10.bz/css/font-awesome.css">
<meta name="robots" content="noindex">
<script src="http://sammyandsam.x10.bz/js/snow.js"></script>
<meta name="description" content="Sammyandsam's page">
<link rel="stylesheet" type="text/css" href="http://sammyandsam.x10.bz/css/bootstrap.css">
<link rel="shortcut icon" href="http://sammyandsam.x10.bz/favicon.png"/>
<title>[ Sammyandsam ]</title>
</head>
<body>
<div class="header">
<h1>[ Sammyandsam ]</h1>
<div class="icons">
<i class="fa fa-twitter"></i> Twitter |
<i class="fa fa-steam"></i> Steam |
<i class="fa fa-github"></i> Github |
<i class="fa fa-tumblr"></i> Tumblr
</div>
</div>
<div class="content">
<h2>About <a class="btn btn-info" role="button" href="/about/"><span class="glyphicon glyphicon-circle-arrow-right"></span></a></h2>
<h2>Projects <a class="btn btn-info" role="button" href="/projects/"><span class="glyphicon glyphicon-circle-arrow-right"></span></a></h2>
<h2>Repo <a class="btn btn-info" role="button" href="/repo/"><span class="glyphicon glyphicon-circle-arrow-right"></span></a></h2>
</div>
</body>
</html>
It will not set the background. It stays white for some reason.
I have tried setting each div a background color, but it will not fit the entire page.
Any idea what to do?
How to fix: DO NOT PUT CUSTOM CSS INTO BOOTSTRAP. Make a seperate .css file with your css in there.
Two possibilities I can think of are:
1) Your style is being overridden by another style. You could try background-color: gray !important; and see if that works.
2) Your body doesn't actually have any height (i.e. if there are floated items that haven't been cleared) Inspect it in Chrome or Firefox and make sure the body takes up the full height of the page.
You just didn't linked any CSS file with your HTML Document. So first link it with your document or you can use inline css like
<body style="background-color: gray" >
If this not working then you can try like this.
<body style="background-color: gray !important" >
Hopes your problem will solve.
I had the similar issue the solution was to link the CSS file after the bootstrap CDN link. So that our custom styling is prioritized.
Well in that scenario try to put inline style if that doesn't work for you then make sure that your body has width and height attributes.
Related
I am working on a button in a web site.
This is the current button code:
<a href="pickupdeliverypu.php" class="button button-rounded" style=" margin: 0 auto;
text-align: center;color: #fff; background-color: #ff6600">Start Using Pickup & Delivery</a>
And this is the current output:
I would like to change the button as follows:
But I am not able to get the text with different font size at each button text line.
You could use a br tag, which would look something like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="m-4">
<button class="btn btn-primary">
<span style="font-size:18px">Order Online</span><br/>
<span style="font-size:10px">Delivery & Pickup</span>
</button>
</div>
You can then also adjust the line-height of the br tag. Or assign classes instead of inline styling.
Im trying to set a background image for a button using a CSS rule but the image doesn't appear.
The button is the one with the class of "todo". The other parts of the rule work because the width and height of the buttons respond accordingly when adjusted but the image does not appear.
I have tried using both "background: url" and "background-image: url" with no results.
The reason for all this is because Im trying to build a todo list and have the button images change depending on if it has been marked complete.
To do this, my plan is to make two different CSS rules with different classes each with their own button background image(one for complete, one for incomplete). When someone marks the item as complete, Im going to add js that changes the items class name to one that matches the css rule for items marked complete.
If anyone knows of an easier way of doing this part suggestions are welcome.
HTML:
.todo{
background-image: url("../img/check.png");
width:50px;
height:50px;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Resources/CSS/reset.min.css">
<link rel="stylesheet" type="text/css" href="Resources/CSS/style.css">
</head>
<body>
<div class="container">
<header>
<input type="text" id="input" placeholder="Add an item"/>
<button id="button" type="button">Add item </button>
</header>
<div id="list">
<!–– Below li is a template literal added with js. ––>
`<li>
<div class="item">
<div class="complete">
<button id="complete" class="todo">Complete</button>
</div>
<p class="text">${value}</p>
<div class="remove">
<button id="` + randomId +`" class="todo"></button>
</div>
</div>
</li>`;
</div>
</div>
<script src="resources/JS/app.js"></script>
</body>
</html>
Try to this for the background image in any component:
.todo {
background-image: url(../../img/check.png);
background-position: Xpx Xpx;
background-repeat: no-repeat;
}
I'm using MDBootstrap for my project. I have used list of <a href> tags for a list as below
<a class="list-group-item list-group-item-action text-right hoverlist "
id="list-1"
data-toggle="list"
href="#list-1"
role="tab"
aria-controls="cat01">cat01<i class="fa fa-home"></i> </a>
This is the final preview
What I wants to do is to remove this blue color and then change color in to red. So I have tried below code
.hoverlist{
background-color:red;
}
But nothings get changes. Could anyone please tell me why is that?
Thanks
Well, there are two ways;
css properties are overridden from top to bottom:
The first is:
I don't understand whether the css implemented resides in an external file or not. But if it is place the link to the css file under the link for mdbootstrap. Like this:
<html>
<head>
<link href="mdbootsstrap.css" rel="stylesheet">
<link href="your css file" rel="stylesheet">
</head>
</html>
or secondly, use the following code:
<a class="list-group-item list-group-item-action text-right hoverlist "
id="list-1"
data-toggle="list"
href="#list-1"
role="tab"
aria-controls="cat01" style="background-color: red">cat01<i class="fa fa-home"></i> </a>
Here, i have added style attribute to the link which will override all other css implementations.
See this pen: https://codepen.io/MansoorAhmed/pen/yLBKppw
I got Font Awesome 5 to work using:
<i class="fa fa-user"></i>
<script src="/js/packs/solid.js"></script>
<script src="/js/fontawesome.js"></script>
But styling the i tag didn't have any effect. So I tried using a web-font instead:
<link rel="stylesheet" href="css/font-awesome-core.css">
<link rel="stylesheet" href="css/font-awesome-solid.css">
<i class="fas fa-user"></i>
and it worked. But shouldn't I be using the svg framework? I'm not a Font Awesome traditionalist. Can you style fonts with different colors, sizes and rotations?
The FontAwesome5 SVG framework converts the tag into the fully rendered SVG code in the source.
The styling of the icon/SVG can be controlled by styling the parent.
<div style="font-size: 200%; color: red">
<i class="fas fa-user"></i>
</div>
This will render the icon at 2x size and in red.
I have created an HTML template for a mailchimp campaign that includes font awesome icons in the footer. If I send the HTML email using Mandrill, its works fine. When I import the HTML into a Mailchimp template, the icons dont appear.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
.footer i {
color: #999;
margin: 0 2px;
}
.footer i:hover {
color: #333;
}
.footer p {
text-align: center;
margin-bottom: 15px;
}
.footer a i {
border: none;
outline: none;
}
</style>
Here are the icons in use:
<p>
<a href="http://facebook.com/"><i class="fa fa-facebook-square fa-2x"></i>
<a href="http://twitter.com/"><i class="fa fa-twitter fa-2x"></i>
<a href="http://pinterest.com/"><i class="fa fa-pinterest fa-2x"></i>
<a href="http://instagram.com/"><i class="fa fa-instagram fa-2x"></i>
</p>
You need to use inline CSS as it says :
Use inline CSS Because browser-based email applications, such as
Gmail, strip out <head> and <body> tags by default, always use
inline CSS over embedded CSS.
Read the link
Try converting your code here and then mail it
There's no way to do this. Unfortunately e-mail clients are way too limited. Most can't handle any CSS3, nor #font-face (that's what font-awesome uses for the icons). If you want Outlook support - you certainly want - you shouldn't use the icons as background images too.
The only safe way is to convert every icon to images. Fortunately, iconmoon can help. Choose the icons you need, select to download as SVG/PNG and use the PNG files.
Another warning: use tables for layout, like you were in 1998, no floats or fancy stuff like that.
If you are asking: "How can I use a HTML template, which includes Font Awesome icons, in a MailChimp campaign?" then I can't help.
But I can answer "How can I use Font Awesome icons in a MailChimp campaign?"
The only way that I found that works is to build your MailChimp campaign on their website, using their campaign editor/designer. Basically, I had to turn the icon into an image, and in-line and re-size it to fit my needs. Extra manual work, but this is what I needed. Hope this helps.