I'm using Foundation. Where I make a form the input field are very high like 40px. I want to make the less height like around 26px. I looked in the css setting file but you can change a lot but not the height. When I add the css code below it works in Chorme, but in FireFox the bottom part of the texted is hidden.
input {
height: 26px;
}
Does anyone have a idee?
Simplest and brutest (most brutey?) way to do it is:
input {
height: 26px !important;
}
in your app.scss and compile your css.
However, there is a better way..
Check in the file at /bower_components/foundation/scss/foundation/components/_forms.scss and you'll see that the height of form elements is based on the font-size and form-spacing
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); // line 121
Which by default (in the same file) are:
$form-spacing: rem-calc(16) !default; // line 14
$input-font-size: rem-calc(14) !default; // line 26
These can be found and uncommented in your _settings.scss file (same directory as your app.scss) to be overriden there before compiling again. Test well because these are general settings that will have an effect on most (if not all) form elements.
On the plus side, in your _settings.scss file they are immune from updates to the framework files, and will give you more consistency in your site-wide styles.
Related
I've inherited an AngularJS project which uses the 3rd party grid, Ag-grid. There is an ag-grid-style.css file that has the following:
.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-viewport.hasCategoryCol .ag-row .ag-cell {
width: calc(100% / 7) !important;
}
This works great for the grid already in use, the grid is nicely divided into 7 columns.
My problem is I have created new code, also using ag-grid, but I need the new grid divided into 6 columns, not 7. I end up with one extra empty column. Using Chrome for debugging and going into the developer tools, I can see the above CSS and if I change the 7 to a 6, my grid displays perfectly. My question is what is the easiest way to accomplish what I want? I've been trying to adjust the styling in code but haven't succeeded yet. Suggestions?
I would simply add the modified CSS to a CSS file that renders after all other third-party library CSS files. When you have an !important that happens after another !important, the second one overrides the first. So by adding the CSS to your website it should be fine.
.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-
viewport.hasCategoryCol .ag-row .ag-cell {
width: calc(100% / 6) !important;
}
#Adosi's answer is the preferred solution -- CSS after all refers to cascading style sheets. If, however, you cannot modify the load order of your styles, the following is an alternative solution.
You can override a rule defined in an external stylesheet that has a !important attribute by adding your own definition inline to the element itself. I have demonstrated here using the background-color property as it is more obvious.
#foo {
background-color: pink !important;
}
<p id="foo" style="background-color: cyan !important;">This paragraph has id foo.</p>
The inline style will always take precedence -- eg be loaded last -- so the color defined there is the one that is displayed.
Note that this is not considered a good practice, but I indicate it as an alternative if you are unable to load a CSS rule after your third party asset. (You may wish to log a bug with the 3rd party library because the !important annotation should be used sparingly and in this case probably not at all.)
I would like to include a code block in a presentation I am preparing with Restructured Text. But the font used in the code block is huge and it can not fit inside resulting code box:
How can I reduce the font size used in code blocks?
Set the fontSize property of the code style in your style file.
e.g.
code:
parent: literal
fontSize: 10
Some of the builtin themes (alabaster) accept usage of custom.css.
Create _static/custom.css and add the following to adjust the code-block font-size:
_static/custom.css:
.highlight { background: #f8f8f8; font-size: x-small;}
You need a layout.html in a dir mysources/_templates and in your mysources/conf.py you need a declaration templates_path = ['_templates'].
In layout.html add a declaration
div.highlight {
font-size : 0.8em; /* or another value you prefer */
}
This works for me because I use the html_theme sphinxdoc. Maybe in other themes the declarations differ. If so you must find out the declaration by a html debugger like Inspektor in Firefox or Developer Tools in Chrome or DOM Explorer in IE.
I'm pretty new to this Qt thing and its whole stylesheet system. My background of HTML/CSS helps a little to understand the system, but a lot of things just happens for no apparent reason....or don't happen.
Anyway, the mystery of the HLINE and the VLINE and how to change the lines' color is just a mystery for me. I learned from other questions and various fora that it's linked to the QFrame elements. And I can change the color of the line if I just use something like
QFrame
{
color: red;
}
But this of course changes the color of tons of other things that uses a QFrame as well. I could of course go into the HLINE element and put color: red; in there and that works fine, but my app requires that I put everything in a single stylesheet that gets loaded into the app. So styling individual elements is not an option.
A solution would look something like
QFrame HLine, QFrame VLine
{
color: red;
}
QFrame[frameShape="4"] /* QFrame::HLine == 0x0004 */
{
color: red;
}
QFrame[frameShape="5"] /* QFrame::VLine == 0x0005 */
{
color: green;
}
HLine and VLine are tricky to style. It's worth taking a look at the "Detailed Description" section of the documentation. For a quick fix, I found that this set of rules allows customizing the appearance of such lines via stylesheet in a reliable and relatively clean manner:
QFrame[frameShape="4"],
QFrame[frameShape="5"]
{
border: none;
background: red;
}
This works regardless of the frameShadow property, which otherwise affects their appearance and the effect of style rules. Keep in mind that the width of the lines are not 1px by default -- this can be changed using the min-width, max-width, min-height or max-height properties, as appropriate.
For a more detailed overview of my findings, read along.
Most QFrames have the QFrame::Plain frameShape by default, but HLine and VLine's default frameShape is QFrame::Sunken. This means that they are not really lines, but thin boxes that contain a mid-line that's used to provide the 3D effect. From the documentation:
The mid-line width specifies the width of an extra line in the middle of the frame, which uses a third color to obtain a special 3D effect. Notice that a mid-line is only drawn for Box, HLine and VLine frames that are raised or sunken.
If you set the frameShape to Plain, this midline is still visible, and can be styled with the color property (note: that's not a background-color or border-color!)
But this doesn't work for a HLine/VLine that's left with the default Sunken appearance. One way to fix this could be to set separate styles for Plain and Sunken QFrames by using attribute selectors with the decimal values of the property enums (which are described in the documentation in hehadecimal), like so:
/* Reference (from doc.qt.io/qt-5/qframe.html#types):
* - frameShape[4] --> QFrame::HLine = 0x0004
* - frameShape[5] --> QFrame::VLine = 0x0005
* - frameShadow[16] --> QFrame::Plain = 0x0010 (default for most widgets)
* - frameShadow[48] --> QFrame::Sunken = 0x0030 (default for HLine/VLine)
*/
QFrame[frameShape="4"][frameShadow="16"],
QFrame[frameShape="5"][frameShadow="16"]
{
...
}
QFrame[frameShape="4"][frameShadow="48"],
QFrame[frameShape="5"][frameShadow="48"]
{
...
}
but since the styles that work for HLine/VLine with QFrame::Sunken also work for those with QFrame::Plain, it's usually a waste to do so. I show them above for educational value only about how to use attribute selectors.
The best approach is to treat the QFrame as the box that it is, and either (1) set border-top or border-right coupled with a max-height: 0px (or max-width for a VLine), to ensure the inside of the box doesn't take up space in the layout; or (2) use a background color coupled with border: none (in which case, max-height/width should be 1 or larger, otherwise the QFrame is invisible). The latter is the solution I'd recommend, as shown in the first code block above.
Hope this helps!
According to QDarkStyleSheet issue, You could use:
QFrame[width="3"], QFrame[height="3]
These selectors, they seem to work cross-platform, and they are unlikely to change.
Probably better than using enum values as ints, as they are likely to change with Qt versions, and line styling are not, as they fulfill certain requirements.
but my app requires that i put everything in a single stylesheet that
gets loaded into the app.
You can use Conflict Resolution. Suppose that you have a QMainWindow object with lots of widgets on it . Set these style sheets for the maindionw style sheet :
QLabel#label{
background-color: rgb(255, 170, 255);
}
QPushButton#pushButton{
color: rgb(0, 0, 255);
}
QFrame#line{
background-color: rgb(0, 170, 255);
}
The first css just changes a QLabel name label on your mainwindow and set its back color to rgb(255, 170, 255). The next will change text color of a QPushButton named pushButton to (0,0,255);. The third one change property of a line.Lines are just a QFrame.
So the solution that I can offer is to place your css in a file and then load this file using QFile and QTextStream and then set the contents of the file for css of your main winodw or main widget using setStyleSheet ( const QString & styleSheet ) function. or If you are using creator just right click on your main window and select change stylesheet and then paste your css. But bear in mind that you should use conflict resolution.
You can leave Qt's hlines and build up your own very easy. For frames you want looks like hline add property "class" as "HLine" (for example), in designer or in c++ code:
frame->setProperty("class", "HLine")
.
Then, you can define in main view's or in global app stylesheet something like this:
QFrame.HLine {
border: none;
border-bottom: 2px solid red;
}
and you will get horizontal two pixels red line.
In a Meteor (nodejs) project we use the less CSS preprocessor, and we use 3rd party "bootstrap-full.less" for our css styling.
There is one (maybe more) CSS rule in bootstrap that I would like to nuke, because it conditionally overrides other rules. (details below)
However, I don't want to "hack" the original bootstrap file, cause that is "vendor code".
I know I could re-override the CSS rules, but this is more work and hassle.
So the question is:
Is it possible to manipulate/process the parsed css rules in less before the actual css is generated?
In particular, there is this rule here,
#media (max-width: 767px) {
...
// Make all grid-sized elements block level again
[class*="span"],
.row-fluid [class*="span"] {
float: none;
display: block;
width: auto;
margin-left: 0;
}
which is undesirable in my case, because we only have this on a sidebar, that keeps the same width even on mobile. So it should continue to behave like a table with cells (span1, span2 etc) being floated.
Ok, maybe I will figure out a different solution for my CSS / bootstrap problem, but still it would be interesting to know if less allows me to manipulate the css it produces.
What I've done in my project is create a master .less file and within that file import my third party less files and then following that my custom files. Any classes that you want to update, create a dupe .less file with that class in it in your own directory and then simply edit the properties you want to change in your files. So for example:
master.less
#import "/static/bootstrap/less/bootstrap.less";
// My custom files
#import "scaffolding.less";
#import "type.less";
And then you have your own file called
type.less
h6{
color: #myCustomColor;
}
This way you keep all the bootstrap files intact and only overwrite what you need to. It also keeps the files nicely seperated so it's easy to navigate and also a snap if you ever need to update the bootstrap source.
There are two CSS files referenced on the same page: A generic.css file and a custom.css file. The generic file has default styles in it that are overridden by the custom.css file for the same elements. This allows users of the site to customize or "skin" their pages without needing to recreate the entire generic.css file. Only a few styles would be overridden.
My question is the following: If the generic.css file has a style for an element with a background image and that same style is overridden in the custom.css with a different background image, is the first image ever downloaded by the browser?
Also, I want to find out if this is bad practice - customizing or "skinning" a generic CSS file with another custom CSS file to override a few styles, including specifying different background images.
While not totally definitive, this site ran some tests regarding this. The significant statement from that site that is related to your question is:
CSS images are kicked off not in the order in which they appear in the
CSS but in the order in which they’re called in the HTML. I’m not sure
of the precise moment when the download is initiated, but my guess is
that it happens just after the CSS rules have been matched, when the
property values are assigned to the DOM elements.
This at least tentatively confirms what I thought I remembered in the back of my mind reading on this a few years back, namely, that background images which are not ever displayed (as in the generic.css images being overridden by the custom.css images) are not ever downloaded.
Further confirmation of this would be the typical image preloader script that used to be so common prior to sprite images (and is still found in certain uses). It was designed to download images that would be used on :hover in css, because without it, the image would not load until the first hover was initiated, and this caused an unsightly delay. So that, also, argues for the fact that unless actually displayed (or preloaded), the background images themselves are never loaded.
I don't think there are generally any issues with "skinning," unless you are essentially overwriting most or all of the generic.css with custom.css, then one could argue, why load the generic at all. But as you said, normally there are just a few styles overwritten.
I think i answered NO and NO BAD PRACTICE. Because when the css file readable / executable by the browser, the browser will make comparisons to find the same value or the difference between css file and then combine them.
Easy example:
css1.css on file there is a line:
.test {display: block; width: 100%; height: 600px; background: #991100 url("image1.jpg") center top; border: 1px solid red;}
then the css2.css there is also the line:
.test {background: #991100 url("image2.jpg") no-repeat center center;}
the result of a combination that will be executed and run by the browser are:
.test {display: block; width: 100%; height: 600px; background: url("image2.jpg") no-repeat center center # 991100; border: 1px solid red}
where the "background: # 991100 url("image1.jpg") center top;" read but not called / executed by the browser.
Far as I know the value of the file css1.css be stacked by the value of the css2.css. What if there a css3.css file? then the file css3.css will also stacking on the combination of css1.css and css2.css.
Hope it helps.