Announce

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.

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

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) 🙂