How to add a notice across all pages in CSS or Javascript?

user_847047 0
Viewed 374

I have this archived HTML page and while not wanting to change content want to add a notice saying:

This content is not updated any longer. Please see http://newdomain.com for more information. This is archive material retained for historical purposes and is frozen.

This is the code:

<TITLE>My Page</TITLE>
<style>
body {
font-family: Verdana, sans-serif;
font-size: 14px;
line-height: 18px;
background: #FFFFFF;
}
a {
text-decoration: none;
color: red;
}
div.sidebar {
background-color: yellow;
padding: 4px solid;
float: left;
height: 600px;
width: 110px;
}
div.content {
width: 430px;
height: 600px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
border: 1.5px solid;
}
div.content p {
font-size: 13px;
padding: 20px;
}
div.content img {
margin-left: 20px;
height: 90px;
}
</style>

<div class="sidebar">
<ul>
<li><a href="11.htm">About Us</a></li>
<li><a href="12.htm">Contact Us</a></li>
<li><a href="bestof2008.html">Best of 2008</a></li>
</div>
<div class="content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Derbyshire_flag.svg/1024px-Derbyshire_flag.svg.png">
<h1>Yourlocal.com</h1>
<h2>Welcome to our site</h2>
<h3>See the sidebar for regional content</h3>
<P>This is our website. More content soon, for the East Midlands region of England; we cover Leicestershire, Derbyshire and Nottinghamshire.</p>
</div>

It's in pure HTML and in a separate directory; note the above content is changed for privacy reasons.

Per the site owner's wishes, I can't change the info for historical reasons (apart maybe from the stylesheet for the notice and that's it), so a HTML or Javascript solution can only be used; no PHP since all files were stored with .htm or .html extensions (the site's moving host).

Is there a way in CSS to put that notice in a box with yellow background above every page?

In general, how could I apply such a notice? I've tried Google-ing but haven't found a workable solution without editing each and every page.

css html javascript
3 Answers

You can probably leverage ::before CSS pseudo-element: https://developer.mozilla.org/en-US/docs/Web/CSS/::before

This sample CSS will create a pseudo-element which will become the first child of the body tag.

body::before {
  display: block;
  width: 100%;
  background-color: yellow;
  content: "This content is not updated any longer. Please see http://newdomain.com for more information. This is archive material retained for historical purposes and is frozen.";
}
user_118263010

You could add a pseudo element to the <body> and style it to mimic your yellow background notice box. This way you don't have to explicitly add HTML to each page but the CSS creates the notice box for each page.

body::before {
  content: "This content is not updated any longer. Please see http://newdomain.com for more information. This is archive material retained for historical purposes and is frozen.";
  height: 100%;
  background: yellow;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
<TITLE>My Page</TITLE>
<style>
body {
font-family: Verdana, sans-serif;
font-size: 14px;
line-height: 18px;
background: #FFFFFF;
}
a {
text-decoration: none;
color: red;
}
div.sidebar {
background-color: yellow;
padding: 4px solid;
float: left;
height: 600px;
width: 110px;
}
div.content {
width: 430px;
height: 600px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
border: 1.5px solid;
}
div.content p {
font-size: 13px;
padding: 20px;
}
div.content img {
margin-left: 20px;
height: 90px;
}
</style>

<div class="sidebar">
<ul>
<li><a href="11.htm">About Us</a></li>
<li><a href="12.htm">Contact Us</a></li>
<li><a href="bestof2008.html">Best of 2008</a></li>
</div>
<div class="content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Derbyshire_flag.svg/1024px-Derbyshire_flag.svg.png">
<h1>Yourlocal.com</h1>
<h2>Welcome to our site</h2>
<h3>See the sidebar for regional content</h3>
<P>This is our website. More content soon, for the East Midlands region of England; we cover Leicestershire, Derbyshire and Nottinghamshire.</p>
</div>

user_113895810

To steal Tanner Dolby's idea, you can use a pseudo-element to add text to every page without modifying the markup (assuming every page already includes a <link> to the same stylesheet). This banner can not contain a link though, only text. If you want to include a clickable link in the banner, you must modify the markup of the page in some way.

Try adding this to the common stylesheet:

body {
  padding-top: 5rem;
}
body::before {
  content: 'This content is not updated any longer. Please see http://newdomain.com for more information. This is archive material retained for historical purposes and is frozen.';
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  padding: 1rem 1.5rem;
  line-height: 1.5rem;
  color: #000;
  background-color: #eabe3b;
  font-size: 1.2rem;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',sans-serif;
}
user_14669830
Related