Fishbowl Website Documentation

# **Fishbowl Website Documentation** ## ** Content** In the admin toolbar, the **Content** tab is where you can view content, create content, see URL aliases, search the site, and more. ## ** View Content** Select View Content to view all content or select a content type to view specific content. ** Add Content** <hr style="height:1px;margin:0px 0 10px;padding:0;border:none;background:#EBEEF2;"> To add content to the website, you must be logged in with administrator privileges. Once you're logged in, hover over the ** Content** link from the Admin menu at the top of the page (you can also select the Content link to go to the main content page). In the dropdown menu under ** Content** you can either select ** Add Content** to go to the main Add Content page, or select the content type you wish to add from the dropdown. ## Global Styles In order to simplify certain aspects of content creation, as well as create consistency throughout the website, global classes are utilized on many of the elements on the website. The global classes will apply the same styles to the elements to which the classes are added on any page throughout the site. <hr style="height:1px;margin:20px 0;padding:0;border:none;background:#EBEEF2;"> ## Images Images for the site are located in the images folder within the Fishbowl theme directory. The path to the images folder is: **/themes/custom/fishbowl/images/** ### Image Styles The following classes can be added to any image throughout the website to apply the properties listed. |Class|Width|Max Width|Margin|Additional Properties| |---:|:---:|:---:|:---:|:---:| |`.icn`|`90%`|`85px`|`0 auto`|-| |`.sm`|`90%`|`150px`|`0 auto`|-| |`.md`|`90%`|`250px`|`0 auto`|-| |`.lg`|`90%`|`350px`|`0 auto`|-| |`.xl`|`90%`|`550px`|`10px auto`|-| |`.xxl`|`90%`|`750px`|`10px auto`|-| |`.full`|`90%`|`90%`|`20px auto`|-| |`.fullsize`|`100%`|`100%`|`20px auto`|-| |`.margin-10`|-|-|-|`margin: 10px`| |`.margin-20`|-|-|-|`margin: 20px`| |`.margin-30`|-|-|-|`margin: 30px`| |`.margin-top-10`|-|-|-|`margin-top: 10px`| |`.margin-top-20`|-|-|-|`margin-top: 20px`| |`.margin-top-30`|-|-|-|`margin-top: 30px`| |`.margin-bottom-10`|-|-|-|`margin-bottom: 10px`| |`.margin-bottom-20`|-|-|-|`margin-bottom: 20px`| |`.margin-bottom-30`|-|-|-|`margin-bottom: 30px`| |`.margin-left-10`|-|-|-|`margin-left: 10px`| |`.margin-left-20`|-|-|-|`margin-left: 20px`| |`.margin-left-30`|-|-|-|`margin-left: 30px`| |`.margin-right-10`|-|-|-|`margin-right: 10px`| |`.margin-right-20`|-|-|-|`margin-right: 20px`| |`.margin-right-30`|-|-|-|`margin-right: 30px`| |`.float-left`|-|-|-|`float: left`| |`.float-right`|-|-|-|`float: right`| |`.left`|-|-|`0 auto 0 0`|Mobile margin is `0 auto`| |`.right`|-|-|`0 0 0 auto`|Mobile margin is `0 auto`| |`.center`|-|-|`0 auto`|-| |`.is-rounded`|-|-|-|`border-radius: 6px`| |`.is-rounded-more`|-|-|-|`border-radius: 8px`| |`.is-circle`|-|-|-|`border-radius: 50%`| |`.is-shadowed`|-|-|-|`box-shadow: 0px 15px 25px rgba(50,50,93,.125), 0px 5px 15px rgba(0,0,0,.07)`| Example Image tag with applied classes: ```htmlmixed= <img src="/path-to-images/utahjazz.jpg" class="lg is-rounded is-shadowed"> ``` <hr style="height:1px;margin:20px 0;padding:0;border:none;background:#EBEEF2;"> ### Typography Styles The following classes can be added to any typographical element throughout the website to apply the properties listed. |Class|Properties| |---:|:---| |`.ctr`|`text-align: center`| |`.fa`|`vertical-align: middle`| |`.narrow`|`display: block` `width: 75%` `margin-left: auto !important` `margin-right: auto !important`| |`.narrow-ctr`|`display: block` `width: 90%` `max-width: 800px` `margin: 20px auto` `text-align: center`| |`.border-right`|`+border-right(1px solid $base-bg)`| |`.orange`|`color: #F4801A !important`| |`.blue`|`color: #125089 !important`| |`.uppercase`|`text-transform: uppercase !important`| |`.midquote`|`display: block` `width: 90%` `max-width: 450px` `padding: 0` `margin: 40px auto` `font-size: 1.225em` `font-weight: 300` `font-style: italic` `color: #1F8AE0` `text-align: center`| ### Midquote Example: ![](https://i.imgur.com/zTSqd7i.png) --- ## Corporate Logos The Fishbowl Corporate Logo is comprised of two parts: The Mark and the Typographic Element. The Mark is the graphical element and is the dominant part of the logo. The Typographic Element is the text that accompanies the Mark. |![Fishbowl Logo - Mark](https://i.imgur.com/t6CU01N.png)|![Fishbowl Logo - Typographic Element](https://i.imgur.com/zhy2i59.png)| |:----:|:----:|:----:| |**Mark**|**Typographic Element**| |![Fishbowl Logo - Horizontal](https://i.imgur.com/vMUSTb2.png)|![](https://i.imgur.com/Imn1XOI.png)| |:----:|:----:| |**Complete Logo (Horizontal)**|**Complete Logo (Stacked)**| #### **Logo requirements** There are two official versions of the Fishbowl logo: Horizontal and Stacked. In order to maintain the visual integrity of the Fishbowl logos, they must be surrounded by adequate white space. :::success **Horizontal Logo** - The minimum white space around the Horizontal logo is the space equivalent to the height of the lowercase "L" in the typographic element. The space should be applied to the top and bottom of the Mark, and to the right and left of the complete logo. ::: :::info **Stacked Logo** - The minimum white space around the Stacked logo is the same as the Horizontal logo, or the space equivalent to the lowercase "L" in the typographic element. The space should be applied to the top, right, bottom and left of the complete logo. ::: Generally, the logo should not be used on a colored background, unless on top of one of the Corporate Colors. When used on top of a colored background, the alternate logo with a white typographic element is preferred. The logo may never be used on top of an image, or combined with any other image in a way where the minimum white space requirement is not met. In cases where the logo is combined with another image (for example, on a partner website), the usage must be reviewed and approved by Fishbowl. --- ## Colors Two main colors constitute the official Fishbowl colors: Fishbowl Corporate Orange and Fishbowl Corporate Blue. These two colors are derived from the colors of the official Fishbowl logo. Acceptable derivitive colors are provided to give color variety in marketing and other documents. These colors, along with Black and White, are acceptable in all Fishbowl publications and documents. | Color | HEX | RGB | CMYK | | :--- | :---: | :---: | :---: | | Fishbowl Corporate Orange| #F4801A |244, 128, 26|0%, 48%, 89%, 4%| | Derivitive Mild Orange |#F4963F|244, 150, 63|0%, 48%, 90%, 0%| | Derivitive Light Orange |#F8B577|248, 181, 119|1%, 33%, 61%, 0%| | Derivitive Dark Orange|#682F0A|104, 47, 10|36%, 79%, 100%, 47%| | Fishbowl Corporate Blue|#125089|18,80,137|87%, 42%, 0%, 46%| | Derivitive Light Blue|#2271B6|34, 113, 182|87%, 54%, 0%, 0%| | Derivitive Dark Blue|#112E4F|17, 45, 79|100%, 84%, 41%, 38%| #### Product Family Colors In addition to the Corporate colors, Fishbowl also utilizes derivitive colors for product specific logos. | Color | HEX | RGB | CMYK | | :--- | :---: | :---: | :---: | | Fishbowl Product Orange|#F69944|246, 158, 63|0%, 47%, 88%, 0%| | Fishbowl Product Blue|#86B0D7|134, 176, 215|47%, 21%, 2%, 0%| #### Color Percentages It is acceptable to use percentages of the Corporate Colors in table cells, behind columns or rows, or for other applications where use of the colors may be needed. As a rule, white type should be used for all percentage variants above 50%. Black type should be used for percentage variants below 50%. |100%|90%|80%|70%|60%|50%|40%|30%|20%|10%| |:----:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:| ||||||||||| ||||||||||| |White|-|-|-|-|Black|-|-|-|-| --- ## Corporate Fonts The website utilizes the **System Font** stack, which consists of several fonts: ``` font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; ``` Using the System Font stack on the website is a more efficient method for font delivery because it utilizes the default system font of the particular operating system on which the website is being viewed. It also improves performance because it doesn't require any font files to be downloaded by the users browser. It provides a comfortable look to the user by using the same font as their current OS. The **Proxima Nova** font family is the official Fishbowl font designated for print. Due to licensing restrictions, this font is only available for use by select individuals in the Marketing department. --- ## Content Types In Drupal, **Content Types** represent (as the name suggests) the type of content or page you are adding to the website. Fishbowl utilizes the following 13 content types on the website: --- ## Webforms Fishbowl uses the Drupal Webforms module to render the various forms that appear on the site. To adminster Webform settings or manage forms, go to **Structure** > **Webforms** in the admin toolbar. ### Embedding Webforms On Pages There are multiple ways to embed a Webform on a page, and the method of embedding a Webform on a page depends on the type of page you are creating that requires the form. For instance, many of the Content Types have the Webforms pre-built into the template. You simply need to select the form you want the page to display prior to publishing the page. For pages without a form embed option, or if you want to insert a form onto a page without using the template (such as in cases where the form needs to be in a location on the page that is different from the form location in the template)