O n l i n e C a t e r i n g S o f t w a r e S o l u t i o n Portal CSS Guide

Size: px

Start display at page:

Download "O n l i n e C a t e r i n g S o f t w a r e S o l u t i o n Portal CSS Guide"

Ellen Pope
5 years ago
Views:

1 O n l i n e C a t e r i n g S o f t w a r e S o l u t i o n Portal CSS Guide

2 Portal.css Customization Guide... 3 Upload Stylesheet... 3 portal.css Customization... 4 Change the Horizontal Menu Bar Background Color... 5 Header Icon and Title CSS Colors... 6 Additional CSS Edits and Site Branding... 7 Copyright 2011 Reachoutside, llc. Page 2

3 Portal.css Customization Guide CaterShark Portal CSS Guide This portal.css customization document guides you through customizing additional areas such as font colors, background colors and custom images. Upload Stylesheet Navigate to: Account Settings > Upload Style Sheet You can further customize your CaterShark catering portal by downloading the default stylesheet and then uploading it when you re finished. You can do this to change the fonts and colors used throughout the application. Some restrictions do apply and not ALL customizations of the look & feel are possible. Copyright 2011 Reachoutside, llc. Page 3

It is important not to alter or delete any of the css style names.

4 portal.css Customization When downloading your portal.css file you want to save that file in a recognizable place on your computer. The portal.css can be opened up in any web authoring tool like Dreamweaver or Visual Studio. The portal.css file can also be open up in notepad if desired. It is important not to alter or delete any of the css style names. If you make a change you are not sure about or mistakenly deleted and re-uploaded the wrong css you can re-download the original default portal.css file at any time. Portal.css (Dreamweaver View) Portal.css (Note Pad View) Copyright 2011 Reachoutside, llc. Page 4

5 Change the Horizontal Menu Bar Background Color Bottom color # Top color #dbdcdc The horizontal menu bar is one of the areas that CaterShark provides each client for easy customization of the background color. If you want to change the horizontal menu bar image color follow these steps. A. Login as an admin and download the latest portal.css instruction sheet per our portal.css download page. B. In the portal.css file locate the css that contains the color reference. C. The area you will now be focusing on is down at the bottom of the css file. Just do a search for Menu Bar Color (sample code below). D. Within the code below you will see 3 areas you can change to fit your needs. We numbered them 1, 2, 3. Those 3 areas need changed to the same values to comply with different web browsers. E. If you would like this to be gradient then you can manipulate as you like. The first html color #dbdcdc is the top of the gradient and the second html color # is the bottom of the gradient. These colors can be changed to fit your site needs. F. Below those styles are the remaining styles for the horizontal menu bar. Those can be manipulated as well. G. Save your file, Re-upload your portal.css file and Refresh your page. Example: /* Change Menu Bar Color in 3 Areas below for Main Horizontal Menu Bar */ /* 1. Note First # is top of gradient Second # is bottom of gradient. Make both numbers the same to create solid color */ background: -moz-linear-gradient(top, #dbdcdc, #767676); /* 2. Note First # is top of gradient Second # is bottom of gradient. Make both numbers the same to create solid color */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dbdcdc), to(#767676)); /* 3. Note First # is top of gradient Second # is bottom of gradient. Make both numbers the same to create solid color */ filter:progid:dximagetransform.microsoft.gradient( startcolorstr='#dbdcdc', endcolorstr='#767676',gradienttype=0 ); border: 0px solid #002232; -moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; } Copyright 2011 Reachoutside, llc. Page 5

css instruction sheet per our portal.css download page. B. In the portal.css file locate the css that contains the names (A) ACHeaderBckgd (B) and ACHeaderTitle css reference. C.

6 Header Icon and Title CSS Colors The page header icon and title text colors (A) are also easily editable via the portal.css file. The default color for the page icons and header title is a green html color. If you want to change color of these areas follow these quick steps. A. Download the latest portal.css instruction sheet per our portal.css download page. B. In the portal.css file locate the css that contains the names (A) ACHeaderBckgd (B) and ACHeaderTitle css reference. C. Our default colors for these two areas are identical by default. You can change them to any html color. D. Save your file, Re-upload your portal.css file and Refresh your page. /* Background Color for Page Header Icon Images */.ACHeaderBckgd { background-color: #8ec042; } /* Color for Page Header Titles*/.ACHeaderTitle { font-size: 18px; font-family: "Century Gothic"; color: #8ec042; font-weight:600; padding-left: 10px; } A Copyright 2011 Reachoutside, llc. Page 6

7 Additional CSS Edits and Site Branding These are just a few areas in your new CaterShark portal that can be manipulated. If you require additional changes to your site styles please let us know. CaterShark also offers the ability to customize your portal to match your existing websites look and feel. Please contact us at support@advancedchef.com for more information. We will be glad to assist. Copyright 2011 Reachoutside, llc. Page 7

IBM Forms V8.0 Custom Themes IBM Corporation

IBM Forms V8.0 Custom Themes IBM Corporation IBM Forms V8.0 Custom Themes Agenda 2 Overview Class Names How to Use Best Practice Styling Form Items Test Custom CSS Sample Overview 3 To create custom theme you must be familiar with the basic concept