I am using this bootstrap:
http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/#
I want to change this white background?
I've tryed in class wrapper, but it changed only background under content, rest od page under it was still white.
Thanks for help :)
#wrapper {background-color: red;...}
}
It's happening because the body, html and #wrapper height are not set to 100%, so add:
html, body { height: 100%; }
#wrapper { height: 100%; background-color: red; }
You will need to change the background-color property for body as well as the page-content-wrapper.
Try changing the page-content-wrapper class. It will change the background of the white part, but you may want change the color on the body too.
if you inspect the body css are this,
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff; //change the color
Just try to inspect and edit it until you get what you want.
Apparently have rules #wrapper and also in the body, try this way:
#wrapper {
...
background-color: #eee;
}
body {
...
background-color: #eee;
}
I hope i´ve helped.
Related
so I do not know why adding padding or even margin is not creating extra space after the text.
Output:
I want space after the Stay Tuned text and I tried adding padding and margin but it still did not work. What seems to be the issue? Any suggestions?
Code of that text:
#import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
background: transparent;
}
.title123 {
font-family: "Montserrat";
text-align: center;
color: #FFF;
letter-spacing: 1px;
}
h23 {
background-image: url(https://media.tenor.com/images/ad3dbde6dd7863faeb8151178df7bc71/tenor.gif);
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
text-transform: uppercase;
font-size: 35px;
}
/* styling my button */
<link rel="stylesheet" href="assets/css/text.css">
<div class="title123">
<h23>Stay Tuned!</h23>
</div>
Paddings and margins applies to block elements. You need to make your h23 element a block element - as it is not known HTML element it is rendered as inline by default.
You shouldn't use it at all ...but you can if you really want - just if you need padding or margin make it block or inline-block adding to your CSS a rule like this:
h23 {
display: inline-block;
}
h23 is not a HTML element. The heading tags are h1-h6. If you change it to <h2> it will work. Then you can add a class and target that.
<h2 class="h23">Stay tuned!<h2>
Then in your css file
.h23 {
margin-bottom: 1rem;
}
I need help. I'm trying to achieve this effect with the headings of a site.
I tried by using background color and padding, but when the text grows in two or more lines it makes a big rectangle. I'm trying to figure out a way to break lines automatically into spans using javascript.
can anyone help me, please?
thanks a lot!
Try this:
.padded-multiline {
line-height: 1.4;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline span {
background-color: #c0c;
color: #fff;
display: inline;
padding: 0.45rem;
line-height: 60px;
/* Needs prefixing */
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
<h1 class="padded-multiline">
<span>How do I add padding to subsequent lines of an inline text element?</span>
</h1>
You can achieve it by adding line-height css property.
Here is the sample to achieve
.hero-banner {
background: url("https://www.tributemedia.com/hs-fs/hubfs/Images/Blog%20Images/shutterstock_252081805.jpg?width=2480&name=shutterstock_252081805.jpg");
background-size: cover;
width: 100%;
height: 200px;
padding: 20px;
}
.hero-banner span {
background: #e7415e;
color: #fff;
font-size: 55px;
line-height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="hero-banner">
<span>Join our 2020 Welcome change tour</span>
</div>
</body>
</html>
If you want to achive this with CSS only then you need to set this element display attribute to inline like this:
display: inline;
You can also use the line-height CSS attribute together with the font-size to style the height of this p element (if you're using p for this text).
Make sure that line-height value is significantly bigger than the font-size.
I'm trying to create a tree using vue-orgchart (link)
It works fine, but I would like to change the green background of the node (ignore the white part).
The css can be found in the following link.
I found out that the green color is: #42b983. So it easy to find it in the css file:
.orgchart .node .title {
text-align: center;
font-size: 12px;
font-weight: 300;
height: 20px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: #42b983;
color: #fff;
border-radius: 4px 4px 0 0;
}
And just change it:
background-color: linear-gradient(#66cccc, #3399cc);
But, for some reason, I get:
If I try to use any other color (without linear-gradient) it will be successful.
Also, I use this style (linear-gradient) in other parts of the web, and it works fine, so it isn't the problem with the browser (I use chrome if it matters).
How can I solve this issue?
please put below code
background-image: linear-gradient(#66cccc, #3399cc);
after 1 hour of try and error and searching for problems like this, i try to get an answer here.
I want to include a bootstrap Nav-Bar into a Div.
I centered the Nav-Bar, but now my Div is higher then the content. This problem is only available when the Nav-Bar is centered. If i let if float left, the space below the Nav-Bar isnt there...
Screenshot (i want to remove the red-striped part)
here my Code:
Code
a margin-bottom:0; will do the trick if added to navbar
.navbar {
margin-bottom:0;
}
This is a bootstrap example with both navbar and jumbotron
Try this:
#header {
color: white;
width: 100%;
background-color: #222222;
font-weight: 100;
margin: auto;
padding: 30px 0;
text-align: center;
font-size: 1.2em;
}
I have a webkit appearance issue. What I am trying to accomplish is to use a division as a contenteditable division with the webkit appearance of a textarea. This works wonderfully until I attempt to remove the background. I can change colors without issue but removing it is proving futile. I have tried using a transparent image for the background but the appearance of the text area seems to overwrite it to a specific color.
The question is, is it possible to set the css to background: none; when using appearance.
I put together a jsfiddle as a bit of further explanation.
.div1 {width: 350px;
height: 100px;
-webkit-appearance: textarea;
resize: both;
overflow: auto;}
jsfiddle
PS. I hope I did this right : )
Don't use -webkit-appearance.
WebKit is applying the default styling for a textarea to your div.
CSS
.div1 {
width: 350px;
height: 100px;
background: none;
resize: both;
overflow: auto;
font-family: monospace;
border: 1px solid #000;
}
textarea {
background: none;
width: 350px;
height: 100px;
}
JSFiddle: http://jsfiddle.net/howderek/eMkv3/5/
Just change the color of your background to
background-color: rgba(255, 255, 255, 0);
This will make the background transparent. If it's going to be zero alpha (opacity) you can make the RGB whatever color you want.
http://jsfiddle.net/eMkv3/7/
Here's a screenshot of what it looks like on my browser: