Embed Size (px)
Citation preview
Association Technology Solutions
WEBINAR SERIES
Rise Templates & Themes
Presented by:
Tipton Ramsay
Association Technology Solutions
Session Overview
• Microsites - What, Where, How?
• AppThemes and Masterpage overview
• OOTB Themes
• Customizing OOTB Theme with:
– SASS
– ZZCustom.css
• Q&A
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.
Association Technology Solutions
Microsites
Association Technology Solutions
Microsites
Association Technology Solutions
Microsites
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
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
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.
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”
Association Technology Solutions
Customizing OOTB Themes
• zzCustom.css
Association Technology Solutions
Customizing OOTB Themes
Sass: Syntactically Awesome Style Sheets
Association Technology Solutions
Customizing OOTB Themes
Sass: Syntactically Awesome Style Sheets
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
