Blogging Sueblimely

Work with WordPress MU (multi user) is the reason from my recent absence from blogging. The East Coast area of a UK charity, the National Coastwatch Institution, needed a rebuild of one its website to go along with an extension of it’s activities.

Although you may not have the same needs as this organization you may consider using WordPress MU if you want to develop more than one blog.

I had originally created the coastwatch site using the Joomla CMS system but, as the interface was complicated for them, WordPress was my obvious choice. After working with WordPress on various sites for a year or so, I know how flexible it can be. I was pleased to see that immediately after the new site was up and running Keef, who will be a co-author, had written a post and just needed me to tell him to hit the media button to add images. So much simpler.

As NCI East Coast now comprises of two coastwatch stations, managed by two separate committes, each needed their own unique identity, I decided on using WordPress MU to make administration simpler. Both stations now have their own unique pages and blogs on their own virtual subdomains.

The blog and some pages on the main East Coast site are being used as a private member only area for both of the coastwatch volunteer teams. Plugins turn this section into a true community site.

The other East Coast pages are public and contain information common to both stations. By using WordPress MU, the three blogs and three sets of static pages (NCI Eastcoast, NCI Skegness and NCI Mablethorpe) can all be managed from one admin dashboard.

I am hoping to see lots of posts written on the site to gain it speedy search engine page ranking and to raise awareness, more volunteer watchers and, hopefully more funds, for this worthy charity organization. Their volunteers man the coastwatch stations daily, making sure beach and sea goers are safe.

You may like to go along and leave a comment, joining me in congratulating them on their hard work and efforts in getting their second station up and running.

I will expand upon the advantages of and uses for MU in an upcoming post. For those of you interested in setting up an MU site I will also be talking of how to I set the East Coast site up, the plugins I used and where to find futher information.

I will also be discussing how you can use WordPress, including an existing installation, or WordPress MU to create a community site. As with the NCI Eastcoast example, you do not have to run your whole site as a community site – you can just have it as an add-on to a normal WP site.

Following my tutorial on adding borders to images I have been researching current online image editing applications which will allow you to do this and much more. Because of my web design activities I use Photoshop for image creation but the newer online editors are impressive and provide most of the editing functions I would require: they are much easier to use too.

Image Editors with extensive features

As well as allowing for upload of images from your computer, these applications allow you to import/export from other sites such as Flickr, Photobucket, Picasa, Facebook and MySpace.

Common Features include:

• cropping and resizing
• color adjustment and enhancing
• red eye reduction
• add text
• add frames and borders
• various fancy filters and effects

• Fotoflexer – grandly calls itself the "the world’s most advanced online image editor" but it does have a host of impressive features; from the more standard editing functions of to a range of fancy effects.

• Flaunter is a suite of applications: PhotoEdit for the more basic jobs, PhotoStylr which includes effects, and PhotoProfilr which will create avatars and profile photos . which has a good range of features, is quick loading and also allows you to create digital scrapbooks, ecards, greeting cards and invitations
• Picnik – Another very advanced online editor with lots of easily applied effects. I got a little carried away using this as you can see.

Images – Broome Western Australia

UltraViolet Observations

• Splashup (previously known asFauxto)- Another multi featured editor with an interface like a that of a desktop program. It does not have all the fancy built in effects of the other two but it does allow more manipulation of images. If you have used programs such as Photoshop then you will find this simple to use, otherwise there may be a bit of a learning curve.

Other online image editors

These don’t come with all the special features of the above applications but do provide basic editing tools, which may be all you need the majority of the time.

• MyImager.com
• Phixr
• Pixer.us
• Snipshot – integrates with Firefox via a browser bookmarklet and allows you to integrate it into a website.
• Wiredness

In invite only beta

Aviary sounds and looks interesting but as I have only just signed up and have not got an invite as yet, I could not try it out. Aviary is a suite of online applications with tools, all named after birds, for image editing, typography, music, video and 3D. Aviary is aimed more at designers and artist rather than those who just want basic image editing tools. Their blog has a host of examples of what it can do – it looks pretty impressive to me and I like the idea that tutorials are available.

I have collected an extensive list of editing tools over the years but they do not compare with the capabilities of these newer ones. I have scrapped that list now and I will add to and update this list to keep it current. Please let me know if you have have any favorite image tools (online or desktop) and I will check them out for inclusion here or in a future post in this series on images.

Future posts will include where to find free images, websites that help you search for them and tools that do specific tasks.

Inbuilt blog editors make it relatively easy to insert and position images in posts but you can add some additional styling elements and make them more interesting.

The WordPress insert image screen (Appearance tab) allows you to add inline styling for individual images In Blogger you have to enter the CSS styling manually. If you have a particular style that you are going to use regularly it is simpler to add the a class to your CSS styling. I will explain this more as I go along.

WordPress Insert Image Screen

Firstly I will show you how to just add a simple border to your images and then I will build on this to create some different effects.

Simple Border

Inline styling

The html for an image with a solid border, 1px in width, color #FF0000:

<img src="http://www.imagesite.com/image.jpg" 
style="border:1px solid  #FF0000;"  />

Blogger - Add your image as usual and in your post html edit tab add all the colored code above after the image location and before the />

WordPress – In the ‘Insert Image’ window (Appearance tab) – enter the width of border you require to the ‘Border’ box (1 in this example).

This will produce a black border. To alter the color of the border enter border-color: #FF0000; in the Style box. (There is no need to add the code in orange (style=" and ")as this will be added automatically.) You can also add styling by editing in the post html window as in the instructions for Blogger above.

Add Code to Stylesheet

If you are going to use this same formatting regularly add a class to your CSS styling instead of the Inline method above (edit your style.css for WordPress, Layout/Edit html window in Blogger). Use a descriptive class name and you are more likely to remember it easily:

.border-red {border:1px solid #FF0000;}

When you want to use this border style – insert your image as usual and then add the the class in the html tab. From the example above:

<img src="http://www.imagesite.com/image.jpg"
class="border-red"  />

Border with padding

Follow the instructions as above but add padding to the outside of the image. The color between the image and the border will be the same as your post’s background color.

Inline styling:

<img src="http://www.imagesite.com/image.jpg" 
style="border:1px solid  #FF0000; padding:6px;"/>

or
Add to Stylesheet
CSS:

.border-padding {border:1px solid #FF0000; padding: 6px;}

HTML:

<img src="http://www.imagesite.com/image.jpg"
class="border-padding"  />

Border, Padding, Colored Background

The same as the prior image except for the addition of a colored background:

Inline styling:

<img src="http://www.imagesite.com/image.jpg" 
style="border:1px solid #5A750C; padding:6px;
background-color:#CCCCCC;" />

or
Add to Stylesheet
CSS:

.border-padback {border:1px solid #5A750C; padding:6px;
background-color:#CCCCCC;}

HTML:

<img src="http://www.imagesite.com/image.jpg"
class="border-padback"  />

Image Consistency

If you have various size images in a post you can standardize the size by adding borders and padding to smaller images to create an overall size matching your larger image. This time I have only included code for inlne styling as the padding will vary from image to image.

Inline Styling

<img src="http://www.imagesite.com/image.jpg" 
style="border:1px solid #FF0000;
padding:40px 78px 40px 78px;" />

You could get a bit fancier by increasing the width of the border and adding background color:

Inline Styling

<img src="http://www.imagesite.com/image.jpg" 
style="border:1px solid #FF0000;
padding:35px 70px 35px 70px;
background-color:#F5F5F5;" />

I have not included the ‘alt’ tag in the html coding here for the sake of simplicity. It is always worth adding this for accessibility and search engine reasons. If you need to know more about this please read my post The Alt Attribute and Online Public Relations recent post Demystifying Accessibility Myths: The Alt Tag Attribute

Today is the fourth course in my series on blog navigation menus – dessert. Some ‘sweet’ menus for you to copy – suitable for WordPress and Blogger.

Here is the html code you will need for all the examples:

HTML

<div id="menu">
<ul>
<li class="selected"><a href="http://www.your home page.com">Link2</a></li>
<li><a href="http://www.your link.com">Link2</a></li>
<li><a href="http://www.your link.com">Link3</a></li>
<li><a href="http://www.your link.com">Link4</a></li>
<li><a href="http://www.your link.com">Link4</a></li>
</ul>
<div class="clear"></div>
</div>

Menu Bar

CSS

<style type="text/css">
<!--
#menu, #menu li a {background-color: #8AAADF; color: #ffffff; font-size: 1.0em; font-weight: normal; height: 1.5em; line-height: 1.5em; text-decoration: none; }
#menu, #menu li {padding: 0; margin: 0;} #menu ul { padding: 0; margin: 0 0 0 25px; }
#menu li { float: left; list-style-type: none; white-space: nowrap; }
#menu li a { background-color: inherit; display: block; padding: 0 10px; border-right: 1px solid; border-right-color: #ffffff; }
#menu .selected, #menu a:hover { background-color: #B9CCEC; color: #ffffff; text-decoration: none; border-right: 1px solid #537495; border-right-color: #5B80A4; }
-->
</style>

Tabbed Menu

CSS

<style type="text/css">
<!--
#menu, #menu li a { color: #000000; font-size: 1.0em; font-weight: normal; height: 1.5em;
line-height: 1.5em; text-decoration: none; }
#menu, #menu li { background-color: #FFFFFF; padding: 0; margin: 0;}
#menu {border-bottom: 1px solid; border-bottom-color:#83E292;}
#menu ul { padding: 0; margin: 0 0 0 25px; }
#menu li { float: left; list-style-type: none; white-space: nowrap; margin-left: 10px; }
#menu li a { background-color: #83E292; display: block; margin: 0; padding: 0 10px; border:0;}
#menu .selected, #menu a:hover { background-color: #A0E9AB; color: #ffffff; margin: 0; font-size: 1em; text-decoration: none; border:0;}
-->
</style>

You will of course need to change the links to your own: Copy the code for your chosen menu into a text editor such as Notepad or Wordpad and alter the links to point to where you want them to go. This means altering not only the link text – e.g. Sausage Links – but the hyperlink too. Change http://www.your link.com to the address you are pointing the link to. (remember that blogger does not use the www prefix so you homepage will be something like http://yourbloggeraddress.blogspot.com)

These menus, styled using CSS, are infinitely changeable. If you wish for a thicker menu bar change the height and line height values (currently 1.5em). Change the colors to suit the rest of your blog by changing the values for "background-color" and for text "color".

How to use them in your blog:

Blogger

You can do this by adding an "html/javascript" page element. Firstly you need to make sure you are able to add the page element in the place you want it.

Go to your layout/html section and backup your current layout. Tick the "expand widgets" box. You can alter either of the following two tags (you may not have the crosscol wrapper so will need to alter the header section.

Change:

<b:section class='"crosscol"' id='"crosscol"' showaddelement='"no"'

To:

<b:section class='"crosscol"' id='"crosscol"' showaddelement='"yes"'

Or:
Change

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

To:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

If you already have 2 widgets add another and so on.

Now go to your layout/add element area and add an HTML/Javascript element to the header or cross column section. Copy and paste the CSS and the html code from your chosen menu into this. Alternatively, add just the html code to your html/javascript element and put the css into the style area of your template. Because Cascading Style Sheets cascade you may find the font size of the menus too larage or small so change the "font-size" in the html.

WordPress

You can approach this in two ways. If you already have a horizontal navigation menu built into your theme then you can just style this. The default WordPress menu is already called "menu" so the only changes that are needed are to the your style.php file. From the menu examples above only add the CSS styling portion (the code between the "<style type="text/css"><!–" and "–>
</style>" tags), replacing any tags of the same name.

If you do not have a horizontal menu bar already you can add one by adding the html code to your themes header.php file – just below the header division.

If you want to get fancy then instead of your home page address you can use this line instead.

<li><a href="<?php echo get_settings('home'); ?>"></a></li>

The next and final course in this menu tutorial will be made of a variety of fresh ingredients to tempt you to indulge yourselves.

I thought I would get down to the meat of the main menu today by showing you some css styling.

HTML Code for all of these menus:

An unordered list:

<div id="navigation">
<ul><li><a href="#"id="a#current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div>

Menu 1

With no CSS styling – the list will display vertically: (If you try this with your current template, existing styling may alter the look of this):

Menu 2

• display the list horizontally – display: inline;
• take away the bullets – list-style-type: none;

CSS

#navigation ul li {
   display: inline;
   list-style-type: none;
}

Menu 3

• increase the font size – font-size: 1.1em;
• create space (padding) between the words
• color the link text:
• change the link text color on hover

CSS

#navigation ul li {
  display: inline;
  list-style-type: none; 
  font-size: 1.1em;
  padding-right: 10px;}
  #navigation ul li a { color: #330099; }
  #navigation ul li a:hover {color: #00FF33;}

Menu 4

• Move the whole menu (the ul) to left by making margin and padding left "0"
• Take away the underlines – text-decoration: none;
• Add padding to link – padding: 3px 10px;
• Add background color to link – background-color: #9EBEDE;
• Add different background hover color – background-color: #006699;

CSS

#navigation ul li {
  display: inline;
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
#navigation ul li a {
  color: #000066;
  padding: 3px 10px;
  text-decoration: none;
  background-color: #9EBEDE;
}
#navigation ul li a:hover {
  color: #00FF33;
  background-color: #006699;
}

Menu 5

CSS

• Tell the menu to extend the full width of its container – width: 100%;
• Add background color to the whole menu (the ul) - background-color: #9EBEDE;
• Float the menu to the left
• Add a border to the menu items

#navigation  ul {
  padding-left: 0;
  margin-left: 0;
  background-color: #9EBEDE;
  float: left;
  width: 100%;
}
#navigation li {
  display: inline;
  list-style-type: none;
}
#navigation  li a {
  padding: 3px 10px;
  background-color: #9EBEDE;
  color: #000066;
  text-decoration: none;
  border-right-width: 1px;
  border-right-style:solid;
  border-right-color:#FFFFFF;
  float: left;
}
#navigation  li a:hover {
  background-color: #8FD8ED;
  color: #00C427;
}

Menu 6 – Tabs

• Add a border to the ul for the bottom line
• Add borders to the tabs (li)
• Add some padding to the ul to seperate the tabs from the bottom line.
• Identify the page by adding some styling and an id a#current

#navigation ul{
  margin-left: 0;
  padding-bottom: 3px;
  padding-left: 0;
  border-bottom-color: #666666;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
#navigation li {
  display: inline;
  list-style-type: none;
  font-size:1.1em;
}
#navigation li a {
  border-style: solid solid none;
  border-color:#003399;
  border-width: 1px;
  padding: 3px 10px;
  background: #9EBEDE;
  margin-left: 3px;
  text-decoration: none;
  color: #000066;
}
#navigation li a:visited { color: #003366;}
#navigation li a:hover {
  color: #00C427;
  background-color: #8FD8ED;
}
#navigation li a#current {
  background-color: #ffffff;
}

NB Notice the "border-bottom: 1px solid white;" in the last menu. This is CSS shorthand for "border-bottom-width: 1px; border-bottom-style:solid; border-bottom-width: 1px;"

I think that is more than enough to consume in one session – it certainly is for me anyway. Next (hopefully tomorrow) I will adapt these to some blogspot templates and WordPress themes. Please let me know if you want me to explain any of this further.