Blipper widget example

My Blipper Widget for WordPress is included on this page below using a 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:

[Xblipper_widgetX]The content goes here[/Xblipper_widgetX]

NB In the above code, the name of the shortcode blipper_widget is prefixed and suffixed with an X to prevent WordPress executing the shortcode.

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 WordPress customiser. NB 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.

Shortcode

This is the shortcode that generates the above instance of Blipper Widget:

[Xblipper_widgetX title='Placing Blipper Widget on the page with the shortcode' add-link-to-blip=show display-journal-title=show display-powered-by=show display-desc-text=show]<This text>[/Xblipper_widgetX]

CSS code

This is the CSS that styles the above instance of Blipper Widget:

.bw-blip {
  --colour--blipfoto--white: hsla(115, 100%, 100%, 1.0); /* From the blipfoto website */
  --colour--blipfoto--grey: hsla(116, 0%, 35%, 1.0); /* From the blipfoto website */
  --colour--blipfoto--black: hsla(0, 0%, 0%, 1.0); /* From the blipfoto website */
  background-color: var(--colour--blipfoto--grey);
  margin-bottom: 2ch;
  padding: 1ch;
}
.bw-figure {
  padding-top: 0.5ch;
  text-align: center;
}
.bw-caption {
  background-color: var(--colour--blipfoto--white);
  color: var(--colour--blipfoto--grey);
}
.bw-caption-header {
  color: var(--colour--blipfoto--black);
  font-size: larger;
  margin-bottom: 1ch;
}
.bw-caption-content {
  font-size: smaller;
}
.bw-caption-footer {
  color: var(--colour--blipfoto--black);
  font-size: smaller;
  font-weight: lighter;
  padding-top: 0.5ch;
  text-align: right;
}
.bw-text {
  background-color: var(--colour--blipfoto--white);
  color: var(--colour--blipfoto--black);
}
.bw-caption,
.blip-example .bw-text {
  margin: 0.5ch;
  padding: 0.5ch;
}