How to apply custom/override CSS on Vuetify component? - html

Suppose I have added the v-text-field component of Vuetify in my Vue component like
<v-text-field v-model="email"name="email" type="email" color="#90C143" label="Email">
When I inspect that element, it generates normal HTML like
<div class="v-input v-input--has-state theme--light v-text-field v-text-field--is-booted" style="">
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-text-field__slot">
<label for="input-39" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Email
</label>
<input name="email" id="input-39" type="email">
</div>
<div class="v-input__append-inner">
<div class="v-input__icon v-input__icon--">
<i role="button" class="v-icon notranslate v-icon--link material-icons theme--light" style="">
</i>
</div>
</div>
</div>
</div>
</div>
What I have to process, If I want to customize the Whole CSS for that v-text-field without affecting the functionality

Add a css class inside the component:
<style scoped>
.text-field{
color: #90C143 !important; /* this will override the existing property applied */
/* add whatever properties you want */
}
</style>
Then in the component add this to class instead of color property:
<v-text-field v-model="email"name="email" type="email" class="text-field" label="Email">
You can use only the predefined classes given in vuetify documentation.
If you want to use custom color on the color property you can set your
own theme in Vuetify object in main.js:
Vue.use(Vuetify)
const vuetify = new Vuetify({
theme: {
themes: {
light: {
primary: '#90C143',
secondary: '#b0bec5',
anchor: '#8c9eff',
},
},
},
})
Now you can use the specified theme overrides in any component:
<v-text-field v-model="email"name="email" type="email" color="primary" label="Email">
You can alternatively apply CSS globally in app.vue:
<style>
/* don't use scoped css */
.theme--light.v-text-field>.v-input__control>.v-input__slot:before {
border-color: #90C143;
}
.theme--light.v-label {
color: #90C143;
}
.theme--light.v-input:not(.v-input--is-disabled) input, .theme--light.v-input:not(.v-input--is-disabled) textarea {
color: #90C143;
}
</style>

Related

Is there a Quasar equivalent to Semantic UI's pointing label?

I tried using the span pointing property <span class="label pointing-up bg-primary text-white">up</span> and QChip's pointing property as explained in the docs, but the pointing part doesn't work. I tried it in different projects, but the property doesn't work. Is there any other alternative?
You can use the quasar tooltip component I think.
Check out this codepen and see if it is any helpful to you.
const { ref } = Vue
const app = Vue.createApp({
setup () {
return {
showing: true
}
}
})
app.use(Quasar, { config: {} })
app.mount('#q-app')
<script src="https://cdn.jsdelivr.net/npm/quasar#2.7.7/dist/quasar.umd.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#3/dist/vue.global.prod.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quasar#2.7.7/dist/quasar.min.css" rel="stylesheet"/>
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md">
<div
style="width: 200px; height: 70px;"
class="bg-purple text-white rounded-borders row flex-center q-mt-md"
>
Hover here or click buttons
<q-tooltip v-model="showing">Tooltip text</q-tooltip>
</div>
</div>
</div>

How to change d-none class to d-block in jquery on hover?

I would show and hide a button on edit when hovering a div. Like WordPress.
How to display a div inside a div if hovered? I'm trying to do this but there's something wrong, nothing appears.
<div class="row d-flex align-items-center" id="company">
<div class="col-lg-6 mb-4">
<div class="p-5">
<h1>Company</h1>
<p class="text-justify">Description</p>
Start
</div>
</div>
<div class="col-lg-6 mb-4">
<img src="/images/layer.png" alt="Company" class="img-fluid lazy">
</div>
<div class="p-5">
<div id="menu">
<div class="btn-group">
<button type="button" class="btn btn-warning">وEdit</button>
</div>
</div>
</div>
</div
<script>
$("#company").hover(function(){
$("#menu").css("d-none", "d-block");
});
</script>
wordpress
You don't need Javascript for this. You can do it all in CSS. The first rule below defaults to hiding the menu. The second rule overrides the first rule to show the menu when you hover over the #company div.
#menu {
display: none; /* Default */
}
#company:hover #menu {
display: block;
}
If you want to do it with Javascript/jQuery, you must specify separate actions for the mouseenter and mouseleave events, to ensure the menu shows/hides accordingly:
$("#company").hover(
function() {
$("#menu").css("display", "block");
},
function() {
$("#menu").css("display", "none");
},
);
If you want to use purely Bootstrap classes rather than manipulating the CSS style rules directly:
$("#company").hover(
function() {
$("#menu").addClass('d-block').removeClass('d-none');
},
function() {
$("#menu").addClass('d-none').removeClass('d-block');
},
);
Hi your code is almost correct.In your Jquery part you have to use addClass() instead of css() because you are trying to change the class name of the element.Just try this one.Hope this works
<script>
$("#company").hover(function () {
$("#menu").addClass("d-none");
});
</script>
By default the css can be added to the "menu" id
#menu {
display: none;
}
using js:
$("#company").hover(function () {
$("#menu").css("display", "block");
});

How can I place the required asterisk and control in the same line (HTML)?

I created a angular dropdown component "app-ec-dropdown" using https://www.npmjs.com/package/#ng-select/ng-select
<div class="inline required">
*
</div>
<div class="input-container inline">
<ng-select
class="custom"
[items]="items"
bindLabel="Name"
bindValue="Id"
(focus)="focus()"
(close)="close()"
(clear)="clear()"
(blur)="blur()"
placeholder="Select"
[(ngModel)]="selectedId"
[required]="required"
>
</ng-select>
<div *ngIf="!validatationPassed()">
<div class="row alert alert-danger alert-div">
<span>
Required field
</span>
</div>
</div>
</div>
CSS for above component
.input-container {
width: 95%;
}
.inline {
display: inline;
}
.required {
vertical-align: top;
color: red;
width: 2%;
}
Now i am using above component in parent component
<div class="col-sm-4">
<app-ec-dropdown
name="RegionId"
[items]="regions"
(onChange)="onRegionChange($event)"
[selectedId]="state.RegionId"
[required]="regionDropDownValidator.required"
[ecDropDownValidator]="regionDropDownValidator"
[(ngModel)]="regionDropDownValidator.selectedId"
ngDefaultControl
> </app-ec-dropdown>
</div>
for Region Dropdown, I want red asterisk, to be placed as in "State Name" textbox and then dropdown and validation message in the adjacent div.
Screen grab:
After playing around with your code, I thought about the way that I would do it.
I noticed that the actual label isn't included in your example above, so I assume that it's being included within a column to the left of the <div class="col-sm-4"> element where you're consuming the <app-ec-dropdown> component which I assume that you have defined with the first code block.
My advice which will be the easiest and most correct (in my opinion), would be to add the label as an #Input property in your code for the <app-ec-dropdown> component.
Then you can place it closer to the asterisk character.
So add this to your EcDropdownComponent TypeScript:
#Input()
public label: string = '';
Then add the input attribute where you consume your component:
<app-ec-dropdown
name="RegionId"
[items]="regions"
label="State Name"
(onChange)="onRegionChange($event)"
[selectedId]="state.RegionId"
[required]="regionDropDownValidator.required"
[ecDropDownValidator]="regionDropDownValidator"
[(ngModel)]="regionDropDownValidator.selectedId"
ngDefaultControl>
</app-ec-dropdown>
Then you can use the CSS grid to define the layout within your component:
<div class="row">
<!-- Label -->
<div class="col-sm-4">
<div class="label">
{{label}}
<span class="inline required"> * </span>
</div>
</div>
<!-- Select Input -->
<div class="col-md-8">
<div class="input-container inline">
<ng-select
class="custom"
[items]="items"
bindLabel="Name"
bindValue="Id"
(focus)="focus.emit()"
(close)="close.emit()"
(clear)="clear.emit()"
(blur)="blur.emit()"
placeholder="Select"
[(ngModel)]="selectedId"
[required]="required">
</ng-select>
<div *ngIf="!validatationPassed()">
<div class="row alert alert-danger alert-div">
<span>
Required field
</span>
</div>
</div>
</div>
</div>
</div>
The nice thing about this approach is that you have a completely self-contained component which doesn't need to worry about anything outside of it's scope.
If you're concerned about variable widths using Bootstrap and the grid system.
You can also pass the grid column style in as an #Input property to the component so that you're providing more control to the consuming component.

How to set src attribute of [input=image] by external css

I want to display an html with an input type=image.
I use a base64 svg string for the image.
When setting the src within the input attribute src - it works fine (btn1).
When setting the src via external css and setting image class, it doesn't work.
I Tried 2 different options btn2,bt3.
<html>
<style>
.img2 {
src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==";
}
.img3 {
src: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
</style>
<body>
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==" alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for="imgBtn2">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3">btn3 - by css class</label>
</body>
</html>
Please advise.
The <img> src attribute is not a property that you can style with CSS.
If you really need to style the button with CSS, you could do it this way:
It involves using a pseudo-element to cover up the contents of the <input> and setting its background to the SVG image.
It's a bit hacky, as it requires that you know in advance what the background colour behind the imput element is. And it'll almost certainly need to be a solid colour.
#imgBtn2, #imgBtn3
{
position: relative;
width: 24px;
height: 24px;
color: transparent; /* hide alt text */
}
#imgBtn2::before, #imgBtn3::before
{
content: '';
display: block;
width: 24px;
height: 24px;
position: absolute;
background-color: white;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==" alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for="imgBtn2">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3">btn3 - by css class</label>
Update
If you don't need an <input type="image/> then I would suggest just using a <button> element. Then you can just style the background.
Here we separate out the button styling from the CSS class for the button icon. So if you have buttons of the same type with different icons, you can reuse class imgButton and just give it a different icon class.
.imgBtn
{
border: none;
width: 24px;
height: 24px;
background-color: transparent;
}
.reload
{
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
<button type="button" class="imgBtn reload"/>
Since CSS is not a must, then javascript is here to do the job.
example , setting your dataUri inside an array and and a loop on your inputs to update the src attribute:
// set an array with each of your dataUris
const img =new Array ('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==' ,
' data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==',
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==');
// reset src attributes from dataUri stored in img()
let myIpts =document.querySelectorAll('input[id^="imgBtn"]');
for (i = 0; i < myIpts.length; i++) {
myIpts[i].setAttribute('src', img[i] );
}
<html>
<style>
</style>
<body>
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg=="
alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for=" imgBtn2 ">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3 ">btn3 - by css class</label>
</body>
</html>

Overriding bootstrap styles, not working

I'm trying to make a simple CSS file to make my app look decently, but I have a problem with it
<div class='container-fluid'>
<div id="nav">
<div class='col-sm-6' align="center">
<h2>Utwórz nową sesje</h2>
<br><br>
<input class="form-control mr-sm-2" type="text" aria-label="Search"><br>
<a class="btn btn-primary btn-md" href="#" role="button">Stwórz</a>
</div>
<div class='col-sm-6' align="center">
<h2>Dołącz do istniejącej sesji</h2>
<br><br>
<input class="form-control mr-sm-2" type="text" aria-label="Search"><br>
<a class="btn btn-primary btn-ms" href="#" role="button">Dołącz</a>
</div>
</div>
And no matter if I make it
#bootstap-overrides .container-fluid {
background-color: #3b5998;
}
Or
.container-fluid {
background-color: #3b5998;
}
or
.nav {
background-color: #3b5998;
}
Background is still white, as if bootstrap was overrding it. I'm a beggineer at CSS.
EDIT:
#Component({
selector: 'home',
templateUrl: './home.component.css'})
The templateUrl field was wrong, so i fixed it. However, now the entire site appears white.
You Should organize your CSS links like this
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/custom.css"/>
First Bootstrap file and then your custom css file
If you want to change the whole class as example '.container-fluid', you could add the tag !important.
e.g.:
.container-fluid {
background-color: #3b5998 !important;
}
But in most cases it is more recommended to create child elements as you did.
You have to use your 'nav'-element as follows in your css:
#nav {
background-color: #3b5998;
}
You have to use '#' instead of '.', because you declared it as an ID- not a CLASS-element