About homepage bulletin board - EmbyServer 4.6.4.0

[CarlosLima 150]

Hi,
I would like to use a line to have a notice board for users so that I can edit the text, for example, inform maintenance schedule etc.
Thank you very much in advance.

PS: If the text can be linked, even better, but it's not essential.

Edited July 23, 2021 by CarlosLima

[visproduction 250]

That sounds like a possible feature option.  What about having a HTML welcome page with any notices you like for users to see and a button to continue to the Emby server?  You can even make the forwarding automatic after 15 seconds, but people would possible miss your announcements.   it's your HTML page, so you can create any look you want.

[CarlosLima 150]

Hi,
Thank you for your message. I have a page as suggested, however what I really need is a CSS to have the banner visible after login.

[Happy2Play 9352]

Have you looked at this topic?  But no pure css method.

https://emby.media/community/index.php?/topic/46788-notice-box-that-can-be-closed/&do=findComment&comment=725450

 

Edited July 27, 2021 by Happy2Play

[CarlosLima 150]

Hi, yes, thanks for displaying the link to the other thread here and I posted my solution to the existing thread as well.
Thanks again for that.

 

Edited July 26, 2021 by CarlosLima

[CarlosLima 150]

.

 

Edited July 27, 2021 by CarlosLima

[Happy2Play 9352]

@CarlosLimaDoesn't skinheader actually cover your Alert/Bulliten?  I know in my test it is behind the header and unclickable since the header is load over the home.html.

As for the skinheader adjust this, here is the default.

div.headerTop-withSectionTabs {
    padding-bottom: 3em;
}

For your custom links just remove top or adjust your assigned style.

style="top:120px;text-align:center;position:relative;">

 

[CarlosLima 150]

Excelente.
I use full transparency on skinheader.
Can this "X" button be aligned on the same line as the text and go a little to the left?
If that's not possible, there's no problem, the banner was sensational.
Thank you very much.

Edited July 27, 2021 by CarlosLima

[Happy2Play 9352]

1 hour ago, CarlosLima said:

Excelente.
I use full transparency on skinheader.
Can this "X" button be aligned on the same line as the text and go a little to the left?
If that's not possible, there's no problem, the banner was sensational.
Thank you very much.

But can you click the X button to close the banner?

Not sure what you are doing as mine align.  But might be the inline-height css on .closebtn.

[CarlosLima 150]

Hi, got it.
You can't click on the X because it's transparent but it's on top, we just don't see it. In my case, to close it you have to go up the screen, then the X button becomes clickable.
I'll see the CSS tweaks later, thanks.

[Happy2Play 9352]

Since you are already editing html it is usually the simplest.  But you could do this via CSS without the button.

div.section0:before {
    content: "Alert: Server downtime at 8pm.";
    background: red;
    margin: 0px 18em;
    font-size: xx-large;
    color: yellow;
}

or

every page

div.headerMiddle {margin: 0 20em; display: block !important;}
div.headerMiddle:after {
    content: "Alert: Server downtime at 8pm.";
    background: red;
    font-size: 30px;
    color: yellow;
}

 

Edited July 27, 2021 by Happy2Play
added images

[Happy2Play 9352]

Another alternative on every page placing above header.

div.headroom:before {
    content: "Alert: Server downtime at 8pm.";
    background: red;
    font-size: xx-large;
    color: yellow;
    text-align: center;
}

[CarlosLima 150]

What a wonderful post, great job. I will try them all for sure.
Immensely grateful for all your help.
Thank you very much.

[CarlosLima 150]

Hey,
I tested the 3 options.
I chose to discard the previous option, because without it I don't need to edit the home.html and I don't need the "X" button.
Option 3 was my choice, as it is very simple to configure, edit the text and will not need to be redone at each new EmbyServer update.
Possibility of applying a link to the text/banner.
Strongly grateful to you.
Thank you very much.

 

Edited July 28, 2021 by CarlosLima

[Happy2Play 9352]

2 hours ago, CarlosLima said:

Possibility of applying a link to the text/banner.

You can not add links with css.

[CarlosLima 150]

Oops Sorry. TKS.

[Happy2Play 9352]

Noticed a issue with the headroom lower you may need to lower the mainpage also as the header could be cutting off options.  But will depend on the size of your banner.

div.mainAnimatedPages {top: 20px;}

[CarlosLima 150]

Hi,
I realized this and haven't been able to report it yet.
I'm going to test some tweaks in 20px (is that it?)
Tks so much.

[Happy2Play 9352]

1 minute ago, CarlosLima said:

Hi,
I realized this and haven't been able to report it yet.
I'm going to test some tweaks in 20px (is that it?)
Tks so much.

Yes,  depending on the size of the banner will determine the amount you need to add to top of page.

[CarlosLima 150]

This new line you created, do I need to apply it to some line of code?

div.mainAnimatedPages {top: 20px;}

[Happy2Play 9352]

3 minutes ago, CarlosLima said:

This new line you created, do I need to apply it to some line of code?

div.mainAnimatedPages {top: 20px;}

I just added to the existing code.

/*Announcement Banner*/
div.mainAnimatedPages {top: 20px;}
div.headroom:before {
    content: "Alert: Server downtime at 8pm.";
    background: red;
    font-size: x-large;
    color: yellow;
    text-align: center;
}

 

[CarlosLima 150]

Hey,
As I understand it, on the pc (web app) does not change the position of the lines, even changing the 20px to 10px, 2px, 40px.
On cell phone yes (image)
So I would like to know how to raise the red frame line or descend the yellow frame line.
Thanks again.

[Happy2Play 9352]

24 minutes ago, CarlosLima said:

Hey,
As I understand it, on the pc (web app) does not change the position of the lines, even changing the 20px to 10px, 2px, 40px.
On cell phone yes (image)
So I would like to know how to raise the red frame line or descend the yellow frame line.
Thanks again.

The "top" code shifts the entire page down, pc and mobile.  This does not affect the HeaderTop.

I use this to move the middle header up.

/*Move HeaderTop up*/
div.headerTop-withSectionTabs {padding: .8em 0 0;}
div.headerMiddle.sectionTabs {margin: 0 8em;}

But on small screen devices this does create a issue on libraries with lots of tabs.

I don't have your custom links code but previous post should cover this area.

https://emby.media/community/index.php?/topic/100171-about-homepage-bulletin-board-embyserver-4640/&do=findComment&comment=1050095

 

[CarlosLima 150]

Now you've made it perfect.
Very grateful for all your time and patience.

 

in PC

 

in SMARTPHONE

Edited August 3, 2021 by CarlosLima

[tomnjerry74 96]

After following along with this and the other thread, I've done a css-only version myself (using @Happy2Play's method - TY!). Just a little clean version if anyone else wants to use it. Keep in mind it only shows on the home screen.

Also keep in mind that anyone can see the content of the alert, regardless of being signed in or not. All they have to do is check the css.css file in the emby branding folder. So, if you're the careful type just make sure you don't put anything like, "I hope everyone is enjoying my 62TBs of pirated movies and tv shows produced by nearly every conceivable studio that I myself downloaded, hosted and aggregated for you!!!" 

div.homeSectionsContainer:before
{
	content:"ALERT! Your message here.";
	display:block;
	width:50%;
	margin:auto;
	margin-bottom:20px;
	z-index:999;
	padding:12px;
	background-color:#2c2c2c;
	color:#fff;
	text-align:center;
	border-radius:5px;
	border:solid #b997fc;
	border-width:0 0 0 4px
}

 

Edited August 4, 2021 by tomnjerry74