diff --git a/README.md b/README.md
index c1bb4d9e..b5fe63c0 100644
--- a/README.md
+++ b/README.md
@@ -132,7 +132,45 @@ By enabling analytics we will be able to collect information on number of visits
If you do not enable analytics, no data will be collected and the `Was this page helpful?` component will not show.
-## Customize or disable the logo
+## Add an announcement banner to all pages
+
+> :warning: **Note:** This feature is currently only available for the Qiskit theme, it is not yet available in the Ecosystem theme
+
+
+The `qiskit` theme includes the ability to add a custom announcement banner to every page. You can configure this in your `conf.py` by adding your
+custom announcement text to the `theme_announcement` variable in the `html_context` object, for example:
+
+```
+html_context = {
+ "theme_announcement": "🎉 Custom announcement text!",
+}
+```
+The above code will enable the following banner:
+
+
+
+You can also optionally add a "Learn more" url by additionally setting the `announcement_url` in the `html_context`, like so:
+
+```
+html_context = {
+ "theme_announcement": "🎉 Custom announcement text!",
+ "announcement_url": "https://example.com"
+}
+```
+The above code will render the following banner:
+
+
+
+The default text for the link is "Learn more" but you can provide custom link text by setting the `announcement_url_text` in the `html_context`:
+```
+html_context = {
+ "theme_announcement": "🎉 Custom announcement text!",
+ "announcement_url": "https://example.com",
+ "announcement_url_text": "Check it out",
+}
+```
+
+## Customize or disable the Ecosystem theme logo
The `qiskit-ecosystem` theme includes the Qiskit Ecosystem logo by default.
@@ -154,7 +192,7 @@ html_theme_options = {
}
```
-## IBM Projects: how to use blue color scheme
+## IBM Projects: how to use blue color scheme for Ecosystem theme
By default, the `qiskit-ecosystem` theme uses purple as an accent color. Most projects should continue to use this, but certain highly IBM-affiliated projects like Qiskit IBM Runtime can change the accent color to blue by setting up `conf.py` like this:
diff --git a/example_docs/docs/conf.py b/example_docs/docs/conf.py
index 6b5dac74..e9d59c95 100644
--- a/example_docs/docs/conf.py
+++ b/example_docs/docs/conf.py
@@ -91,6 +91,10 @@
# This allows docs authors to have folders that can be
# closed and opened in the left sidebar.
"expandable_sidebar": True,
+ # Users of the theme can set the text and optional url for an announcement banner
+ "theme_announcement": "🎉 Custom announcement text!",
+ "announcement_url_text": "Check it out",
+ "announcement_url": "https://google.com",
}
docs_url_prefix = "ecosystem/example_docs"
diff --git a/src/qiskit_sphinx_theme/assets/styles/_announcement.scss b/src/qiskit_sphinx_theme/assets/styles/_announcement.scss
new file mode 100644
index 00000000..bc82f9e4
--- /dev/null
+++ b/src/qiskit_sphinx_theme/assets/styles/_announcement.scss
@@ -0,0 +1,47 @@
+/* This code is a Qiskit project.
+ *
+ * (C) Copyright IBM 2023.
+ *
+ * This code is licensed under the Apache License, Version 2.0. You may
+ * obtain a copy of this license in the LICENSE.txt file in the root directory
+ * of this source tree or at http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Any modifications or derivative works of this code must retain this
+ * copyright notice, and modified files need to carry a notice indicating
+ * that they have been altered from the originals.
+ */
+
+ body {
+ --qiskit-top-nav-bar-height: 3.5rem;
+ }
+
+// custom announcement banner with purple gradient
+ .custom-announcement {
+ background: linear-gradient(90deg, rgba(245,239,255,1) 0%, rgba(255,255,255,1) 100%);
+ border-bottom: 1px solid var(--color-background-border);
+ padding: 14px var(--sidebar-item-spacing-horizontal);
+ display: flex;
+ align-items: center;
+ }
+
+// custom styling for inner text/link content for custom announcement banner
+ .custom-announcement-content {
+ text-align: left;
+ font-weight: bold;
+ color: black;
+
+ a {
+ color: var(--qiskit-color-purple);
+ font-weight: normal;
+ padding-left: 0.5rem;
+
+ &:hover {
+ color: var(--qiskit-color-purple);
+ }
+
+ .icon {
+ position: relative;
+ top: 0.15rem;
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss b/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss
index a6c928f8..fc1fcfb8 100644
--- a/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss
+++ b/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss
@@ -12,6 +12,7 @@
*/
@import "admonitions";
+@import "announcement";
@import "api";
@import "colors";
@import "custom-directives";
diff --git a/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/page.html b/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/page.html
index c8674034..ae55609c 100644
--- a/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/page.html
+++ b/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/page.html
@@ -28,9 +28,19 @@
{% if theme_announcement -%}
-