I am using https://github.com/n3-charts/line-chart library to generate charts. Is it possible to change font size of axis labels? I could not find such option in official documentation.
Something like this on the CSS would work
.tick text {
font-size: 120%;
}
Edit: The appearance of many SVG elements can be configured using CSS, just inspect them in the browser and try modifying them.
When the chart is generated it has it's own classes that you can take advantage of overwriting... Here are all the axis for example:
// X-Axis Font
.x-axis {
font-size: 120%;
}
// Left Y-Axis
.y-axis {
font-size: 130%;
}
// Right Y-Axis
.y2-axis {
font-size: 140%;
}
Hope that helps.
Related
i want to customize the color of md-switch without writing alot of angular/js if possible
here how i want it
i was able to get the first , mainly becuse the main theme is solid gren and i used this to make the body of the switch light green
<md-switch ng-change="$ctrl.updateAsset($ctrl.asset,
'disabled')" ng-model="$ctrl.asset.disabled"></md-switch>
md-switch.md-checked .md-bar {
background-color: rgb(212, 255, 186); //light green
}
how would i change the head color (round)? how would i change the color of both head and body of the switch when the switch is off?
What you call the "head" is an element with class md-thumb; the bar, as you note, has class md-bar. Both are colored by their background-color property.
The md-checked class is active when the switch is "on".
md-switch .md-thumb {
background-color: darkgrey;
}
md-switch .md-bar {
background-color: lightgray;
}
md-switch.md-checked .md-thumb {
background-color: darkgreen;
}
md-switch.md-checked .md-bar {
background-color: lightgreen'
}
Obviously you should use the exact colors you want.
You could simplify the above if you're using SASS or LESS, and you may want to look at custom theming if you're planning to change more than this one component.
Edited to add:
To reverse the direction, use the transform property, e.g.
md-switch .md-thumb-container {
transform: translate3d(100%, 0, 0);
}
md-switch.md-checked .md-thumb-container {
transform: translate3d(0, 0, 0);
}
Add vendor prefixes as necessary for your browser support requirements.
I am trying to change the background color and text color for combbox and is using following style
.root
{
//-back:#152635;
-darker:#272B30;
-dark:#3A3F44;
-normal:#52575C; // #555
-light:#7A8288; // #999
-lighter:#999; // #eee
-primary:-light;
-success:#62c462;
-info:#5bc0de;
-warning:#f89406;
-danger:#ee5f5b;
-fore-color:#C8C8C8;
-fx-background-color:-darker ;
-focused-color:#64c8c8;
-border-color:derive(-darker,50%);
-fx-text-fill:-fore-color;
-fx-font-size: 14px;
-fx-font-weight:100;
-fx-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.combo-box-base {
-fx-background-color:-dark;
-fx-text-fill:-fore-color;
-fx-min-width:150px; }
.combo-box-base *.arrow-button {
-fx-background-color:derive(-dark,-10%); }
.combo-box-base *.arrow {
-fx-background-color:-normal; }
.combo-box *.list-view {
-fx-background-color:-normal;
-fx-text-fill:-fore-color; }
Design looks good in Scene builder but in my application, font and background color of drop down list is not changed which is little bit surprised to me. Please help me to find out what is wrong in my css.
While #James_D solution works, if you override the background color you won't see hover, filled or selected pseudo classes.
This will give you the chance to define your styling for them too:
.combo-box-popup > .list-view {
-fx-background-color: -normal; // or define other color to highlight the border
}
.combo-box-popup *.list-cell {
-fx-background: -normal;
-fx-selection-bar: -light; // filled:hover
-fx-cell-focus-inner-border: -dark; // filled:selected:hover
-fx-text-fill: -fore-color;
}
You need to apply the style to the list cells, not the list view:
.combo-box *.list-view .list-cell {
-fx-background-color:-normal;
-fx-text-fill:-fore-color; }
How to create Responsive Email Template?
I can build responsive layout using media-query but these styles we can write only in external/internal CSS. Email template we cannot use DIV and external/internal CSS.
How can i build responsive email template.
Thanks,
Shanid
Using media queries in an HTML email is not a very good solution to developing a responsive HTML email because the vast majority of your audience is not going to see it the way you intend.
Gmail will not preserve any CSS in the head of an html email. This is where media queries are, so .. won't work.
Android supports media queries but it's buggy at best.
The best way to develop a pseudo-responsive HTML email is to build a fluid layout HTML email. Design your email with (for simplicity) a single column layout. You can develop a fluid layout with a multi-column layout but it can get pretty complicated quick.
Design your layout as normal, inline all your styling and using depreciated HTML attributes rather than css styling.. doesn't matter if it's inline, CSS still won't play well in HTML emails. Use it sparingly, don't use it at all if you can avoid it.
Do not assign height to your elements and assign width only in percentage values. Therefore allowing the device displaying the email to determine the best width to display based on the percentage values rather than specific pixel sizes.
<table width="90%" cellpadding="0" cellspacing="0" border="0">...</table>
Here's a good example of a fluid layout: http://woothemes.createsend1.com/t/ViewEmail/y/1D01C6AE9D028347
You need to understand that responsive emails, while possible, can't work on every mail client. As an example, Gmail strips all your head tag from the email, so no media queries are allowed, therefore no responsiveness. From what I've tested, responsive emails can be displayed in Outlook, Apple Mail, and a few others with standard media queries. For those, you'd have to use the typical breakpoints and apply them to trs or tds. Now, that can be tricky. You have to make sure it won't break your table layout so you really need to plan in advance what will change in your layout.
If you want it to work mostly on everything, I'd suggest you use fluid layouts using % widths. But if you really want some web responsiveness, it's the same as any responsive website. Just be aware that it will not work everywhere. Like this:
#media (max-width:680px) {
.hide { display:none; }
.main { width:440px }
.header { width:440px; }
.header-img { width:440px }
.footer { width:440px; }
.footer-size { width:440px; }
}
#media (max-width:440px) {
.hide { display:none; }
.main { width:100% }
.header { width:100%; }
.header-img { width:100%; height:auto; }
.logo-img { width:75px; height:30px; }
.icon-img { width:19px; height:18px; }
.icon-wrap { width:19px; }
.footer { display:none !important; }
.footer-size { width:100% }
}
#media (max-width:240px) {
.hide { display:none; }
.main { width:100% }
.header { width:100%; }
.header-img { width:100%; height:auto; }
.logo-img { width:75px; height:30px; }
.icon-img { width:19px; height:18px; }
.icon-wrap { width:19px; }
.button { width:100%; height:auto; }
.footer { display:none !important; }
.footer-size { width:100% }
}
(That's just some code from an email campaign I worked on, btw)
You can use media queries for common mailclients. Webclients rely heavily on inline css. Work with as much percentages as possible on your tables (100%) and max widths for tables that may not scale bigger than a certain amount of pixels.
Nested tables within a 100% wrapper table always stack inherited.
U should learn #media queries first. Is't something for write here because of many info.
I have a jqplot for a line graph but my legend is becoming too huge. I want to implement a scrollable functionality for the legend. I tried to do the following :
table.jqplot-table-legend {
display: block;
height: 350px;
overflow-y: scroll;
}
in the css file and in my ctp file, i tried
legend: {
show: true,
location: 'ne',
rendererOptions: {numberColumns: 2}
}
as was mentioned in previous posts but none seem to work for me.
Please help.
If I apply your css before or after the chart has rendered, it works fine with one change. I had to increase it's z-index so the scroll bar is on top and clickable. Here's an example of applying it after the chart has rendered:
plot1 = jQuery.jqplot ('chart1', data, opts);
var legendTable = $($('.jqplot-table-legend')[0]);
legendTable.css('display','block');
legendTable.css('z-index',100);
legendTable.css('height','100px');
legendTable.css('overflow-y','scroll');
See fiddle here.
Here is my MainView:
Ext.define("Test.view.Main", {
extend: 'Ext.Panel',
config: {
cls: 'transp'
}
});
Here is (the relevant part of) my app.css:
/* line 3, ../themes/stylesheets/sencha-touch/default/core/_reset.scss */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
h4, h5, h6, pre, code, form, fieldset, legend,
input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
.transp
{
background-image: url(http://support.sencha.com/assets/images/logo-sencha.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
I know it recognizes the class because when I set the opacity to 0, the gray background of the mainview isnt displayed. Can someone please help me? I am at a total loss.
Try using !important in your CSS property.
FWIW, this didn't work for me.
I have a form panel w/ Sencha Touch and had to do this:
.TxPanel .x-scroll-container {
background: url('img/txbackground.png') repeat center;
}
after adding TxPanel to the cls setting for the form.
Once thing in dealing with CSS that most people don't realize is specificity! http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
So if you have your background class .myBackground{ background-image:.. } vs sencha's .x-container .x-component .x-background{ background-image:..} sencha's class has more selectors, and a higher specificity, and will override your .myBackground class! Even if it is declared after sencha's css!
Anyway learning about specificity in depth helped me a lot with styling in sencha.