DesignWIKI

Fil Salustri's Design Site

Site Tools


wiki:content_blocks_with_wrap

Content Blocks with Wrap

The Wrap plugin can be used to create blocks of content that stand out, but not without some CSS.

Examples

The page title itself is an example. You can use this to combine the page summary (first paragraph below page title) with the title into a unit that's set off from the rest of the page.

A Heading

So here's a sample wrap containing what I hope to eventually be a nicely formatted, visually appealing bit of content.

It has to make use of at least some of the colour palette values I have, even though I still have to figure out how to do that in an organized way. The stuff in styles.ini isn't really helping much right now.

<WRAP announcement green smaller 46%>
==== A Heading ====

So here's a sample wrap containing what I hope to eventually be a nicely formatted, visually appealing bit of content. 

It has to make use of at least some of the colour palette values I have, even though I still have to figure out how to do that in an organized way.  The stuff in ''styles.ini'' isn't really helping much right now.
</WRAP>

A Heading

So here's a sample wrap containing what I hope to eventually be a nicely formatted, visually appealing bit of content.

<WRAP announcement red round 46%>
==== A Heading ====

So here's a sample wrap containing what I hope to eventually be a nicely formatted, visually appealing bit of content. 
</WRAP>

Colours

Headline

This is blue.

Headline

This is orange.

Headline

This is red.

Headline

This is yellow.

Headline

This is purple.

Headline

This is aqua.

Headline

This is green.

Defined WRAP classes

These classes for WRAP should play nicely with all the other predefined WRAP classes.

Font related classes
smaller font scaled to 90% of normal
smallest font scaled to 80% of normal
larger font scaled to 110% of normal
largest font scaled to 120% of normal
Container class
announcement main container for a given block
Colours
blue, orange, red, yellow, purple, aqua, green Each of these set the background color for the Announcement. For each colour, a darker shade is automagically used for the border and heading.
Headings
H1 to H6 Headings are modified to “fit” nicely only within Announcements. Headings are not required in a given Announcement.

CSS Source

Everything needed is done in CSS. Some colours are defined in ini format - you can make them whatever you want.

/* FONT SIZES */
.dokuwiki div.wrap_smaller { font-size: 90%; }
.dokuwiki div.wrap_smallest { font-size: 80%; }
.dokuwiki div.wrap_larger { font-size: 110%; }
.dokuwiki div.wrap_largest {font-size: 120%; }

/* CONTAINER CLASS FOR ANNOUNCEMENTS & DEFAULT COLOURS*/
.dokuwiki div.wrap_announcement {
    padding: 10px 10px 0px;
    margin-bottom: 1.5em;
    overflow: hidden;
    background-color: #eeeeee;
    border: 2px solid #bbbbbb;
}

/* DEFAULT COLOURS & MODS FOR HEADINGS IN ANNOUNCEMENTS. */
.dokuwiki div.wrap_announcement h2,
.dokuwiki div.wrap_announcement h3,
.dokuwiki div.wrap_announcement h4,
.dokuwiki div.wrap_announcement h5,
.dokuwiki div.wrap_announcement h6 {
    padding: 5px 10px 0px;
    margin: -10px -10px 10px;
    border: 0;
    color: #000000;
    background-color: #bbbbbb;
}

/* ANNOUNCEMENT COLORS */
.dokuwiki div.wrap_green {
    background-color: #f6fff0;
    border: 2px solid __cpb_green__;
}
.dokuwiki div.wrap_blue { 
    background-color: #f0f8ff; 
    border: 2px solid __cpb_blue__;
}
.dokuwiki div.wrap_orange { 
    background-color: #fff9f6;
    border: 2px solid __cpb_orange__;
}
.dokuwiki div.wrap_red {
    background-color: #fff8f0;
    border: 2px solid __cpb_red__;
}
.dokuwiki div.wrap_yellow {
    background-color: #fffff0;
    border: 2px solid __cpb_yellow__;
}
.dokuwiki div.wrap_purple {
    background-color: #fff0ff;
    border: 2px solid __cpb_purple__;
}
.dokuwiki div.wrap_aqua {
    background-color: #f0fffa;
    border: 2px solid __cpb_aqua__;
}

/* COLOUR MODS FOR HEADINGS IN ANNOUNCEMENTS. */
.dokuwiki div.wrap_green h2,
.dokuwiki div.wrap_green h3,
.dokuwiki div.wrap_green h4,
.dokuwiki div.wrap_green h5,
.dokuwiki div.wrap_green h6
{ background-color: __cpb_green__; }

.dokuwiki div.wrap_blue h2,
.dokuwiki div.wrap_blue h3,
.dokuwiki div.wrap_blue h4,
.dokuwiki div.wrap_blue h5,
.dokuwiki div.wrap_blue h6
{ background-color: __cpb_blue__; }

.dokuwiki div.wrap_orange h2,
.dokuwiki div.wrap_orange h3,
.dokuwiki div.wrap_orange h4,
.dokuwiki div.wrap_orange h5,
.dokuwiki div.wrap_orange h6
{ background-color: __cpb_orange__; }

.dokuwiki div.wrap_red h2,
.dokuwiki div.wrap_red h3,
.dokuwiki div.wrap_red h4,
.dokuwiki div.wrap_red h5,
.dokuwiki div.wrap_red h6
{ background-color: __cpb_red__; }

.dokuwiki div.wrap_yellow h2,
.dokuwiki div.wrap_yellow h3,
.dokuwiki div.wrap_yellow h4,
.dokuwiki div.wrap_yellow h5,
.dokuwiki div.wrap_yellow h6
{ background-color: __cpb_yellow__; }

.dokuwiki div.wrap_purple h2,
.dokuwiki div.wrap_purple h3,
.dokuwiki div.wrap_purple h4,
.dokuwiki div.wrap_purple h5,
.dokuwiki div.wrap_purple h6
{ background-color: __cpb_purple__; }

.dokuwiki div.wrap_aqua h2,
.dokuwiki div.wrap_aqua h3,
.dokuwiki div.wrap_aqua h4,
.dokuwiki div.wrap_aqua h5,
.dokuwiki div.wrap_aqua h6
{ background-color: __cpb_aqua__; }

See Also

wiki/content_blocks_with_wrap.txt · Last modified: 2020.03.12 13:30 (external edit)