Jump to content

About homepage bulletin board - EmbyServer 4.6.4.0


CarlosLima
 Share

Go to solution Solved by Happy2Play,

Recommended Posts

CarlosLima

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.

download.png

Edited by CarlosLima
Link to comment
Share on other sites

visproduction

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.

Link to comment
Share on other sites

CarlosLima

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.

Link to comment
Share on other sites

CarlosLima
Posted (edited)

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.

 

download111.png

Edited by CarlosLima
Link to comment
Share on other sites

CarlosLima
Posted (edited)

.

 

Edited by CarlosLima
Link to comment
Share on other sites

Happy2Play

@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;">

 

Link to comment
Share on other sites

CarlosLima
Posted (edited)

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.

download.png

Edited by CarlosLima
Link to comment
Share on other sites

Happy2Play
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.

download.png

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.

Link to comment
Share on other sites

CarlosLima

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.

Link to comment
Share on other sites

Happy2Play

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

image.thumb.png.ae85de7d80b9f45a5030004b2e040bbd.png

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

 

image.thumb.png.a42ecaa20c647bba4923ccd0884d7476.png

image.thumb.png.40b37f738197502ee612e0c53c62923b.png

image.thumb.png.8aef1442128bc4b67632228042575ab0.png

Edited by Happy2Play
added images
Link to comment
Share on other sites

  • Solution
Happy2Play

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

image.thumb.png.e76fcb2f9d0b0211b5e471952549555a.png

image.thumb.png.06f0a4232e1104d22830c9e1e48e3f7f.png

  • Thanks 1
Link to comment
Share on other sites

CarlosLima

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

Link to comment
Share on other sites

CarlosLima
Posted (edited)

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.

 

download.png

Edited by CarlosLima
Link to comment
Share on other sites

Happy2Play
2 hours ago, CarlosLima said:

Possibility of applying a link to the text/banner.

You can not add links with css.

Link to comment
Share on other sites

CarlosLima

Oops Sorry. TKS.

Link to comment
Share on other sites

Happy2Play

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.

image.thumb.png.f08fa50ce72c3483cef72ff3a5451309.png

div.mainAnimatedPages {top: 20px;}

image.thumb.png.f775251682774a8afda571d9cd243884.png

Link to comment
Share on other sites

CarlosLima

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.

Link to comment
Share on other sites

Happy2Play
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.

Link to comment
Share on other sites

CarlosLima

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

div.mainAnimatedPages {top: 20px;}

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

CarlosLima

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.

Screenshot_20210802-165011.png

Link to comment
Share on other sites

Happy2Play
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.

Screenshot_20210802-165011.png

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

 

  • Thanks 1
Link to comment
Share on other sites

CarlosLima
Posted (edited)

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

 

in PC

download.png

 

in SMARTPHONE

download.png

Edited by CarlosLima
Link to comment
Share on other sites

tomnjerry74

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!!!" 😂😂

image.thumb.png.e61127d6dfdeb73aab26e8391f1a1dfc.png

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 by tomnjerry74
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...