Blipper widget example

The Blipper Widget is included on this page below using the shortcode. The shortcode used is given in the content of the blip’s caption. The content is text given between a pair of opening and closing Blipper Widget shortcodes: [blipper_widget]The content goes here[/blipper_widget]. The content allows you to add text independently of Blipfoto to the display text. It is constant for every blip.

The blip is styled using the CSS following the blip. The CSS is set in the Additional CSS section of the customiser. If you change your theme, you will need to remember to copy your Blipper Widget CSS from the old theme before you change so that you can easily paste it into the Additional CSS of your new theme. Alternatively, you could use a third-party CSS plugin to store Blipper Widget’s CSS, then it won’t change until you edit it in the third-party plugin or unti you delete that plugin.

The widget is displayed in the sidebar (which may be below the main text if your browser window or screen is narrow). It is styled using the widget settings form. Elsewhere on the site, the widget is styled using CSS – the same CSS used to style the shortcode version below.

Styling the widget using the widget settings form is simpler than using CSS, especially if you’re unfamiliar with CSS, but styling with CSS is more powerful and more flexible.

Blipper Widget placed on a page using the shortcode

Chayote
Sun 11 Apr 2021
Chayote by pandammonium
Blipper Widget in action using the shortcode [blipper_widget title='Blipper Widget placed on a page using the shortcode' add-link-to-blip=show display-journal-title=show display-powered-by=show display-desc-text=show]<This text>[/blipper_widget] to construct and display my latest blip. The blip is styled using the CSS below.
You’ll remember I bought a mysterious chayote the other day.For brunch, we had croissants, and I thought I’d serve the chayote on the side as fresh fruit, seeing as it seemed fruit-like. Mr Pandammonium tried it, then tried to fob it off on me, but I was having none of it. It tasted of nothing until a hint of something familiar wafted in, and the texture was crunchy, but not nice crunchy like an apple.I looked up chayote on Wikipedia. It said that raw, it’s ‘unpalatable’ and has the texture of a potato crossed with a cucumber. It’s actually a gourd, so it’s treated like a squash – that is, it’s cooked before eating. It can be served raw, but chopped up into a salsa or thinly sliced and dipped in a dressing. You don’t just eat it.It’s called a mirliton in British English, according to Wikipedia, but the Oxford Dictionary of English lists mirliton as a US English alternative of chayote.I’m vaguely considering buying another one to try cooked.

Shortcode

[blipper_widget title='Blipper Widget placed on a page using the shortcode' add-link-to-blip=show display-journal-title=show display-powered-by=show display-desc-text=show]<This text>[/blipper_widget]

CSS code

.bw-blip {
  margin-bottom: 2ex;
  text-align: centre;
}
.bw-figure {
  background-color: #383E41;
  border: 4px ridge #7949B1;
  color: inherit;
}
.bw-image {
  padding: 30px;	
}
.bw-caption {
  background-color: #ffffff;
  color: #7949B1;
}
.bw-caption-header {
  font-size: larger;
  font-weight: bolder;
  margin-bottom: 1ex;
  text-align: center;
}
.bw-caption-content {
  padding-bottom: 0.5ex;
  text-align: left;
}
.bw-caption-footer {
  background-color: inherit;
  color: #E1FDFF;
  font-size: smaller;
  font-weight: lighter;
  text-align: right;
}
.bw-text {
  background-color: inherit;
  border: 3px ridge #7949B1;
  color: #383E41;
  margin-top: 2ex;
}
.bw-caption,
.bw-text {
  padding-left: 0.5em;
  padding-right: 0.5em;
}