Asian characters (Chinese/Japanese/Korean) make for more compact elements butI would need the font-size to be slightly increased when my site is switched to Chinese. How do I increase font-size globally?
I guess I could attached a class to the body tag, like so:
<body class="cjk">
and suppose
.cjk {
base-font-size: 36px
}
might do that job?
Just changing the root size probably won't give you what you want as the rest of the tags use the variable for pixel margins etc.
I recommend customizing the build and there are two options for fine tuning the elements:
1) using a body/wrapper class:
LESS
.cjk{
& h1,
& h2,
& h3{
font-family:#font-family-zh
}
...
}
2) use guarded mixins to change specific elements such as:
in variables.less to change everything together
.SetFontSize() when (#cjk) {
#font-size-base: 17px;
}
.SetFontSize() when (#cjk = false) {
#font-size-base: 15px;
}
.SetFontSize();
or in specific files like scaffolding.less for finer control
body {
font-family: #font-family-base;
& when (#cjk) {
font-size: #font-size-base-adjusted;
}
& when (#cjk = false) {
font-size: #font-size-base;
}
font-weight: #font-weight-base;
line-height: #line-height-computed;
color: #text-color;
background-color: #body-bg;
position: relative;
}
Bootstrap.less
#cjk = false;
...
rest of the imports
Bootstrap-zh.less
#cjk = true;
...
rest of the imports
option 1 is more verbose but you only have one file.
option 2 is streamlined but you have to switch out the files bootstrap.css <> bootstrap-cjk.css
Related
I am trying to learn SCSS and encountered a small obstacle (if you can call it that) with something I am trying to do.
So the code beneath is probably a non-logical, simplified example of what I am trying to achieve.:
.gt-button {
// some css
&.gt-button-alt-l {
font-size: 2em;
}
}
.gt-buttonset {
// some css
&.gt-button-alt-l > .gt-button {
font-size: 2em;
}
}
This will generate:
.gt-button.gt-button-alt-l {
font-size: 2em;
}
.gt-buttonset.gt-button-alt-l > .gt-button {
font-size: 2em;
}
So I am wondering how to logically get underneath CSS instead:
.gt-button.gt-button-alt-l, .gt-buttonset.gt-button-alt-l > .gt-button {
font-size: 2em;
}
How would I go about getting above generated CSS? I have fiddled around in Sassmeister.com but I cannot seem to get it in a way that is logical to me. I also don't really know the technical term of joining those two CSS pieces into the desired generated CSS piece.
I do have to add that I did get it to work like this:
.gt-button {
&.gt-button-alt-l, .gt-buttonset .gt-button-alt-l > & {
font-size: 2em;
}
}
But that for some reason does not seem logical to me. As .gt-buttonset is no child or anything of the .gt-button. So putting it there just feels weird.
I would appreciate to know if the last code fragment actually is the way to do this or if there are other options. If there are other options I would also like to know them.
If the outputted CSS is that important to you, you could leverage the #extend rule to achieve it:
Source SCSS:
.font-size-two { font-size: 2em; }
.gt-button {
// some css
&.gt-button-alt-l {
#extend .font-size-two;
}
}
.gt-buttonset {
// some css
&.gt-button-alt-l > .gt-button {
#extend .font-size-two;
}
}
Output CSS:
.font-size-two, .gt-buttonset.gt-button-alt-l > .gt-button, .gt-button.gt-button-alt-l {
font-size: 2em;
}
Obviously, the downside is that you now also have an unused .font-size-two class in your CSS.
That said, you may be focusing too much on the nuances of the output CSS-- as long as what you have in your SCSS is expressive, maintainable, and doesn't generate a ton of superfluous CSS output, I would think that to be sufficient, and not worry that every possible optimization is being made. Remember that if you're leveraging any other build tools there will be minification and potentially other optimizations, and that CSS is, ultimately, quite fast.
Im absolutely new to typo3 and want to set up a simple contact form. So I created a form and added it to the page. My template record looks like this:
page = PAGE
page.typeNum = 0
page.10 < styles.content.get
page.includeCSS {
file1 = fileadmin/templates/css/style.css
}
I can see the form and it works appropriately, but unfortunately my css doesnt do anything.
My style.css looks like this:
p {
font-family: arial;
font-size: 120px;
}
Gotta admit i have no knowledge about CSS too. The changes I made had absolutely no impact on my page. Do these infos help you by any chance? I just have no idea how to fix it on my own, been searching for a solution all day long.
you should learn more about the structure of CSS-files. maybe you inspect some with your browser from other sites.
Then you will notice it is something like:
p {
font-family: arial;
}
For file pathes in typoscript or objects and attributes: don't insert spaces:
:
page.10 < styles.content.get
page.includeCSS {
file1 = fileadmin/templates/css/style.css
}
Your style.css should only contain this:
p {
font-family: arial;
font-size: 120px;
}
... and you'll see the difference ;)
Probably only a copy&paste error, but your TypoScript (aka template record) has spaces where it shouldn't:
...
file1 = fileadmin/templates/css/style.css
...
120px will result in a really big font ;-)
Set the style-definition to the body-tag (so for all elements below the body), not only for the p.
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
You should define the styling of the input fields seperately. With some browsers the inheritance from the body tag definitions seem not to work.
input, textarea { font-size:1.25em; font-family:serif; border:1px solid darkgray; }
Something like that.
In my application I have two Vaadin Grids. I want to apply default CSS to one grid and user defined CSS to the other. When I apply the user defined CSS to the other grid, the default CSS is dominating over the user defined CSS. Here are my code.
In styles.scss,
.my-grid-style{
line-height: 64px !important;
font-size: 12px !important;
text-align: center !important;
}
In my application .java file I am using setStyleName as follows
grid.setStyleName("my-grid-style");
but this CSS is dominated by the default .v-grid-cell style. Can anyone suggest how to achieve the same?
Try
.my-grid-style {
.v-grid-cell {
//your styles
}
}
I think your style is not adding to styles.Because of the default CSS can't dominate to "!important"Try to add with programmatically:
UI.getCurrent().getPage().getStyles().add(".my-grid-style{\n" +
" line-height: 64px !important;\n" +
" font-size: 12px !important;\n" +
" text-align: center !important;\n" +
"}");
then
grid.setStyleName("my-grid-style");
This worked for me (not sure if you need .v-grid-body ollitietavainen didn't use it, but it may be important for other functions like editors )
UI.getCurrent().getPage().getStyles().add(
".my-grid-style .v-grid-body .v-grid-cell {\n" +"" +
" line-height: 18px;\n" +
" font-size: 12px;\n" +
"}");
then use the style as discussed by utrucceh
grid.setStyleName("my-grid-style");
It sure would be nice if one of the following 'built-ins' worked like they did for the Table component:
grid.addStyleName(ValoTheme.TABLE_COMPACT); // "compact"
grid.addStyleName(ValoTheme.TABLE_SMALL); // "small"
My style.less imports Bootstrap 3 .less files and then customize some variables in order to output style.css:
#bs-less: "../../vendor/twbs/bootstrap/less";
// Core variables and mixins
#import "#{bs-less}/variables.less";
#import "#{bs-less}/mixins.less";
// Core CSS
#import "#{bs-less}/type.less";
// Customizations
#font-family-sans-serif: "Open Sans Condensed", sans-serif;
#font-size-base: 18px; // override working
#font-size-h1: floor(#font-size-base * 5); // originally 2.6 (46px) changed to 5
Customizing the #font-size-base variable works fine as #font-family-sans-serif.
The problem I'm getting is with #font-size-h1 (more generally with #font-size-h*), which is completely ignored, i.e 46px but should be around 90px. I changed the multiplication from 2.6 to 5.
I'm just start learning LESS, is there something I'm missing?
EDIT: in type.less variable #font-size-h1 is actually used:
h1, .h1 { font-size: #font-size-h1; }
#font-sizer: 10;
.test(#fs){font-size:#fs*5px;}
h1{.test(#font-sizer)}
#font-sizer: 20;
It seems the results depends on your compiler. Less compilers have different precedence rules maybe?
The above results with lessc 1.4.2 (LESS Compiler) [JavaScript] in: h1 {
font-size: 100px;
} alhought i can find a reason (unambiguous rule) why the result should not be h1 {
font-size: 50px;
}
Also see: https://github.com/twbs/bootstrap/issues/8947
I can't find a CSS frameowrk that lets me plugin my own color scheme.
For example, in my current project I imported blueprint/screen.css. To change the color of the font, I have to change body { color..}, h2 { color..}, h3 {color..}, etc.
Isn't there something out there that provides nice css defaults, but also lets may play around with color schemes?
You can try http://lesscss.org/.
It allows you to use things such as variables in your CSS, which sounds like exactly what you're after:
// LESS
#color: #4D926F;
#header {
color: #color;
}
h2 {
color: #color;
}
Create your own CSS file that loads after Blueprint. You'll need to redefine everything, but the Blueprint defaults aren't far off from the browser defaults.
If you have multiple color schemes you want to quickly switch out, set the class on your <html> tag. Then use your CSS file to define custom styles for each.
CSS:
.theme1 body {
font-family: Tahoma;
color: #500;
}
.theme2 body {
font-family: Verdana;
color: #050;
}
For the first theme:
<html class="theme1">
For the second theme:
<html class="theme2">
Couldn't you just edit the blueprint/screen.css file? You could also use something like SASS and then create all the defaults at the top of the stylesheet and then have it go throughout the stylesheet when it renders it.