~kosova/+junk/tuxfamily-twiki

The quickest way to change the view template would be to simply change the text in the template. A safer way - strongly recommended, because it will survive a Foswiki update - is to create your own custom skin. That may sound like an awful lot of work, but in reality a skin may be as much as 1 file that consists of only a few lines of code.

*Example* %BR%

Let's say you want to simplify the bottom toolbar and remove all links except for "More topic actions". You would need to target =%<nop>TMPL:DEF{"topicactionbuttons"}%=, which is located in =view.pattern.tmpl=.

*The steps you would need:*

1 Think up a name for your skin. Let us use =myskin= for now.

1 Create a new (empty) view template file in =/templates= called =view.myskin.tmpl=.

1 In =view.myskin.tmpl= you write:

%TMPL:INCLUDE{"view"}%

%TMPL:DEF{"top:topicactionbuttons"}%%TMPL:P{"more_link"}%%TMPL:END%</verbatim></blockquote>

1 For testing, view any topic and append to the topic name: =?cover=myskin=. You should see an effect now.

1 To make the changes visible on all pages, go to [[%USERSWEB%.SitePreferences]] (to keep %WIKIPREFSTOPIC% intact) and write:

* <nop>Set COVER = myskin

</pre>

or write

<pre>

* <nop>Set SKIN = myskin,pattern

</pre></blockquote>

Test by appending =?cover=myskin= to the url.

#TopicTemplates

---+++ The topic template approach (using VIEW_TEMPLATE)

Template overrides can be written in a topic, a so-called _topic template_. Topic template names end with =Template=, for instance =BlogPostViewTemplate=.

Call this template by setting =VIEW_TEMPLATE=:

* Set VIEW_TEMPLATE = BlogPostView

</verbatim>

</blockquote>

* Note that you don't use the =Template= extension now

* You can make this setting hidden by writing this in the Settings screen: go to More and then Topic Settings

* On topic creation you can set the topic template by passing =templatetopic=:

</verbatim>

We can use the same example as above. In a topic write:

%TMPL:INCLUDE{"view"}%

%TMPL:DEF{"top:toolbarbuttons"}%%TMPL:P{"more_link"}%%TMPL:END%

</verbatim>

</blockquote>

You can also test this by appending =?template=PersonalInfoView= to the url.

---++ Reference: pattern skin template INCLUDE tree

The =view= script invokes the =view= template:

view

foswiki

css

viewtopbar

%SYSTEMWEB%.WebTopBar

viewsidebar

%WEB%.WebLeftBar

viewtopicactionbuttons

viewbottombar

%SYSTEMWEB%.WebBottomBar

</verbatim>

---++ Logo

---+++ How can I change the web logo?

By default the logo at the top left of each web points to the image with name =logo.gif= that is attached to each web's WebPreferences. <br />

The [[%SYSTEMWEB%.PreferenceSettings][preference settings]] that cause this behavior are defined in [[%WIKIPREFSTOPIC%]].

100

101

Redefine your custom [[%SYSTEMWEB%.PreferenceSettings][preference settings]] in [[%LOCALSITEPREFS%]] (to keep %WIKIPREFSTOPIC% intact):

102

103

* Set <nop>WEBLOGONAME = logo.gif

104

* Set <nop>WEBLOGOIMG = %<nop>PUBURLPATH%/%<nop>BASEWEB%/%<nop>WEBPREFSTOPIC%/%<nop>WEBLOGONAME%

105

* Set <nop>WEBLOGOURL = %<nop>SCRIPTURLPATH{"view"}%/%<nop>BASEWEB%/%<nop>HOMETOPIC%

106

* Set <nop>WEBLOGOALT = Home

107

</pre></blockquote>

108

109

There are 2 ways to change the logo in a web:

110

111

*Using logo.gif:*

112

113

* Create a new image named =logo.gif= and attach it to the web's WebPreferences topic. %SYSTEMWEB%.PatternSkin's stylesheet assumes the logo is 40px high. More about that later.

114

* You can also upload the image with FTP to =/pub/YourWeb/WebPreferences/=.

115

* Copy the above instructions ("Redefine your custom preference settings") and insert your logo name.

116

</blockquote>

117

*Using a new filename:*

118

119

* Attach whatever image and attach it to the web's WebPreferences topic. Then add to the WebPreferences (under _Custom web preferences_):

120

<pre>

121

* Set <nop>WEBLOGONAME = your-logo-name.gif-or-png

122

</pre>

123

* Copy the above instructions ("Redefine your custom preference settings") and insert your logo name.

124

</blockquote>

125

126

---+++ How do I set a site-wide logo?

127

128

There are a bunch of site-wide logo [[%SYSTEMWEB%.PreferenceSettings][preference settings]] in [[%LOCALSITEPREFS%]]: =WIKILOGOIMG=, =WIKILOGOURL= and =WIKILOGOALT=.

129

To change only the web logo image to site-wide, in [[%LOCALSITEPREFS%]] set:

130

131

* Set <nop>WEBLOGOIMG = %<nop>WIKILOGOIMG%

132

</pre></blockquote>

133

134

---+++ My logo does not fit the top bar

135

136

See [[#TopBarChangeHeight][I want to change the height of the top bar]]

137

138

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

139

140

Change the table style in topic %SYSTEMWEB%.WebTopBar. The default top padding is 11px.

141

142

---++ Top bar

143

144

---+++ The search box won't find topics in other webs

145

146

In %SYSTEMWEB%.WebTopBar you can find the line:

147

148

149

</verbatim>

150

151

To search all webs, write:

152

153

154

155

</verbatim>

156

</blockquote>

157

158

To search a couple of webs, for instance the webs Main and System, write:

159

160

161

162

</verbatim>

163

</blockquote>

164

165

See also: [[%SYSTEMWEB%.VarSEARCH][Search macro]]

166

167

#TopBarChangeHeight

168

---+++ I want to change the height of the top bar

169

170

_This information has moved to [[PatternSkinCssCookBook#HeightTopBar][PatternSkinCssCookBook]]_

171

172

---+++ I want to set or change the top background image

173

174

The image at the top is called "header art" - commonly the top image found on blog sites. The image that is displayed by default is set by the preference =WEBHEADERART=, defined in [[%WIKIPREFSTOPIC%]].

175

176

Redefine your custom [[%SYSTEMWEB%.PreferenceSettings][preference settings]] in [[%LOCALSITEPREFS%]] (to keep %WIKIPREFSTOPIC% intact):

177

178

* <nop>Set WEBHEADERART = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/PatternSkin/Foswiki_header.gif

179

* <nop>Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)

180

</pre></blockquote>

181

182

You can also set =WEBHEADERART= per web, by setting the preference in the Web's !WebPreferences.

183

184

---+++ I want to have the web color in the top bar

185

186

Redefine =WEBHEADERBGCOLOR= in [[%LOCALSITEPREFS%]] (to keep %WIKIPREFSTOPIC% intact):

187

188

* <nop>Set WEBHEADERBGCOLOR = %<nop>WEBBGCOLOR%

189

</pre></blockquote>

190

191

---+++ I want to remove the Jump and Search boxes from the top bar

192

193

If you have localization enabled, you will also see a language dropdown box at the far right.

194

195

You can remove these items from %SYSTEMWEB%.WebTopBar.

196

197

---+++ I want to hide the top bar

198

199

*Using templates:*

200

201

The view template is populated with page elements using template inclusions:

202

203

<pre>

204

%<nop>TMPL:INCLUDE{"view"}%

205

%<nop>TMPL:INCLUDE{"viewtopicactionbuttons"}%

206

%<nop>TMPL:INCLUDE{"viewtopbar"}%

207

%<nop>TMPL:INCLUDE{"viewsidebar"}%

208

</pre>

209

210

Each included template draws a part of the screen.%BR%

211

Omit =%<nop>TMPL:INCLUDE{"viewtopbar"}%= to hide the top bar.

212

213

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:

214

215

216

%TMPL:INCLUDE{"view"}%

217

%TMPL:DEF{"topbar"}%%TMPL:END%

218

</verbatim>

219

220

and add:

221

222

223

%TMPL:DEF{"topbardimensions"}%#patternTopBar,

224

#patternClearHeaderCenter,

225

#patternClearHeaderLeft,

226

#patternClearHeaderRight,

227

#patternTopBarContentsOuter {

228

height:0px;

229

}%TMPL:END%

230

</verbatim></blockquote>

231

232

*Using style sheets:* %BR%

233

See PatternSkinCssCookbookNoTopBar

234

235

---++ Left bar

236

237

---+++ I want to hide the side bar

238

239

*Using templates:* %BR%

240

Omit =%<nop>TMPL:INCLUDE{"viewsidebar"}%= to hide the side bar, or in a custom template clear it using

241

242

%TMPL:DEF{"sidebar"}%%TMPL:END%

243

</verbatim></blockquote>

244

245

*Using style sheets:* %BR%

246

See PatternSkinCssCookbookNoLeftBar

247

248

249

---++ Buttons

250

251

---+++ I want to hide the edit buttons from certain users

252

253

It may defy the wiki-ness of your Foswiki 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.

254

255

Using either a template or a topic template, 'empty' =top:toolbarbuttons= and =topicaction= by writing:

256

257

%<nop>TMPL:INCLUDE{"view"}%

258

%<nop>TMPL:DEF{"top:toolbarbuttons"}%%TMPL:END%

259

%<nop>TMPL:DEF{"topicaction"}%%TMPL:END%

260

</pre></blockquote>

261

262

In the user page of %USERSWEB%.WikiGuest, set the cover to

263

264

* <nop>Set COVER = customer

265

</pre></blockquote>

266

267

By default this topic is editable only by Wiki admins.

268

269

---+++ I want to remove the History button from the bottom

270

271

All action links and buttons are defined in =viewtopicactionbuttons.tmpl=. The bottom history link is defined in DEF =action_revisions=

272

273

%TMPL:DEF{"topicactionbuttons"}%

274

%TMPL:P{"action_activatable_edit_or_create"}%

275

%TMPL:P{"action_activatable_attach"}%

276

%TMPL:P{"action_printable"}%

277

%TMPL:P{"action_revisions"}%

278

%TMPL:P{"action_backlinks_simple"}%

279

%TMPL:P{"action_raw_or_view"}%

280

%TMPL:P{"action_activatable_raw_edit"}%

281

%TMPL:P{"activatable_more"}%

282

%TMPL:END%

283

</verbatim></blockquote>

284

285

To hide that link, In a custom skin view template =view.myskin.tmpl= empty =action_revisions= by replacing it with an empty string:

286

287

%TMPL:INCLUDE{"view"}%

288

%TMPL:DEF{"action_revisions"}%%TMPL:END%

289

</verbatim></blockquote>

290

291

292

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

293

294

The default definition in =view.pattern.tmpl= is:

295

296

%TMPL:DEF{"top:toolbarbuttons"}%%TMPL:P{"activatable_edit_or_create"}%%TMPL:P{"activatable_attach"}%%TMPL:END%

297

</verbatim>

298

299

Create a new skin by creating a file =view.myskin.tmpl= in the =templates= directory. Write in it:

300

301

302

%TMPL:INCLUDE{"view"}%

303

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

304

</verbatim></blockquote>

305

306

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

307

308

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

309

310

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

311

312

create_topic_link

313

raw_edit_link

314

view_topic_link

315

activatable_attach

316

activatable_edit_or_create

317

more_link

318

activatable_printable

319

backlinks_web_link

320

backlinks_all_link

321

backlinks_link

322

history_rdiff_link

323

history_history_link

324

raw_link

325

</verbatim></blockquote>

326

327

328

---++ Other page parts

329

330

---+++ I want to insert text outside of the topic content

331

332

!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.

333

334

Both modules are wrapped in CSS containers:

335

* =contentheader= - wrapped in =div= of class =foswikiContentHeader=

336

* =contentfooter= - wrapped in =div= of class =foswikiContentFooter=

337

338

To put contents *before* the main text, use the custom skin approach as described above.%BR%

339

So our custom template contains:

340

341

%TMPL:INCLUDE{"view"}%

342

%TMPL:DEF{"contentheader"}%This is the text before%TMPL:END%

343

</verbatim></blockquote>

344

345

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

346

347

%TMPL:INCLUDE{"view"}%

348

%TMPL:DEF{"contentfooter"}%This is the text after%TMPL:END%

349

</verbatim></blockquote>

350

351

---+++ I want to place the form at the top

352

353

Pattern skin has 2 buckets for the form: =formtop= (form at the top) and =formbottom= (form at the bottom). The default definition is:

354

355

356

357

%TMPL:DEF{"formtop"}%%TMPL:END%

358

%TMPL:DEF{"formbottom"}%%TMPL:P{"form"}%%TMPL:END%

359

</verbatim>

360

</blockquote>

361

362

You simply swap the bucket contents. Using either a template or a topic template, write in your custom template:

363

364

365

366

%TMPL:INCLUDE{"view"}%

367

%TMPL:DEF{"formtop"}%%TMPL:P{"form"}%%TMPL:END%

368

%TMPL:DEF{"formbottom"}%%TMPL:END%

369

</verbatim>

370

</blockquote>

Older »