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?
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?
Links#
- External Link
- Attachment Link
- Ordinary Wiki-Page Link
- Interwiki Link - Reader skin
- Interwiki Link- Raw page source
- SLIMBOX link, Full SLIMBOX link
- Category Link
Images#
By default, wide images are scaled down to fit the screen.
With %%scrollable-image, images retain their original size. You can scroll to view parts of the image which fall of the screen.
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
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(); } }; }
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.
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
With modest border
Warning
Best check yo self, you're not looking too good.
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 DangerBadges: 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
100
100
100
100
100
With stripes (-striped)
100
100
100
100
100
Animated (-active)
100
100
100
100
100
Category | Weight | Length |
---|---|---|
apple | 20 | 20 |
pear | 40 | 10 |
banana | 60 | 5 |
strawberry | 49 | 7 |
cherry | 37 | 12 |
Gauge bars
Progress bars
Vertical 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
ordered
%%collapse
- List item 1
- List item 2
- List item 21
- List item 3
ordered
- List item 1
- List item 2
- List item 21
- List item 3
%%collapse
- List item 1
- List item 2
- List item 21
- List item 3
%%tree
-nostyle
-unstyled
- 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-group-hover
%%list-hover
- 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
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.