Oct 22, 2017

Dancers are the athletes of God - Albert Einstein

Images in Whitespace – putting a border on and not flowing text around

I wanted to put a border around an image – like this:

I don’t want to do it for all images and so editing the HTML code of the post is used when needed. I just add this code to the end of the ‘img’ tag:
style=”border-style: solid; border-width: thin”

Also I often don’t want text to flow around an image and to fix that, and have the text show after the image (as is the case above), I add this after the image tag:
<br clear=”all” />

Putting it all together, here is the code that produced the above image and picked up from the HTML view in the WP post editor (which is where the changes were put in):

<img title=”share_this_after” src=”http://www.brucemarriott.com/wp-content/uploads/2010/09/share_this_after1.jpg” alt=”” width=”347″ height=”180″ style=”border-style: solid; border-width: thin” /><br clear=”all” />

I’m sure there are clever CSS ways of doing this as well, but this is simple and gives me the flexibility I want when I want.

Whitespace WordPress Theme – Social Bookmarking options, AddThis and ShareThis

This is the little row of icons at the bottom of posts that enable easy sharing of the post/page with Twitter and Facebook etc.

I did a search and there are lots of plugins around. What I look at is when was the code last updated and does it work with my version (3.0.1). The ‘AddThis Social Bookmarking Widget’ seemed to be used by lots of sites (not just WordPress and I loaded that. All worked fine – very easy. However when it did Tweets it added on the end ‘via addthis’ and there was no easily obvious way to remove it. I did a search and found a thread in the support area of the AddThis website and it seemed to show a couple of ways it might be done – both rather technical however. The first looked easiest but just said add this javascript – I had no idea how this related to the WordPress implementation! Also as I was doing the Google up came a ‘scare’ about AddThis and privacy issues. I didn’t bother to read further, but AddThis can give you metrics on where people go etc and if you ran you own setup you could track what users do anyway. How relevant it is I’m not sure, however to keep trying to fix the Twitter ‘advertisement’ with this background seemed wrong.

Another look around and this time I went with ‘ShareThis‘. Like AddThis it is a hosted service but its instructions on use seems simpler. Of the 7 display options I configured it to use ‘Regular Buttons’ – no 5 of the 7. Using the second configuration option I changed the ordering to put Twitter first. The example image shows, to the right of each icon, the name of that social service eg Twitter. However it does not come configured like this and ‘share’ was the text next to each icon. This can be fixed in the thirs config option titled ‘Click to view/modify the HTML tags’. This has essentially the same code fragment repeated 4 times, once for each option and at the end of each fragment you find: “displayText=’share'”. You just modify the ‘share’ text to ‘Twitter’ and ‘Facebook’ etc. Annoyingly the config page seems to forget this and if you go away and look at the code again you find the changes are not there. In actuality it is all working fine but the result of his is that if you modify anything on the config page again those changes will be forgotten and need to be put in again. A small gotcha.

The only thing then was to adjust the look. As delivered the bottom of a post looked like this:

To my eye the social row seems to hover a bit and should really be closer to the line beneath.

Rather then try and style the social row itself, (to be honest I don’t entirely see how it gets injected or how it might be styled!) I concentrated on the code below and raising up the line of dots so they are nearer what went before – in this case the row of social icons.

In the stylesheet find this:

.postmeta {
width: 500px;
padding: 2px 0px 30px 0px;
margin: 0px 0px 0px 0px;
border-top: 1px dotted #C0C0C0;

and change to:

.postmeta {
width: 500px;
padding: 2px 0px 30px 0px;
margin: -10px 0px 0px 0px;
border-top: 1px dotted #C0C0C0;

The bold shows the change. Doing that gives this visual arrangement:

That’s it……….

  • About BruceMarriott.com

    A home on the web for blogging about life and what I do professionally and otherwise. More in the About section.

  • Ballet.co and Dance

    I'm best known for running Ballet.co - one of the biggest sites in the world about watching ballet and dance. The Ballet.co page on this site says more or Just visit www.ballet.co.uk

  • LiftedLeg and Negotiating

    In an earlier life I loved doing deals and now I represent some professionals involved in dance. They concentrate on the art they love and I concentrate on achieving fair terms and conditions for them. More on the LiftedLeg page.