Arena: Edit External Web Templates (Course #A217)

Transcription

1 Arena: Edit External Web Templates (Course #A217) Presented by: Alex Nicoletti Arena Product Owner 2017 Shelby Systems, Inc. Other brand and product names are trademarks or registered trademarks of the respective holders.

2 Templates Templates are the framework that defines the appearance and layout of your site. Arena includes a variety of default templates that can be used for your pages, or you can use an existing template as a model for creating your own custom template. For example, if you want to create a custom template with header, menu, content, and footer sections, then you can modify the ArenaSingleColumn template which consists of the following two files: ArenaSingleColumn.ascx ArenaSingleColumn.ascx.cs It is recommended that you place your custom template files in the following folder: Templates\Custom\<ORGID> The main components of the ascx file are the content areas that are placeholders for Arena to place content within as seen in the code for ArenaSingleColumn.ascx below. <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ArenaSingleColumn.ascx.cs" Inherits="ArenaWeb.Templates.SingleColumn" %> <link href="css/arenamaster.css" rel="stylesheet" type="text/css" /> <div id="container"> <div id="header" class="pad"> <asp:placeholder ID="phHeader" runat="server"></asp:placeholder> <div id="horiznav" class="pad"> <asp:placeholder ID="phHorizNav" runat="server"></asp:placeholder> <div id="singlecontent" class="pad"> <asp:placeholder ID="phMain" runat="server"></asp:placeholder> <div id="footer" class="pad"> <asp:placeholder ID="phFooter" runat="server"></asp:placeholder> NOTE: If you do not need all the placeholders, DO NOT just remove them from the ASCX file, as the code behind might have reference to it and could cause the template not to load. It is best to comment out that section. <! <asp:placeholder ID="phFooter" runat="server"></asp:placeholder> > 2

3 The important thing to note in your code behind file is that you must publically declare each placeholder that is referenced in your ascx file, as can be seen in ArenaSingleColumn.ascx.cs below. namespace ArenaWeb.Templates { using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using Arena.Portal; public partial class SingleColumn : PortalControl { public PlaceHolder Header { get { return phheader; } } public PlaceHolder Navigation { get { return phhoriznav; } } public PlaceHolder Main { get { return phmain; } } public PlaceHolder Footer { get { return phfooter; } } protected void Page_Load(object sender, EventArgs e) { } } } You can also change the name of your class, but you must also remember to inherit the proper namespace. For example, if you create a new template called TestTemplate and use the following class name: public partial class TestTemplate : PortalControl Then in your TestTemplate.ascx file, you must change the Inherits statement to the following: Inherits="ArenaWeb.Templates.TestTemplate" If you want to customize your template s styling then in order to avoid the possibility of your custom work being overwritten or lost during a future Arena update, it is recommended that you create a custom stylesheet for your template rather than modifying an existing stylesheet. It is recommended that new.css files be placed in the following folder: CSS\Custom\<ORGID> 3

4 Portals Your Arena installation includes three portals. Each portal is a separate set of pages, modules, and security settings. Arena (Internal) This portal is the primary portal that staff will access on a daily basis. Arena Mobile This portal s specific design is for use on any web enabled smart phone. Arena Web This portal s specific design is for the use of external website features such as online giving, event registration, and the group locator. This is the non responsive version and will soon be deprecated. Members Responsive This portal s specific design is for use of external website features, similar to the Arena Web portal, except the modules and structure are designed to work across multiple device resolutions (Bootstrap responsive). The majority of your website uses the same template. If you decide that you want to create a custom template with a custom stylesheet for your Arena Web portal, then you change the stylesheet that the portal uses on the Portal List page. 1. Go to Administration Portal List. 2. Click on the Portal Name (e.g. ArenaWeb). 3. Enter the URL path for Portal Style Sheet. For example, css/custom/test.css 4. Click Update. 4

5 Available Templates To view a list of all templates currently available in Arena, go to Administration > Templates. Steps to Add a New Template: 1. Go to Administration >Templates. 2. Click Add New Template. 3. Click Edit Details. 4. Add a Template Name. 5. Enter the Template URL path. For example, ~/Templates/Custom/ TestTemplate.ascx 6. Enter a description for this template. 7. Click Update. 5

6 Applying a Template to a Page Steps to Apply a Template to a Page: 1. Go to Administration > Pages. 2. Go to Web Pages > Homepage > Child Pages. 3. Click the Add New Page icon. 4. Click Page Details. 5. Select Template. 6. Click Update. Your page is now created with your new template applied to it. You now have tabs that correspond to the content sections ( Header Content, Navigation Content, Main Content, and Footer Content ) that you defined in the UserControl code. You can now add modules to each of your content areas. You do this by clicking one of the tabs ( Header Content for example), clicking Add, and choosing the module that you want in that section. NOTE: When creating multiple child pages, make sure you set the template properly on the Parent as new child pages copy the template settings, as well as security and default modules, from the parent page. 6

7 Q&A Class Discussion 7

8 Alex Nicoletti Arena Product Owner Alex is currently the Arena Product Owner in Shelby's Technology Development Division and is a Certified Scrum Product Owner. Prior to joining the Shelby Team, Alex Nicoletti worked as a Network and Arena Administrator at a large church in Tampa, Florida. The experience he gained during this time helped fuel his passion to empower and equip churches to successfully minister.