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
Related
I have been trying a couple of methods here to make my font-awesome icon colored white as I focus on my input... but nothing seems to work.
My code looks like this:
HTML
<div id="container">
<form id="form">
<input type="password" placeholder="Code" required id="input">
<div class="icon"><i class="fas fa-user-secret"></i></div>
<hr>
<br>
<center>
<button id="submit" type="submit">Submit</button>
</center>
</form>
</div>
I've tried doing:
input:focus + .fas-fa-user-secret {
color: #fff;
}
input:focus + .fas {
color: #fff;
}
input:focus + .i {
color: #fff;
}
But none of the above CSS code works. Not even the text in the input is white, but whenever I remove the + and the rest it does work for input.
Any help on this is appreciated, looked at every thread about making icons a different color when focusing on input.
Thanks.
You need to use input:focus+.icon since you have your icon inside the .icon div.
input:focus+.icon {
color: #ff0000;
}
input:focus {
color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="container">
<form id="form">
<input type="password" placeholder="Code" required id="input">
<div class="icon"><i class="fas fa-user-secret"></i></div>
<hr>
<br>
<center>
<button id="submit" type="submit">Submit</button>
</center>
</form>
</div>
The problem is that you are using general sibling combinator, which select its siblings right after it, which is a <div>, not the icon.
input:focus + .fas-fa-user-secret {
color: #fff;
}
What you may want to do is set color: inherit to the icon, and then set desiring color for the div via this CSS selector and it will be fine
input:focus + div {
//your style
}
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>
(This might be a beginner question so you are welcome to refer me to other docs or questions)
I am trying to create sub classes in css. I want a group of general buttons like btn.general.X (btn general plain, btn general alert, btn general secondary) and a group of sidebar buttons like btn.sidebar.X (btn sidebar general, btn sidebar alert, btn sidebar secondary).
Is there a way to split the .btn.general class so that it is not applied to all the subclasses. My example here shows how I want to create two different groups of buttons, but currently any button that has the classes btn and general is getting the .btn.general styles. I don't want the .btn.sidebar.general to get the .btn.general styles.
I checked through what I know but I'm not sure how to fix this.
.btn.general {
border: 1px solid red;
}
.btn.sidebar {
background-color: orange;
}
<html>
<div class="main">
<div class="container">
<button class="btn general plain" (click)="Login()">Login</button>
<button class="btn general plain" disabled>Toets Button</button>
<br><br>
<div style="background-color: rgb(196, 196, 196); width: 150px;">
<button class="btn sidebar general">Dashboard</button>
<button class="btn sidebar general">Global</button>
<button class="btn sidebar general">System</button>
<button class="btn sidebar general">Preferences</button>
</div>
</div>
</div>
UPDATE
So after going through all the answers I believe that my approach is wrong. If you want .btn.general to not be applied to btn.sidebar.general then make the first one .btn-general, then add .btn-general.foo (.error/.plain), and with the sidebar do .btn-sidebar.foo (.error/.plain). Grouping CSS seems like a very debatable topic so just go with what works for you I guess.
This link from the comment below by #Paulie_D helps a lot: https://css-tricks.com/bem-101/
Use not CSS selector.
See this
.btn.general:not(.sidebar) {
border: 1px solid red;
}
.btn.sidebar {
background-color: orange;
}
<html>
<div class="main">
<div class="container">
<button class="btn general plain" (click)="Login()">Login</button>
<button class="btn general plain" disabled>Toets Button</button>
<br><br>
<div style="background-color: rgb(196, 196, 196); width: 150px;">
<button class="btn sidebar general">Dashboard</button>
<button class="btn sidebar general">Global</button>
<button class="btn sidebar general">System</button>
<button class="btn sidebar general">Preferences</button>
</div>
</div>
</div>
There is an option to use attribute selectors in css. It is common to use attribute selectors in case of elements like input - input[type='text']. You may try the same method here also. Please check the below example.
button[class='btn general']{
background: green;
}
<button class="btn general">Login</button>
<button class="btn general sidebar">Toets Button</button>
You need to use the cascade in the Cascading Style Sheet.
First, identify which styles are common to all buttons:
button {
[... Styles which apply to all buttons in the document... ]
}
Then, identify which styles apply only to a subset of buttons:
.container button {
[... Specific styles which only apply to buttons in .container ... ]
}
Then, identify which styles apply to an even more specific subset of buttons:
.container .sidebar button {
[... More specific styles which only apply to buttons in .container .sidebar... ]
}
Working Example:
button {
margin: 12px;
padding: 6px;
font-weight: bold;
}
.container button {
font-style: italic;
border: 2px solid rgb(255, 0, 0);
}
.container .sidebar button {
font-style: normal;
background-color: rgb(255, 127, 0);
}
main {
background-color: rgb(227, 227, 227);
}
.container {
background-color: rgb(191, 191, 191);
}
.sidebar {
background-color: rgb(127, 127, 127);
}
<main>
<button>Button 1</button>
<button>Button 2</button>
<div class="container">
<h2>Container</h2>
<button>Button 3</button>
<button>Button 4</button>
<div class="sidebar">
<h3>Sidebar</h3>
<button>Button 5</button>
<button>Button 6</button>
</div>
<button>Button 7</button>
<button>Button 8</button>
</div>
</main>
<p>All buttons have <strong>bold text</strong>.</p>
<p>All buttons in <code>.container</code> have a <span style="color: rgb(255, 0, 0);">red border</span>.</p>
<p>All buttons in <code>.sidebar</code> have an <span style="color: rgb(255, 127, 0);">orange background</span>.</p>
<p><strong><em>But...</em></strong> note that the text in the <code>.sidebar buttons</code> is not <em>italic</em> because it has a more specific declaration than all other buttons in <code>.container</code>.</p>
Clarification of CSS syntax
I think I understand the way you're looking at it now.
The first - very important thing you need to know - is that CSS classes do not have spaces.
When you see something like this:
class="button magical spell"
what you're looking at is a space separated list of classes. The element has the class .button applied to it, the class .magical applied to it and the class .spell applied to it.
If, elsewhere, you this:
class="button magical wand"
that element has the class .button applied to it, the class .magical applied to it and the class .wand applied to it.
That is to say, both elements have the classes .button and .magical applied to them.
I designed recaptcha for Bootstrap 3. now i need to show recaptcha image in 100% for responsive theme.
HTML :
<div class="form-group">
<div class="captcha">
<div id="recaptcha_image"></div>
</div>
</div>
<div class="form-group">
<div class="recaptcha_only_if_image">Enter the words above</div>
<div class="recaptcha_only_if_audio">Enter the numbers you hear</div>
<div class="input-group">
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="form-control input-lg" /> <a class="btn btn-default input-group-addon" href="javascript:Recaptcha.reload()"><span class="icon-refresh"></span></a>
<a class="btn btn-default input-group-addon recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')"><span class="icon-volume-up"></span></a>
<a class="btn btn-default input-group-addon recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')"><span class="icon-picture"></span></a>
</div>
<script>
var RecaptchaOptions = {
theme: 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LcrK9cSAAAAALEcjG9gTRPbeA0yAVsKd8sBpFpR"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LcrK9cSAAAAALEcjG9gTRPbeA0yAVsKd8sBpFpR" height="300" width="500" frameborder="0"></iframe>
<br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge" />
</noscript>
</div>
CSS:
#recaptcha_image img {
width:100%
}
how do resize images recaptcha for responsive design?!
demo : FIDDLE
Try setting captcha container to 100% as well
.captcha, #recaptcha_image, #recaptcha_image img {
width:100% !important;
}
Fiddle: Here
Try this, It works Fine, Here is your UPDATED FIDDLE
Just add this code
CSS
#recaptcha_image {
width: 100% !important;
}
Now it will work as responsive for the Recaptcha.
Use this code in the header section.
<meta name="viewport" content="width=device-width, initial-scale=1">
Without we can't responsive of the design.
And use this code also:
#recaptcha_image img {
width:100% !important;
}
You should add a max-width aswell, otherwise it will stretch the entire image and will make it unreadable if the screen is big.
css:
#recaptcha_image img {
width:100%
}
#recaptcha_image {
width: 100% ! important;
max-width:400px;
}
DEMO
Here i have some code from my website I'm making. I'm having trouble styling the links within css. I'm not sure why they won't change. Also the reason I've used class is because i have this code repeated 4 times (don't worry about why :P) Btw I've also tried putting the 'a' infront of .profileLinks that didnt work either :(
Here is the external CSS style sheet
#trends .profileLinks a:link{
color:#0000FF;
text-decoration:none;
background: transparent;
}
#trends .profileLinks a:visited {
text-decoration: none;
color: #0000FF;
background: transparent;
}
And here is the Html Code
<div id="trends">
<h1> Trends... </h1>
<img src="logo.png" alt="Profile Image" height="59" width="68">
<a class="profileLinks" href="#" title="User's Profile Name"> Mark Fonacier </a>
<a class= "commentLinks" onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<br/>
<p>
PostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPostPost
</p>
<a onClick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><i>Comment</i></a>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" >
<form method="post" action="">
<textarea name="comments" cols="60" rows="2" placeholder="Enter your comments here..." maxlength="1000">
</textarea>
<input type="submit" value="Submit" />
</form>
</div>
<br/>
This selector,
#trends .profileLinks a:link
will only work for child <a> tags of elements with a class of profileLinks, whereas your <a> are the elements with the class applied to it. Change it like so:
#trends a.profileLinks:link
Same goes for the other rule.
Do you have any other stylesheet overridden to yours?
Try this
#trends .profileLinks a:link {
color:#0000FF !important;
text-decoration:none;
background: transparent;
}
Hey try this one Just defined color to all links. Change the link color to your desire one.