Possible to modify alert shortcodes?

  • Posted in : Readme
  • Johnny
    Participant
    12 July 2016 at 21:33
    #41971

    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
    14 July 2016 at 00:41
    #42125

    Hi Johnny,
    You can use this custom css code;

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

    Thanks

    Johnny
    Participant
    14 July 2016 at 08:35
    #42161

    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
    14 July 2016 at 11:07
    #42164

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

    jvdgtl
    Participant
    31 July 2018 at 15:50
    #55435

    Hi guys,

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

    Johan

    serkan
    Moderator
    31 July 2018 at 21:24
    #55456

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

    jvdgtl
    Participant
    1 August 2018 at 00:07
    #55460

    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
    2 August 2018 at 17:43
    #55485

    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
    2 August 2018 at 19:42
    #55493

    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
    3 August 2018 at 12:26
    #55505

    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
    7 August 2018 at 16:04
    #55562

    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
    8 August 2018 at 12:26
    #55578

    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
Readme - A Readable WordPress Theme
Login and Registration Log in · Register