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……….

Whitespace WordPress Theme and Wrapping Very Long URLs

Very long URLs sometimes burst out of this content area and bleed across to the column on the right. I say sometimes because Firefox seems to do the right thing and wrap a long URL, whereas Chrome and Safari (and I think IE7) do not.

The following page says more about it all and gives a solution that seems to work:
http://perishablepress.com/press/2010/06/01/wrapping-content/

I implemented like this…

In the stylesheet find the Hyperlinks section near the top and add the bold text:

a, a:visited {
color: #017F8D;
text-decoration: none;
white-space: pre;           /* CSS 2.0 */
white-space: pre-wrap;      /* CSS 2.1 */
white-space: pre-line;      /* CSS 3.0 */
white-space: -pre-wrap;     /* Opera 4-6 */
white-space: -o-pre-wrap;   /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap;  /* HP Printers */
word-wrap: break-word;      /* IE 5+ */

}

Note: I first added the bold text to the ‘#content p’ definition so it would apply to any text. However this caused double spacing in listings like the code above and made other posts looked oddly formed with an extra blank link here and there. Using <pre> tags around code could help sort that but it’s extra work and the general extra blank lines here and there would have needed individually sorting too. Ultimately this is a long URLs problem and that’s what I’ve sorted.

Whitespace WordPress Theme and Right Column Moving Under Content Area

On some posts I noticed that the contents of the right column would appear under the content (the middle column). Horrid!

Looking at the CSS of the page as rendered on Firefox and with Web Developer extension – which I don’t know much about and don’t use much – showed that it was there because it was seen as content and not a new div. Old hands will have known this all the time I’m sure. So somehow the Content area was not being closed off as it should.

More poking around and I found the problem was repeatable:

  • If commenting (in posts) was switched on then this did not happen.
  • If there were no comments and commenting is closed then no problem.
  • If there are comments and commenting is then closed then there was a problem

The problem turned out to be a lack of a closing </div> in those circumstances – the logic was flawed.

To fix, go into comments.php

Find this code (note I have collapsed spaces from the start of lines):

<?php else : // this is displayed if there are no comments so far ?>

  <?php if ('open' == $post->comment_status) : ?>
     <!-- If comments are open, but there are no comments. -->

  <?php else : // comments are closed ?>
     <!-- If comments are closed. -->
     <p>Comments are closed.</p></div>

  <?php endif; ?>
<?php endif; ?>

and remove the bold </div> to give this:

<?php else : // this is displayed if there are no comments so far ?>

  <?php if ('open' == $post->comment_status) : ?>
     <!-- If comments are open, but there are no comments. -->

  <?php else : // comments are closed ?>
     <!-- If comments are closed. -->
     <p>Comments are closed.</p>

  <?php endif; ?>
<?php endif; ?>

Also towards the bottom of the file find this

<?php do_action(‘comment_form’, $post->ID); ?>

</form>
</div>

and remove the bold </div> to give this:

<?php do_action(‘comment_form’, $post->ID); ?>

</form>

And the last change is to add a </div> as the very last line in the file, which should then look like this:

<?php endif; // if you delete this the sky will fall on your head ?>
</div>

Whitespace WordPress Theme – Some Cosmetic Changes

Whitespace is no longer available and I suspect that few are using it these days. I’ve decided to stay with it for now because I still like it an its also an excuse to do some WordPress tweaks and learn more.

Colour Change
First up I wanted to add a little bit more sparkle and the Links colour has been changed to something a little lighter:

Old: #017F8D
New: #019CAD

However for hover links I retained the old colour generally and that punches them up a bit more. The change is scattered all around the style sheet – follow your nose!

Headings Change
I also decided that having heading all in lower case seemed to make them less readable and do I commented out the forcing of it in the stylesheet:

#content h1 {
color: #000000;
font-size: 20px;
font-family: Georgia, Helvetica, Sans-Serif;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
/* text-transform: lowercase; */
}

Footer Change

I also deleted the standard blogrole that seemed to overflow the footer and also the Admin links back to WordPress and XHTML checking etc. Also in the footer I commented out the left and middle floats and did a left float twice the width and put the Tags listing in there. I decided against a classic cloud with variable text sizes and used this code:

<div>
<h2>Tags: </h2>
<ul>
<?php wp_tag_cloud('smallest=9&largest=9&separator= || '); ?>
</ul>
</div>

Left SideBar Change
I also created a bit more space between entries in the Recently Written list – a custom bit of CSS because I wanted all the other links in the sidebar to have the original spacing. Probably not done optimally but it works for me.

Whitespace WordPress Theme Left Sidebar tidy

As delivered the words in the left sidebar don’t line up with the text in the header and the footer – they are more to the left and it tends to gove a bulging feeling rather then the neatness and order which I think the design is all about.

I fixed this as follows…

In WordPress Admin you need to edit style.css. Go into Presentation/Theme Editor and click on Stylesheet. Scroll down and in the Left Sidebar section find:

#l_sidebar {
float: left;
width: 180px;
margin: 0px;
padding: 0px 20px 20px 0px;
line-height: 17px;
display: inline;
}

and replace with

#l_sidebar {
float: left;
width: 172px;
margin: 0px;
padding: 0px 20px 20px 8px;
line-height: 17px;
display: inline;
}

I’ve put the modifed lines in bold.

Whitespace WordPress Theme and Title Image Replacement

With a new title font selected I created the graphic I needed in Photoshop as a gif:

Blog Title in Sphinx RR Inline

But how to use in the theme? I like the idea of image replacement – where you have the title specified as text – great for search engines and for people who surf without images on, but I have never used the technique. Here is how I got things sorted here – i don’t claim any of its optimal, but it seems to work well enough I think.

MezzoBlue has a page called Revised Image Replacement and it goes through a number of ways of doing it. Based on that I went for the Gilder/Levin solution….

1. Put the new graphic in your wp-content/themes/whitespace/images directory using ftp

2 In WordPress Admin you need to edit style.css. Go into Presentation/Theme Editor and click on Stylesheet. Scroll down and in the header section find:

#headerleft {
width: 465px;
height: 90px;
float: left;
margin: 0px;
padding: 20px 0px 0px 0px;
}

Change this to

#headerleft {width: 465px;
height: 90px;
float: left;
margin: 0px;
padding: 20px 0px 0px 0px;
position: relative;
}

#headerleft span {
background: url(images/brucemarriottcom_logo.gif) no-repeat;
background-position: -3px 24px;
position: absolute;
top: 0px; left: 0px;
width: 100%;
height: 100%;
}

There is one new line in #headerleft – the position: relative; This is really important and without it I was seeing most of the pages wrecked and one big link. For an explanation of why the position relative is needed see this discussion on DigitalPoint.

Also a brand new #headerleft span definition is added in. The background-position: -3px 24px; will probably be different for you – its what I need to make my new title graphic end up in just the right place.

With the changes done click the Update File button

3) In WordPress Admin you need to edit the Header. Go into Presentation/Theme Editor and click on Header.

Search for
<div id=”headerleft”>
<a href=”<?php echo get_settings(‘home’); ?>/”><?php bloginfo(‘name’); ?></a><br />
<?php bloginfo(‘description’); ?>
</div>

and change to:
<div id=”headerleft”>
<a href=”<?php echo get_settings(‘home’); ?>/”><span></span><?php bloginfo(‘name’); ?></a><br />
<?php bloginfo(‘description’); ?>
</div>

With the changes done click the Update File button

4) Now go look at your weblog and you should see the new title replace the old text. Just tweak background position coordinates until it sits where you want.

Browser Checks
I tried this on Firefox 2, IE7 and Safari 3 on a PC and it works fine. However on IE7 the hot link curser does not show up when you role over the graphic (it does on Firefox and Safari), however clicking on the graphic has the desired effect and all browsers take you back to the Home page. Those 3 browsers are good enough for me. However for an exhaustive look at these techniques across all try this piece at Ryznardesign. I have to say though that its really above me in its exhaustive detail. Read more

Choosing a Blog Title Font

I obviously much the like the theme I’m using (Whitespace) but I didn’t like the original standard heading text – the ‘BruceMarriott.com’ top left. As standard on a PC it looked like this:

Original Whitespace Blog Title on a PC

I wanted a nice font to give some colour and personality to an otherwise cooly clean look. The place I go to look at fonts is MyFonts. The great thing is you can test fonts by typing in a short prase (like BruceMarriott.com) and see what it looks like.

However many fonts look really cool on their own but then don’t fit with what you have – at least my non-designer eye can’t see how it will work.

So what I did was take a copy of the theme as delivered, pasted it into Photoshop and then, using the Myfonts test facility I produced likely good looking titles which I again copied and pasted (using layers) to see just how they would look on my page as is. (btw I grab copies off screen using 123 Screen Capture Pro – I don’t use it so often but when I do it always just works – hooray). Great – I went through 20 fonts I thought looked cool and about 12 of them just didn’t work at all. In the end there were 3 I thought nice and I’ve gone with Sphinx RR Inline.

Sphinx RR Inline

Distinctive, makes a mark, but not too heavy and a bit theatrical I think.

Having chosen the font actually using it as proved fun – but that’s another blog entry.

  • 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.