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.

Placing Blipper Widget on the page with the shortcode

I went to Tesco later than usual today; I was too late to get the right brand of not-chicken breasts, so that means there will be no hunter’s chicken again this week.

When I came out, there was a lot of car-horn honking.

‘What else did you get for Christmas?’ I muttered at Henry. Henry bears the brunt of a lot of my road rage, but he agrees with me, so it’s ok.

I thought the honking was probably coming from the train station car park, next door to Tesco’s car park. However, there was the chance that people were honking their displeasure at yet another idiot.

If there had been an idiot, I’d have to go a different way home, so I went to check. The way under the bridge was clear, but there was a long line of taxis in the station car park; no doubt the culprits.


We had yesterday’s culinary creation for tea today. I served it with herby couscous with sultanas and rose petals.

The cous cous was quite dry. I normally add finely diced red pepper and cucumber – oh, and I remember now: I normally mix in some sort of tasty paste like harissa or zhoug or chermoula. I didn’t put any of those things in this time. It’s the paste that turns couscous from dry and dull to tasty and interesting. There’s plenty couscous left over – I’ll see if there’s a jar of something in the cupboard before we have any more.

The verdict on the creation itself was ‘odd’. It wasn’t unpleasant, though, and there was warming tingle from the zhoug. Not sure I’d make it again, although Mr Pandammonium said he’d probably have seconds if there were any. That’s a reasonable success in my book.


The biscuits I made yesterday are all gone. We had the second batch today. They had firmed up, so could be dunked with confidence.

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;
}