Alert Box Styling

  • Resolved feder80

    (@feder80)


    11 years, 8 months ago

    What is the difference between:
    [fruitful_alert type=”alert-block”]Oh snap! Change a few things up and try submitting again.[/fruitful_alert]

    [fruitful_alert type=”alert-success”]Oh snap! Change a few things up and try submitting again.[/fruitful_alert]

    [fruitful_alert type=”alert-info”]Oh snap! Change a few things up and try submitting again.[/fruitful_alert]

    [fruitful_alert type=”alert-danger”]Oh snap! Change a few things up and try submitting again.[/fruitful_alert]

    It all looks the same?

    Furthermore, how can I change the colour of the alert box from yellow (at the moment) to grey or red?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Bojan Radonic – WPMU DEV Support

    (@wpmudev-support4)

    11 years, 8 months ago

    Hey there feder80,

    You can change the background color of the alert box by adding some custom CSS. There is a custom CSS tab in the theme in Appearance >> Theme Options >> Custom CSS. Add this code there:

    .alert {
background-color: #fcf8e3!important;
}

    Replace the color hex value with the color of your choice. This should change the background color of the alert box. Normally I wouldn’t use the !important declaration. However, it can sometimes be a necessary evil when over-writing existing styles.

    Best regards,
    Bojan

    Thread Starter feder80

    (@feder80)

    11 years, 8 months ago

    Great thank you!
    I made the following changes:

    .alert {
background-color: #333333!important;
color: #ffffff!important;
}

    But how can I change the font style from bold to normal?

    Bojan Radonic – WPMU DEV Support

    (@wpmudev-support4)

    11 years, 8 months ago

    Hi again,

    Could you please give me URL to the page so I can take a closer look?

    Best regards,
    Bojan

    Thread Starter feder80

    (@feder80)

    11 years, 8 months ago

    I think I solved the problem:

    .alert {
font-family: open-sans, sans-serif;
background-color: #333333!important;
color: #ffffff!important;
font-weight: normal;
}

    But what is the difference between

    [fruitful_alert type="alert-success"]Oh snap! Change a few things up and try submitting again.[/fruitful_alert]

    and

    [fruitful_alert type="alert-info"]Oh snap! Change a few things up and try submitting again.[/fruitful_alert]

    Thread Starter feder80

    (@feder80)

    11 years, 8 months ago

    thank you!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Alert Box Styling’ is closed to new replies.