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.
Related
I am currently using variables keeping track of colors for both light and dark themes (e.g. --light-background-color, --dark-background-color). This isn't too hard with two themes but seems a bit manual and if faced with more themes it becomes impractical.
I have seen things like night shift that apply CSS filters which invert the colors on a webpage. How do these filters work? and how would I go about implementing them?
One way to go about this is to have a set of general theme color variables, rather than specific color variables for specific themes like you're trying to do here.
You can define these variables in the body element and override them with the class or a custom attribute of the body.
Use these variables as you would normally for your other HTML elements, and just change the attribute of the body element to apply a different theme.
The important part here is to make sure your theme color variables have corresponding contrasting color variables as well, so that things like white text on a dark background can swap to dark text on a white background.
Here's an example, where primary and secondary theme and contrast colors are defined in the body element, and are overridden when the body has the "dark" class applied to it:
document.querySelector("button").addEventListener("click", () => document.body.classList.toggle("dark"));
body {
--color-primary: #b4e9ce;
--color-primary-contrast: #000000;
--color-secondary: #308d43;
--color-secondary-contrast: #ffffff;
/* Other theme colors... */
}
body.dark {
--color-primary: #202d26;
--color-primary-contrast: #ffffff;
--color-secondary: #8f8f8f;
--color-secondary-contrast: #000000;
/* Other theme colors... */
}
button {
padding: 10px;
margin-bottom: 20px;
}
.wrapper {
padding: 20px;
background-color: var(--color-primary);
border: solid var(--color-secondary) 10px;
}
.wrapper h1 {
font-family: sans-serif;
text-align: center;
color: var(--color-primary-contrast);
}
<body>
<button>Toggle Theme</button>
<div class="wrapper">
<h1>Hello World</h1>
</div>
</body>
Single Line CSS will change Light Theme to Dark:
<style>
body
{
filter: invert(1);
}
</style>
I'm setting up a basic html site. I want to use an image for my background for the landing page. I'm trying to use css inline (I thought this would be easiest...go figure).
In my body tag, I've got the color I want, "darkkhaki". But the property for the background image is not coming up. I have uploaded to my flickr account the image I want, but no go. I did notice in my ST3 window that the closing parenthesis is highlighted red, but I can't find out why.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: darkkhaki;
background-image: https://www.flickr.com/photos/132197683#N04/33747163168/in/dateposted-public("praetorian_punisher.png");
}
h1 {
color: red;
text-align: center;
}
I would like to see the .png file as the background. It's not coming up, though.
Thx for any help.
First, you should do it like this:
body {
background-image: url(...);
}
Second, the url you're trying to use points to HTML page, not to the image itself. Correct url would be https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg.
body {
background-color: darkkhaki;
background-image: url(https://live.staticflickr.com/65535/33747163168_9f12d3a173_b.jpg);
}
h1 {
color: red;
text-align: center;
}
<h1>Hello!</h1>
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 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
I'm developing a website that will contain two pages for testimonials. The first two testimonials will be displayed on the home page, then the other three testimonials will be displayed on the original testimonial page.
The original testimonial page background-color is different from the home page. I want to change the text color of the testimonials page. I want to know if is it possible to change the style of the same div but in different page using the CSS attributes and selectors?
This is the class that I want to style differently not on home page but on original .testimonial page
.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}
I've tried to use the below method:
.other-pages-background, .testimonial-author{
color: red !important;
}
but it changes on all the pages.
thank you
You'd probably be better off wrapping your testimonials on the homepage in another div, so you can use your CSS to target the testimonials on the homepage, without effecting the testimonials page itself.
For example;
on your homepage you could have
<div class="homepage-testimonials">
<div class="testimonials">
<div class="testimonial-author">John Doe</div>
</div>
</div>
Your CSS;
.homepage-testimonials .testimonial-author { color: red; }
Comma means both selectors get the same styling. Try it without the comma to combine them:
.other-pages-background .testimonial-author{
color: red !important;
}
UPDATE:
Since you are using Wordpress, you can use the following with the appropriate page id:
body.page-id-111 {
color: red !important;
}
There are different ways to achieve this.
Include a additional css file say homepage.css in your homepage along with testimonials.css which will contain css to override the default color.
.testimonial-author {
color: $HOMEPAGE_COLOR;
}
Add some class body tag of your Homepage and overwrite the css property like below.
HTML
<body class="homepage">
CSS
/* Will be applied in Testimonial page */
.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}
/* Will be applied in Homepage */
.homepage .testimonial-author {
color: #14C2E7;
}
I prefer the later options.
When you load the page ask php to write in the head AFTER the css load
<script>
.testimonial-author {
color: #color;}
</script>