How to set background color IONIC 4
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I having problems trying to change the background color in just one IONIC 4 (--type=angular) page. I am trying to add a class for the ion-content. In my html file I Have:
<ion-content class="fondologin">
...
</ion-content>
In my sass I have:
.fondologin{
background-color: #111D12!important;
}
The background color is never changed. If I add --ion-background-color:#111D12; in variables.scss the background is successfully changed for every page but I just one to change the color in one page. How can I achieve this?
angular ionic-framework ionic4 asked Nov 29 '18 at 4:25
Kevin SanchezKevin Sanchez
551316
add a comment |
I having problems trying to change the background color in just one IONIC 4 (--type=angular) page. I am trying to add a class for the ion-content. In my html file I Have:
<ion-content class="fondologin">
...
</ion-content>
In my sass I have:
.fondologin{
background-color: #111D12!important;
}
The background color is never changed. If I add --ion-background-color:#111D12; in variables.scss the background is successfully changed for every page but I just one to change the color in one page. How can I achieve this?
angular ionic-framework ionic4 asked Nov 29 '18 at 4:25
Kevin SanchezKevin Sanchez
551316
could you try using [ngClass] or [class] attribute and try?
– Hrishikesh Kale
Nov 29 '18 at 4:43
Are u using this inside app scss file?
– Sachila Ranawaka
Nov 29 '18 at 4:58
1
have you tried thision-content{ --ion-background: #111D12 !important}
– Mohan Gopi
Nov 29 '18 at 10:51
I am trying it inside app scss or inside my component sass with no success
– Kevin Sanchez
Nov 29 '18 at 21:35
add a comment |
I having problems trying to change the background color in just one IONIC 4 (--type=angular) page. I am trying to add a class for the ion-content. In my html file I Have:
<ion-content class="fondologin">
...
</ion-content>
In my sass I have:
.fondologin{
background-color: #111D12!important;
}
The background color is never changed. If I add --ion-background-color:#111D12; in variables.scss the background is successfully changed for every page but I just one to change the color in one page. How can I achieve this?
angular ionic-framework ionic4 asked Nov 29 '18 at 4:25
Kevin SanchezKevin Sanchez
551316
I having problems trying to change the background color in just one IONIC 4 (--type=angular) page. I am trying to add a class for the ion-content. In my html file I Have:
<ion-content class="fondologin">
...
</ion-content>
In my sass I have:
.fondologin{
background-color: #111D12!important;
}
The background color is never changed. If I add --ion-background-color:#111D12; in variables.scss the background is successfully changed for every page but I just one to change the color in one page. How can I achieve this?
angular ionic-framework ionic4 angular ionic-framework ionic4 asked Nov 29 '18 at 4:25
Kevin SanchezKevin Sanchez
551316
asked Nov 29 '18 at 4:25
Kevin SanchezKevin Sanchez
551316
asked Nov 29 '18 at 4:25
Kevin SanchezKevin Sanchez
551316
asked Nov 29 '18 at 4:25
Kevin SanchezKevin Sanchez
551316
asked Nov 29 '18 at 4:25
Kevin SanchezKevin Sanchez
551316
551316
could you try using [ngClass] or [class] attribute and try?
– Hrishikesh Kale
Nov 29 '18 at 4:43
Are u using this inside app scss file?
– Sachila Ranawaka
Nov 29 '18 at 4:58
1
have you tried thision-content{ --ion-background: #111D12 !important}
– Mohan Gopi
Nov 29 '18 at 10:51
I am trying it inside app scss or inside my component sass with no success
– Kevin Sanchez
Nov 29 '18 at 21:35
add a comment |
could you try using [ngClass] or [class] attribute and try?
– Hrishikesh Kale
Nov 29 '18 at 4:43
Are u using this inside app scss file?
– Sachila Ranawaka
Nov 29 '18 at 4:58
1
have you tried thision-content{ --ion-background: #111D12 !important}
– Mohan Gopi
Nov 29 '18 at 10:51
I am trying it inside app scss or inside my component sass with no success
– Kevin Sanchez
Nov 29 '18 at 21:35
could you try using [ngClass] or [class] attribute and try?
– Hrishikesh Kale
Nov 29 '18 at 4:43
could you try using [ngClass] or [class] attribute and try?
– Hrishikesh Kale
Nov 29 '18 at 4:43
Are u using this inside app scss file?
– Sachila Ranawaka
Nov 29 '18 at 4:58
Are u using this inside app scss file?
– Sachila Ranawaka
Nov 29 '18 at 4:58
1
1
have you tried this
ion-content{ --ion-background: #111D12 !important}– Mohan Gopi
Nov 29 '18 at 10:51
have you tried this
ion-content{ --ion-background: #111D12 !important}– Mohan Gopi
Nov 29 '18 at 10:51
I am trying it inside app scss or inside my component sass with no success
– Kevin Sanchez
Nov 29 '18 at 21:35
I am trying it inside app scss or inside my component sass with no success
– Kevin Sanchez
Nov 29 '18 at 21:35
add a comment |
6 Answers
6
active
oldest
votes
For some reason I solved it this way:
First of all I added --ion-background-color:#ffffff; in the variables.scss file inside theme folder.
In my Page scss I wrote:
ion-content{
--ion-background-color:#111D12;
}
After that the background was successful set.
edited Feb 22 at 20:15
Sampath
32.8k19142242
answered Nov 29 '18 at 21:47
Kevin SanchezKevin Sanchez
551316
add a comment |
I am going to repost the top commented answer , with an extra explanation
ion-content{
--ion-background-color:#111D12;
}
Starting from ionic 4, Ionic component implements the concept of shadowDOM, and the old method of finding css selectors in the component that implements shadowDOM no longer works
As such, any modification can only be made if you change the variable that the component references
for example, if ion content references
--ion-background-color: #ffffff
The only way you can modify the background color is by doing this in your css file
ion-content{
--ion-background-color:#111D12;
}
answered Jan 30 at 10:56
Edward ChohEdward Choh
5111
For more information, you can refer this youtube video youtube.com/watch?v=_D1lCoYzivA
– Edward Choh
Jan 30 at 10:57
add a comment |
you can use like this...working good in my page
ion-content{
--background: #fff url('../../assets/imgs/intro.png') no-repeat center center / cover;
}
i hope it help you :)
edited Feb 28 at 13:58
Suraj Rao
24k86074
answered Feb 28 at 13:58
user9088454user9088454
10011
add a comment |
It might be you CSS selector that is not enough acurate.
Try this :
ion-content.fondologin{
background-color: #111D12!important;
}
If it is still not working, then inspect your ion-content element and try to find your CSS, and which property or other selector is overriding it
answered Nov 29 '18 at 9:37
rguerinrguerin
511119
add a comment |
Try this one:
:host {
ion-content {
ion-background-color: #d5ffd5;
}
}
//Or
page-name{
ion-content {
ion-background-color: #d5ffd5;
}
}
edited Dec 27 '18 at 10:02
Derviş Kayımbaşıoğlu
15.7k22042
answered Dec 27 '18 at 9:18
Rahul JogranaRahul Jograna
12814
It is recommended to add some descriptions for the answer you've posted
– Derviş Kayımbaşıoğlu
Dec 27 '18 at 10:02
add a comment |
For changing the background on only one page:
ion-content{
--ion-background-color: #00ABE1 !important;
}
Do not forget the !important or it might not work.
answered Jan 9 at 10:16
Ivo NikolovIvo Nikolov
812
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53531819%2fhow-to-set-background-color-ionic-4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
6 Answers
6
active
oldest
votes
6 Answers
6
active
oldest
votes
active
oldest
votes
active
oldest
votes
For some reason I solved it this way:
First of all I added --ion-background-color:#ffffff; in the variables.scss file inside theme folder.
In my Page scss I wrote:
ion-content{
--ion-background-color:#111D12;
}
After that the background was successful set.
edited Feb 22 at 20:15
Sampath
32.8k19142242
answered Nov 29 '18 at 21:47
Kevin SanchezKevin Sanchez
551316
add a comment |
For some reason I solved it this way:
First of all I added --ion-background-color:#ffffff; in the variables.scss file inside theme folder.
In my Page scss I wrote:
ion-content{
--ion-background-color:#111D12;
}
After that the background was successful set.
edited Feb 22 at 20:15
Sampath
32.8k19142242
answered Nov 29 '18 at 21:47
Kevin SanchezKevin Sanchez
551316
add a comment |
For some reason I solved it this way:
First of all I added --ion-background-color:#ffffff; in the variables.scss file inside theme folder.
In my Page scss I wrote:
ion-content{
--ion-background-color:#111D12;
}
After that the background was successful set.
edited Feb 22 at 20:15
Sampath
32.8k19142242
answered Nov 29 '18 at 21:47
Kevin SanchezKevin Sanchez
551316
For some reason I solved it this way:
First of all I added --ion-background-color:#ffffff; in the variables.scss file inside theme folder.
In my Page scss I wrote:
ion-content{
--ion-background-color:#111D12;
}
After that the background was successful set.
edited Feb 22 at 20:15
Sampath
32.8k19142242
answered Nov 29 '18 at 21:47
Kevin SanchezKevin Sanchez
551316
edited Feb 22 at 20:15
Sampath
32.8k19142242
edited Feb 22 at 20:15
Sampath
32.8k19142242
edited Feb 22 at 20:15
Sampath
32.8k19142242
32.8k19142242
answered Nov 29 '18 at 21:47
Kevin SanchezKevin Sanchez
551316
answered Nov 29 '18 at 21:47
Kevin SanchezKevin Sanchez
551316
answered Nov 29 '18 at 21:47
Kevin SanchezKevin Sanchez
551316
551316
add a comment |
add a comment |
I am going to repost the top commented answer , with an extra explanation
ion-content{
--ion-background-color:#111D12;
}
Starting from ionic 4, Ionic component implements the concept of shadowDOM, and the old method of finding css selectors in the component that implements shadowDOM no longer works
As such, any modification can only be made if you change the variable that the component references
for example, if ion content references
--ion-background-color: #ffffff
The only way you can modify the background color is by doing this in your css file
ion-content{
--ion-background-color:#111D12;
}
answered Jan 30 at 10:56
Edward ChohEdward Choh
5111
For more information, you can refer this youtube video youtube.com/watch?v=_D1lCoYzivA
– Edward Choh
Jan 30 at 10:57
add a comment |
I am going to repost the top commented answer , with an extra explanation
ion-content{
--ion-background-color:#111D12;
}
Starting from ionic 4, Ionic component implements the concept of shadowDOM, and the old method of finding css selectors in the component that implements shadowDOM no longer works
As such, any modification can only be made if you change the variable that the component references
for example, if ion content references
--ion-background-color: #ffffff
The only way you can modify the background color is by doing this in your css file
ion-content{
--ion-background-color:#111D12;
}
answered Jan 30 at 10:56
Edward ChohEdward Choh
5111
For more information, you can refer this youtube video youtube.com/watch?v=_D1lCoYzivA
– Edward Choh
Jan 30 at 10:57
add a comment |
I am going to repost the top commented answer , with an extra explanation
ion-content{
--ion-background-color:#111D12;
}
Starting from ionic 4, Ionic component implements the concept of shadowDOM, and the old method of finding css selectors in the component that implements shadowDOM no longer works
As such, any modification can only be made if you change the variable that the component references
for example, if ion content references
--ion-background-color: #ffffff
The only way you can modify the background color is by doing this in your css file
ion-content{
--ion-background-color:#111D12;
}
answered Jan 30 at 10:56
Edward ChohEdward Choh
5111
I am going to repost the top commented answer , with an extra explanation
ion-content{
--ion-background-color:#111D12;
}
Starting from ionic 4, Ionic component implements the concept of shadowDOM, and the old method of finding css selectors in the component that implements shadowDOM no longer works
As such, any modification can only be made if you change the variable that the component references
for example, if ion content references
--ion-background-color: #ffffff
The only way you can modify the background color is by doing this in your css file
ion-content{
--ion-background-color:#111D12;
}
answered Jan 30 at 10:56
Edward ChohEdward Choh
5111
answered Jan 30 at 10:56
Edward ChohEdward Choh
5111
answered Jan 30 at 10:56
Edward ChohEdward Choh
5111
answered Jan 30 at 10:56
Edward ChohEdward Choh
5111
5111
For more information, you can refer this youtube video youtube.com/watch?v=_D1lCoYzivA
– Edward Choh
Jan 30 at 10:57
add a comment |
For more information, you can refer this youtube video youtube.com/watch?v=_D1lCoYzivA
– Edward Choh
Jan 30 at 10:57
For more information, you can refer this youtube video youtube.com/watch?v=_D1lCoYzivA
– Edward Choh
Jan 30 at 10:57
For more information, you can refer this youtube video youtube.com/watch?v=_D1lCoYzivA
– Edward Choh
Jan 30 at 10:57
add a comment |
you can use like this...working good in my page
ion-content{
--background: #fff url('../../assets/imgs/intro.png') no-repeat center center / cover;
}
i hope it help you :)
edited Feb 28 at 13:58
Suraj Rao
24k86074
answered Feb 28 at 13:58
user9088454user9088454
10011
add a comment |
you can use like this...working good in my page
ion-content{
--background: #fff url('../../assets/imgs/intro.png') no-repeat center center / cover;
}
i hope it help you :)
edited Feb 28 at 13:58
Suraj Rao
24k86074
answered Feb 28 at 13:58
user9088454user9088454
10011
add a comment |
you can use like this...working good in my page
ion-content{
--background: #fff url('../../assets/imgs/intro.png') no-repeat center center / cover;
}
i hope it help you :)
edited Feb 28 at 13:58
Suraj Rao
24k86074
answered Feb 28 at 13:58
user9088454user9088454
10011
you can use like this...working good in my page
ion-content{
--background: #fff url('../../assets/imgs/intro.png') no-repeat center center / cover;
}
i hope it help you :)
edited Feb 28 at 13:58
Suraj Rao
24k86074
answered Feb 28 at 13:58
user9088454user9088454
10011
edited Feb 28 at 13:58
Suraj Rao
24k86074
edited Feb 28 at 13:58
Suraj Rao
24k86074
edited Feb 28 at 13:58
Suraj Rao
24k86074
24k86074
answered Feb 28 at 13:58
user9088454user9088454
10011
answered Feb 28 at 13:58
user9088454user9088454
10011
answered Feb 28 at 13:58
user9088454user9088454
10011
10011
add a comment |
add a comment |
It might be you CSS selector that is not enough acurate.
Try this :
ion-content.fondologin{
background-color: #111D12!important;
}
If it is still not working, then inspect your ion-content element and try to find your CSS, and which property or other selector is overriding it
answered Nov 29 '18 at 9:37
rguerinrguerin
511119
add a comment |
It might be you CSS selector that is not enough acurate.
Try this :
ion-content.fondologin{
background-color: #111D12!important;
}
If it is still not working, then inspect your ion-content element and try to find your CSS, and which property or other selector is overriding it
answered Nov 29 '18 at 9:37
rguerinrguerin
511119
add a comment |
It might be you CSS selector that is not enough acurate.
Try this :
ion-content.fondologin{
background-color: #111D12!important;
}
If it is still not working, then inspect your ion-content element and try to find your CSS, and which property or other selector is overriding it
answered Nov 29 '18 at 9:37
rguerinrguerin
511119
It might be you CSS selector that is not enough acurate.
Try this :
ion-content.fondologin{
background-color: #111D12!important;
}
If it is still not working, then inspect your ion-content element and try to find your CSS, and which property or other selector is overriding it
answered Nov 29 '18 at 9:37
rguerinrguerin
511119
answered Nov 29 '18 at 9:37
rguerinrguerin
511119
answered Nov 29 '18 at 9:37
rguerinrguerin
511119
answered Nov 29 '18 at 9:37
rguerinrguerin
511119
511119
add a comment |
add a comment |
Try this one:
:host {
ion-content {
ion-background-color: #d5ffd5;
}
}
//Or
page-name{
ion-content {
ion-background-color: #d5ffd5;
}
}
edited Dec 27 '18 at 10:02
Derviş Kayımbaşıoğlu
15.7k22042
answered Dec 27 '18 at 9:18
Rahul JogranaRahul Jograna
12814
It is recommended to add some descriptions for the answer you've posted
– Derviş Kayımbaşıoğlu
Dec 27 '18 at 10:02
add a comment |
Try this one:
:host {
ion-content {
ion-background-color: #d5ffd5;
}
}
//Or
page-name{
ion-content {
ion-background-color: #d5ffd5;
}
}
edited Dec 27 '18 at 10:02
Derviş Kayımbaşıoğlu
15.7k22042
answered Dec 27 '18 at 9:18
Rahul JogranaRahul Jograna
12814
It is recommended to add some descriptions for the answer you've posted
– Derviş Kayımbaşıoğlu
Dec 27 '18 at 10:02
add a comment |
Try this one:
:host {
ion-content {
ion-background-color: #d5ffd5;
}
}
//Or
page-name{
ion-content {
ion-background-color: #d5ffd5;
}
}
edited Dec 27 '18 at 10:02
Derviş Kayımbaşıoğlu
15.7k22042
answered Dec 27 '18 at 9:18
Rahul JogranaRahul Jograna
12814
Try this one:
:host {
ion-content {
ion-background-color: #d5ffd5;
}
}
//Or
page-name{
ion-content {
ion-background-color: #d5ffd5;
}
}
edited Dec 27 '18 at 10:02
Derviş Kayımbaşıoğlu
15.7k22042
answered Dec 27 '18 at 9:18
Rahul JogranaRahul Jograna
12814
edited Dec 27 '18 at 10:02
Derviş Kayımbaşıoğlu
15.7k22042
edited Dec 27 '18 at 10:02
Derviş Kayımbaşıoğlu
15.7k22042
edited Dec 27 '18 at 10:02
Derviş Kayımbaşıoğlu
15.7k22042
15.7k22042
answered Dec 27 '18 at 9:18
Rahul JogranaRahul Jograna
12814
answered Dec 27 '18 at 9:18
Rahul JogranaRahul Jograna
12814
answered Dec 27 '18 at 9:18
Rahul JogranaRahul Jograna
12814
12814
It is recommended to add some descriptions for the answer you've posted
– Derviş Kayımbaşıoğlu
Dec 27 '18 at 10:02
add a comment |
It is recommended to add some descriptions for the answer you've posted
– Derviş Kayımbaşıoğlu
Dec 27 '18 at 10:02
It is recommended to add some descriptions for the answer you've posted
– Derviş Kayımbaşıoğlu
Dec 27 '18 at 10:02
It is recommended to add some descriptions for the answer you've posted
– Derviş Kayımbaşıoğlu
Dec 27 '18 at 10:02
add a comment |
For changing the background on only one page:
ion-content{
--ion-background-color: #00ABE1 !important;
}
Do not forget the !important or it might not work.
answered Jan 9 at 10:16
Ivo NikolovIvo Nikolov
812
add a comment |
For changing the background on only one page:
ion-content{
--ion-background-color: #00ABE1 !important;
}
Do not forget the !important or it might not work.
answered Jan 9 at 10:16
Ivo NikolovIvo Nikolov
812
add a comment |
For changing the background on only one page:
ion-content{
--ion-background-color: #00ABE1 !important;
}
Do not forget the !important or it might not work.
answered Jan 9 at 10:16
Ivo NikolovIvo Nikolov
812
For changing the background on only one page:
ion-content{
--ion-background-color: #00ABE1 !important;
}
Do not forget the !important or it might not work.
answered Jan 9 at 10:16
Ivo NikolovIvo Nikolov
812
answered Jan 9 at 10:16
Ivo NikolovIvo Nikolov
812
answered Jan 9 at 10:16
Ivo NikolovIvo Nikolov
812
answered Jan 9 at 10:16
Ivo NikolovIvo Nikolov
812
812
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53531819%2fhow-to-set-background-color-ionic-4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
could you try using [ngClass] or [class] attribute and try?
– Hrishikesh Kale
Nov 29 '18 at 4:43
Are u using this inside app scss file?
– Sachila Ranawaka
Nov 29 '18 at 4:58
1
have you tried this
ion-content{ --ion-background: #111D12 !important}– Mohan Gopi
Nov 29 '18 at 10:51
I am trying it inside app scss or inside my component sass with no success
– Kevin Sanchez
Nov 29 '18 at 21:35