You are here: Main » ChristopherOezbekOperaShowCSS

CSS-Template for Opera Show

07 Apr 2005 - 14:08 | Version 6 | DE

Opera has a feature that allows you turn a webpage into a presentation using CSS.

You can use this by adding the following line to your presentation:

%INCLUDE{Main.ChristopherOezbekOperaShowCSS}%

or by copying the following CSS code into your document. If you use Opera you can then switch to the presentation mode by pressing F11. Of course this page uses this presentation feature.

Caveats

The template inserts page-breaks before H3-HTML-Tags to divide the presentation into pages. This is a convenience feature, since now you don't have to insert DIV-Tags into the code to separate individual slides.
If you want to have components of the TWiki topic that you don't want to show during a presentation or that should be only visible during it, then use the following DIV-Classes:

<div class="screen">
<div class="projection">
<div class="both">

Page Numbers

Page numbers are created using the counter-increment functionality.
Since the CSS does not know where your presentation ends, you have to surround it with another DIV-class to make page numbers appear in the format "X of Y":
```
<div class="presentation">
...
</div>
```
Without this, only page numbers show ("X").
I did not find a solution for the problem of aligning the page number correctly for both single and double digit numbers.

Customization

The template uses the current TWiki-Background-Picture as defined by…
```
%WEBBGIMAGE%   
```
…and the color defined by…
```
%WEBCOLOR%   
```
…to adapt to the current web.
Feel free to copy this template and adapt it to your likening.

Printing

Unfortunately printing seems to be bit of a problem. Since Opera Show does print the print-view and not screen or projection.
This is my tweak:
- File → Print Options…
  - Paper orientation: Landscape and Size: A4
  - Print headers and footers, Fit to Width: OFF
  - Margins: 0
Still open: How to get the background on each slide.

References

This CSS code was adapted from the following sources:

CSS-Template

<style type="text/css">
<!--
// This CSS code was adapted from the following sources:
//  * Official Opera Show examples
//  * http://www.markschenk.com/cssexp/
//  * http://old.alistapart.com/stories/taminglists/
//
// Christopher Oezbek - 2004 - oezbek@inf.fu-berlin.de 
//
.screen     { display: block }
.projection { display: none }
.both       { display: block }
@media projection, print {
  .screen     { display: none }
  .projection { display: block }
  .both       { display: block }
  ul li:before { content: "\00BB \0020"; }
  ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
    text-indent: -1em; 
  }
  #headerbox, #footerbox, #menubox {
    display:none;
  }
  .presentation { height: 100%; margin: 0px; padding: 0px; }
  body {
    padding: 0;
    margin: 0px;
    margin-left: 180px;
    margin-right: 5%;
    color:black;
   line-height: 1.5;

  }
  h1, h2, h3 {
    font-size: 1.4em;
    padding-bottom: 0.2em;
    border-bottom: thick solid %WEBCOLOR%; // #e04;
    margin-top: 120px;
    counter-increment: slide;
  }
  h3 { 
    page-break-before: always; 
  }
  h1:before, h2:before, h3:before {
    content: counter(slide); position: absolute;// z-index:3;
    top: 95%; left: 5%; margin-left:-1.5em; font-size:0.5em; font-weight: bold; text-align:right;
  }
  div.presentation:after { 
    content: "\00A0 of "counter(slide); position: fixed; z-index:3;
    margin: 0;
    padding: 0;
    top: 90%; left: 5%; font-size: font-weight: bold; text-align:left; 
  }
}
@media projection and (max-device-width:640px) { body { font-size: 0.6em; }}
@media projection and (min-device-width:640px) { body { font-size: 0.9em; }}
@media projection and (min-device-width:800px) { body { font-size: 1.5em; }}
@media projection and (min-device-width:1024px) { body { font-size: 1.8em; }}
@media projection and (min-device-width:1280px) { body { font-size: 2.2em; }}
@media projection and (min-device-width:1400px) { body { font-size: 2.5em; }}
@media print { body { font-size: 1.7em; }}
-->
</style>

Comments

On Tue, 15 Feb 2005 00:26:40 +0100, David Best <xxx> wrote:

> Hi,
> I tried to leave the following comment on your homepage:
>
> Hi! I tried out your Opera Show CSS as I was looking for some templates  
> for a
> current presentation, but ended up using the Opera Show standard red one.
> Reasons: Yours didn't fit syntactically (I would have had to switch to h3
> instead of h1 and all of my pre-defined style would have  
> disappeared...). I
> also think the <div class="slide"> tags are a vital part of the concept  
> and
> shouldn't be omitted... But thanks for your work anyhow, best wishes from
> David (best@inf...)
>
> but didn't succeed because authorization was required. Also editing the  
> Wiki
> site (what I tried then) didn't work for same reason... :)

Hi David!

great that you tried the slide design. Sorry that the comment function is non-functional at the moment. This is mostly because we upgraded the TWiki-distribution and still have some minor problems. Editing is only permitted for users with a account of the local CS-department.

About <div class="slide">:
I was looking for an easy solution that fits well with TWiki. One of my design requirements was, that it is possible to turn a TWiki-page into a presentation with just a couple of lines. I found it ecspecially annoying to add the slide-tags.
About <H1> vs <H3>:
You can easily change that by modifiying the css in the right places.

Thanks for your comments.

Sitemap

GeschichteDesComputers

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback