In this table I wish the color bars were square and not rounded.
Using Chrome > Inspect Element I see that if I change this:
border-radius: 0px;
padding-right: 4px;
I can remove the rounding of one of the bars.
1) How do I determine what to change for ALL of the bars?
I'm using Hugo and placing the css overrides into layouts > partials > head_custom.html
Thanks
Since your spans have inline styling, you'll need to either change each span's styling (since normal CSS rules won't override inline styling), or you'll need to use the dreaded !important rule:
td > span {
border-radius: 0 !important;
}
Related
I'm trying to style angular material's input to look the same as all inputs in this app.
Is it possible to adjust the thickness of the schedule's input outline to have the same width as the project's input border?
The classes to override are:
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-start,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-end,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-gap {
border-width: 1px !important;
}
Make sure you use border-width and not border
Have you tried editing the width of the schedule input itself?
If simply nothing changes maybe try to add the !important tag to css to overwrite the width given (and match the other input ones).
Buttons are large and going over the card width
This should be easy, but I'm having a bit of tough time customizing the buttons inside the cards. I want to remove all the padding, so that the black border nicely encompasses the icon without any extra space in the left/right-hand sides. I've tried adding custom css and !important and directly overriding the div.btn__content, but those don't work. Any ideas to do this as simply as possible?
Reproduction Link
The issue is the min-width of the .btn class. Setting that to 0 will allow the button to be smaller than 88px. You should also just set the padding of the .btn__content to 0.
div.btn__content {
padding: 0;
}
div.card__actions .btn {
min-width: 0;
}
Here's an updated codepen.
For newer versions of Vuetify (1.2.4 and above) you need to use this:
/* turn off min-width for all buttons */
.v-btn {
min-width: 0;
}
You need to change min-width of .btn class and set padding-left: 16px of .btn-content.
Here is an example:
https://codepen.io/anon/pen/zPEyLB
You might have to use ::v-deep
::v-deep .v-btn {
padding-left: 12px;
padding-right: 12px;
}
I was just wondering if it's possible to add padding to the select options in select dropdowns in the Twitter Boostrap framework. I've added padding to all my other inputs so the padding on my select options is out of line. I would expect something like...
option {
padding: 0 24px;
}
... to do the trick but this does nothing to a bootstrap select option.
Any help would be appreciated.
Edit:
Here's the jsFiddle:
http://jsfiddle.net/sbmw3egx/
I was able to get the text in the select to be adjusted to the left by setting the text-indent property:
select.form-control {
text-indent: 16px;
}
A bit more about the text-indent property here: http://www.w3schools.com/cssref/pr_text_text-indent.asp
Hope that helps!
Edit: It looks like Chrome/Safari uses text-indent, Firefox uses text-indent and padding-left, and IE makes use of padding-left for select. I'm not sure how you would specify the CSS to make it consistent across all of these browsers.
Assuming you're using the Bootstrap form-control, this first option displayed will take on the style of the form-control CSS class. So you'd need to override form-control too.
option {
padding: 0 24px;
}
select.form-control {
padding: 0 24px;
}
Demo: http://bootply.com/dCJM6I7z5V
This is one of those elements that is difficult to style. Normally I would try to just use simple css but in cases like this (if you really must style it) then I would use a plugin.
http://www.bartos.me/heapbox/ is one example.
I am starting a new project, so i thought to start using Reset.css in my projects. i got the concept of using Reset.css, but one thing is bothering me is that does if affects my other style applied on the same element.. like in reset.css div have 0 margin and 0 padding... and if i apply margin to some of the divs in my stylesheet, wont it get disturbed?
Please clear my this doubt
Not if the style applied to your other divs is more SPECIFIC.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
In general any style applied using a class, or an id in the selector is going to take precedence over one which doesn't. But there are many other rules in this area you should become aware of.
i.e.
div.myStyle {...}
will always overrule
div {...}
You have to include reset.css first and then include your own stylesheet file. and be sure that your styles wont be overwritten by reset.php.
What you neeed to do is load reset.css as a first style sheet.
Anything else loaded after it will be overriding reset.css
e.g if you specify in reset css: p { margin: 0px; padding: 0px}
and than load style.css with style: p {margin: 2px; padding: 2px}
The style load as last one will be used.
I personaly use technic with
* { margin: 0px; padding: 0px; border: 0px; outline: none; list-style: none;}
Put it at the top of css file and job done:) No need for extra .css fil.
Say I have a complex stylesheet with lots of interacting styles etc.
For a specific class, I want to override padding-top and padding-bottom, without changing the values of padding-left and padding-right (which might even be different things for different elements that get the class I'm specifying).
Is there a way to do this with a shorthand, something like
.special {
padding: 10px initial 5px;
}
that leaves the previous values, or do I have to spell out my css like this:
.special {
padding-top: 10px;
padding-bottom: 5px;
}
Thanks.
No you can't use something like 'initial', you should use padding-top and padding-bottom.
I don't think there is any way around spelling it out. Sorry.
You'd have to specify it as in your second example, it's possible that the browser would interpret inherit in some means:
.special {padding: 10px inherit 5px inherit; }
but the inherited values would come from the parent element of .special, not necessarily the 'default' values.
Edited in response to comment:
inherit can only be used as replacement for the value, not in place of a length (from "CSS: The Definitive Guide": values: [ | ]{1,4} | inherit.
#Lekensteyn
In consequence, then, it would be required to specify the values long-hand.
Well if you know that the left and right padding will always be the same number, you could write it like:
.special {padding:10px 5px 10px 5px;}
Not without using one of the css frameworks that have sprung up like Less: http://lesscss.org/