WikiPlus customizations
Fine tune your WikiPlus solution
What’s on the agenda?




Branding and layout
Modify the WikiPlus content type
Customize the editor's toolbar
Customize the following editor dropdowns
–
–
–
–
"Custom Links“
"Content Snippets"
"Wiki markup"
"Paragraph Style"
 Customize Emoticons
What’s on the agenda?
 Change the file size limit for upload
 Change the available libraries under the file
managers
Branding and layout
 All WikiPlus style sheet files are located under:
– C:\Program Files\Common Files\Microsoft Shared\web
server extensions\14\TEMPLATE\LAYOUTS\
KWizCom_WikiPlus\css
 WikiPlus uses the OOTB default master page located
under:
– C:\Program Files\Common Files\Microsoft Shared\web
server extensions\14\TEMPLATE\LAYOUTS\default.master
Branding and layout
 Defaultwiki.css contains the styles for the wiki site
elements (Title, search, navigation, etc.)
 KWizCom_WikiPlus.css contains styles for the tag
cloud web part, editor elements styles
Layout customization example
 Customize the default style for tables in the WikiPlus
content editor:
– Locate ConfigFile.xml file under:
C:\Program Files\Common Files\Microsoft Shared\Web Server
Extensions\14\TEMPLATE\LAYOUTS\KWizCom_WikiPlus\RadControls\Editor
– Add a new property called “TableLayoutCssFile” under the
‘Configuration’ container, The value of the property has to
point to a CSS file*
– Create the CSS file in the location specified in the
“TableLayoutCssFile”
Layout customization example
– Find the SPEditorTools.js file under:
C:\Program Files\Common Files\Microsoft Shared\Web Server
Extensions\14\TEMPLATE\LAYOUTS\KWizCom_WikiPlus\RadControls\Editor
– Add an entry under InsertTable like so:
e.className= “MyClassTable”
– Comment out the rest of the style definitions
Layout customization example
 ConfigFile.xml:
Relative URL
to the CSS
file location
Layout customization example
 CSS folder:
New table style
definition CSS
Layout customization example
 CSS file:
Layout customization example
 SPEditorTools.js :
Modify the WikiPlus content type
 Each WikiPlus library inherits the WikiPlus content
type
 WikiPlus content type is available under the site
collection content types
 Add or remove fields from the WikiPlus content type
– Note adding a field will not automatically add it to a
WikiPlus page view
Customize the editor's toolbar
 The toolbar is configured using an XML ToolsFile,
which defines:
– The available buttons and their order
– specific options (if any) for the respective tools (i.e. Fonts,
Colors collection, etc.)
 The ToolsFile is located in:
“C:\Program Files\Common Files\Microsoft Shared\web server
extensions\14\TEMPLATE\LAYOUTS\KWizCom_Wikiplus\RadControls\Editor”
folder, on your SharePoint server.
Customize toolbar dropdowns
 Custom links dropdown:
– contains a pre-defined list of internal/external links
– To customize:
• Locate the <links> node in ToolsFile.xml file
• Every displayed link in the "Custom Links" drop-down is
represented by a <link> node below the <links> container
• Update <link> nodes according to your desired links
Customize toolbar dropdowns
 Customize content snippets:
– contains a pre-defined list of html snippets
– To customize:
• Locate the <snippets> node in ToolsFile.xml
• Update or add <snippet> nodes below the <snippets> container
node
Customize toolbar dropdowns
 Customize Wiki markup dropdown:
– contains a pre-defined list of wiki markup scripts
– To customize:
• Locate the <tool name="WikiMarkup" … /> node in ToolsFile.xml
• Every <item> node below contains a displayed caption and text
that is inserted into the editor once this command is selected
• Update existing <item> nodes or add new ones
Customize toolbar dropdowns
 Customize Paragraph style dropdown:
– contains a pre-defined list of paragraph styles that can be
applied to selected text
– To customize:
• Locate the <paragraphs> node in ToolsFile.xml
• Add a <paragraph> node for every paragraph style you want to
appear in this drop-down.
• The <paragraph> node should include a caption and a valid style
name (which is defined in Wiki Plus stylesheet files)
Customize Emoticons
 The emoticon icon which you to add emoticons on
your wiki page
 You may want to add or remove the emoticons, or
create your own collection, to do so:
– Go to the top level site> View all site content
– Open the “WikiPlus emoticons” library
– Upload, edit or delete emoticons (The title is used as an
alternative text for the emoticon)
Change the file size limit for upload
 The editor includes a pre-defined uploaded file size
 The default maximum file size that you can upload is 4096kB,
to customize:
– Locate the relevant node inToolsFile.xml:
• Image Manager:
– <property name="MaxImageSize">[file size in bytes]</property
• Flash Manager:
– <property name="MaxFlashSize">[file size in bytes]</property>
• Media Manager:
– <property name="MaxMediaSize">[file size in bytes]</property>
• Document Manager:
– <property name="MaxDocumentSize">[file size in bytes]</property>
• Visio Manager:
– <property name="MaxVisioSize">[file size in bytes]</property>
Change Available Libraries Under File Managers
 The editor includes pre-defined resource libraries
which are available under the different file managers
 You may want to inset files from different locations
 File upload and delete actions can also be restricted
for each manager (by specifying the restricted library
path)
Change Available Libraries Under File Managers
 To customize the available libraries, or restrict upload\delete:
– Locate the relevant node inToolsFile.xml and specify the relevant path
Image Manager:
<property name="ImagesPaths"> </property>
<property name="UploadImagesPaths"> </property>
<property name="DeleteImagesPaths"> </property>
Media Manager:
<property name="MediaPaths"> </property>
<property name="UploadMediaPaths"> </property>
<property name="DeleteMediaPaths"> </property>
Document Manager:
<property name="DocumentsPaths"> </property>
<property name="UploadDocumentsPaths"> </property>
<property name="DeleteDocumentsPaths"> </property>
Demo
Customization demos
Additional resources
Visit KWizCom.com to
learn more from the
WikiPlus user guides