Hello,
I have some css that applies overall my app. I was thinking to put them in app\theme\app.core.scss
By from my testing , it works on a page, but when navigating to a different page, the css doesn’t apply to the new page.
Any ideas where to put global styles?
it should work globally, or sth is overriding the css.
Perhaps the default ionic CSS is overriding the customized CSS. In this case u can add your code or change the variables here in the theme\app.vaiables.scss as shown here.
your page’s independent scss file is overriding the global CSS.
Best to check out chrome’s debug panel to see what is overriding the css.
Let us know if this solve your problem 
@ultradryan about css and scss…
i’m using that code in an .scss file:
.modal-wrapper{
position: absolute;
width: 30vw;
height: 20vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
But it applies to all modals of my project…
How can I specify the one that is for?
I have page1.html and page1.ts, calling mymodal.html.
Then i created mymodal.scss and put that code here, but not working.
edit: mymodal.html code:
<ion-buttons>
<button full (click)="dismiss(1)">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>I happened to completely revamp the css of some particular models.
It’s possible! and it wasnt that hard.
I am not sure why you only got an <ion-button> inside the mymodal.html.
But it sounds like we should always try to wrap everything in your content with a <ion-content> tag.
Give <ion-content> an ID or a Class, and that will do the trick.
<ion-content id="myspecialmodel">
<ion-buttons>
<button full (click)="dismiss(1)">
<ion-icon name="close"></ion-icon>
</button>
<span class="bigredbutton">Press me</span>
</ion-buttons>
<ion-content>
and in the scss file do this:
#myspecialmodel {
ion-button { somebuttoncss};
button { somebuttoncss};
.bigredbutton { someawesomecss};
}
You can actually put the css code for the model in the page1.scss if u wanted.
if your css still got overiden somehow, try add !important at the end of the css, like this:
#myspecialmodel {
.myclass { width: 100% !important;};
}
Hope this work!!
@ultradryan thanks for your answer.
I could not get it work using <ion-content>, but with small changes, i got it!
mymodal.html:
<ion-modal class="mic">
<ion-buttons>
<button full (click)="dismiss(1)">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-modal>
mymodal.scss:
ion-modal .mic{
position: absolute;
width: 25vw;
height: 25vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 0;
}
ps: i do not have only an <ion-button> inside my .html, but i remove some useless line for clarity and code lenght 
good to hear.
long as u got something to wrap it up with an ID/Class will do the trick.
the reason i use an <ion-content> is that in case u need to fiddle with some functions like scrollTo() inside a model, it would eliminate unexpected errors. Also, some ionic default css only applied to elements inside <ion-content> so that’s to make sure things dont look weird, becuz perhaps u only want to change and override the color of a certain element but not to rewrite the whole css for it.
Ionic add different css classes to elements when u load it in different devices and sometimes it changes according to the window width. If you are not modding the model’s size then that should not be a matter, but in my case I hv to completely change the wrapper dimensions of the model and cater for different screen sizes, so giving it an ion-content makes it behave more consistently 
Here’s what my model looks like, the very same model with different css treatment in different screens:
Ok @ultradryan, got this.
It works with content!
I need some practice with css (and maybe Ionic a good guide 
)
.html
<ion-content id="foodinfo">
<ion-header>
<ion-title>
Description of: {{food}}!
</ion-title>
<ion-buttons start>
<button (click)="dismiss()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-header>
<ion-list>
<ion-item>
<h2>sometext or something else</h2>
<p>idelemento = {{id}}</p>
</ion-item>
</ion-list>
</ion-content>
.scss
#foodinfo {
position: absolute;
width: 50vw;
height: 50vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 0;
button {
background-color: yellow;
}
}
Just an example 
Really thx again!!
instead of
<ion-header>
replace it with
<ion-toolbar>
this will make everything, including the <ion-title> and <ion-button>, looks great in place.
Becuz ionic2 default css apply styles to <ion-title> and <ion-button> inside a <ion-toolbar>, they hv to put in such order to get it work.
Perfect, yeah!
And just another small question… Is possible to override default icon?
<ion-list reorder="true" (ionItemReorder)="reorderItems($event)">
<ion-item-sliding *ngFor="let singolo of listaSpesa">
<ion-item (click)="goToMore($event, singolo.alimento)">
{{singolo.alimento}}
</ion-item>
<ion-item-options>
<button class="edit-tastiera" (click)="editNote(singolo)">
<ion-icon name="paper"></ion-icon>
</button>
<button class="del-note" (click)="deleteNote(singolo)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
ionItemReorder use that icon as default… And i really don’t like it.
well yes this can be done with some tricky ways.
you will realise that ionic add the element <ion-reorder> to the list which becomes the icon.
We cannot simply make it disappear by using css “display: none”, becuz in order to get the reordering function working we still need it there and replace it with a place holder to be dragged with.
Here’s what i will do, <ion-reorder> has a child called <ion-icon> which IS the icon itself.
Let’s override the color and make it transparent, so it looks like it’s gone:
#myModel {
ion-reorder ion-icon {
color: transparent;
}
}
What we hv done here, is that we make the icon invisible but the button is still there for u to drag around.
now then we still need to add sth back to it so we know it’s there.
We do this by giving the <ion-reorder> element a background-image.
#myModel {
ion-reorder ion-icon {
color: transparent;
};
ion-reorder {
background-image: url("youricon.png");
};
}
I think this will do the trick, but oh my! i think the default icon looks okay haha…
P.S. Avoid using the css display:none at all cost, for some reason it often use up a lot of device memories in iOS.
On Monday i will try your code and give a feedback!
I like the default too, but well, i’m not the Boss 
Again, really thx and good tips for iOS 
Where is your feedback? It’s already Monday now！
Yeah, css icon works fine, but using default one at the moment! 