Setting default style of Ionic alert popup elements

Multi tool use
Multi tool use












2















I followed the answers found here: Ionic 2 Alert customization



But I can't find all the other classes or elements that have to be styled so alerts look like I want.



I edited my code so it looks like this:



app.scss:



.alertCustomCss {
background-color: color($colors, dark, base);
color: white;
button {
color: white !important;
}
}


ts:



const alert = this.alertCtrl.create({
title: title,
subTitle: msg,
buttons: ['OK'],
cssClass: 'alertCustomCss'
});
alert.present();


But this makes all the text white, replaces the transparency of the modal page that holds the popup and sets it to set 'background-color' (so the page that called the popup is not visible anymore). The text of the button is set to white.



Please notice that the background around the popup is not transparent anymore.



enter image description here



The question is how to set the background color of the text placeholder and not the whole page? What css properties to use?



Broader question: What are the elements (css classes or directives) of the alert popup that can be styled? Title text color, content text font, etc..










share|improve this question

























  • All element in the page can be styled by css. So you just need to find the class and add your style. If it does not work so your style is wrong. You need to find a way to correct it. It is just html and css, no need Ionic knowledge. Remember, some style need !important to override

    – Duannx
    Nov 9 '17 at 2:29











  • @Duannx Thank you for the advice. Do you know what css properties do I have to set to change the background of an ionic alert window? What did you use to change yours? Or even better where can I find that info? The docs don't say much about this

    – Tadija Bagarić
    Nov 9 '17 at 6:37






  • 1





    Just inspect your element in browser dev tool. You will find all class what you need to style.

    – Duannx
    Nov 9 '17 at 6:49
















2















I followed the answers found here: Ionic 2 Alert customization



But I can't find all the other classes or elements that have to be styled so alerts look like I want.



I edited my code so it looks like this:



app.scss:



.alertCustomCss {
background-color: color($colors, dark, base);
color: white;
button {
color: white !important;
}
}


ts:



const alert = this.alertCtrl.create({
title: title,
subTitle: msg,
buttons: ['OK'],
cssClass: 'alertCustomCss'
});
alert.present();


But this makes all the text white, replaces the transparency of the modal page that holds the popup and sets it to set 'background-color' (so the page that called the popup is not visible anymore). The text of the button is set to white.



Please notice that the background around the popup is not transparent anymore.



enter image description here



The question is how to set the background color of the text placeholder and not the whole page? What css properties to use?



Broader question: What are the elements (css classes or directives) of the alert popup that can be styled? Title text color, content text font, etc..










share|improve this question

























  • All element in the page can be styled by css. So you just need to find the class and add your style. If it does not work so your style is wrong. You need to find a way to correct it. It is just html and css, no need Ionic knowledge. Remember, some style need !important to override

    – Duannx
    Nov 9 '17 at 2:29











  • @Duannx Thank you for the advice. Do you know what css properties do I have to set to change the background of an ionic alert window? What did you use to change yours? Or even better where can I find that info? The docs don't say much about this

    – Tadija Bagarić
    Nov 9 '17 at 6:37






  • 1





    Just inspect your element in browser dev tool. You will find all class what you need to style.

    – Duannx
    Nov 9 '17 at 6:49














2












2








2








I followed the answers found here: Ionic 2 Alert customization



But I can't find all the other classes or elements that have to be styled so alerts look like I want.



I edited my code so it looks like this:



app.scss:



.alertCustomCss {
background-color: color($colors, dark, base);
color: white;
button {
color: white !important;
}
}


ts:



const alert = this.alertCtrl.create({
title: title,
subTitle: msg,
buttons: ['OK'],
cssClass: 'alertCustomCss'
});
alert.present();


But this makes all the text white, replaces the transparency of the modal page that holds the popup and sets it to set 'background-color' (so the page that called the popup is not visible anymore). The text of the button is set to white.



Please notice that the background around the popup is not transparent anymore.



enter image description here



The question is how to set the background color of the text placeholder and not the whole page? What css properties to use?



Broader question: What are the elements (css classes or directives) of the alert popup that can be styled? Title text color, content text font, etc..










share|improve this question
















I followed the answers found here: Ionic 2 Alert customization



But I can't find all the other classes or elements that have to be styled so alerts look like I want.



I edited my code so it looks like this:



app.scss:



.alertCustomCss {
background-color: color($colors, dark, base);
color: white;
button {
color: white !important;
}
}


ts:



const alert = this.alertCtrl.create({
title: title,
subTitle: msg,
buttons: ['OK'],
cssClass: 'alertCustomCss'
});
alert.present();


But this makes all the text white, replaces the transparency of the modal page that holds the popup and sets it to set 'background-color' (so the page that called the popup is not visible anymore). The text of the button is set to white.



Please notice that the background around the popup is not transparent anymore.



enter image description here



The question is how to set the background color of the text placeholder and not the whole page? What css properties to use?



Broader question: What are the elements (css classes or directives) of the alert popup that can be styled? Title text color, content text font, etc..







css ionic-framework ionic2 ionic3






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 2 at 6:37







Tadija Bagarić

















asked Nov 8 '17 at 8:26









Tadija BagarićTadija Bagarić

1,46411632




1,46411632













  • All element in the page can be styled by css. So you just need to find the class and add your style. If it does not work so your style is wrong. You need to find a way to correct it. It is just html and css, no need Ionic knowledge. Remember, some style need !important to override

    – Duannx
    Nov 9 '17 at 2:29











  • @Duannx Thank you for the advice. Do you know what css properties do I have to set to change the background of an ionic alert window? What did you use to change yours? Or even better where can I find that info? The docs don't say much about this

    – Tadija Bagarić
    Nov 9 '17 at 6:37






  • 1





    Just inspect your element in browser dev tool. You will find all class what you need to style.

    – Duannx
    Nov 9 '17 at 6:49



















  • All element in the page can be styled by css. So you just need to find the class and add your style. If it does not work so your style is wrong. You need to find a way to correct it. It is just html and css, no need Ionic knowledge. Remember, some style need !important to override

    – Duannx
    Nov 9 '17 at 2:29











  • @Duannx Thank you for the advice. Do you know what css properties do I have to set to change the background of an ionic alert window? What did you use to change yours? Or even better where can I find that info? The docs don't say much about this

    – Tadija Bagarić
    Nov 9 '17 at 6:37






  • 1





    Just inspect your element in browser dev tool. You will find all class what you need to style.

    – Duannx
    Nov 9 '17 at 6:49

















All element in the page can be styled by css. So you just need to find the class and add your style. If it does not work so your style is wrong. You need to find a way to correct it. It is just html and css, no need Ionic knowledge. Remember, some style need !important to override

– Duannx
Nov 9 '17 at 2:29





All element in the page can be styled by css. So you just need to find the class and add your style. If it does not work so your style is wrong. You need to find a way to correct it. It is just html and css, no need Ionic knowledge. Remember, some style need !important to override

– Duannx
Nov 9 '17 at 2:29













@Duannx Thank you for the advice. Do you know what css properties do I have to set to change the background of an ionic alert window? What did you use to change yours? Or even better where can I find that info? The docs don't say much about this

– Tadija Bagarić
Nov 9 '17 at 6:37





@Duannx Thank you for the advice. Do you know what css properties do I have to set to change the background of an ionic alert window? What did you use to change yours? Or even better where can I find that info? The docs don't say much about this

– Tadija Bagarić
Nov 9 '17 at 6:37




1




1





Just inspect your element in browser dev tool. You will find all class what you need to style.

– Duannx
Nov 9 '17 at 6:49





Just inspect your element in browser dev tool. You will find all class what you need to style.

– Duannx
Nov 9 '17 at 6:49












2 Answers
2






active

oldest

votes


















2














I edited all my AlertController.create methods to look like this:



const alert = this.alertCtrl.create({
title: title,
subTitle: msg,
buttons: ['OK'],
cssClass: 'alertCustomCss' // <- added this
});


And I added this to app.scss:



.alertCustomCss {
color: white; // text color for basic alerts
button {
color: white !important;
background-color: color($colors, secondary, base) !important;
}
.alert-message {
color: white; // text color for confirm alerts
}
.alert-wrapper {
background-color: color($colors, dark, base);
}
}





share|improve this answer































    0














    if you enclosed the desired word in "span" like:



    title: <span class='myAlertTitle'>Special Dogs</span>


    and then you add that class in the app.scss normally, it will apply even you don't define cssClass attribute to the Alert Object.



    It's not the OOTB way but you have more control over the style, I think...






    share|improve this answer























      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
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47174779%2fsetting-default-style-of-ionic-alert-popup-elements%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      2














      I edited all my AlertController.create methods to look like this:



      const alert = this.alertCtrl.create({
      title: title,
      subTitle: msg,
      buttons: ['OK'],
      cssClass: 'alertCustomCss' // <- added this
      });


      And I added this to app.scss:



      .alertCustomCss {
      color: white; // text color for basic alerts
      button {
      color: white !important;
      background-color: color($colors, secondary, base) !important;
      }
      .alert-message {
      color: white; // text color for confirm alerts
      }
      .alert-wrapper {
      background-color: color($colors, dark, base);
      }
      }





      share|improve this answer




























        2














        I edited all my AlertController.create methods to look like this:



        const alert = this.alertCtrl.create({
        title: title,
        subTitle: msg,
        buttons: ['OK'],
        cssClass: 'alertCustomCss' // <- added this
        });


        And I added this to app.scss:



        .alertCustomCss {
        color: white; // text color for basic alerts
        button {
        color: white !important;
        background-color: color($colors, secondary, base) !important;
        }
        .alert-message {
        color: white; // text color for confirm alerts
        }
        .alert-wrapper {
        background-color: color($colors, dark, base);
        }
        }





        share|improve this answer


























          2












          2








          2







          I edited all my AlertController.create methods to look like this:



          const alert = this.alertCtrl.create({
          title: title,
          subTitle: msg,
          buttons: ['OK'],
          cssClass: 'alertCustomCss' // <- added this
          });


          And I added this to app.scss:



          .alertCustomCss {
          color: white; // text color for basic alerts
          button {
          color: white !important;
          background-color: color($colors, secondary, base) !important;
          }
          .alert-message {
          color: white; // text color for confirm alerts
          }
          .alert-wrapper {
          background-color: color($colors, dark, base);
          }
          }





          share|improve this answer













          I edited all my AlertController.create methods to look like this:



          const alert = this.alertCtrl.create({
          title: title,
          subTitle: msg,
          buttons: ['OK'],
          cssClass: 'alertCustomCss' // <- added this
          });


          And I added this to app.scss:



          .alertCustomCss {
          color: white; // text color for basic alerts
          button {
          color: white !important;
          background-color: color($colors, secondary, base) !important;
          }
          .alert-message {
          color: white; // text color for confirm alerts
          }
          .alert-wrapper {
          background-color: color($colors, dark, base);
          }
          }






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 14 '17 at 9:53









          Tadija BagarićTadija Bagarić

          1,46411632




          1,46411632

























              0














              if you enclosed the desired word in "span" like:



              title: <span class='myAlertTitle'>Special Dogs</span>


              and then you add that class in the app.scss normally, it will apply even you don't define cssClass attribute to the Alert Object.



              It's not the OOTB way but you have more control over the style, I think...






              share|improve this answer




























                0














                if you enclosed the desired word in "span" like:



                title: <span class='myAlertTitle'>Special Dogs</span>


                and then you add that class in the app.scss normally, it will apply even you don't define cssClass attribute to the Alert Object.



                It's not the OOTB way but you have more control over the style, I think...






                share|improve this answer


























                  0












                  0








                  0







                  if you enclosed the desired word in "span" like:



                  title: <span class='myAlertTitle'>Special Dogs</span>


                  and then you add that class in the app.scss normally, it will apply even you don't define cssClass attribute to the Alert Object.



                  It's not the OOTB way but you have more control over the style, I think...






                  share|improve this answer













                  if you enclosed the desired word in "span" like:



                  title: <span class='myAlertTitle'>Special Dogs</span>


                  and then you add that class in the app.scss normally, it will apply even you don't define cssClass attribute to the Alert Object.



                  It's not the OOTB way but you have more control over the style, I think...







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Dec 30 '18 at 20:08









                  Ari WaisbergAri Waisberg

                  458413




                  458413






























                      draft saved

                      draft discarded




















































                      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.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47174779%2fsetting-default-style-of-ionic-alert-popup-elements%23new-answer', 'question_page');
                      }
                      );

                      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







                      sJWrR9y0nszAP6bUnA,yXZ11GG558dpZ U3DGKZ,WzFWtF
                      a0kQRY0efjV2Y2O,oCTFkCpKOC8Yl,5welc1 nBE00f,1lr b ygF5,IUGst9hQt,NL,ApUJimEO84I DSSRmPJ07Co0jUUjqEvI6zJ ns0jbT

                      Popular posts from this blog

                      Monofisismo

                      Angular Downloading a file using contenturl with Basic Authentication

                      Olmecas