Announce

010101

Announce

Abandoned

A Flarum extension. Make an announcement appear at the top of your forum. You may edit the message from the admin using the extension's settings module. Click the bullhorn (top left of site) to see the announcement. Click the "x" to close it. When the announcement is no longer needed, simply deactivate the extension in your admin. When you're ready to announce something new, reactivate the extension and type a new message.

The following screenshots are the mobile experience. The desktop experience is very similar. Also, if you don't like this layout/styling, keep scrolling. You have another option!

The announcement bullhorn:

After clicking the bullhorn:

Installation

composer require zerosonesfun/announce

Updating

composer update zerosonesfun/announce
php flarum cache:clear

Customization Tips

If you don't like the color of the bullhorn icon (which is what you click on to view the announcement) simply add custom CSS to your custom CSS box in the appearance section of your admin dashboard. For example, this will make the bullhorn bright white:

.Announce--Show.fas.fa-bullhorn.false {
    color: #fff !important;
}

If you don't like where the announcement is positioned at all, and would rather it be fixed to the side of your forum, add all of the following CSS to your Custom CSS. But first, a screenshot...
With the following CSS, the bullhorn will now have an orange background and will be stuck to the side; once clicked the message is also stuck to the side. Caveat: With this style, I would not make your message any longer than about 780 characters. Otherwise, on mobile, the message may begin to be cut off. But, this has always been designed for fairly short/quick announcements, and 780 characters is quite a bit.

/* Announce */

@media only screen and (max-width: 767px) {
div #Announce {
    left: 0 !important;
}
}

#Announce {
    position: fixed !important;
    left:0 !important;
    top: 50% !important;
    z-index: 999999;
}

#Announce .container {
    margin: 0 !important;
    padding-left: 0 !important;
}

#Announce .Announce--Icons .Announce--Show {
    color: #fff !important;
    background-color: coral;
    padding: 10px;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

#Announce .Announce--Content {
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-right: 30px !important;
}

#Announce .Announce--Icons .Announce--Hide {
    color: #fff !important;
    position: absolute !important;
    right: 35px !important;
    top: 10px !important;
}

@media only screen and (min-width: 1px) {
  #Announce .container {
    width: 400px;
  }
}

/* End of Announce */

Alshain

010101

If the announcement is shorter than 3 letters, is it possible to add the command not to display the icon?

So we don't have to turn the plug on and off. If there is no announcement, the icon should not be displayed.

I think the following code will work.

view() { var text = app.forum.attribute('zerosonesfun-announce.text'); if(text.toString().length > 3){ return ( <div id="Announce" className={this.open && 'showing'}> <div className="container"> <div className="Announce--Content Button--primary"> {m.trust(app.forum.attribute('zerosonesfun-announce.text') || '')} </div> <div className="Announce--Icons"> <i className={Footer--Show fas fa-bullhorn ${this.open && 'hidden'}} onclick={() => (this.open = true)} /> <i className={Footer--Hide fa fa-times-circle ${!this.open && 'hidden'}} onclick={() => (this.open = false)} /> </div> </div> </div> ); }

katos

Great looking extension! Good job @010101

010101

A quick hack/addition I thought I'd share for this extension. Maybe one day I'll build in things like this. But for now, I wanted something super quick and easy to add to this so that the announcement icon stands out a little more. So far, this is the quickest solution I've found which doesn't involve me having to change the extension code. Just add this CSS to your custom CSS box in your admin. Then when you activate this extension the bullhorn icon will now pulse once or twice. I went with once or twice so that is isn't as annoying, yet still eye catching so your users know that it is something important. And, as long as you are only using this extension for announcements which maybe only need to be up for a few days or a week, the pulsing definitely shouldn't be too annoying.

If anyone comes up with other helpful styling hacks or JavaScript hacks for this please post them within this thread. 🙂

i.Announce--Show.fas.fa-bullhorn{
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
  animation: announce-pulse 1.5s 2;
}
@keyframes announce-pulse {
  0% {
   transform: scale(0.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
  }
    100% {
     transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}

nitaaikumar

010101 If the non-logged-in guests and logged-in users, click the close button on this announcement popup, I hope they will never see it again? So I want it to be a one-time see even for guests. Is that possible?

010101

nitaaikumar That’s an important feature that’s missing. 😁It needs a cookie. 🍪

SteveXu200512

There is an issue when u stick whatever that called it will cover the logo

@010101

Pollux

SteveXu200512

I corrected the markup of the embedded image for you.

010101

SteveXu200512 Sorry, the image you posted is not working. I’m not sure what the issue is. You can move it around by targeting the elements with some CSS.

010101

SteveXu200512 I was able to see what you're talking about. I may come up with a fix in the future, but for right now, you can use your browser's dev console to find out what the CSS class name is for the icon, and then with positioning rules move it by adding CSS to your appearance page's custom CSS box. This might be the right rule to target, I can't test it right now: .Announce--Show.fas.fa-bullhorn.false

A final thing you could try until I can get around to troubleshooting this is manually edit the extension's less/css file (located in: vendor/zerosonesfun/announce/resources/less/forum.less). Tweak that until everything is positioned the way you want it.

Alshain I'm struggling to see the value in this. It's just as fast, if not faster, to turn the extension off when you don't need it. Also, this way the extra HTML, CSS, and JS is not being loaded when it's not in use. I know there's no noticeable performance gain/loss but it seems better that it is deactivated, and the code isn't loading at all, when you don't need it.

But, I never say never when folks give me suggestions/feedback. In other words, one day when I have time and I'm feeling like enhancing this extension, I may do this. Thanks!

Pollux

010101 Sorry, the image you posted is not working.

I guess it's a kind of hotlinking prevention mechanism. Copying the URL and pasting it into a new browser window works fine.

Pherinos

010101 Could you please say me how, gibe me an example, to place the horner in another place ?

010101

Pherinos I know it took a while, but here is one way to put the announcement somewhere else.

Introducing Theme "Wallflower"

A theme for Announce.

With the following CSS, the bullhorn will now have an orange background and will be stuck to the side; once clicked the message is also stuck to the side. Caveat: With this style, I would not make your message any longer than about 780 characters. Otherwise, on mobile, the message may begin to be cut off. But, this has always been designed for fairly short/quick announcements, and 780 characters is quite a bit.

/* Announce */

@media only screen and (max-width: 767px) {
div #Announce {
    left: 0 !important;
}
}

#Announce {
    position: fixed !important;
    left:0 !important;
    top: 50% !important;
    z-index: 999999;
}

#Announce .container {
    margin: 0 !important;
    padding-left: 0 !important;
}

#Announce .Announce--Icons .Announce--Show {
    color: #fff !important;
    background-color: coral;
    padding: 10px;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

#Announce .Announce--Content {
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-right: 30px !important;
}

#Announce .Announce--Icons .Announce--Hide {
    color: #fff !important;
    position: absolute !important;
    right: 35px !important;
    top: 10px !important;
}

@media only screen and (min-width: 1px) {
  #Announce .container {
    width: 400px;
  }
}

/* End of Announce */

If you like this styling better than the original, please like this post and/or reply and say so. If enough people prefer this styling, then in time I could make this the default styling.

Littlegolden

010101 Thank you, do you have a demo website?

tolgaaaltas

010101 better than first one. Thank you.

010101

Littlegolden https://sitbreathe.be - but, I may not keep the announcement up very long. But it's up right now if you want to check it out.

010101

And, just in case someone has already implemented this (the new CSS) at their forum, I just had to make a couple tweaks. I tested it on my iPhone and the announcement box needed to be a little smaller.

I've updated the CSS. If you are just tuning in, the new CSS is a few posts up, or in the original post. 🔼 This is CSS you can add to your custom CSS to change how/where the announcement appears.

010101

This is now abandoned and no longer available to install. Should be tagged incompatible. (@Prosperous) 🙂