Blog tweaking

The current SemPress theme places the Header image between the title and the start of the articles…

…which may be what was intended but I wanted it behind the title text so it was time to do some more CSS tweaking. Having moved the image I coloured the text from the cloud’s colours, used the darker blue corner of the sky both as a shadow under the title and as the background colour behind the articles. I rounded the corners of some images and the article’s panels.

Of course the moved image was screwed up on smaller screens so it is no longer shown on mobile devices – although some tablets will show it in landscape mode but not in portrait mode.

The amendments, which override the default CSS, now look like this:

As I’m sure there will be more to come I leave this here as an Aide-mรƒยฉmoire.

Yadit #100DaysToOffload

Which WordPress Plugins I Use

I was interested to read Kev Quirk’s plugins article as I had found his introduction to the IndieWeb thing very helpful.

I currently have 18 active plugins – which is probably far too many. So this is as much an exercise for me to consider which can be deactivated as it is information for anyone else; but in the tangled mess that this blog has become over the years it is hard to say which are still actually needed.

Akismet Anti-Spam which did a great job of filtering out spam comments. But as I now have a JetPack account I probably do not need this plug in. And as I have turned off the ability to comment I probably do not need this plugin.

Background Update Tester Checked the site to ensure it was set up correctly for automated updates. I can probably deactivate this one too as it has not been updated in five years and is probably no longer required.

Classic Editor Restores the classic WordPress editor replacing the new blocky Gutenberg editor when required for IndieWeb stuff.

Hotfix Provided quick fixes for individual WordPress bugs between updates. Can probably be deactivated as I do do the updates regularly as required.

IndieWeb Adds IndieWeb functionality – whatever that is :-/

Insert Headers and Footers Not sure what I was using this one for as I do not do the Google Analytics or Facebook linkage things. Possibly deactivate.

Jetpack adds a lot of goodness to the site – security, backups, image optimisation etc.

Microformats 2 More IndieWeb stuff. Not sure it is required as I have switched to an IndieWeb friendly theme anyway.

Page Links To Provides simple links out of the WordPress site. Could probably deactivate this as I am moving link outs to the sidebar widgets.

PHP code widget Allows you to add PHP code to the site – not sure what I was doing with this.

Post Kinds More IndieWeb stuff doing something or other.

Preserve Code Formatting Displays code as text so it does not get used as code by the site.

Simple Lightbox Presents pictures in a neat way. I need to configure this to do more.

Tumult Hype Animations Player for animations created in Tumult’s Hype editor. I should try and use this more.

VaultPress Backup system which is now part of JetPack so this one can probably go too.

WP Super Cache Helps to speed up the presentation of site.

Wiki Tooltip Makes the little window that pops up when you move over a link to Wikipedia (or whatever you have set it to respond to).


WP-DBManager Helps to keep the tangled sprawling mess that is this blog’s database in some kind of order.

So apparently most of my plugins can go and I should just stick with the half dozen or so that are actually required/doing something.

Tomorrow: What is all that crap in the menu bar? As we have not had one of those for a while.

Yadit #100DaysToOffload

Cimy Header Image Rotator and the Twenty Eleven theme

Here we are with the all new WordPress 3.2 and the Twenty Eleven theme. One difference being that the header images should now be 1000 X 288 pixels. Apart from that you can still insert your Cimy Header Image Rotator plug-in code into the header.php file as detailed for the Twenty Ten theme (with the proviso regarding child themes of course).


// Houston, we have a new header image!

echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
 else : ?>
      

Insert your code here




<?php endif; // end check for featured image or standard header ?>

But it is probably time for a change so I am no longer using the Cimy Header Image Rotator plug-in…hence the lack of image rotation ๐Ÿ˜‰

Update: The Header Image Slider plugin is now being tested.

WordPress 3.1 and the broken blogs

Progress! In the unrelenting march to some ideal, feature rich, future we have to occasionally update the WordPress software which normally amounts to clicking on the Automatic Update link and waiting a moment for the updater to do its thing. Alas the 3.1 update did not do its thing and the blog was broken; left bereft with only the message:

Unable to even log in to see what the problem was I turned to my trusty FTP software to get into the blog. The usual suspects are the plugins which add myriad enhancements but will often cause as many problems. Renaming the plugins folder, so WordPress will not recognise it, allowed me to get to the login screen; and once in I was greated with the message

Clicking the link to run the updater again successfully updated WordPress. Moving all the plugins back into the newly created plugins folder showed that it was not the plugins at fault this time but the errors seemed to be from my own child theme. So we are now back with a hacked about a bit Twenty Ten theme which will break when the next update comes along. Ho hum.

Seems there have been a few problems with the update.

Cimy Header Image Rotator and a Twenty Ten Child Theme

The previous post about rotating the header images in the Twenty Ten theme has been quite popular

but it was bad advice because as soon as you update your WordPress and/or theme files your changes are overwritten and lost. The solution is to move the changes into a child theme where they will overwrite the files in the original theme even when updating.

To make a child theme we simply create a folder in the WordPress themes folder (in the wp-content folder) and give it a name: mychildtheme (or whatever you want to call it).

We then save a plain text file called style.css into the mychildtheme folder. The style.css file reads:

/*
Theme Name: mychildtheme
Template: twentyten
*/

@import url(“../twentyten/style.css”);

#cimy_div_id {
clear: both;
border-top: 4px solid #000;
border-bottom: 1px solid #000;
width: 940px;
height: 198px;
}

Where the Theme name and Template are required to indicate the parent and the child. The import URL grabs the original style.css file to be altered by our style.css file. We then include the #cimy_div_id section that we had originally used in the header.php file.

Create a new plain text file and copy the contents of the header.php file into it. Replace the

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

code with the


<div id="cimy_div_id">

<noscript>
<img id="cimy_img_id" src="http://yourDomain.com/somePicture.jpg" alt="" />
</noscript>

</div>

as before (we no longer need the styling here as it is in the style.css file), and then save this as header.php into the mychildtheme folder.

We can now preview and activate our mychildtheme as you would any other theme within WordPress. Our modified header.php will be used instead of the default header.php and our style.css will be used to make changes to the default styling. You can add further changes to the styling by adding to the style.css file in the child theme. The Firebug extension for the Firefox browser is a quick way to experiment with making changes before adding the code to your style sheet.

Cimy Header Image Rotator and the Twenty Ten Theme

Update Note: This piece referred to older versions of WordPress and Cimy Header plugin. With the arrival of WordPress 3.1 and version 4 of the Cimy Header plugin some of the details have changed but the basic idea will still work ๐Ÿ˜‰ You are looking for:

// Houston, we have a new header image!
            echo get_the_post_thumbnail( $post->ID );
          elseif ( get_header_image() ) : ?>

Insert your amendments here

        <?php endif; ?>
      </div><!-- #branding -->

This was the original post:

With the recent arrival of the very wonderful WordPress 3 comes a neat new default theme called Twenty Ten which you are now looking at. Within the theme’s clean and simple layout there are plenty of options for tweaking for that individual touch. I had added an image to the header (and other featured images to head individual pages) but after snapping some passing clouds (get it?) and the occasional [wikipop]paraglider[/wikipop] while sunbathing, I wanted the header image to cycle through several images (as above)…

[Note: If you only want to rotate through the images supplied with the theme try the Twenty Ten Header Rotator plug in]

Enter the Cimy Header Image Rotator plug in which looked like it was up to the job but needed some simple tweaking to fit in with the Twenty Ten theme. This is what I did…

Once the plugin is installed and activated you need to create a folder as detailed in the documentation. In the WordPress Settings section you can adjust the speed of image change and the duration of the fade etc. Set the width and height to the theme’s default 940 x 198.

In the Appearance section select the Editor and then click Header from the list on the right. It may be a good idea to select all the contents of header.php, copy it and save it in a text document somewhere safe. Then when it all gets screwed up you can put the original code back ๐Ÿ˜‰

The given code to insert is:

<div id="cimy_div_id">Loading images...</div>
<style type="text/css">
  #cimy_div_id {
    margin: 1em auto;
    border: 1px solid #000000;
    width: 400px;
    height: 200px;
  }
</style>
<noscript>
  <div id="cimy_div_id_nojs">
    <img id="cimy_img_id" src="" alt="" />
  </div>
</noscript>

which we want to insert into the header code to replace:

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

which can be found between an

else : ?>

and a

<?php endif; ?>

towards the bottom.

My code ended up looking like:

<div id="cimy_div_id">

<noscript>
  
  <img id="cimy_img_id" src="http://yourDomain.com/somePicture.jpg" alt="" />
  
</noscript>

</div>
<style type="text/css">
  #cimy_div_id {
    clear: both;
    border-top: 4px solid #000;
    border-bottom: 1px solid #000;
    width: 940px;
    height: 198px;
  }
</style>

Which amounted to removing the Loading images text, moving the NoScript bit up to the top – this kicks in if the visitor does not have JavaScript enabled so provide a link to some image that will load for them, and editing the Style section thus…

The rotating images will probably align with the right hand column in the theme and hang off the page to the right – the clear: both; will bring them back onto the page. The border top and bottom keeps the look the same as the standard Twenty Ten theme image and ties in with the menu under the image. The width and height are corrected to the theme’s default values.

And that was that.

Update: This will all be broken when you update to the new versions of WordPress / Twenty Ten Theme – like what I just did :-/

I have moved the whole thing into a child theme so as to avoid further breakages.

Revolution video & WordPress 2.7.1 upgrade fixes

While exploring Runtime Revolution I was unable to view the tutorial videos. I had the audio content but a blank green screen replaced the video content. It turns out the problem is solved by disabling the Perian plugin for Quicktime.

I also was unable to do the WordPress automatic update thingy. This one was solved by disabling the WordPress Automatic Upgrade plugin which was conflicting with the automatic updating process :-/

I just mention these in case you are looking for a solution to similar problems.

All original content may be freely copied. Illustration on packaging may not match content.
Batteries not included. Suitable for vegetarians. Open at the other end.