Wibble

Archive for the ‘Wordpress’ Category

So you can post to wordpress direct from your iPhone which is really kind cool, but you have to wonder where it will all end, I men what’s next ? Makes me really want an iPad

This is the only setting i needed to change on the blog ..

Today I migrated Wibble to a new copy of WordPress, although acording to wordpress.com

On December 18th, 2009, WordPress Version 2.9, named for Carmen McRae, was released to the public.

All looks nice and shiny and new in the editor view.  I will have to play some more to see what other features I can find.

if like me you have grabbed a non standard theme you may not have the code to make this work in the theme, after a brief trial with nested tables i realized this was just not going to work, time to get with the new format and do it using a style sheet.

After a bit of Google-ing around I discovered that I needed to add an images section this to my style.css

/* Begin Images */

p img {
        padding: 0;
        max-width: 100%;
        }

/*      Using ‘class=”alignright”‘ on an image will (who would’ve
        thought?!) align the image to the right. And using ‘class=”centered’,
        will of course center the image. This is much better than using
        align=”center”, being much more futureproof (and valid) */

img.centered {
        display: block;
        margin-left: auto;
        margin-right: auto;
        }

img.alignright {
        padding: 4px;
        margin: 0 0 2px 7px;
        display: inline;
        }

img.alignleft {
        padding: 4px;
        margin: 0 7px 2px 0;
        display: inline;
        }

.alignright {
        float: right;
        }

.alignleft {
        float: left
        }

/* End Images */

I got this code from the classic style sheet, now i can insert an image and use the syntax

<img class=”alignleft” title=”text here” src=”http://www.wibble.net.nz/wp-content/uploads/2009/05/imagename.png” alt=”text here”/>

And my image will wrap around ether left, right or centered, one trick also to remember is if you want to get the test to start after the image you can insert an empty tag like this

<div style=”clear:both;”></div>

however the editor will keep on deleting this ..

I have been playing with the header and have thought an image map may be cool to add to this, i havent used one of these for years and last time i did it in HTML.

So the key was to get the code for the image map, which i got from this site

http://riddle.pl/mappet/

You just put in a link to the image you want to image map, then draw the maps then copy the code to the header [in this case].

<div id=”imgmap”>
 <img height=”290″ width=”900″ src=”header.jpg” alt=”" />
 <ol>
  <li id=”area1″><a href=”http://”> area1 </a> </li>
  <li id=”area2″><a href=”http://”> area2 </a> </li>
  <li id=”area3″><a href=”http://”> area4 </a> </li>
   </ol>
</div>

I remove the img line, and just entered the rest of the code in the header.php, the image line was redundant, I also found you have to put the closing </div> tag at the end to get the code inside the header. and of course add the url’s for the shortcuts

Then you have to go to the style.php and add the second part of the code

#imgmap {
 position: relative;
 _zoom: 1;
}

#imgmap li {
 position: absolute;
 display: block;
 list-style: none;
 outline: 0px dashed;
 overflow: hidden;
}

#imgmap li a {
 display: block;
 width: 100%;
 height: 100%;
 _background: url(space.gif);
 text-indent: -1000em;
}

#area1 {
 left: 740px;
 top: 60px;
 width: 153px;
 height: 227px;
}

#area2 {
 left: 55px;
 top: 154px;
 width: 53px;
 height: 48px;
}
#area3 {
 left: 299px;
 top: 105px;
 width: 53px;
 height: 47px;
}

in this code the only changes were the line outline: 0px dashed; whic the generatotr wrote as 1px which of course meant the boxes showed.

That was all there was to it