How can I change the color of this border.
I have tried using the following in options but that doesn't work.
topBar: {
borderColor: "white"
}
Which did try operation system ? ( Android / iOS ) (I'm using PhpStorm because I'm Full-Stack developer, highly recommend.) By selecting topBar you can go to the source with ctrl+b.
Options.ts
/**
* Change the navbar border color
* #### (Android specific)
*/
borderColor?: Color;
If not both, set the borderHeight. So like this; (from my code)
stack:{
children:[
{
component:{
name: 'app.Main.Shop',
options:{
topBar:{
borderColor:'blue',
borderHeight:2
},
},
}
}
],
options: {..}
}
Result like this;
Related
I want to give my dropdown items to use the text themeColor. How can I achieve this? Below is my code:
const dropdownStyles: Partial<IDropdownStyles> = {
dropdown: { width: "50%" },
dropdownItem: {
backgroundColor:"$themePrimary",
color:"$ms-color-themePrimary"
}
};
<Dropdown label='Select your List' styles={ dropdownStyles} placeholder='---Select an Option---' options={this.state.listNames}></Dropdown>
The above does not work. The dropdown items dont use the Primary color which is #a200ff.
As far as I know the "$ms-Bla--bla-bla" notation is only working for (statically) pre-processed fabric-ui files, there is no run-time processing of these variables in spfx. So, you may need to use the theme directly. For example, you could make your dropdownStyles a function instead of a constant. You receive the current theme in parameters then:
const dropdownStyles = (styleProps: IDropdownStyleProps): Partial<IDropdownStyles> => {
return {
dropdown: { width: "50%" },
dropdownItem: {
backgroundColor: styleProps.theme.palette.themePrimary,
color: styleProps.theme.palette.themePrimary
}
}
};
There are other options as well, like using <ThemeProvider> / useTheme pair for example, using "magic" scss rules like [theme: themePrimary, default: #0078d7] (which are pre-processed at runtime) , using window.__themeState__.theme variable
Creating a custom color scheme for a template is very easy in Tailwind CSS. You just modify tailwind.config.js, add your custom color palate, and use it just like Tailwind's ordinary classes. For example bg-brand-500:
theme: {
extend: {
colors: {
brand: {
'50': '#B0ECEC',
'100': '#A0E8E8',
'200': '#7FE1E1',
'300': '#5ED9D9',
'400': '#3DD1D1',
'500': '#2CB9B9',
'600': '#218C8C',
'700': '#165E5E',
'800': '#0C3131',
'900': '#010404'
},
}
}
}
Now I'm stuck at a way to make a multi-color template.
I'm sure you have all seen templates all over the web where you can choose red or blue for example and the entire template's color scheme changes.
How do you do that in Tailwind?
Update:
In other CSS schools, like SASS, you simply create another color variables file and dynamically load a different file using the regular <link href='/path/to/red/variables.css' />.
You can use CSS variables for that.
In your tailwind config, you create the brand colors as you did, but instead of hex color codes, you use for example 50: 'var(--brand-50)'. Then in your index.css you can add these variables to the base layer, like:
#layer base {
:root {
--brand-50: #B0ECEC;
}
.theme-red {
--brand-50: #BB0000;
}
}
Now, if you add the class .theme-red to your body, text-brand-50 will be red.
In this video of Tailwind labs it is fully explained. There is also explained how to deal with opacity, although since tailwind 3.1 there is an easier way of doing that.
Hope this helps.
You might use the tw-colors plugin.
Create your themes
const { createThemes } = require('tw-colors');
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
plugins: [
createThemes({
light: {
brand: {
'50': '#B0ECEC',
'100': '#A0E8E8',
'200': '#7FE1E1',
'300': '#5ED9D9',
'400': '#3DD1D1',
'500': '#2CB9B9',
'600': '#218C8C',
'700': '#165E5E',
'800': '#0C3131',
'900': '#010404'
},
},
dark: {
brand: {
'50': '#321321',
'100': '#654654',
'200': '#987987',
'300': '#786541',
'400': '#aeeeee',
'500': '#786541',
'600': '#987987',
'700': '#165E5E',
'800': '#654654',
'900': '#321321'
},
}
})
],
};
Use your themes
<html class='theme-light'>
<div class="bg-brand-500">...</div>
</html>
You can then switch themes dynamically as you like, with a switch for example
I'm working with compound graphs library cytoscape.js for some days and familiar with its demo and basic APIs.
But I wonder if it is possible to decorate a parent node with style like the following screenshoot.
The defaults style of parent node is just a rectangle frame. Is it possible to render it with a background coloured title ?
Any help is greatly appreciated.
I finally resolve my issue with the following snippet.
{
selector: ':parent',
style: {
'background-image': function(){
return "title.jpg";
},
'padding-top' : '25px',
'background-position-x' : '0',
'background-position-y' : '0',
'background-width' : '100%',
'background-height' : '25px',
'background-fit' : 'contain',
}
}
Use a background image for the coloured title.
For my highchart column graph, I have 2 series and the values can be very close to each other, so overlap can happen.
On exporting, I'm reducing the fontSize property but with different results:
Internet Explorer : The fontSize remains the same. Ugly.
Firefox : The fontSize is reduced. However, the datalabels is now not centered anymore which is ugly
Chrome : Perfect result ! As I would expect. FontSize reduced and centered.
Is there anything I can do or you can do (next release) ?
See the JSFiddle here :
Open it in IE, Firefox and Chrome and export in any format (PNG in my test)
I'm changing the export like that :
exporting: {
chartOptions: {
plotOptions: {
column: {
dataLabels: {
allowOverlap: true,
style: {
fontSize: 6
},
}
}
}
}
}
Thanks in advance.
Actually I found the answer :).
The fontSize should be declared as "6px" and not 6.
so instead of :
style: {
fontSize: 6
},
change it as
style: {
fontSize: "6px"
},
Like that, it works as I expected on IE, FF, Chrome.
i have i problem and tried different solutions, but no success.
I have an amChartXY chart, which has white labels and legend text is white, but when i want to build custom pdf report, i cannot convert those white text into black.
First i have a function which exports chart to base64 string, and i want there to convert the text color to black, but it won't work.
Here is a code snippet of a menu item, that converts to SVG that is saved to global array object.
menu: [
{
class: "",
label: "Save to draft",
click: function() {
var overrideObject = {
backgroundColor : "rgba(255,255,255,1)",
color : "#000",
legend : {
color : "#000"
}
};
var chartObject = this;
chartObject.capture(overrideObject, function () {
chartObject.toJPG({}, function (base64) {
// charts is global array
charts.push({
name: customName,
chart: base64
});
});
});
}
},
Here the overrideObject is changing the backgroundColor attribute with white ( before is was transparent ) but it's not changing font color. Also i have tried different attributes to add, but nothing seems to work.
Is this possible at capture time ?
Here are some images preview of what i want to accomplish :
AmChart for export isn't that well documented, so any feedback would be welcome
The overrideObject you're passing only accepts the same parameters listed in the list of export settings. If you need to change the appearance of specific elements on the chart, you need to use the reviver callback mentioned in the annotation settings section to selectively apply your modifications. For example, here's how to target the value axis labels:
"export": {
"enabled": true,
"reviver": function(nodeObj) {
if (nodeObj.className === 'amcharts-axis-label' && nodeObj.svg.parentNode.classList.contains('amcharts-value-axis')) {
nodeObj.fill = 'rgba(255,0,0,1)';
}
},
// ...
}
Note that you need to use SVG attributes to change the appearance, so you'll have to set the fill to change the color of the text element.
Codepen demo