This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
commit 26d4c00749a84362f69738a30b7b44ae9067e319
Author: Marcus Christie <machris...@apache.org>
AuthorDate: Mon May 4 11:40:57 2020 -0400
AIRAVATA-3306 background banner image recipe
---
docs/cms.md | 32 +++++++++++++++++++++++++++-----
docs/images/banner_image.png | Bin 0 -> 274018 bytes
requirements-dev.txt | 1 +
3 files changed, 28 insertions(+), 5 deletions(-)
diff --git a/docs/cms.md b/docs/cms.md
index 206c9b3..945794e 100644
--- a/docs/cms.md
+++ b/docs/cms.md
@@ -1,6 +1,4 @@
-# CMS
-
## USING CMS
#### Logging in to CMS Dashboard
@@ -43,9 +41,9 @@
7. To create a new page as a child of "Home". you need to click on "Home" Link.
8. Then Click on "**ADD CHILD PAGE**" link.
9. Choose a page template type. Currently, three of them are available.
- * Blank Page -> (Build a page from scratch (Best Way))
- * Cybergateway Home Page -> (Build an IU Themed Home Page)
- * Home Page -> (Build a seagrid website based Home page)
+ * Blank Page -> (Build a page from scratch (Best Way))
+ * Cybergateway Home Page -> (Build an IU Themed Home Page)
+ * Home Page -> (Build a seagrid website based Home page)
10. You can explore other page templates. But Blank Page is the best way to go
as it enables you to build your website from scratch without mocking any other
website theme.
11. Click on "Blank Page".
12. Each page has four tabs namely:
@@ -253,3 +251,27 @@
* **Nav Extra** -> ( You can make a secondary navbar just below the main
navbar if you want to. You can also add a brand logo and links to this navbar.
You can customize its color and other properties by giving a custom class
selector and specifying styles in "**Custom CSS**". If you don't want it to
appear on a particular page, you can visit that particular page and go to
"**Customization**" Tab and set "**Show Nav Extra**" to No. `Do not add
additional nav extra by clicking Add Nav [...]
* **Navbar** -> ( This is the main navbar which exists across every page.
When you click on Navbar you can add Logo image and text. If you don't want it
to appear on a particular page, you can visit that particular page and go to
"**Customization**" Tab and set "**Show Navbar**" to No. It has a pre-defined
class selector named '**main-nav**'. you can visit "**Custom Css** and write a
css block with the '.main-nav' and give it some styles. When you click on
Navbar you can add Logo ima [...]
+## RECIPES
+
+### Banner background image
+
+Add a background banner image that spans the entire width of the browser.
+
+
+
+1. Add a new row.
+2. Add a **Full width container**.
+3. Set the **inline styles** to:
+
+```
+background-size: cover;
+background-repeat: no-repeat;
+background-position: center;
+```
+
+4. Select or upload the **Background image**.
+5. Add *Row Content* as usual. However, if you just want the background
+ banner image without foreground content, then add a **Placeholder** block to
+ the row content and then add to the container **inline styles**
+ `height: 200px;` or whatever height you want for the banner image.
+
diff --git a/docs/images/banner_image.png b/docs/images/banner_image.png
new file mode 100644
index 0000000..1646f17
Binary files /dev/null and b/docs/images/banner_image.png differ
diff --git a/requirements-dev.txt b/requirements-dev.txt
index b90575d..d399484 100644
--- a/requirements-dev.txt
+++ b/requirements-dev.txt
@@ -2,5 +2,6 @@
flake8==3.5.0
flake8-isort==2.5
mkdocs==1.0.4
+Markdown==3.2.1
-e ".[dev]"
