In the Ionic app, I need to change the background color for my side menu to become red . By default , when I click or press on one item stable color become the background color but I need to become red .
see this
You can use sass to build your own custumized ionic.css
You can give custom css to set the background color like <ion-content class="dark">
Css
.dark {
background-color: red !important;
color: #ffffff;
}
Sample HTML
<ion-side-menu side="left">
<ion-header-bar class="bar bar-dark">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content class="dark">
<ion-list class="list">
<ion-item href="#/event/check-in">Check-in</ion-item>
<ion-item href="#/event/attendees">Attendees</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
You can check the full code/demo on the codpen which have proper comments also : http://codepen.io/mhartington/pen/qafgv
For the other reference you can check this also : http://pointdeveloper.com/ionic-change-side-menu-color/
Try overriding item.active.item-stable and item.activated.item-stable styles in your custom CSS.
Add below styles in your custom CSS:
.item.active.item-stable, .item.activated.item-stable, .item-complex.active .item-content.item-stable, .item-complex.activated .item-content.item-stable, .item .item-content.active.item-stable, .item .item-content.activated.item-stable{
border-color: #B81D22;
background-color: #B81D22;
}
Related
I need to change the background color of the selected radio input.
I have the following ion-radio list:
<ion-list radio-group [(ngModel)]="selectedRadio">
<ion-item *ngFor="let ing of pizzaIng; let i = index">
<ion-label>{{ing.name}}</ion-label>
<ion-radio [value]="ing.name"></ion-radio>
</ion-item>
</ion-list>
The only way it's working, is by overriding item-md class of ion-item into:
ion-item.item-md{
background-color: red;
}
But its changing all the radio options displayed. How can I only change the color of the selected one?
Here is a prepared stackblitz for it.
got this to work on my ionic 3 project and works in your demo. also just a heads up on using classes with 'md' at the end will only effect android.
.css
page-home {
.item-radio-checked{
background-color: #a0a;
}
}
I am making a rating form where I am suppose to make rating stars but if I use alert then I am not able to make rating stars like empty and then fill by clicking .How to make it in alert
I have following html code
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card padding>
<rating [(ngModel)]="rate" max="5" emptyStarIconName="star-outline"
halfStarIconName="star-half" starIconName="star" nullable="false"
(ngModelChange)="onModelChange($event)">
</rating>
<h2>{{rate}}</h2>
</ion-card>
</ion-content>
and this is its scss
ul {
padding: 10px;
&.rating li {
padding: 5px 10px !important;
background: none;
color: #ffb400;
ion-icon {
font-size: 40px;
}
}
}
This working fine but it is working in card I want a pop up like alert and I dont know how to integrate it in alert.
Secondly I have tried to make alert itself with stars as buttons but its not working the way I wanted,I need help
Hi put above css under src\theme\variables.scss
ion-footer button doesn't disappear properly when navigating from page1 to page2 and then navigate back from page2 to page1.
Here's the code in page2:
<ion-footer padding>
<button ion-button block round color="primary">Add to Order</button>
</ion-footer>
I have found an exact same issue on github which recommend adding tag ion-toolbar
but it didn't work for me:
ion-footer on back should disappear on willLeave not didLeave
Footer Visible During Navigation Transition
Nav animations for ion-footer-bar and ion-header-bar
Any comments/answers are appreciated!
Create a new class, say, .app-footer, with the same CSS properties as ion-footer and place the HTML within ion-content, like so:
HTML
<ion-content>
<page code>
<div class="app-footer">...</div>
</ion-content>
SCSS
.app-footer {
left: 0;
bottom: 0;
position: absolute;
z-index: 10;
display: block;
width: 100%;
}
Finally, I make it work, wrap button in div tag with padding solved my issue:
<ion-footer>
<div padding>
<button
ion-button block round color="primary"
[disabled]="items.length === 0" (click)="onContinueClick()">
Continue
</button>
</div>
</ion-footer>
On ionic version 6 i had the same problem, and for those who are facing the same, the solution that worked for me was enclosing the content of ion-footer into an ion-content
Code example:
<ion-footer>
<ion-content>
Your footer content
</ion-content>
</ion-footer>
In my case i had also to set a height to ion-footer for example:
ion-footer{
height: 6rem;
}
I am new in ionic and wants to learn it. my question is How to change nav bar color for all the pages in ionic 3.
I have been using following code
<ion-header>
<ion-navbar color="primary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
</ion-header>
Is there any way to change nav bar color for all the pages instead of manually doing <ion-navbar color="primary">
Add following line to variables.scss file to change the color globally.
$toolbar-background: #3D9BDD;
This can achieve different way i will show you 2 way
First way
In variables.scss file $colors portion add customColor
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
customColor:(
base: #00953B,
contrast: #ffffff
)
);
Here base is background color and contrast is text-color
And change in .html file
<ion-header>
<ion-navbar color="customColor">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
</ion-header>
Second way
override default color toolbar color
$toolbar-background: #00953B;
If anyone is looking for a solution using dynamic themes, it is possible to change the text color using css like this in Ionic 3:
.header .toolbar-title {
color: #fff !important;
}
i'd like to add an image as an icon to a navigation button in the header. is this possible? how should i go about it? here is my current code.. it doesnt work:
in the html code:
<ion-nav-bar class="bar-positive custom-dark">
<ion-nav-buttons side="left">
<button class="button" style="background: #1e1e1c;" ng-click="doSomething()">
<i class="icon home"></i>
</button>
in the css code:
.home
{
background: #1e1e1c;
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
background-image: url('img/finalimages/home.png');
display: inline;
}
You could create a custom icon which can be put as your default back button alternative in ionic.
By doing this way you are getting a number of custom icons which can be used throughout your project.
This can be made by following this tutorial:here