Themes and Templates Manual FOR ADVANCED USERS

Transcription

1 Manual FOR ADVANCED USERS

2 Table of Contents Introduction... 3 Key Information... 3 Portal Structure... 4 Portal Structure: Template... 5 Overview ) Editing a Portal Template ) Adding a Portal Template ) Template Layout ) Custom Elements ) Style Sheets ) Saving the Template... 9 Portal Structure: Theme Overview ) Editing a Portal Theme ) Adding a Portal Theme ) Theme Elements ) Choosing a Template for the Theme ) Updating a Theme ) Assigning a Theme to a Page ) Assigning a Theme to a Site ) Theme Inheritance Explained Portal Structure: Layout Overview Choosing a Layout Site Render Templates Overview ) Editing a Site Render Template ) Adding a Site Render Template ) Applying DataDisplay Templates ) Applying Navigation Templates P a g e

3 Introduction Themes and templates give you total control over the look and feel of your site. Everything from the color of the background to the font color used for links can be controlled via some aspect of your theme or template. While creating and editing themes and templates gives you increased control of your site, it also requires knowledge of HTML, XML and CSS. As such, this manual is intended for advanced users only. If you are not comfortable working with HTML, XML, or CSS, it is recommended that you contact your account representative for assistance modifying the look and feel of your site. Key Information Before working with themes and templates on the site, the user must first log into the site using their Username and Password. If you have not yet registered with the site you can request access by clicking on the Signup button. This will prompt you to create a profile which is automatically routed for approval to an administrator. Note: If you do not see the Signup link your site s administrators may have removed it. If you have already registered but have forgotten your password, simply click on Forgot Password to retrieve it. 3 P a g e

4 Portal Structure Any CMS page is made up of four components: a template, a theme, a layout, and one or more portlets. The template controls the header and footer as well as the style sheet. On top of that is the theme which controls elements such as a breadcrumb, page title and pageset. On top of that is the layout for the specific page you are viewing. The layout controls how many regions you have on the page and their dimensions. Finally there are the portlets. These are added to the various regions you have created in the layout and can be anything from content to calendars to news, etc. 4 P a g e

5 Portal Structure: Template Overview The portal template controls the header and footer of a page. Within the header and footer you may place things like a logo or an address. You may also include various custom elements such as PublishedLinkMenu, GatewayLink, and others. 5 P a g e

6 1) Editing a Portal Template To edit the portal template, go to Administration -> System Administration -> Manage Portal Themes. Click on a portal theme that is using the template you want to edit. Then click on Customize to edit the template. 2) Adding a Portal Template In some cases, you may wish to start from a brand new template rather than editing an existing one. To add a new portal template, go to Administration -> System Administration -> Manage Portal Themes. Then click Add Template to create a new template. 3) Template Layout Whether you are editing an existing template or adding a brand new one, the Template Layout is where you will spend much of your time working. This is the area where you create and configure the outer frame of your page, including any elements you may wish to place in the header and the footer. 6 P a g e

7 You create the template layout using XML code, with its usual rules and restrictions. When you attempt to save the changes to your page, the system will attempt to validate your code. If the code is invalid, you will be unable to save your changes. Tip: If you would like to learn more about XML coding, there are many resources available online and in print. Tip: You can check to see if the page is valid while you are working by clicking on the validate button at the bottom of Template Layout. 4) Custom Elements In addition to using standard HTML, there are a number of custom elements that may be used when coding your template layout. To use an element, simple determine where you would like to place it within the template and type <elementname />. Below is a list of the default elements. Contents This is the most important of the elements. The Contents element is used to determine where the contents of the page will be displayed. The contents include the theme, layout and page content. Credits This element, usually placed in the footer, allows you to place credits on your page. The text contained within the credits is determined by going to Administration -> System Administration -> Server Settings and editing the Credits field. Date This element displays the current date on the page. GatewayLink This element places a link on the page that can be used for logging in and out of the site. 7 P a g e

8 HelpLink This element displays a link to SharpSchool documentation on SitePublish. PageTitle This element displays the page title. PublishedLinkMenu This element controls where your published link is displayed on the page. To configure the published link menu items, go to Administration -> System Administration -> Manage Published Links. RenderTime This element displays the time it takes a page to load. This can be useful measurement if you are concerned with page load times. SearchBox This element displays a search bar on the page. To place a search button beside the box, you need to add a reference for the button image. So to place a search box with button use: <SearchBox buttonimage= /example/location/button.gif > UserLink This element displays the screen name of the logged in user. If the user is not logged in, it will say, Guest. Clicking on the screen name will bring the user to his user profile. 5) Style Sheets The other key component when editing a portal template is the style sheet. The style sheet allows you to control the look and feel of the page and covers everything from what background is used on the page to how links are handled to what fonts are used. The style sheet uses standard CSS. If you would like more information on creating and editing CSS, there are many online resources available that can provide you with detailed information. 8 P a g e

9 6) Saving the Template Once you have finished with the Template Layout and the Style Sheets, you must save your template. To do so, simply click on the Update Template button at the bottom of the page. The Template Layout will be checked to ensure the code is valid and, if the layout validates successfully, the template will be saved. Note: If the template does not validate, you will be told the layout does not validate and you will be given an opportunity to correct your code. 9 P a g e

10 Portal Structure: Theme Overview The portal theme is nested inside of the portal template. That is, the theme occupies the space between the header and the footer. The theme is used to configure and control elements like advanced site navigation, page titles and breadcrumbs. It is also used to determine where the page content will appear. 10 P a g e

11 1) Editing a Portal Theme To edit an existing portal, click on Administration -> System Administration -> Manage Portal Themes and click the theme you wish to edit. 2) Adding a Portal Theme In some cases, you may wish to add a new theme rather than use an existing theme. To add a new theme, click Administration -> System Administration -> Manage Portal Themes and click Add Portal Theme. 11 P a g e

12 3) Theme Elements There are a number of elements controlled by the theme. Below is a list of elements that are normally included in the theme: Pageset This element is used for placing menus on your page. Both the main navigation bar and side navigation bars can be added via the theme. Here is an example of the code used for the main navigation bar: <pageset style="dynamicmenu" class="main_menu" fontface="arial" fontsize="10" divider="false" maxdepth="3" type="dynamicrootitemwidth" /> The configuration of a sidebar menu is controlled via the Advanced Site Navigation portlet. As a result, it requires a much simpler code to place the menu on the page: <pageset style="custom" controls="true"/> PageContextBar This element is used to place a breadcrumb on the page. PageTitle This element is used to place the page title on the page. Page Thjs element is used to determine where the content will appear on the page. 12 P a g e

13 4) Choosing a Template for the Theme To choose a template when you are working with a portal theme, click on the dropdown menu in the Site Theme field and choose the template you wish to use for the theme. If you would like to use an entirely new template, choose ** New Template ** and click Customize to create the new template. 5) Updating a Theme To update a theme when you have finished making changes to it, click on Update Theme. The theme layout will be checked to ensure it is valid and, if theme is valid, the theme will be updated. 13 P a g e

14 6) Assigning a Theme to a Page To assign a theme to a given page, first load the page. Then click on Advanced -> Page Properties. This will open a new window. From this new window, click on the Theme dropdown menu and choose the theme you would like to use for your page. 7) Assigning a Theme to a Site To assign a theme for the site, click on Administration -> Site Administration -> Edit Site. Click on the dropdown menu for Theme and select the theme you want. 14 P a g e

15 8) Theme Inheritance Explained When setting the theme for a page, you may have noticed that one of the options is Inherit. Inherit is the default theme setting whenever you add a new page and is important part of making sure your site has a consistent look and feel. There are two different places the theme may be inherited from. One possibility is that it may be inherited from the parent page. The other is that it may be inherited from the site theme. The Inherit setting will look at the parent page, the grandparent page, and all other ancestor pages until it finds a page with a theme set. If it does not find a page with the theme set, a page set to Inherit will use the site theme. It is important to note that because the homepage is almost always a different theme than the rest of the site, a page set to inherit will not check the homepage as it looks for a theme set amongst ancestor pages. In the above chart, colors are used to represent the theme. Each box represents a page and the black lines represent the inheritance path. At the top you have the home page and the site theme. As you can tell from the inheritance lines, no pages are inherited from the home page. The next level represents the top level subpages. One is set to Inherit, the other is set to Blue Theme. As you can see from the chart, all pages set to inherit will use the green theme unless they have a parent or other direct ancestor that is using a specific theme. 15 P a g e

16 Portal Structure: Layout Overview Inside the portal theme, is the page layout. The layout is specified on a per page level, and is used to determine where your portlets can be placed on the page. The default layout will have one large region for you to place portlets in, but you may choose one of a number of templates or even create your own custom layout. 16 P a g e

17 Choosing a Layout To choose a layout, click on Advanced -> Page Layout. Choose a layout from the list of available Layout Style choices. If you would rather use a custom layout, choose Custom. When creating a custom template for your page layout, you can use divs or tables to determine the layout of the page. Within these divs or tables use <column order= [column number] ></column> to determine where your regions will be placed on the page. Each column is its own region where you may place portlets. 17 P a g e

18 When you have finished working with your layout, click Update Page to save your layout. The template will be checked to ensure validation and the new layout will be saved. Site Render Templates Overview Site Render Templates are primarily used to control the look and feel of side menu bars (usually found on subpages), news sections, and news content pages. You can access your site render templates by going to Administration -> System Administration -> Site Render Templates. If you look in the action column, you will see that only 5 of the site render templates on this page can be deleted. That is because of how site render templates are structured. Site render templates are inherited from parent sites. So if your site is the child of another site, you will have access to the templates used on the parent site; you will, however, not be able to edit the parent templates from the child site. To edit those templates, you will need to go to the parent site. 18 P a g e

19 1) Editing a Site Render Template To edit a template, first look to see if you see a to the right of the template. If you see the that means that the template is from the site you are working on. To edit the template, just click on the name of the template you wish to edit. If you do not see the then the template is being pulled from a parent site. You can either go to the parent site to edit the template, or you can create a new template, copy and paste the code from the template you wish to edit, and then make your changes to your new template. 2) Adding a Site Render Template To add a new template, go to Administration -> System Administration -> Site Render Templates and click Add New Template. Pitfall: When creating the site render template, be sure to assign the proper category. An otherwise properly configured DataDisplay template will not work if the Category is set to Navigation. 19 P a g e

20 3) Applying DataDisplay Templates There are two primary categories of site render templates you will be working with. One is the DataDisplay category. This category covers the templates for news content and news section pages (i.e. the Advanced Data Display and Advanced Data Summary portlets). To apply a site render template to an Advanced Data Summary (or News Section) portlet, go the page with the portlet and click on Advanced -> Switch to Design Mode. Click Edit on the Advanced Data Summary portlet. Now click on the dropdown menu for Render Template and choose the template you wish to apply. After making your choice, click Update Settings to save the change. 20 P a g e

21 To apply a site render template to an Advanced Data Display (or News Content portlet), go to the page with the portlet and click on Advanced -> Switch to Design Mode. Click Edit on the Advanced Data Display portlet. Now click on the Settings tab and choose a Render Template from the dropdown menu. After making your choice, click Update Settings to save the change. 21 P a g e

22 4) Applying Navigation Templates The other major category of site render template is the Navigation category. Navigation templates are used to control the look and feel of the Advanced Site Navigation (side menu bar) on a site. To apply a navigation template to the Advanced Site Navigation, go to a page that is using Advanced Site Navigation. Then click on Advanced -> Switch to Design Mode and click Edit on the Advanced Site Navigation portlet. Click on the Look & Feel tab and choose the template you wish to use. After making your choice, click Submit to save the change. Note: The Advanced Site Navigation portlet is normally placed within a pageset rather than a region. The pageset is like a site wide region so any change you make to the Advanced Site Navigation portlet on one page will be reflected on all other pages that are using that pageset. 22 P a g e