I suspect this is more of a LESS question and may not be specific to Ant Design other than the way they implemented some of their components is preventing me from overriding or extending the styles.
Specifically, I want to change the font size and weight for the title area of the PageHeader component. Unfortunately, the component's style does not use the LESS variables defined in the default.less theme for these two settings. The source code can be found here: https://github.com/ant-design/ant-design/blob/master/components/page-header/style/index.less
I have no issues changing the color, for instance, or any other variables defined in the theme but I am new to LESS and not sure how to go about overriding the styles defined for an individual component like this. Oh, and I don't want to use inline styles. We use this component in many places in our application, so I want to define the overrides in one place, once and have them be global for the application (like I can do with the theme variables).
So, how do I override the font-weight and font-size styles defined on lines 45 and 46 of the referenced file?
Here an example of how I have done it in my project:
Using .css file
Override the CSS class by .css/.scss and so on:
// Main layout where all antd componets used.
import './MyLayout.css';
/* MyLayout.css */
.ant-tooltip-inner {
background-color: white;
color: black;
}
Here I reversed all tooltips (default are black).
Using Styled-Components
Same like above just as CSS-JS:
const LayoutStyled = styled(Layout)`
height: 100vh;
* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.ant-layout-sider-light .ant-layout-sider-trigger {
border-right: 1px solid ${HCOLOR.border};
}
`;
Here I overrode all fonts and added the right border to antd sider trigger (default no border).
Conclusion
Find the css-class / css-property with dev-tools (Ctrl+Shift+C in Chrome) and override it as you like.
Use less files to apply the styling as mentioned in the antd docs here.
Related
I am using Angular & Material v6 and I have a question about the application of a custom theme on entryComponents like dialog or snack bar.
Actually, I put the Roboto font on all component using the custom theme of material but it is not applied to my dialog or snack-bar.
You can find a stackblitz example here
As you can see, the Roboto font is correctly applied on my page but if you open the dialog, the Time New Roman is used instead...
I just:
fork the example of dialog from angular material website.
add a custom theme.scss (using Roboto) and include it in angular-cli.json
remove the global font-family in style.css
Any advises, explanations ?
Somewhere in your app you need to apply your typography to the application page body so that all components automatically inherit from it including the overlay component that holds the dialog. In the stackblitz demo, you commented that out to test your typography:
body {
/* font-family: Roboto, Arial, sans-serif; */
margin: 0;
}
So you either need to replace that in your theme file with something like:
body {
font-family: mat-font-family($custom-typography);
margin: 0;
}
Or (you can't do this when using stackblitz) use the Angular Material typography class in your main index.html page:
<body class="mat-typography">
...
</body>
Also, your typography configuration needs to define sizes and weight for all of the typography levels used by Angular Material. An easy way to simply modify the default configuration is using a SASS merge. For example:
$custom-typography: map-merge(
mat-typography-config(),
mat-typography-config(
$font-family: 'Roboto, sans-serif'
)
);
This takes your definitions and writes them over the default configuration, leaving anything you didn't re-define intact.
And you only need to call mat-core() alone as it will call angular-material-typography() which in turn calls mat-base-typography().
I am getting crisscross information and wanted to raise the issue here. I have read in some places the font size should be changed from the html element for example:
html { font-size: 14px }
And the bootstrap 4 rem values will update the text accordingly.
Interestingly if I keep the html element's font-size to its default and change the bootstrap variables to change the font size, am I doing something wrong?
For example:
html { font-size: 16px }
// Changing bootstrap variable to
$font-size-base: 0.875rem //instead of 1rem
With all the confusion and so many different answers. I approached the authors of bootstrap with the question to clear it up once and for all.
It is now crystal that we will need to change $font-size-base which will directly change the root font-size.
I was also advised by their contributor to not control the font-size with html element rather change the bootstrap's variable instead.
REF: https://github.com/twbs/bootstrap/pull/24060
Caution about using just CSS override
using the supplied css example will not work for all aspects of bootstrap sizing.
The compiled result of scss uses the $font-size-base variable to size many things and may be used in more areas in the future.
List of sized elements
dropdown font
button font
popover font
input-group font
forms font
reboot font
-------------- Example SCSS --------------
This is an example for your scss files, note that you need to define the $font-size-base BEFORE including bootstrap in your main scss file. In this case, the app.scss file is the one being compiled.
app.scss
// Fonts
#import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables -- this is where you defined the variables
// BEFORE importing bootstrap which will use it's
// defaults if the variable is not predefined.
#import "variables";
// Bootstrap
#import '~bootstrap/scss/bootstrap';
// DataTables https://datatables.net/download/npm#DataTables-core
// #import "datatables";
#import "datatables.min";
_variables.scss
// Body
$body-bg: #ffffff;
// Typography
$font-size-base: 12px; // this changes the font-size throughout bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
Bootstrap defines base font-size in it's _reboot.scss as
body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
background-color: #fff;
}
NOTE:- Never change default values into frameworks files always modify values using custom css/js files.
so in order to change your font-size to 14px use this in your own style.css(custom css file)
body {
font-size: 0.875rem;
}
Here is the working fiddle
use !important you are not able to see your changes to override your change on default.
In your custom.scss file do like this:
$custom-variable:0.875rem;
Then use it like this:
#import "./src/scss/_modules/custom";
#import "./bower_components/bootstrap/scss/bootstrap";
body {
font-size:$custom-variable;
}
I'd suggest you to update directly the html {font-size: 16px} property instead of changing Bootstrap's $font-size-base, for several reasons:
html's font size will be directly used in calculating final font size. There's no benefit to use an "intermediary", that is, body that is being adjusted by Bootstrap's $font-size-base.
Bootstrap's SCSS system calculate heading size etc using $font-size-base, so all Bootstrap affected CSS rule will be affected, which includes body (set into $font-size-base$).
However, browser calculate any CSS font size rule in rem relative to html {font-size}, not from $font-size-base affected elements (like body).
Setting html {font-size} using px will affect any rem value, both inside and outside Bootstrap affected elements, if this is what you want to achieve.
Conversely, if you only want to set sizes for Bootstrap-affected-elements, do set the $font-size-base relative to html {font-size}, so CSS elements outside of Bootstrap will not be affected. But I'd say this is more of an edge case, instead of the norm.
Note:
If you're setting $font-size-base or any other Bootstrap variables, you don't have to modify variables.scss file. You should define variables before importing node_modules/bootstrap/scss/variables and other Bootstrap files, so your values got used instead of !default values set in Bootstrap. The advantages: no need to edit the whole variables.scss file.
In Wordpress themes, in a first style.css there are the general definitions, in a custom.css you can add own styles.
There, I'd like to address certain single elements like
home .example-class_1 h1 {}
In the theme I'm working with I can't do that inline, so I have to use the custom.css.
Now, instead of repeating all single styles in the bracket I would like to assign the class which has already been defined in the style.css:
.heading-class_1 {font-size:1.2em;font-family: 'Open Sans', sans-serif; etc}
Is there any way to do that? As far as I know
home .example-class_1 h1 { .heading-class_1; }
is not allowed (just to be sure, I tested it, it does not work). Is there a workaround in CSS (not JS)?
Yes there is a way to use nested CSS, you'll have to use an extension, you can learn more about it, check out Sass.
You can't do that by default in CSS but you can use a preprocessor that can do that and then it'll compile it into vanilla (normal) CSS for you.
Check Extend within Sass. That'll do the trick. Other preprocessors out there might be able to do this too, but Sass is a popular choice.
Other than that, you'll have to do:
home .example-class_1 h1 { font-size:1.2em; font-family: 'Open Sans', sans-serif; }
I'm building an Angular 2 app and wondering how best to do styling in a parent-child fashion. Similar to the Angular 2's 'Tour of Heroes' tutorial, I have a top level styles.css file. Each of my components also have an associated styleUrl pointing to a component specific css file.
I figured I could specify global options in the styles.css file, and overwrite them as needed through component.css files.Then I discovered Angular 2 components are 'view encapsulated', meaning that properties from styles.css cannot be overwritten by the component at all. You apparently can set 'view encapsulation' to none for certain components, but then that component's css properties contaminate other components. That's not what I want.
What exactly is the use of a styles.css file if it can't be overwritten anymore? Is there a way to still set css options globally and overwrite them in certain components?
Example: Plunker example of Angular 2 'Tour of Heroes':
https://angular.io/resources/live-examples/toh-6/ts/plnkr.htmlIn
Inside styles.css one finds the 'master styles', including the h2 properties
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
The component 'heroes.component.html' includes a h2 title 'My Heroes'. Suppose I want to style this particular h2 title with a different color than the other h2's in my app. I could go into 'heroes.component.css' and specify:
h2 {
color: #999;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
However the color property is NOT overwritten this way because of 'view encapsulation'. Is there a way to still locally overwrite a master style, without changing the color for any other h2 header?
If I want to limit font family usage across my site, say to 2 or 3 font different typefaces (e.g. Times, Arial, etc). Is there a way I can organize my CSS so that I have something like
fontType1 is font-family: "Times New Roman", Times, serif;
fontType2 is font-family: Arial, sans-serif
Then for each of my UI elements that I style in the CSS, pick from the available font types, i.e. fontType1, fontType2. Likewise for my set of color choices.
If I change the font-family of fontType1, I want it go all the way across the site/stylesheet. I don't want to have to go into each css declaration and change it. If I want to change one of my site's "dark colors", I want it to go all the way across the site; I don't want to go into each usage of it and change it.
If I understand your issue correctly, the best way (without using a preprocessor) would be:
h1,h2,h3,h4,h5,h6,
.button, .promo{ /* Your list of selectors that need to use this font stack */
font-family:one;
}
p,ul,
.small-print,.error{ /* Your list of selectors that need to use this font stack */
font-family:two;
}
#nav,#footer{ /* Your list of selectors that need to use this font stack */
font-family:three;
}
This doesn't rely on JS, it won't bloat your HTML, and the best thing is that you can update all instances at once :)
This way you only need to add new selectors to your list, and don't have to redefine your families. Have that in a 'Shared' section. I write about it here: http://coding.smashingmagazine.com/2011/08/26/writing-css-for-others/ (do a find for 'Shared').
H
There's no way to do this directly with CSS but it's one of the major features of libraries such as Sass, LESS, and Compass. LESS can be compiled by server-side or client-side Javascript, and Sass is compiled with Ruby. Compass is a library that allows compiling Sass outside the context of a Rails or Ruby web app.
Here's an example of what you can do with Sass:
$color: #4D926F;
#header {
color: $color;
}
h2 {
color: $color;
}
And the CSS that it's compiled into:
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
In addition to variables, as shows above, you also get mixins (which are basically functions) and nested selectors.
Have something like so:
.font-type1 { font-family: font1, font2, font3; }
.font-type2 { font-family: font4, font5, font6; }
.font-type3 { font-family: font7, font8, font9; }
And set them on the <body> element.
If you wish to dynamically change it with JavaScript:
HTML
<a class=changefont data-font="font-type1" href=#>Font 1</a>
<a class=changefont data-font="font-type2" href=#>Font 2</a>
<a class=changefont data-font="font-type3" href=#>Font 3</a>
JavaScript
And with javascript (I'm using jQuery for simplicity, can be done with js alone too)
$('.changefont').click(function() { $('body').removeClass().addClass($(this).data('font')); });
Here's an Example!
By changing a higher level ancestor class, you cause a nice cascade (Cascading Style Sheet) over the entire document.
Another way of doing this is adding some classes to UI elements.
CSS:
.fontType1 {font-family: "Times New Roman", Times, serif}
.fontType2 {font-family: Arial, sans-serif}
HTML:
<h1 class="fontType1">Header 1</h1>
<p class="someOtherCssClass fontType2">paragraph text goes here</p>