Difference: PatternSkinCustomization (7 vs. 8)

Revision 82005-10-23 - TWikiContributor

Line: 1 to 1
 
Changed:
<
<

PatternSkin Customization

>
>

PatternSkin Customization

 
Changed:
<
<		Questions and answers on configuring page elements. For styling your TWiki, see PatternSkinCssCookbook.
>
>		Guidelines how to create and customize page templates. For styling your TWiki using stylesheets, see PatternSkinCssCookbook.
 
On this page:
Line: 33 to 33
 
  1. In view.myskin.tmpl you write: 
       %TMPL:INCLUDE{"view"}%
Changed:
<
<		 %TMPL:DEF{"topicactionbuttons"}%More topic actions%TMPL:END%
>
>		 %TMPL:DEF{"top:toolbarbuttons"}%More topic actions%TMPL:END%
 
  1. For testing, view any topic and append to the topic name: ?cover=myskin. You should see an effect now.
  2. To make the changes visible on all pages, go to Main.TWikiPreferences (to keep TWikiPreferences intact) and write:
Line: 69 to 69
 
%TMPL:INCLUDE{"view"}%
Changed:
<
<		%TMPL:DEF{"topicactionbuttons"}%More topic actions%TMPL:END%
>
>		%TMPL:DEF{"top:toolbarbuttons"}%More topic actions%TMPL:END%
 
Line: 77 to 77
 

Reference: pattern skin template INCLUDE tree

Added:
>
>		The view script invokes the view template:
 
view
Changed:
<
<		 page constants javascript styles stylesdynamic body
>
>		 twiki css
  viewtopbar
Changed:
<
<		 WebTopBar viewtoolbar
>
>		 WebTopBar
  viewleftbar WebLeftBar viewtopicactionbuttons viewbottombar
Changed:
<
<		 WebBottomBar
>
>		 WebBottomBar
 

Logo

Line: 114 to 110
  Using logo.gif:
Changed:
<
<
  • Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
>
>
  • Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.
 
  • You can also upload the image with FTP to /pub/YourWeb/WebPreferences/.
  • Copy the above instructions ("Redefine your custom variables") and insert your logo name.
Line: 141 to 137
 

I want to change the white space above and below the logo

Changed:
<
<		Change the table style in topic WebTopBar. The default top padding is 11px.
>
>		Change the table style in topic WebTopBar. The default top padding is 11px.
 

Top bar

Line: 195 to 191
  Using style sheets:
Changed:
<
<		Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
>
>		Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
 

I want to set or change the top background image

Line: 204 to 200
  Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):
Changed:
<
<
  • Set WEBHEADERART = %PUBURLPATH%/%SYSTEMWEB%/PatternSkin/TWiki_header.gif
>
>
  • Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif
 
  • Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)
Line: 221 to 217
  If you have localization enabled, you will also see a language dropdown box at the far right.
Changed:
<
<		You can remove these items from WebTopBar.
>
>		You can remove these items from WebTopBar.
 

I want to hide the top bar

Line: 242 to 238
 Each included template draws a part of the screen.
Omit %TMPL:INCLUDE{"viewtopbar"}% to hide the top bar.
Changed:
<
<		Another approach is to clear the contents of module topbar. Using either a template or a topic template, write in your custom template:
>
>		Another approach is to clear the contents of module topbar with an empty definition. Using either a template or a topic template, write in your custom template:
  
%TMPL:INCLUDE{"view"}%
Changed:
<
<		%TMPL:INCLUDE{"topbar"}%%TMPL:END%
>
>		%TMPL:DEF{"topbar"}%%TMPL:END%
 

and add:

Line: 271 to 267
 Using templates:
Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a custom template clear it using
Changed:
<
<		%TMPL:DEF{"viewleftbar"}%%TMPL:END%
>
>		%TMPL:DEF{"leftbar"}%%TMPL:END% %TMPL:DEF{"leftbardimensions"}%%TMPL:END%
 

Using style sheets:

Line: 300 to 297
 
Changed:
<
<

Other page parts

>
>

Buttons

 

I want to hide the edit buttons from certain users

It may defy the wiki-ness of your TWiki installation, but in certain circumstances it could be useful to hide the edit buttons from users that are not logged in, for instance for clients that have gotten viewing rights only.

Changed:
<
<		Using either a template or a topic template, 'empty' topicaction and toolbar by writing:
>
>		Using either a template or a topic template, 'empty' top:toolbarbuttons and topicaction by writing:
 
%TMPL:INCLUDE{"view"}%
Added:
>
>		%TMPL:DEF{"top:toolbarbuttons"}%%TMPL:END%
 %TMPL:DEF{"topicaction"}%%TMPL:END%
Deleted:
<
<		%TMPL:DEF{"toolbar"}%%TMPL:END%
 
Changed:
<
<		In the user page of TWikiGuest, set the cover to
>
>		In the user page of TWikiGuest, set the cover to
 
   * Set COVER = customer
Line: 322 to 320
 

I want to remove the History button from the bottom

Changed:
<
<		All action buttons are defined in viewtopicactionbuttons.pattern.tmpl. The history buttons or in module revisions:
%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_raw_edit"}%%TMPL:P{"sep"}% %TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}% %TMPL:P{context="WysiwygPluginEnabled" then="sep"}% %TMPL:P{"activatable_attach"}%%TMPL:P{"sep"}% %TMPL:P{"printable"}%%TMPL:P{"sep"}% %TMPL:P{"raw"}%%TMPL:P{"sep"}% %TMPL:P{"backlinks"}%%TMPL:P{"sep"}% %TMPL:P{"revisions"}%%TMPL:P{"sep"}% < HERE %TMPL:P{"activatable_more"}%%TMPL:END%

If we emptied module revisions we would end up with 2 separators, so we need to remove the line altogether. We do this by copying the block and omitting the line.
Using either a template or a topic template, to remove the history buttons write in your custom template:

>
>		All action links and buttons are defined in viewtopicactionbuttons.tmpl. The bottom history link is defined in DEF action_revisions 
%TMPL:DEF{"topicactionbuttons"}%
%TMPL:P{"action_activatable_edit_or_create"}%
%TMPL:P{"action_activatable_attach"}%
%TMPL:P{"action_printable"}%
%TMPL:P{"action_revisions"}%
%TMPL:P{"action_backlinks_simple"}%
%TMPL:P{"action_raw_or_view"}%
%TMPL:P{"action_activatable_raw_edit"}%
%TMPL:P{"activatable_more"}%
%TMPL:END%
 
Added:
>
>		To hide that link, In a custom skin view template view.myskin.tmpl empty action_revisions by replacing it with an empty string:
 
%TMPL:INCLUDE{"view"}%
Added:
>
>		%TMPL:DEF{"action_revisions"}%%TMPL:END%

I want to put the bottom links as buttons at the top

 
Changed:
<
<		%TMPL:DEF{"topicactionbuttons"}%WYSIWYG |  | 

 |  Attach |  Print version |   |  Backlinks: Web, All Webs |  More topic actions%TMPL:END%

>
>		The default definition in view.pattern.tmpl is: 
%TMPL:DEF{"top:toolbarbuttons"}%%TMPL:P{"activatable_edit_or_create"}%%TMPL:P{"activatable_attach"}%%TMPL:END%
 
Changed:
<
<		Remove all newlines if you copy-paste above text.
>
>		Create a new skin by creating a file view.myskin.tmpl in the templates directory. Write in it: 

%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"top:toolbarbuttons"}%%TMPL:P{"history_history_link"}%%TMPL:END%

View any topic with ?skin=myskin,pattern, or set the SKIN variable to myskin,pattern.

This will remove the Edit and Attach buttons, and place a History button at the top.

You will probably not just want to have the History button there. Other button include names are: 

create_topic_link
raw_edit_link
view_topic_link
activatable_attach
activatable_edit_or_create
more_link
activatable_printable
backlinks_web_link
backlinks_all_link
backlinks_link
history_rdiff_link
history_history_link
raw_link

Other page parts

 

I want to insert text outside of the topic content

Changed:
<
<		PatternSkin has 2 'buckets' to write additional content to: beforetextcontents and aftertextcontents, both defined in view.pattern.tmpl. These containers can contain text or html and are placed directly before and after the topic text.
>
>		PatternSkin has 2 'buckets' to write additional content to: contentheader and contentfooter, both defined in view.pattern.tmpl. These containers can contain text or html and are placed directly before and after the topic text.
  Both modules are wrapped in CSS containers:
Changed:
<
<
  • beforetextcontents - wrapped in div of class twikiBeforeText
  • aftertextcontents - wrapped in div of class twikiAfterText
>
>
  • contentheader - wrapped in div of class twikiContentHeader
  • contentfooter - wrapped in div of class twikiContentFooter
  To put contents before the main text, use the custom skin approach as described above.
So our custom template contains: 
%TMPL:INCLUDE{"view"}%
Changed:
<
<		%TMPL:DEF{"beforetextcontents"}%This is the text before%TMPL:END%
>
>		%TMPL:DEF{"contentheader"}%This is the text before%TMPL:END%
 

Use the same procedure for contents to be put after the topic text: 

%TMPL:INCLUDE{"view"}%
Changed:
<
<		%TMPL:DEF{"aftertextcontents"}%This is the text after%TMPL:END%
>
>		%TMPL:DEF{"contentfooter"}%This is the text after%TMPL:END%
 

I want to place the form at the top

Changed:
<
<		Pattern skin has 2 buckets for the form: formattop (form-at-the-top) and formatbottom (form-at-the-bottom):
>
>		Pattern skin has 2 buckets for the form: formtop (form at the top) and formbottom (form at the bottom). The default definition is:
 
Changed:
<
<		%TMPL:DEF{"formattop"}%%TMPL:END% %TMPL:DEF{"formatbottom"}%%TMPL:END%
>
>		%TMPL:DEF{"formtop"}%%TMPL:END% %TMPL:DEF{"formbottom"}%%TMPL:END%
 
Line: 392 to 416
 
%TMPL:INCLUDE{"view"}%
Changed:
<
<		%TMPL:DEF{"formattop"}%%TMPL:END% %TMPL:DEF{"formatbottom"}%%TMPL:END%
>
>		%TMPL:DEF{"formtop"}%%TMPL:END% %TMPL:DEF{"formbottom"}%%TMPL:END%
 
Changed:
<
<

I only want to show the WYSIWYG button on explicit pages

In Main.TWikiPreferences, set COMPOSER to a blank value:
>
>

I want to put the topic form in a twisty

The attachment tables are placed in a open/close twisty. You can do the same for the topic form.

Edit templates/formtables.pattern.tmpl to have this code:

 
Changed:
<
<
  • Set COMPOSER =
>
>		%{ These templates define the form attached at the bottom of viewed page. }%

%TMPL:DEF{"starttopicformwisty"}%

Form Form 
<--/twistyPlugin twikiMakeVisibleInline-->
%TMPL:END%

%TMPL:DEF{"endtopicformwisty"}%

<--/twistyPlugin-->
%TMPL:END%

%{ Start of form table }% %TMPL:DEF{FORM:display:header}%

%TMPL:END%

%{ Header }% %TMPL:DEF{FORM:display:header:headerrow}%

%TMPL:END%

%{ Each row }% %TMPL:DEF{FORM:display:row}%

%TMPL:END%

%{ Footer }% %TMPL:DEF{FORM:display:footer}%

%A_TITLE%
%A_TITLE% %A_VALUE% 
<-- /twikiForm -->
%TMPL:END%
 
Deleted:
<
<
 
Changed:
<
<		In the topic, set the COMPOSER variable to kupu:
>
>		To give the twisty toggle link the same style as the attachment twisty link, add this to pattern skin's style.css:
 
Changed:
<
<
  • Set COMPOSER = kupu
>
>		.twikiForm .twistyTrigger .twikiLinkLabel { font-size:122%; /* h4 size */ font-weight:bold; }
 
Deleted:
<
<
 
View topic | History: r12 < r11 < r10 < r9 | More topic actions...
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.PatternSkinCustomization.