I just started to work with ionic v2 today and I am trying to color my app to match my preferences. While playing with the color variables gave some colors, I cannot find how to color every navbar to my preference although I can color them individually. What are the variables I should access in order to give all navbars the same color?
Thanks in advance.
This is done as globally only sigle class can change your toolbar color gobally.
.toolbar-background{
background-color: "color you want to give" !important;
}
or you can do seperately for each platform like
.toolbar-wp-themecolor .toolbar-background-wp{
}
.toolbar-md-themecolor .toolbar-background-md{
}
.toolbar-ios-themecolor .toolbar-background-ios{
}
or if you want to control with global color variable then for each page you can use like
<ion-header>
<ion-navbar color="themecolor">
<ion-title>Notifications</ion-title>
</ion-navbar>
</ion-header>
where themecolor can be defined in variable.scss
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
white: #ffffff,
themecolor: #574D70
);
Related
I'm currently trying to use the accordion component of Semantic UI React and can't figure out how to change the color and arrow to white.
https://semantic-ui.com/modules/accordion.html
In the css, you can see that the widget has styling that configures it to black.
Does the component have a way to change the text color?
Is it possible to put a parent div to override the color text? (tried
that but didn't work)
How would you override the color? Any workaround. (This can be done with an override as mentioned below in the comments with the !important tag)
The accordion react component takes in panels
const panels = [
{
title: "test1",
content: "test1"
},
{
title: "test2",
content: "test2"
},
{
title: "super",
content: "test"
}
]
<Accordion className="test" panels={panels}/>
.test{
color:white;
}
The accordion takes in a className, but passing in a style doesn't seem to work at all either. I've tried at each level as well Accordion.Title Tag.
You have to personalized the class of the composant you want to change and you have to "overriding" the css classes of semantic-ui using !important.
.ui.accordion.perso
.title:not(.ui) {
color : #ffffff !important;
}
If you want more info on !important (https://css-tricks.com/when-using-important-is-the-right-choice/)
Peace
Figured it out.
<Accordion>
<Accordion.Title className="test2">
<Icon name='dropdown' />
<label className="label-color"> super</label>
</Accordion.Title>
<Accordion.Content>
</Accordion.Content>
</Accordion>
Realized that I could just use the separate components of an accordion and add my own elements and style it.
My app is in cordova, ionic 3.2. I want global style for ion-navbar component. So I declared style with .toolbar-background in variables.scss file. Now the style of ion-navbar in all pages are changed. its working fine. Now I want to disable the style for a specific ion-navbar only. Can anybody help me on how it possible please?
eg:
I have below code in variable.scss;
.toolbar-background{
background-color: red !important;
}
I have below code for header in app.html page(for left side menu header);
The background of this toolbar is red.
<ion-header>
<ion-toolbar>
<ion-title text-center>
Hellow!
</ion-title>
</ion-toolbar>
</ion-header>
Below is the code for footer in the app.html;
The background of this toolbar is red. I do not want red color only for this component. How to disable this style that showing due to toolbar-background?
<ion-footer>
<ion-navbar secondary >
this is the footer
</ion-navbar>
</ion-footer>
I'm trying to change what I would call the footer background color where the google-visualization-table-page-numbers go. I would like the background color to extend the entire width of the table. I am hoping someone can help me find the correct solution.
since the chart uses a gradient, use css background to change to a solid color
.google-visualization-table-div-page {
background: magenta !important;
}
to keep the gradient and only change the color, use css background-color
.google-visualization-table-div-page {
background-color: magenta !important;
}
Say I have a button like this:
<button>Some Text</button>
And by default the stylesheet has the text as black.
I then have this css:
button {
transition: color 0.15s ease-out;
color: rgba(255,255,255,0.75);
}
button:hover {
transition: color 0.15s ease-out;
color: #fff;
}
The goal is to subtly fade from a grayish off-white, to white, on hover, and then back again to normal button appearance on hover off.
The problem is when i firstly load the page, the black initial color of button is overwritten by the transition that i applied on button, and one can briefly see black text fading to off-white.
How do I make it so that the initial state just loads without animation? Or more precisely, is there a way to achieve something like :hover-off to control the animation only when the hover state turns off?
Sorry i have less reputation to comment. Your animation does not work, please explain clearly what you want to do?
are you trying to achieve this.
button:hover {
transition: 0.5s ease-out;
color : white;
}
If you have to load some JavaScript, you can put it in the <head> after your CSS. Kind of a hack, but it works.
HTML parsing is blocked by <script> tags that initiate requests for external resources. I guess CSS animations won't start until the <body> has been fully parsed and that's the reason this works.
I would like to use a different background color for the Foundation topbar menu in mobile view compared to the desktop view. In the settings file you have $topbar-dropdown-bg to set the color but this is the same for both views. I have tried the following code:
$topbar-dropdown-bg: white;
#media only screen and (max-width : 40em) {
$topbar-dropdown-bg: #dc2a87;
}
But the problem is that all views give the color background but this should be only in the mobile view?
Use scss media query for changing foundation top-bar.
#media #{$small-only} { }
Use it with the bg-background variable.
#media #{$small-only} {
$topbar-dropdown-bg :#fff;
}