14
Association Technology Solutions WEBINAR SERIES Rise Templates & Themes Presented by: Tipton Ramsay

ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

WEBINAR SERIES

Rise Templates & Themes

Presented by:

Tipton Ramsay

Page 2: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

Session Overview

• Microsites - What, Where, How?

• AppThemes and Masterpage overview

• OOTB Themes

• Customizing OOTB Theme with:

– SASS

– ZZCustom.css

• Q&A

Page 3: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

Microsites

• www.yourdomain.org/sitename

• Staff site is a microsite www.yourdomain.org/staff

• Can have their own domain

• Allows site to have different look and feel as well as navigation from the

“main” site.

• Good for:

– Events

– Foundation

– Committees

– Public vs. Member site.

• Can share content pages with other RiSE sites to avoid duplicating pages.

Page 4: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

Microsites

Page 5: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

Microsites

Page 6: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

Microsites

Page 7: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

AppTheme & Masterpage

Masterpage (C# and HTML):• ”wrapper” wireframe(layout)• Javascript• OOTB Controls like:

• Search• Auth-link toggle• Breadcrumbs• On Behalf• Navigation• Panels

Theme(.css .skin):• Wrapper Styles• Some layout for content• Base elements

Page 8: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

Masterpage (C# and HTML)

Until recently there is only one

responsive masterpage.

”cities_responsive.master”NOTE: ASI Cloud customers CANNOT edit .masterpage

• Wrapped with Bootstrap .container

class to set max-width of 1170px.

• Header

– global

• Home page panel

– home page only

• Main body

– per page

• Footer

– global

Page 9: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

Theme (.css .skin)

• Theme images called via CSS

• JS assets

• Base theme .css

• zzCustom.css for overriding base

theme.

• Austin.Skin

– Mega menus

– Telerik control skinning

• Use base elements page for sample

styles of OOTB elements.

Page 10: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

OOTB Themes

• RiSE > Site Builder > Manage

Websites > Look and Feel tab

• Website Theme [Select]

• Because they all use the same

.masterpage, the main difference

between themes is color and fonts

• Only ones that have responsive in

their name are responsive.

• Change, publish and go look at base

elements page to see themes ”style

guide”

Page 11: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

Customizing OOTB Themes

• zzCustom.css

Page 12: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

Customizing OOTB Themes

Sass: Syntactically Awesome Style Sheets

Page 13: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

Customizing OOTB Themes

Sass: Syntactically Awesome Style Sheets

Page 14: ATS PowerPoint Template - Association Technology Solutions · 2017-10-12 · .masterpage, the main difference between themes is color and fonts • Only ones that have responsive

Association Technology Solutions

More from ATS

Looking for more from the experts at ATS?

Other Questions?

Email: [email protected]

Online: http://www.atsol.org

Phone: (720) 945-7252

Upcoming Webinars Past Webinars

http://www.atsol.org/Webinarsschedule of upcoming webinars

http://www.atsol.org/PastWebinarsvideo recordings and downloadable

presentation slides