CSSRibbon Proof Of Concept

Clean Blue Theme; based on the original CleanBlue skin

This CleanBlue theme page contains all styles to modify the Haddock Template. It is a port of the CleanBlue skin, written by Ichiro Furusato, v1.0.10, dd.12 January 2014.

Usage:#

%%add-css [CSSThemeCleanBlue] /%
Note: add this markup to your LeftMenu to set this as default theme on your site. Or add this to your personal [<username>Favorites] page, to use this theme as soon as your are authenticated. CSSThemeCleanBlue
See Category.Themes, Category.Add CSS Style

Haddock Styles Test Page#


Typography#

Heading 1#

Heading 2#

Heading 3#

Regular#

This is is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

Bold#

This is is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

Italic#

This is is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
This is just some sample %%lead content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

This line of text is meant to be treated as fine print.

The following snippet of text contains strikethrough, sub-script and super-script text.

Left#

This is is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

Justify#

This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

Center#

This is just some sample content.
Don’t even bother reading it;
you will just waste your time.
Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

Right#

This is is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?

Images#

By default, wide images are scaled down to fit the screen.

Haddock Styles Test page/wideimg.png

With %%scrollable-image, images retain their original size. You can scroll to view parts of the image which fall of the screen.

Haddock Styles Test page/wideimg.png

Emphasis classes#

  • Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Etiam porta sem malesuada magna mollis euismod.
  • Donec ullamcorper nulla non metus auctor fringilla.
  • Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Lowercased text
  • Uppercased text
  • Capitalized text
  • Small-caps text

Pre-formatted text#

Plain preformatted text
/**
 * the fibonacci series implemented as an Iterable
 */
public final class Fibonacci implements Iterable<Integer> {
  /** the next and previous members of the series. */
  private int a = 1, b = 1;

  public Iterator<Integer> iterator() {
    return new Iterator<Integer>() {
      /** the series is infinite. */
      public boolean hasNext() { return true; }
      public Integer next() {
        int tmp = a;
        a += b;
        b = tmp;
        return a;
      }
      public void remove() { throw new UnsupportedOperationException(); }
    };
  }

Prettified text (syntax colouring)
/**
 * the fibonacci series implemented as an Iterable.
 */
public final class Fibonacci implements Iterable<Integer> {
  /** the next and previous members of the series. */
  private int a = 1, b = 1;

  public Iterator<Integer> iterator() {
    return new Iterator<Integer>() {
      /** the series is infinite. */
      public boolean hasNext() { return true; }
      public Integer next() {
        int tmp = a;
        a += b;
        b = tmp;
        return a;
      }
      public void remove() { throw new UnsupportedOperationException(); }
    };
  }

And these pre-formatted blocks have a maximum height, the rest of the contents is scrollable.

/**
 * the fibonacci series implemented as an Iterable.
 */
public final class Fibonacci implements Iterable<Integer> {
  /** the next and previous members of the series. */
  private int a = 1, b = 1;

  public Iterator<Integer> iterator() {
    return new Iterator<Integer>() {
      /** the series is infinite. */
      public boolean hasNext() { return true; }
      public Integer next() {
        int tmp = a;
        a += b;
        b = tmp;
        return a;
      }
      public void remove() { throw new UnsupportedOperationException(); }
    };
  }

/**
 * the fibonacci series implemented as an Iterable.
 */
public final class Fibonacci implements Iterable<Integer> {
  /** the next and previous members of the series. */
  private int a = 1, b = 1;

  public Iterator<Integer> iterator() {
    return new Iterator<Integer>() {
      /** the series is infinite. */
      public boolean hasNext() { return true; }
      public Integer next() {
        int tmp = a;
        a += b;
        b = tmp;
        return a;
      }
      public void remove() { throw new UnsupportedOperationException(); }
    };
  }

Blockquotes #

This is just some sample %%quote content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you. Someone famous in Source Title

DropCaps#

The practice of using a large letter to mark the start of a text has been around for almost two thousand years. Illustrated caps increased usability by marking important passages and guiding readers through the text. Unlike their historic counterparts, drop caps on the Web don’t add value in terms of usability or readability—and they are hard for Web developers to control, often rendering differently across browsers.

And here is a page break#


Tables#

Default#

Planet Distance From Sun (miles) Diameter (miles) Year Length (days) Day Length (days)
Mercury 36,000,000 3,030 88 58.00
Venus 67,000,000 7,520 225 225.00
Earth 93,000,000 7,925 365 1.00
Mars 142,000,000 4,210 687 1.00
Jupiter 484,000,000 88,730 4,344 0.40
Saturn 888,000,000 74,975 10,768 0.40
Uranus 1,800,000,000 31,760 30,660 0.70
Neptune 2,800,000,000 30,600 60,150 0.65
Pluto 3,600,000,000 1,410 90,520 0.25

Fit#

Minimize the height of the rows and minimize the width of the table columns.
Planet Distance From Sun (miles) Diameter (miles) Year Length (days) Day Length (days)
Mercury 36,000,000 3,030 88 58.00
Venus 67,000,000 7,520 225 225.00
Earth 93,000,000 7,925 365 1.00
Mars 142,000,000 4,210 687 1.00
Jupiter 484,000,000 88,730 4,344 0.40
Saturn 888,000,000 74,975 10,768 0.40
Uranus 1,800,000,000 31,760 30,660 0.70
Neptune 2,800,000,000 30,600 60,150 0.65
Pluto 3,600,000,000 1,410 90,520 0.25

Condensed#

Minimize the height of the rows and minimize the width of the table columns.
Planet Distance From Sun (miles) Diameter (miles) Year Length (days) Day Length (days)
Mercury 36,000,000 3,030 88 58.00
Venus 67,000,000 7,520 225 225.00
Earth 93,000,000 7,925 365 1.00
Mars 142,000,000 4,210 687 1.00
Jupiter 484,000,000 88,730 4,344 0.40
Saturn 888,000,000 74,975 10,768 0.40
Uranus 1,800,000,000 31,760 30,660 0.70
Neptune 2,800,000,000 30,600 60,150 0.65
Pluto 3,600,000,000 1,410 90,520 0.25

Bordered#

Planet Distance From Sun (miles) Diameter (miles) Year Length (days) Day Length (days)
Mercury 36,000,000 3,030 88 58.00
Venus 67,000,000 7,520 225 225.00
Earth 93,000,000 7,925 365 1.00
Mars 142,000,000 4,210 687 1.00
Jupiter 484,000,000 88,730 4,344 0.40
Saturn 888,000,000 74,975 10,768 0.40
Uranus 1,800,000,000 31,760 30,660 0.70
Neptune 2,800,000,000 30,600 60,150 0.65
Pluto 3,600,000,000 1,410 90,520 0.25

Striped#

Planet Distance From Sun (miles) Diameter (miles) Year Length (days) Day Length (days)
Mercury 36,000,000 3,030 88 58.00
Venus 67,000,000 7,520 225 225.00
Earth 93,000,000 7,925 365 1.00
Mars 142,000,000 4,210 687 1.00
Jupiter 484,000,000 88,730 4,344 0.40
Saturn 888,000,000 74,975 10,768 0.40
Uranus 1,800,000,000 31,760 30,660 0.70
Neptune 2,800,000,000 30,600 60,150 0.65
Pluto 3,600,000,000 1,410 90,520 0.25

Hover #

Planet Distance From Sun (miles) Diameter (miles) Year Length (days) Day Length (days)
Mercury 36,000,000 3,030 88 58.00
Venus 67,000,000 7,520 225 225.00
Earth 93,000,000 7,925 365 1.00
Mars 142,000,000 4,210 687 1.00
Jupiter 484,000,000 88,730 4,344 0.40
Saturn 888,000,000 74,975 10,768 0.40
Uranus 1,800,000,000 31,760 30,660 0.70
Neptune 2,800,000,000 30,600 60,150 0.65
Pluto 3,600,000,000 1,410 90,520 0.25

Sort#

Planet Distance From Sun (miles) Diameter (miles) Year Length (days) Day Length (days)
Mercury 36,000,000 3,030 88 58.00
Venus 67,000,000 7,520 225 225.00
Earth 93,000,000 7,925 365 1.00
Mars 142,000,000 4,210 687 1.00
Jupiter 484,000,000 88,730 4,344 0.40
Saturn 888,000,000 74,975 10,768 0.40
Uranus 1,800,000,000 31,760 30,660 0.70
Neptune 2,800,000,000 30,600 60,150 0.65
Pluto 3,600,000,000 1,410 90,520 0.25

Filter#

Planet Distance From Sun (miles) Diameter (miles) Year Length (days) Day Length (days)
Mercury 36,000,000 3,030 88 58.00
Venus 67,000,000 7,520 225 225.00
Earth 93,000,000 7,925 365 1.00
Mars 142,000,000 4,210 687 1.00
Jupiter 484,000,000 88,730 4,344 0.40
Saturn 888,000,000 74,975 10,768 0.40
Uranus 1,800,000,000 31,760 30,660 0.70
Neptune 2,800,000,000 30,600 60,150 0.65
Pluto 3,600,000,000 1,410 90,520 0.25

Navs#

Tabs#

Tab1#

This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Tab2#

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Tab1#

This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Tab2#

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Pills#

Tab1#

This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Tab2#

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Tab1#

This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Tab2#

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Accordion#

Tab1#

This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Tab2#

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Tab1#

This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Tab2#

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Tab1#

This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Tab2#

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Text information boxes#

ALERT
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Default block
With modest border

Warning
Best check yo self, you're not looking too good.

Error. Oh snap! Change a few things up and try submitting again.

Success. Well done! You successfully read this important alert message.

Info. Heads up! This alert needs your attention, but it's not super important.

Can be used inline as well:

This is just some sample. Don’t even bother reading it; you will waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you ¿ OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Labels and Badges#

Default Primary Success Info Warning Danger

Badges: Example 3

Under-construction banner:

Graph Bars#

Default colors
100
100
100
100
100
With stripes (-striped)
100
100
100
100
100

Animated (-active)
100
100
100
100
100
Multiple graphBars
Category Weight Length
apple 20 20
pear 40 10
banana 60 5
strawberry 49 7
cherry 37 12
Gauge bars
apple 20
banana 60
strawberry 120
cherry 49

Progress bars
apple 20
pear 40
banana 60
strawberry 120

Vertical bars
Quarterly sales: 20 120 60 75

Lists #

Definition1
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Definition2
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Definition3
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
unordered
  • List item 1
  • List item 2
    • List item 21
  • List item 3

ordered
  1. List item 1
  2. List item 2
    1. List item 21
  3. List item 3

%%collapse
  • List item 1
  • List item 2
    • List item 21
  • List item 3
%%tree
  • List item 1
  • List item 2
    • List item 21
  • List item 3

-nostyle
  • List item 1
  • List item 2
    • List item 21
  • List item 3

-unstyled
  • List item 1
  • List item 2
    • List item 21
  • List item 3
%%list-group
  • List item 1
  • List item 2
    • List item 21
  • List item 3

%%list-group-hover
  • List item 1
  • List item 2
    • List item 21
  • List item 3

%%list-hover
  • List item 1
  • List item 2
    • List item 21
  • List item 3

Panel#

A Comment Box#

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This is just some sample content. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

A Collapse Box#

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.