Just wondering how I can change the background colour of a Thumbnail to transparent or different colours in TW Bootstrap?
Normal practice when using Bootstrap is to load the bootstrap.css file then straight after that load another custom stylesheet of your own e.g.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
In this new stylesheet you can modify any of the Bootstrap default styles to suit your own design requirements e.g.
.thumbnail {
background: #000;
}
There is two ways to do that , the first one is to customize bootstrap from the official websites http://getbootstrap.com/customize/
Change value of #thumbnail-bg
Seconde solution is to override bootstrap classes like #Billy Moat said
Related
I am using CSS flexbox to make the header of my page with display:flex;
Somehow, when I am linking Bootstrap 4 CDN link to my HTML, the flexbox doesn't behave like flexbox and different divs within flexbox come down to different lines.
Please help me out. Thank you.
Your custom CSS class is now conflict with Bootstrap-4 CSS class. If you want to avoid this conflict you have to do following:
First add the Bootstrap-4 CDN then your custom CSS. It will overwritten bootstrap CSS by custom CSS.
Example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="your-custom.css" />
<!-- Your custom CSS -->
If above solution isn't fix your issue go to your html change bootstrap class to custom class.
Example:
<nav class="navbar"></nav>
<!-- -->
Above class are reserved by bootstrap. If above class are conflict with your .navbar class please change that class.
<nav class="my-navbar"></nav>
<!-- OR -->
<nav class="navbar my-navbar"></nav>
If above solution not working then use !important after CSS property. It will overwritten bootstrap CSS by custom CSS.
Example:
.navbar{
display: flex !important;
}
Note: Try to avoid !important CSS property. Use new class to overwrite bootstrap CSS.
It's likely your css is overruled by the css of bootstrap. Since you are using CDN you can't change the bootstrap css.
I suggest you add '!important' to your header styles just to see if this will override BS css.
You can check to see which styles are used bij looking at your page in Chrome, press F12.
Select the 'Elements' tab. Select your header on the left side, and check the Styles on the right. It will show you which styles are used.
This question already has an answer here:
Find definition of CSS class in external stylesheet
(1 answer)
Closed 3 years ago.
The problem i am having is that I can't really understand which classes belong where.
I have got a project which uses bootstrap and some custom stylesheets. So, when some classes are declared for an element then how can I say which classes are from bootstrap and which classes are from any other custom css that we declare?
Is there any way to do this? or even with any IDE?
For example:
HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="custom.css>
</head>
<body>
<b class="text-warning test test2">Hello World</b>
</body>
custom CSS
.test2{
color: blue;
}
.test{
color: red;
}
*text-warning is a bootstrap class, which colors the text yellow.
CSS always takes the style from the latest defined class/id/tag... when they are using the same properties. In this case the property color with the value red from the class "test".
So normally you include in your html-header at first the bootstrap css and then your custom css. With this order your custom css overwrites the bootstrap css. But you can use !important in your css style to force your style.
I am currently trying to change the color of a title by referencing a div's class.
So far I have tried:
.pagetitle-title.heading {
color: purple;
}
<div class="container">
<h1 class="pagetitle-title heading">IT•ONE Method</h1>
</div>
And even:
h1 {
color: purple;
}
As mentioned per my comment, it looks like a classic case of "CSS overwrite". One of the "hacks" to avoid this, is to use the CSS property !important to tell the browser which CSS rule is particularly important, and should not be overwritten.
Example: color: purple !important;
CSS applies the style in the fashion that it is loaded. So if you have 1 CSS file with x rules, and a 2nd CSS file with y rules, and they both target the same elements, then the CSS file that was loaded last will generally overwrite the styles of the one prior.
The order is known as the top-down rule, and is only overwritten by the !important property and in-line CSS. The !Importantproperty will generally overwrite any in-line CSS.
Given the information about the top-down rule, and you have the means to edit the CSS and/or choose the order of how the CSS is loaded, you can make sure that you are able to apply your own CSS rules by having them load as the last included file in your project.
Example:
<head>
<link rel="stylesheet" type="text/css" href="loadedfirst.css">
<link rel="stylesheet" type="text/css" href="loadedsecond.css">'
<link rel="stylesheet" type="text/css" href="loadedlast.css">
</head>
In case these 3 files have rules that applies to the same elements, the loadedlast.css file is the CSS that will overwrite the ones prior, except in the case of the !important property and in-line CSS. By managing the order of your CSS, you can avoid having to resort to such "hacks" as using the !important property.
Check your link "stylesheet" for your CSS
Open you debug console and identify your h2 to see if CSS option are targeted
Try another hexa color code
Add "!important" after touy color code
color: purple!important;
I see your code and it's correct method to modify this color so... Try my checklist first and give us your feedback.
I would avoid adding important as much as I can. I would just go higher up the parents and try to target the div as specific as I can. Instead, I would go
.container h1.pagetitle-title.heading {
color: purple;
}
If that doesn't work only then I would use important.
This is my first post and I have found many solutions on this website, but this is the first time I could not research and find the issue.
I am having a terrible time trying to change the colors of this webpage I am designing for my new business. I am unable to change any of the colors in the style sheet. For example I am trying to change the color of where it says Mr Fix All on the main page from #fff to #FF4500, after inspecting the elements I have tracked the style back to class="carousel-title" so in my layout.css I goto the Carousel-title and changed it from #fff to #ff4500 and nothing happens.
I have gone as far as changing the code for the color white to FF4500 and remove all #fff from the entire document and the color still wont change.
After some research of this issue I saw other people had anchors that "over ride" the colors, but there are not anchors, this is just a heading so I cannot find out where this color is calling from.
I even looked at the Div tag above carousel-center which has no color tags at all. I haven't been able to change a single color on this website so I am very confused!
Any assistance would be great, this is the only thing stopping me from completing this page, I cannot read half the words because they are all white.... or very light grey. I want to make all the words either FF4500 or darker gray like the heading is at the top.
http://www.mrfixalltampa.com
lol I suck I cannot figure out how to put the code this website is throwing syntax errors I cannot believe it!
You have the right idea to change the color for the carousel-title class in your example.
As a standard practice don't edit the layout.css or other plugin files. Instead, you should create another custom CSS file.
So, for your example to change the carousel title "Mr. Fix All" color, you could create a custom.css file having your style overrides like below
.carousel-title {
color:#FF4500
}
and add it to your index.html as the last stylesheet included, as shown below
<link href="css/animate.css" rel="stylesheet">
<link href="vendor/swiper/css/swiper.min.css" rel="stylesheet" type="text/css"/>
<link href="css/layout.min.css" rel="stylesheet" type="text/css"/>
<!-- Custom Stylesheet -->
<link href="css/custom.css" rel="stylesheet" type="text/css"/>
What would the HTML code be to set this url as my background...?
http://fin6.com/wp-content/uploads/2013/08/6c16724dd8d4aef072e62caeb164ff372.jpg
I am using Lead System Network.com' creation wizard trying to set a background as a landing page.
You could either add the background attribute to your body tag.
<body background="IMAGENAME.jpg">
Or you can add a CSS rule for the body element like
body {
background-image:url('IMAGENAME.jpg');
}
and include the CSS in the HTML header
<link rel="stylesheet" type="text/css" href="theme.css">
you can do it with css as the example of a friend or html shape but I do not recommend it because it is obsolete.
working with css, remember that all images you use for the web must be in the root folder of your project or it will not work.