Ionic 3 load css from API/Server
I have an Ionic application. The data of the application are loaded by web service from a CMS. The user of the CMS can set individual colors. These colors can also be picked up via the web service.
But how can I reload them as CSS in my application?
css3 ionic3
asked Nov 16 '18 at 11:37
hydrococcushydrococcus
1791114
add a comment |
I have an Ionic application. The data of the application are loaded by web service from a CMS. The user of the CMS can set individual colors. These colors can also be picked up via the web service.
But how can I reload them as CSS in my application?
css3 ionic3
asked Nov 16 '18 at 11:37
hydrococcushydrococcus
1791114
add a comment |
I have an Ionic application. The data of the application are loaded by web service from a CMS. The user of the CMS can set individual colors. These colors can also be picked up via the web service.
But how can I reload them as CSS in my application?
css3 ionic3
asked Nov 16 '18 at 11:37
hydrococcushydrococcus
1791114
I have an Ionic application. The data of the application are loaded by web service from a CMS. The user of the CMS can set individual colors. These colors can also be picked up via the web service.
But how can I reload them as CSS in my application?
css3 ionic3
css3 ionic3
asked Nov 16 '18 at 11:37
hydrococcushydrococcus
1791114
asked Nov 16 '18 at 11:37
hydrococcushydrococcus
1791114
asked Nov 16 '18 at 11:37
hydrococcushydrococcus
1791114
asked Nov 16 '18 at 11:37
hydrococcushydrococcus
1791114
asked Nov 16 '18 at 11:37
hydrococcushydrococcus
1791114
1791114
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
That is very feasible . You just need to save the color locally and use Color binding or style binding to use it in your UI.
Example:
<ion-icon [style.color]="myCMSColor" name="phone-portrait"></ion-icon>
<div class="circle" [style.background]="myCMSColor">
Where myCMSColor is a string containing the Hex value of the user chosen color.
answered Nov 16 '18 at 12:37
Farabi AbdelwahedFarabi Abdelwahed
1449
Thank you, but so I have to set the CSS for each element. I'm looking for a way to override CSS globally. I thought about CSS custom properties, but I do not know how to overwrite them later.
– hydrococcus
Nov 16 '18 at 13:14
maybe you can find your answer here stackoverflow.com/questions/45466712/…
– Farabi Abdelwahed
Nov 16 '18 at 13:15
This assumes that the CSS already exists in the app.
– hydrococcus
Nov 16 '18 at 13:18
One idea is to get the colors via JSON webservice and write them to a local CSS file. : root {- my-color: # ffcc00;}
– hydrococcus
Nov 16 '18 at 13:18
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%2f53337096%2fionic-3-load-css-from-api-server%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
That is very feasible . You just need to save the color locally and use Color binding or style binding to use it in your UI.
Example:
<ion-icon [style.color]="myCMSColor" name="phone-portrait"></ion-icon>
<div class="circle" [style.background]="myCMSColor">
Where myCMSColor is a string containing the Hex value of the user chosen color.
answered Nov 16 '18 at 12:37
Farabi AbdelwahedFarabi Abdelwahed
1449
Thank you, but so I have to set the CSS for each element. I'm looking for a way to override CSS globally. I thought about CSS custom properties, but I do not know how to overwrite them later.
– hydrococcus
Nov 16 '18 at 13:14
maybe you can find your answer here stackoverflow.com/questions/45466712/…
– Farabi Abdelwahed
Nov 16 '18 at 13:15
This assumes that the CSS already exists in the app.
– hydrococcus
Nov 16 '18 at 13:18
One idea is to get the colors via JSON webservice and write them to a local CSS file. : root {- my-color: # ffcc00;}
– hydrococcus
Nov 16 '18 at 13:18
add a comment |
That is very feasible . You just need to save the color locally and use Color binding or style binding to use it in your UI.
Example:
<ion-icon [style.color]="myCMSColor" name="phone-portrait"></ion-icon>
<div class="circle" [style.background]="myCMSColor">
Where myCMSColor is a string containing the Hex value of the user chosen color.
answered Nov 16 '18 at 12:37
Farabi AbdelwahedFarabi Abdelwahed
1449
Thank you, but so I have to set the CSS for each element. I'm looking for a way to override CSS globally. I thought about CSS custom properties, but I do not know how to overwrite them later.
– hydrococcus
Nov 16 '18 at 13:14
maybe you can find your answer here stackoverflow.com/questions/45466712/…
– Farabi Abdelwahed
Nov 16 '18 at 13:15
This assumes that the CSS already exists in the app.
– hydrococcus
Nov 16 '18 at 13:18
One idea is to get the colors via JSON webservice and write them to a local CSS file. : root {- my-color: # ffcc00;}
– hydrococcus
Nov 16 '18 at 13:18
add a comment |
That is very feasible . You just need to save the color locally and use Color binding or style binding to use it in your UI.
Example:
<ion-icon [style.color]="myCMSColor" name="phone-portrait"></ion-icon>
<div class="circle" [style.background]="myCMSColor">
Where myCMSColor is a string containing the Hex value of the user chosen color.
answered Nov 16 '18 at 12:37
Farabi AbdelwahedFarabi Abdelwahed
1449
That is very feasible . You just need to save the color locally and use Color binding or style binding to use it in your UI.
Example:
<ion-icon [style.color]="myCMSColor" name="phone-portrait"></ion-icon>
<div class="circle" [style.background]="myCMSColor">
Where myCMSColor is a string containing the Hex value of the user chosen color.
answered Nov 16 '18 at 12:37
Farabi AbdelwahedFarabi Abdelwahed
1449
answered Nov 16 '18 at 12:37
Farabi AbdelwahedFarabi Abdelwahed
1449
answered Nov 16 '18 at 12:37
Farabi AbdelwahedFarabi Abdelwahed
1449
answered Nov 16 '18 at 12:37
Farabi AbdelwahedFarabi Abdelwahed
1449
1449
Thank you, but so I have to set the CSS for each element. I'm looking for a way to override CSS globally. I thought about CSS custom properties, but I do not know how to overwrite them later.
– hydrococcus
Nov 16 '18 at 13:14
maybe you can find your answer here stackoverflow.com/questions/45466712/…
– Farabi Abdelwahed
Nov 16 '18 at 13:15
This assumes that the CSS already exists in the app.
– hydrococcus
Nov 16 '18 at 13:18
One idea is to get the colors via JSON webservice and write them to a local CSS file. : root {- my-color: # ffcc00;}
– hydrococcus
Nov 16 '18 at 13:18
add a comment |
Thank you, but so I have to set the CSS for each element. I'm looking for a way to override CSS globally. I thought about CSS custom properties, but I do not know how to overwrite them later.
– hydrococcus
Nov 16 '18 at 13:14
maybe you can find your answer here stackoverflow.com/questions/45466712/…
– Farabi Abdelwahed
Nov 16 '18 at 13:15
This assumes that the CSS already exists in the app.
– hydrococcus
Nov 16 '18 at 13:18
One idea is to get the colors via JSON webservice and write them to a local CSS file. : root {- my-color: # ffcc00;}
– hydrococcus
Nov 16 '18 at 13:18
Thank you, but so I have to set the CSS for each element. I'm looking for a way to override CSS globally. I thought about CSS custom properties, but I do not know how to overwrite them later.
– hydrococcus
Nov 16 '18 at 13:14
Thank you, but so I have to set the CSS for each element. I'm looking for a way to override CSS globally. I thought about CSS custom properties, but I do not know how to overwrite them later.
– hydrococcus
Nov 16 '18 at 13:14
maybe you can find your answer here stackoverflow.com/questions/45466712/…
– Farabi Abdelwahed
Nov 16 '18 at 13:15
maybe you can find your answer here stackoverflow.com/questions/45466712/…
– Farabi Abdelwahed
Nov 16 '18 at 13:15
This assumes that the CSS already exists in the app.
– hydrococcus
Nov 16 '18 at 13:18
This assumes that the CSS already exists in the app.
– hydrococcus
Nov 16 '18 at 13:18
One idea is to get the colors via JSON webservice and write them to a local CSS file. : root {- my-color: # ffcc00;}
– hydrococcus
Nov 16 '18 at 13:18
One idea is to get the colors via JSON webservice and write them to a local CSS file. : root {- my-color: # ffcc00;}
– hydrococcus
Nov 16 '18 at 13:18
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%2f53337096%2fionic-3-load-css-from-api-server%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
