Difference between revisions of "Managing Design"
| (4 intermediate revisions by the same user not shown) | |||
| Line 18: | Line 18: | ||
A - .eventMenuButton defines what the "button" of the menu looks like <br /> | A - .eventMenuButton defines what the "button" of the menu looks like <br /> | ||
| − | + | - :hover - attributes you want when element is hovered over w/ pointer (inherits from .eventMenuButton if not defined) <br /> | |
| − | + | - :visited - attributes you want when element has been visited (inherits from .eventMenuButton if not defined) <br /> | |
| − | + | - A.eventMenuButtonDown defines attributes when a pointer has activated the fly-out, and the pointer has moved to its sub elements (sub elements would be .eventMenuPanelButton and A.eventMenuPanelButton) <br /> | |
| − | B - A.eventMenuButton defines what an anchored button on the menu looks like (A and B will almost always have identical attributes) | + | B - A.eventMenuButton defines what an anchored button on the menu looks like (A and B will almost always have identical attributes) <br /> |
| − | + | - :hover - attributes you want when element is hovered over w/ pointer (inherits from A.eventMenuButton if not defined) <br /> | |
| − | + | - :visited - attributes you want when element has been visited (inherits from A.eventMenuButton if not defined) <br /> | |
| − | + | - A.eventMenuButtonDown defines attributes when a pointer has activated the fly-out, and the pointer has moved to its sub elements (sub elements would be .eventMenuPanelButton and A.eventMenuPanelButton) <br /> | |
| − | C - .eventMenuPanel defines attributes of the panel that | + | C - .eventMenuPanel defines attributes of the panel that flies out <br /> |
| − | D - .eventMenuPanelButton defines attributes of the buttons within the panel (background applied here will lay over top of the panel) | + | D - .eventMenuPanelButton defines attributes of the buttons within the panel (background applied here will lay over top of the panel) <br /> |
| − | + | - A.eventMenuPanelButton defines what an anchored button within the panel looks like (will almost always have identical attributes as .eventMenuPanelButton) <br /> | |
| − | + | - :hover - attributes you want when element is hovered over w/ pointer (inherits from .eventMenuPanelButton if not defined) <br /> | |
| − | + | - :visited - attributes you want when element has been visited (inherits from .eventMenuPanelButton if not defined) <br /> | |
| − | + | - .eventMenuPanelButtonDown (A.eventMenuPanelButtonDown) defines attributes when a pointer has activated the fly-out, and the pointer has moved to its sub elements (sub elements would be .eventMenuPanelButton and A.eventMenuPanelButton in the next tier) <br /> | |
| − | E - .eventMenuDelimiter defines what the delimiter attributes are (delimiter is defined in the Dynamic Menu record example here is a |). | + | E - .eventMenuDelimiter defines what the delimiter attributes are (delimiter is defined in the Dynamic Menu record example here is a |). <br /> |
| + | |||
| + | ==Working with Templates== | ||
| + | |||
| + | The template is the portion of the HTML page that a content manager does not typically change. It often includes the graphics that surround the content, the headers, the footers and the navigation. Generally, there is a section of the template where the content is placed, and the content manager has access to edit that area. <br /> | ||
| + | |||
| + | An example might be a red page and a blue page. Within your site, some pages have a blue background, and others have a red background. You have two templates on your site, one called Blue, which has a place for dynamic navigation menus, and a place for content right below the navigation. you have another templates, called Red, with the same elements arranged similarly. You edit the home page content, called "Landing Page", and set it to use the Blue template. When anyone lands on your site, they see the home page with a blue background, dynamic menu, and the content you entered with the online editor. If you edit the content, and select the Red template instead, the next time someone lands on your home page, they see it with a red background. <br /> | ||
| + | |||
| + | There are two site architectures of Contensive, Soft Templates, and Hard Templates. Each supports templates differently. <br /> | ||
| + | |||
| + | '''Soft Templates''' <br /> | ||
| + | |||
| + | In Soft Templates, the HTML for the template is stored in database records and can be easily edited online. The Soft Template architecture is easier to manage. The URL of the page does not point to a unique HTML document, but instead, it points to a page that uses Contensive to construct the HTML internally. All the pages on the site come from the same URL, except for a few simple query-string arguments. <br /> | ||
| + | |||
| + | When a content manager edits a page, the only change is internal. The next time a visitor views the page, it appears with the new template. <br /> | ||
| + | |||
| + | Note that Soft templates associated to pages will only have an effect for sites that use the GetHTMLBody, GetHTMLDoc, and ISAPI CMS interfaces. <br /> | ||
| + | |||
| + | When creating soft templates, you can optionally include a link to the physical page that supports the soft template architecture. If this link is omitted, the dynamic menuing will create a link to the page where it is displayed. This assumes the site is created as a single physical page. <br /> | ||
| + | |||
| + | Include links in soft templates if the site also includes hard templates, or non-template sections. Including the links will allow the use of dynamic menuing on both the soft template sections, and the hard templates sections. Without links in the soft template records, the menuing could not produce a link that would return the visitor to the physical page required for the soft templates. <br /> | ||
| + | |||
| + | '''Editing Soft Templates''' <br /> | ||
| + | |||
| + | Your site may have hundreds, or even thousands of pages, but it probably has only a few templates. if your site is contructed with Hard Templates, editing templates is a programmer activity and must be done using specialized authoring and publishing software such as GoLive, Frontpage, or MS Interdev. If your site is constructed from soft templates, any with Administration rights to the Contensive site can edit them online. <br /> | ||
| + | |||
| + | To edit your templates, turn on Authoring links. if your site uses Soft Templates, will see around the entire page, an Edit window with an Edit Icon for the "Page Template". Simply click the edit icon. <br /> | ||
| + | |||
| + | When editing Templates, there are three fundimental elements you will probably use. Any active content or aggregate function is available as well, but these are the primary ones most people use. You find them on the editor, in the "Tag" dropdown selector. <br /> | ||
| + | |||
| + | '''Hard Templates''' <br /> | ||
| + | |||
| + | With Hard Templates, the HTML for the template is constructed on a hard coded HTML document much like traditional non-CMS web sites. A scripting language in the Hard Templates is used to pro grammatically connect to the Contensive server for content. The URL to the page is actually a URL to the Hard Template. All pages that use the same template have the same URL, except for a few simple query string arguments. <br /> | ||
| + | |||
| + | When a content manager edits a page, and selects a template for that page, the software dynamically changes links to the page. The next time a visitor views the page, the system detects if it is being viewed from the correct place. <br /> | ||
| + | |||
| + | '''Creating and Modifying Template records''' <br /> | ||
| + | |||
| + | Hard and soft templates are stored in the same list, the Page Templates content. If a record contains a link in the Link field, it is a hard template, and the Soft Template Body will be ignored. If the template record has no Hard Template Link, but the Soft Template Body is not empty, it will be used as a soft template. <br /> | ||
| + | |||
| + | ==Style Sheets (CSS)== | ||
| + | |||
| + | Styles can be stored and maintained in several different ways, depending on how they are used, distributed, or edited. <br /> | ||
| + | |||
| + | '''Site Styles''' <br /> | ||
| + | |||
| + | Site Styles are entries that appear on every page of the site. A site could be created by simply adding every css Style into the Site Styles record. <br /> | ||
| + | |||
| + | '''Shared Styles''' <br /> | ||
| + | |||
| + | These are individual style pages that can be added to any or all templates individually. They are added by checking the appropriate checkbox in the template record. For instance, if you have two templates that are fundamentally that same, but have different style schemes (different colors in different site sections maybe), you might have two template records with exactly the same HTML, but different share style selections. <br /> | ||
| + | |||
| + | You can also use Share Styles to breakup your stylesheets into more managable units, like a reset style sheet, a home page style sheet and an interior style sheet. <br /> | ||
| + | |||
| + | '''Add-on Default and Custom Styles''' <br /> | ||
| + | |||
| + | Within Contensive, there can be many autonomous Add-ons. Each Add-on usually has its own style requirements. This is partially handled with the default and custom styles within the Add-on. When an add-on is installed, it adds its own default styles that are always delivered. In addition, if the designer wants to over-ride or customize the default styles, they can add them to the custom styles for that add-on. <br /> | ||
| + | |||
| + | ==Managing Templates== | ||
| + | |||
| + | '''What is a template?''' <br /> | ||
| + | |||
| + | In Contensive, a template is a block on html that is delivered within a page's html body tags. It may contain any number of add-ons which add dynamic features and content. A site can have many templates. The template that is displayed is determined by settings on the page or the section. If not template is specified, the template with the name 'Default' is used. <br /> | ||
| + | |||
| + | '''How do I edit my template?''' <br /> | ||
| + | |||
| + | You edit templates exactly that same way you edit content. You can edit your templates from the admin site or from the site site. To edit a template from the admin site, open the navigator to Manage Design. Click on Templates. You will see all the site templates. Click on the edit icon to edit a template. <br /> | ||
| + | |||
| + | '''How do I include CSS styles?''' <br /> | ||
| + | |||
| + | The site styles located on the navigator under Manage Design will always be delivered with every public page. <br /> | ||
| + | |||
| + | If there are styles you want to include only on one a template, you can add them to the styles tab under exclusive styles. <br /> | ||
| + | |||
| + | If there are styles you want to share between several templates, or other objects in the system you can add them to a shared styles record and check the box to include that shared style with this template, either on the shared styles page or on the template page. <br /> | ||
| + | |||
| + | If you will be saving your template in a collection, we recommend you use either exclusive styles or shared styles since the site styles usually contains unrelated styles that would be transferred as well. <br /> | ||
| + | |||
| + | '''How do I use Mobile Styles?''' <br /> | ||
| + | |||
| + | If you to use a custom template for mobile visitors, enable mobile templates on the Mobile tab of the preferences page, found on the navigator under settings. When enabled, each template record has a mobile equivalent that is used automatically when a mobile device is recognized. <br /> | ||
| + | |||
| + | You can test the mobile template mode by adding the query string "method=forcemobile" to the url. Revert on the non-mobile template with "method=forcenonmobile". For instance, inf your site is http://www.mysite.com, to see the mobile templates, type: http://www.mysite.com?method=forcemobile | ||
Latest revision as of 17:39, 15 June 2015
Contents
Working with Dynamic Menus
Menuing is facilitated with the Dynamic Menu Add-on. It creates the HTML necessary to produce flyout menuing in many configurations. In addition, it generates the styles to produce a generic menu system.
To customize the Dynamic Menu, start by dropping the Dynamic Menu add-on on a template or content page, and render the page (display it). The system will automatically create the necessary records for the Default menu.
To create a different menu, turn on Advanced Edit, and click the Instance Options tool above the Dynamic Menu Add-on. From here, you can select any existing menu settings record, or create a new one.
At this point you can turn on editing, and edit the menu settings record, or add sections to the menu.
In the Menu record, there are several settings that effect the type of HTML that will be produced, and a tab to create or modify the styles delivered with that HTML. There are several styles selectors required for a dynamic menu. To differentiate one menu instance from another, a style 'prefix' is used. For instance, If you choose your prefix as "topNav", each of the five class selectors necessary for the menu should start with the prefix "topNav", like topNavButton, topNavPanel, etc.
I am using the example of a menu using the style prefix eventMenu.
A - .eventMenuButton defines what the "button" of the menu looks like
- :hover - attributes you want when element is hovered over w/ pointer (inherits from .eventMenuButton if not defined)
- :visited - attributes you want when element has been visited (inherits from .eventMenuButton if not defined)
- A.eventMenuButtonDown defines attributes when a pointer has activated the fly-out, and the pointer has moved to its sub elements (sub elements would be .eventMenuPanelButton and A.eventMenuPanelButton)
B - A.eventMenuButton defines what an anchored button on the menu looks like (A and B will almost always have identical attributes)
- :hover - attributes you want when element is hovered over w/ pointer (inherits from A.eventMenuButton if not defined)
- :visited - attributes you want when element has been visited (inherits from A.eventMenuButton if not defined)
- A.eventMenuButtonDown defines attributes when a pointer has activated the fly-out, and the pointer has moved to its sub elements (sub elements would be .eventMenuPanelButton and A.eventMenuPanelButton)
C - .eventMenuPanel defines attributes of the panel that flies out
D - .eventMenuPanelButton defines attributes of the buttons within the panel (background applied here will lay over top of the panel)
- A.eventMenuPanelButton defines what an anchored button within the panel looks like (will almost always have identical attributes as .eventMenuPanelButton)
- :hover - attributes you want when element is hovered over w/ pointer (inherits from .eventMenuPanelButton if not defined)
- :visited - attributes you want when element has been visited (inherits from .eventMenuPanelButton if not defined)
- .eventMenuPanelButtonDown (A.eventMenuPanelButtonDown) defines attributes when a pointer has activated the fly-out, and the pointer has moved to its sub elements (sub elements would be .eventMenuPanelButton and A.eventMenuPanelButton in the next tier)
E - .eventMenuDelimiter defines what the delimiter attributes are (delimiter is defined in the Dynamic Menu record example here is a |).
Working with Templates
The template is the portion of the HTML page that a content manager does not typically change. It often includes the graphics that surround the content, the headers, the footers and the navigation. Generally, there is a section of the template where the content is placed, and the content manager has access to edit that area.
An example might be a red page and a blue page. Within your site, some pages have a blue background, and others have a red background. You have two templates on your site, one called Blue, which has a place for dynamic navigation menus, and a place for content right below the navigation. you have another templates, called Red, with the same elements arranged similarly. You edit the home page content, called "Landing Page", and set it to use the Blue template. When anyone lands on your site, they see the home page with a blue background, dynamic menu, and the content you entered with the online editor. If you edit the content, and select the Red template instead, the next time someone lands on your home page, they see it with a red background.
There are two site architectures of Contensive, Soft Templates, and Hard Templates. Each supports templates differently.
Soft Templates
In Soft Templates, the HTML for the template is stored in database records and can be easily edited online. The Soft Template architecture is easier to manage. The URL of the page does not point to a unique HTML document, but instead, it points to a page that uses Contensive to construct the HTML internally. All the pages on the site come from the same URL, except for a few simple query-string arguments.
When a content manager edits a page, the only change is internal. The next time a visitor views the page, it appears with the new template.
Note that Soft templates associated to pages will only have an effect for sites that use the GetHTMLBody, GetHTMLDoc, and ISAPI CMS interfaces.
When creating soft templates, you can optionally include a link to the physical page that supports the soft template architecture. If this link is omitted, the dynamic menuing will create a link to the page where it is displayed. This assumes the site is created as a single physical page.
Include links in soft templates if the site also includes hard templates, or non-template sections. Including the links will allow the use of dynamic menuing on both the soft template sections, and the hard templates sections. Without links in the soft template records, the menuing could not produce a link that would return the visitor to the physical page required for the soft templates.
Editing Soft Templates
Your site may have hundreds, or even thousands of pages, but it probably has only a few templates. if your site is contructed with Hard Templates, editing templates is a programmer activity and must be done using specialized authoring and publishing software such as GoLive, Frontpage, or MS Interdev. If your site is constructed from soft templates, any with Administration rights to the Contensive site can edit them online.
To edit your templates, turn on Authoring links. if your site uses Soft Templates, will see around the entire page, an Edit window with an Edit Icon for the "Page Template". Simply click the edit icon.
When editing Templates, there are three fundimental elements you will probably use. Any active content or aggregate function is available as well, but these are the primary ones most people use. You find them on the editor, in the "Tag" dropdown selector.
Hard Templates
With Hard Templates, the HTML for the template is constructed on a hard coded HTML document much like traditional non-CMS web sites. A scripting language in the Hard Templates is used to pro grammatically connect to the Contensive server for content. The URL to the page is actually a URL to the Hard Template. All pages that use the same template have the same URL, except for a few simple query string arguments.
When a content manager edits a page, and selects a template for that page, the software dynamically changes links to the page. The next time a visitor views the page, the system detects if it is being viewed from the correct place.
Creating and Modifying Template records
Hard and soft templates are stored in the same list, the Page Templates content. If a record contains a link in the Link field, it is a hard template, and the Soft Template Body will be ignored. If the template record has no Hard Template Link, but the Soft Template Body is not empty, it will be used as a soft template.
Style Sheets (CSS)
Styles can be stored and maintained in several different ways, depending on how they are used, distributed, or edited.
Site Styles
Site Styles are entries that appear on every page of the site. A site could be created by simply adding every css Style into the Site Styles record.
Shared Styles
These are individual style pages that can be added to any or all templates individually. They are added by checking the appropriate checkbox in the template record. For instance, if you have two templates that are fundamentally that same, but have different style schemes (different colors in different site sections maybe), you might have two template records with exactly the same HTML, but different share style selections.
You can also use Share Styles to breakup your stylesheets into more managable units, like a reset style sheet, a home page style sheet and an interior style sheet.
Add-on Default and Custom Styles
Within Contensive, there can be many autonomous Add-ons. Each Add-on usually has its own style requirements. This is partially handled with the default and custom styles within the Add-on. When an add-on is installed, it adds its own default styles that are always delivered. In addition, if the designer wants to over-ride or customize the default styles, they can add them to the custom styles for that add-on.
Managing Templates
What is a template?
In Contensive, a template is a block on html that is delivered within a page's html body tags. It may contain any number of add-ons which add dynamic features and content. A site can have many templates. The template that is displayed is determined by settings on the page or the section. If not template is specified, the template with the name 'Default' is used.
How do I edit my template?
You edit templates exactly that same way you edit content. You can edit your templates from the admin site or from the site site. To edit a template from the admin site, open the navigator to Manage Design. Click on Templates. You will see all the site templates. Click on the edit icon to edit a template.
How do I include CSS styles?
The site styles located on the navigator under Manage Design will always be delivered with every public page.
If there are styles you want to include only on one a template, you can add them to the styles tab under exclusive styles.
If there are styles you want to share between several templates, or other objects in the system you can add them to a shared styles record and check the box to include that shared style with this template, either on the shared styles page or on the template page.
If you will be saving your template in a collection, we recommend you use either exclusive styles or shared styles since the site styles usually contains unrelated styles that would be transferred as well.
How do I use Mobile Styles?
If you to use a custom template for mobile visitors, enable mobile templates on the Mobile tab of the preferences page, found on the navigator under settings. When enabled, each template record has a mobile equivalent that is used automatically when a mobile device is recognized.
You can test the mobile template mode by adding the query string "method=forcemobile" to the url. Revert on the non-mobile template with "method=forcenonmobile". For instance, inf your site is http://www.mysite.com, to see the mobile templates, type: http://www.mysite.com?method=forcemobile
