Oct 22, 2017

Dancers are the athletes of God - Albert Einstein

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.

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