I found out that html and body quote got basically a background:none.
How can i change that to apply a new background in one of my quote ?
For example, if you want a grey background for your body, put the following code :
body {
background-color: #CCCCCC !important;
}
The !important lets you override a property that has been defined in another CSS. In the case of Foundation, the background has probably been set before.
Hope that it will help you.
You have two background tags in both style sheets of Foundation 4:
Try to edit:
css/foudation.css
body {
background: white;
...
}
css/normalize.css
html{
background: #fff;
...
}
If using foundation with SASS add this to ./scss/app.scss :
body, html {
background-color: $white !important;
}
where $white - variable defined in ./scss/_settings.scss
Related
I would like to change the background color of the bootstrap theme.
This background:
background1
and this background:
background2
I want to change the color to blue for green. I was checking out the file sb-admin-2.min, but the maximios that I can do it, was change the collor of the buttons for example. Someone can help me?
Follow the link for see the file sb-admin-2.min
If you want to see my project, you can enter in this website: http://americaribeiro.atwebpages.com/escolar/ and use the email: romeu#romeu.com and password: 123
To change the background of the first image, change the background property of body element in index.php
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
background: red; // here
}
To change the background of the second image,in sb-admin-2.css
.bg-gradient-info {
background-color: red; //here, you can override this class
}
You can simply overwrite bootstrap styling with your own style.
.my-class {
background: red;
}
<div class="some-bootstrap-class my-class"> Hello </div>
You can use selector
body{ background: #36b9cc !important; } for using your green color.
I'm using the revealjs library in R to build a set of slides. I would like to:
customise font color
put a dotted border line that separates headers and footers
I've managed to set the colour of text that appears on a slide by adding the following into the CSS file:
#mycustom {
color: blue;
}
Then in the markdown document, I would use it loke so:
## Slide 2 {#mycustom}
XYZ
- a
- b
- c
This changes the colour of everything except for "Slide 2". I'd like to control the headers as well, and ideally I'd like to be able to set these colours in the CSS once.
As for my second issue, I've added the following to the CSS file:
.reveal .header {
padding: 1px;
border: 1px dashed orange;
}
Then I modified the revealjs template that can be found under <R_DIR/library/revealjs/rmarkdown/templates/revealjs_presentation/resources/default.html> and added <div class="header"></div> under <div class="slides"> but the result looks disappointing: I'm getting a small double dashed line as shown in the attached image.
If you have a suggestion on how to improve this, please let me know.
Many thanks!
As for your first problem, why not just use
<style>
#myCustom > h1, #myCustom > h2 {
color: #FF0000;
}
/* or if you want to change all h1: */
h1 {
color: #00FF00 !important;
}
</style>
I would like to change the background color of the jquery mobile 1.4.5 pages. I have google around and found what some people suggest as the correct css overrides to do this. However, nothing works for me.
My CSS overrides are the last CSS file loaded in my app so I would expect that the below classes override the jqm css but they don't.
Does anybody know the correct way to do it?
Here is the JSfiddle
UPDATE:
See updated fiddle.
CSS:
.ui-page {
background:#296BC1;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper
.ui-content {
background:#296BC1;
}
This worked for me
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
background-color: #FFF !important;
}
This code should work:
.ui-page{
background-color: #faaaff !important;
}
Try this
div[data-role=page][data-theme=a] {
background:#fff;
}
I am trying to change the body background image for a wordpress site but it is not working.
The HTML class is this:
<body class="home blog" style>
And my CSS is this:
body.home.blog{
background-image:url('http://distilleryimage10.s3.amazonaws.com/0d443332b7bc11e2a7d622000a9e298f_6.jpg');
background-position:right top;
}
Does anyone know what CSS to write?
Also this is a wordpress site so keep that in mind. I don't use wordpress or php very often.
Got it..
You are going to want to remove the following line for your 'blue.css' stylesheet:
body {
background: #232528;
}
The background-image is working.. the background color is just being placed over top of it.
I don't see in your css rule for body.home.blog, only background-image for body without classes. Check your css it's should work
You need to remove the following from your Blue.css file
body {
background: #232528;
}
Or add !important; to your background in the file style.css like so:
body {
font: 0.75em / 1.73em Arial,sans-serif;
color: #6f6f6f;
background: #211D19;
background: url('http://distilleryimage10.s3.amazonaws.com/0d443332b7bc11e2a7d622000a9e298f_6.jpg') !important;
background-position:right top;
}
I'm writing an external user stylesheet for an old HTML page that specifies the background colour in the body tag: <BODY BGCOLOR="#808000"> (note: I can't edit the HTML).
I've tried writing the obvious stylesheet:
body {
background-color: #ffffff !important;
}
but it has no effect: the original colour remains.
Can it be done with CSS? If so, how?
FIX:
I've checked it in my place it works
body
{
background-color: white;
}
You can also do
<body style="background-color:red"></body>
It works fine here (I tested it). Are you sure the stylesheet is being imported properly?