A component is just a fancy name for a piece of content. Components are added to pages by a drag and drop editor and can be moved, edited, duplicated and deleted easily. Web Pro Manager comes pre-installed with many different components for placing text, images, navigation, forms and scripts onto your pages. You can also create your own components.
You can view the components installed in WPM in the Component Library. (Figure 3.1).
Figure 3.1 The Component Library lists the components currently installed in your WPM.
The pre-installed components come coded with some very basic formatting for each. For instance, the Title component surrounds the title displayed with <h1>
HTML tags.
This pre-set formatting may not work for your template, especially if you have more complicated styles behind the look of your navigation, images, titles or text. In this case, you’ll need to override the pre-installed component’s formatting with your own desired formatting.
By far the fastest way to get a component to look the way you desire is to override it for your template without changing the component directly.
Here’s how you do it:
<!-- BEGIN COMP: Title //--> [#text_BEFORE=<h1>_AFTER=</h1>#]
AFTER:
<!-- BEGIN COMP: Title //--> [#text_BEFORE=<h2 class=”special”>_AFTER=</h2>#]
If customizing existing components just doesn’t cut it for you, the next best alternative is to create a completely new component.
Before proceeding, you might want to browse the files currently in the “comp” folder and sub-folders to get a feel of the components already installed with Web Pro Manager and how they work.
Here’s how you do it:
<?php // Required settings $nName = "Simple Text"; $nDescription = "Adds a space to enter in any text content or HTML."; $nPageTypeLimit = ""; // Content, Homepage, Search $nTemplateFile = "simpletext.html"; addField("text","Title","(max. 200 characters)","","width:750px;"); addField("textarea","Content","","","width:750px; height:200px;"); addField("link-Page","Page Link","When 'more' is clicked on, choose a page to link to.","","width:300px;"); addField("image-Button","Use This Button Image with Page Link","","","width:300px;"); ?>
{field ID}
- determines how your field will be processed, choose ID from list below; field ID must be “text”, “textarea”, “linkid”(shows list of -Page or -Section), or “imgid” (shows list of images, add a dash and library name or default to “Content”).{title}
- title to display in the back-end during editing.{caption}
- caption to display in the back-end during editing{default value}
- default value in the back-end during editing{field style}
- CSS style in the back-end during editing{template}
- for lists (when field ID is 'linkid-Section') created during default processing, allows templating of individual list items using 2 tags: [#title#]
and [#link#]
// Adds a standard text field called Title addField("text","Title","(max. 200 characters)","","width:750px;",""); // Adds a page navigation from a Section chosen by the user addField("linkid-Section","Build navigation from this Section","","","width:300px;","","basicnavitem.html"); // Adds a large textarea field called Content addField("textarea","Content","","","width:750px;","");
<!-- BEGIN COMP: Simple text //--> [#text_BEFORE=<h1>_AFTER=</h1>#] <div id="contentBox"> [#textarea#] [#linkedimage_NOIMAGE=more_SHOWUNLINKED=0_BEFORE=<BR><BR>#] </div>