Possible to modify alert shortcodes?

  • Posted in : Readme
  • Johnny
    Participant

    For example, could I make an “info” alert in blue?

    I’ve tried this just in case:
    [alert title="Note:" type="info" color="blue"]Text here.[/alert]

    But it didn’t work.

    Is there some custom CSS I could throw in to make that happen? I would like to keep the yellow info alert as well though…

    Thanks for any help!

    serkan
    Moderator

    Hi Johnny,
    You can use this custom css code;

    .alert.error { border-color: blue; }

    Thanks

    Johnny
    Participant

    Thanks, Serkan!

    You inspired me to learn more about CSS and I ended up defining a new type of alert:

    .alert.series { border-color: #45FBDCE }
    .alert.series:before { content: “\e85c”; color: #5FBDCE; }

    Using this, I can make new alerts, customize both the color of the outline and the icon, and change the icon altogether!

    serkan
    Moderator

    You’re welcome, please don’t forget to rate the theme on themeforest if you liked it, thanks.

    jvdgtl
    Participant

    Hi guys,

    This is interesting, where does the \e85c come from?

    Johan

    serkan
    Moderator

    Hi, You had the answer before in related topic;
    https://www.pixelwars.org/forums/topic/fontawesome/
    Thanks

    jvdgtl
    Participant

    Hi Serkan,

    I don’t really get what you mean. That topic was about different shortcodes.

    Anyway, this code does not seem work for me..

    <div class=”alert”><i class=”fa fa-bicycle”>What are you waiting for? Buy now and begin blogging.</i></div>

    Can you correct me where i am wrong?

    serkan
    Moderator

    Hi, I would like to help you. Could you please explain to me what would you like to do and what kind of customization you need?
    Thanks

    jvdgtl
    Participant

    Hi Serken,

    Ok, i try to find a way to display an font awesome icon in the alert short code. But the code i just shared did not work. Can you supply the way it could be done?

    Johan

    serkan
    Moderator

    Hi Johan,
    Could you please share the shortcode which is not working and please provide me the related url? I will have a look at the code.
    Thanks

    jvdgtl
    Participant

    Hi Serkan,

    I am trying it like this:

    <div class=”alert”><i class=”fa fa-bicycle”>What are you waiting for? Buy now and begin blogging.</i></div>

    Johan

    serkan
    Moderator

    Hi Johan, We used the fontello icons in the theme. You can find the whole icon list here.
    http://themes.pixelwars.org/readme/css/fonts/fontello/demo.html

    <div class="alert"><strong>NOTE:</strong> This is an alert message.</div>
    <div class="alert success"><strong>NOTE:</strong> This is an alert message.</div>
    <div class="alert info"><strong>NOTE:</strong> This is an alert message.</div>
    <div class="alert error"><strong>NOTE:</strong> This is an alert message.</div>
    

    You need to use the code like this in the text tab. If you customize the icon for the alert shortcode, you need to use the custom css code like this;

    .alert.info:before { content: "\e85c"; color: #FFB000; }
    .alert.error:before { content: "\e85d"; color: #FF6140; }
    .alert.success:before { content: "\e85b"; color: #5BCF80; }

    You can find the content id number in the first url. There is a check box on the right top corner. Activate the codes.
    Thanks

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register