Accomplice helps you shape your organisation and workforce to deliver in the most efficient way. Primarily working across the East Midlands with the NHS and its partners, Accomplice offer cost-effective organisational development solutions.

This is the second refresh I have completed for Accomplice. The first refresh involved rebuilding the site for Wordpress based on the current Dreamweaver design. This time we completely reassessed the navigational structure, content and resources to make sure users could easily access all of the great content that had been previously hidden away.

There was a concern that the previous content did not fully show the capabilities of Accomplice. My tasks involved copy editing page content, articles and resources then presenting this newly exposed content in the best possible way to demonstrate Accomplice’s products, services and roles.

New features include a refreshed grid-based design, task based navigation, and increased use of posts for new and republished articles and events, as well as company news.

Future plans for the site include case studies to enrich the portfolio and more details on the roles that Accomplice can play in your NHS organisation.

URL: http://www.accomplice.uk.com

This sparkly theme has features including post images, threaded comments and drop down category menus. It has been tested on Wordpress 2.9 in Firefox, Safari, Opera, Chrome and IE6+.

The layout is based on the 960.gs vertical grid and the baseline.css horizontal grid. There are some neat CSS3 enhancements including RGBA transparency, text shadow and rounded corners.

Glitter is simple enough to be used for any type of blog, but the cute and girly style makes it ideal for the personal blog of a mommy, craft enthusiast or even a teen blogger.

View the demo | Download the theme

Key features

• Grid based design;
• RGBa transparency;
• Text shadow;
• Rounded corners;
• Large glitter background image;
• Drop down category menus;
• Post images (small on post listings, large on single post page);
• Smooth scrolling on “jump to top” and “reply” links;
• Threaded comments;
• Full width, sitemap, archive and links page templates;
• Supports Firefox, Safari, Chrome, Opera and IE7+; and
• Supports IE6 without drop down menus.

Notes

• Post and page content area is 600px wide; and
• Sidebar content area is 280px wide.

Upcoming features

In the next release (once Wordpress 3.0 is released) I hope to include the following features:

• Custom menu navigation;
• Excerpt styling for posts and pages;
• Theme options including different backgrounds; and
• PSD file download.

If you have any suggestions for the next feature release of Glitter please leave a comment below.

I have also decided to take down my old themes and rebuild some of theme with the latest features. They are all quite old now and just aren’t up to scratch for anyone looking for a new wordpress theme but hopefully they’ll be back up soon!

The team required a website that provided a public facing source of information on the team, news, events and transactions such as donations and membership payments. The site also needed to be flexible to accommodate future features such as a discussion forum and merchandise shop.

I designed and built a wordpress theme around the existing team mascot, Nyx, designed by pin up illustrator Charlotte Thomson. Features include flexible home page widgets for features, donate button and individual member pages.

Discussion forum and online shop soon to be launched.

URL: http://nottinghamrollergirls.com/

The latest project with BSO included a custom wordpress theme with jQuery features including carousel and smooth scroll.

This wordpress theme was based on a header design by Geo C and developed by myself into a wordpress theme. Key features of the site are the events calendar and lyrics archive.

The design theme was then extended across the BSO network to reskin the gallery and audio explorer.

URL: http://doghousegallery.net/blog

Previous work for BSO:

View the demo | Download the demo

I first got the idea for horizontal stripes from Elliot Jay Stocks‘ book, Sexy Web Design, where he produces a web design that has horizontal stripes running off the browser page. I then implemented it myself in the design of oldschoolnodoubt.com.

More recently, Neutron Creations launched a new design, again by Elliot Jay Stocks with CSS implemented by Ben Bodien which features the effect both horizontally and vertically.

Right stripes

Here’s the html for a stripe that starts in the middle and heads off to the right side of the screen, let’s keep it simple:

<div id="container">
<p class="horizontal right">Horizontal stripe</p>
</div>

Here’s the css:

.horizontal {
width:100%;
position:absolute;
margin:20px 0;
padding:20px;
}

.right {
left:50%;
margin-left:-100px;
text-align:left;
}

Ok, let’s break down the css. Firstly width:100%; this will make sure that your stripe is always the width of the user’s browser so, no matter how humongous their screen is your stripes will always go off their page.

In order to make sure we can start the stripe from wherever we like we use position:absolute; and use margin:20px 0; to place it vertically. Finally, we use padding:20px; because, well, everything needs a bit of padding.

Now we position the stripe horizontally. For a stripe that heads off to the right we set left:50%; which will give you a stripe that starts in the exact center of the page and continues on forever.

But, I want my stripe to start off center, in fact 100px towards the left of where it is now so I set margin-left:-100px;. If I want it to be off center and 100px towards the right I will use margin-left:100px;.

I then align my text with text-align:left; because I want the text to be next to the end of the stripe.

At this point you probably have a long stripe that heads off in the direction you want but you also have a horizontal scrollbar and that’s rarely a good thing. So now we need to do some work on the container div to get rid of that scroll bar.

Here is the css to go with that:

#container {
width:100%;
overflow:hidden;
position:relative;
height:200px;
}

We want the stripes to head off the browser page so the containing div must be the full width of the browser with width:100%; and in order to get rid of the scroll bar we use overflow:hidden; hiding the excess of the stripe.

You will now have a blank screen beacuse the stripes have a position:absolute; and as there is no content in the containing div we need to set a height:200px; and position:relative; to make sure that the stripes are visible.

Left stripes

To acheive a stripe that starts on the left and stops in the middle I add replace the right class with a class of left on the p:

<div id="container">
<p class="horizontal left">Horizontal stripe</p>
</div>

I then reverse all the right stripe styling:

.left {
right:50%;
margin-right:-100px;
text-align:right;
}

Please note: If you are using an inline element (span, strong, em, a), instead of the p to create your stripes you will also need a display:block; in your css.

19 FEB 10 – EDIT: Added a demo suitable for download.

22 FEB 10 – EDIT: Credited Ben Bodien for the CSS implementation of Neutron Creations.

URL:

Tasks: Design and custom Wordpress theme built using CSS.

Pink Party Nottingham, a charity event took place on October 28th 2009 at Fire&Ice, West Bridgford in aid of Breakthrough Breast Cancer. This year’s event raised a whopping £1,500 towards a cure for breast cancer. The website features blog posts, opportunity to purchase tickets plus twitter and flickr feeds.

The business required a new, closed to public, extension to their current, public facing, website especially for clients to create and update learning logs online. These logs would be used to document and help clients reflect on their progress in their development.

I installed Wordpress Mu and Buddypress to create the Learning Haven, a social network where users can have profiles, post status updates, create blogs, comment on peer blogs and join groups.

URL:

Tasks: Custom wordpress theme built using CSS based on the owner’s design.

Just No Doubt a fansite dedicated to an amazing band – No Doubt. You will find here all the latest news, high quality pictures, downloads, media and lots more.

Tasks: Custom wordpress theme built using CSS

Haikupit.com is a site full of twisted haiku poetry, taking a jaded and melancholy (yet highly amusing) look at modern life.

Here is a haiku from a recent visitor:

Andy your website
Is well designed and sexy
-Testimonial

David Howard

Tasks: Site Design, Installation of Content Management System, Training for Site Updates, Custom wordpress theme built using CSS.

Wilson Goodchild aims to support organisations to make a difference. They provide impartial management advice and support to our clients. Wilson Goodchild was formed in 2006 by Janette Goodchild and are based in the East Midlands.