Browser-sync: Is there a way to remove "Connected to Browser Sync" and "Injected: style.css"

[corysimmons]

It pops up over nav bars and such and is just really in the way. I didn't see an option for removing it and it ducks out of the way before I can find it's selector to display: none it.

[shakyShane]

notify: false

or if you're using it from the command line

--no-notify

Hope that helps :)

http://www.browsersync.io/docs/options/#option-notify

[corysimmons]

Ah crap, sorry, looked right over it.

[EarthmanWeb]

@corysimmons - Rather than hide it completely, I wanted it to show up still so I used this css to put it at the bottom right, out of the way :

#__bs_notify__ { top:95% !important; right: 10px !important; border-radius: 15px !important; height:60px !important; }

[shakyShane]

also you can style individual properties now

notify: {
    styles: {
        top: 'auto',
        bottom: '0'
    }
}

[shakyShane]

https://github.com/BrowserSync/browser-sync-client/blob/master/lib/notify.js#L6-L20

[EarthmanWeb]

Ahhh, even better - thanks @shakyShane !

[8bitPancakes]

@EarthmanWeb Thanks for suggestion

[EarthmanWeb]

@Kaffesumpen Thanks, but @shakyShane 's method of styling the notify box is less kludgy...

In case it's not clear, the code he provided would go in your bs-config.js file, replacing: notify:false (if you have it hidden already)

Ref: https://github.com/BrowserSync/browser-sync/wiki/Working-with-a-Config-File

If you are using browsersync with Gulp, then it would be put in your gulpfile.js file, inside your 'browser-sync' task definition, within the config object passed to the 'browserSync.init' function:

Ref : https://www.browsersync.io/docs/gulp/

---

@shakyShane - I noticed that the notify css option is not yet documented in the options page on the website... Is it still in Beta? If not, what's the process of having that added to the docs, please?

https://www.browsersync.io/docs/options/#option-notify

[donaldpipowitch]

@shakyShane I'd like to use .notify only for errors. Is there a way to do that?

[8bitPancakes]

@EarthmanWeb Less "kludgy" I don't know, just another way of doing it. The entire point is that you could access it with CSS and that was something I dident think about.
I for one dident want to add something to the js files as I just wanted to shift the position of the alert when I was working with styling to diffrent locations.

[deepumbabu]

Hi,

Can you explain to me wher i have to put this command
notify: false

[EarthmanWeb]

@deepumbabu : I tried to explain it as best I could in my comment above -
see:
https://github.com/BrowserSync/browser-sync/issues/344#issuecomment-174148375

@shakyshane - do you maybe have a link to more comprehensive documentation
for using the config arguments? The page in your docs that you linked to
above, with the option details, does not really explain _where_ to define the
options in the multiple use cases (ie: grunt, gulp, etc) - I
remember it originally took me quite some time to figure it out myself, and
it seems I'm not the only one who has run into issues with it...

T

On Tue, Mar 8, 2016 at 12:14 AM, deepumbabu [email protected]
wrote:

Hi,

Can you explain to me wher i have to put this command
notify: false

—
Reply to this email directly or view it on GitHub
https://github.com/BrowserSync/browser-sync/issues/344#issuecomment-193656557
.

[dengxiaozhen]

browserSync.init({
        server: "./",
        notify: {
            styles: {
                top: 'auto',
                bottom: '0',
                margin: '0px',
                padding: '5px',
                position: 'fixed',
                fontSize: '10px',
                zIndex: '9999',
                borderRadius: '5px 0px 0px',
                color: 'white',
                textAlign: 'center',
                display: 'block',
                backgroundColor: 'rgba(60, 197, 31, 0.498039)'
            }
        }
    });

[chanakaDe]

Have a issue.. Where I can add this style ? "notify: false" ?
I created the project using aurelia CLI and no css files there.

[anuraag977]

I encountered this issue while using angular2 quickstart. Ran using 'npm start'.

The solution :
-> create a bs-config.json file in your root folder
-> file content

{
    "notify" : false
}

-> save
-> npm start and the message should disappear