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 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:
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