Re-skinning WordPress – CSS and HTML

05 December 2010 Categories: General

One of the clients we are working with at the moment has asked us to help them improve their search engine rankings. To achieve this we have to utilise a variety of SEO techniques, one of which being the creation of a blog.
We currently use wordpress for this task as it provides an excellent blogging platform, due to the thousands of extensions, easy to use interface and the supportive community surrounding it.
As a web designer, the question you have to ask yourself on every project is, what is the most effective option for comleting the task in terms of time and quality constraints? This usually means using a pre-created template and re-skinning it. This solution means that the complex benefits of modern themes are already in place, rather than having to learn to create them from scratch.
So I had to build a blog quickly and to mirror the design of the client’s current site. This was so the blog could be bolted on.
Here follows a quick rundown of the steps I took to re-skin the blog.

Step1:
Look at the design of the site you are trying to mirror. So this means looking at the width, height and makeup of the divs. A good way to do this is to take a screen shot and paste it into Photoshop, you can then measure the parts. Then compare this to how the template you are going to be altering has it’s divs arranged.

Step2:

Start to test out how you can alter your template to the desired design using firebug http://getfirebug.com/. Once you are happy, copy and paste the css into the correct files within your theme editor.

Step3:
So you now have a page which structually mirrors the design but probably looks nothing like it. Go back to your screen shot and find out the colours that make up the site. Add these and all the required imagery.

Step4:
Now it is time for the navigation and footer. This can be made far easier by just copying the markup and code from the original site.
Navigate to the site and view source. Now find the html for the menu and copy the entire div. Open your header.php file and paste in the code. Refresh and you will see a version of the menu. Now go back to the original and using firebug, copy the css of all of the divs included within the menu. Copy this into your css files. And there we have it.

Repeat this for the footer.

And there we have it.

Read the full article 0 Comments

Nearing the end.

14 November 2010 Categories: General

The last couple of weeks have involved the rush towards finishing Antheaturner.com. This has involved me working longer hours and weekends, though, as I am quickly learning, this is a common factor when approaching the handover of large web projects. In order to achieve the client’s wishes, it has meant working very closely with ICOM, a digital marketing agency based on Regent Street. They phone regularly to provide ongoing feedback which has resulted in a decrease in the time lost due to inaccuracies in design and development.

My task this week was to complete the ‘Lifestyle’ and ‘Blog’ section of the site. The Lifestyle section is a mixture of recipes and tips. All in all this has meant creating about 40 pages with individual styling aspects on many of pages, an issue which results in a lot of time being spent trying to make sure that the CSS of the site didn’t conflict.

This brings me on to my tip of the week ;)

I have used a Joomla CMS system in combination with YOO ZOOto create Anthea’s site. So many of my pages show teasers of articles.. e.g a recipe name with a short description.. You then click on the teaser and are taken to the full recipe. I had an an issue where the teaser was also displaying on the full article view and no apparent way of stopping this.

I had a chat with a colleague of mine and stumbled upon this extension which saved the day.

http://extensions.joomla.org/extensions/access-a-security/modules-management/10307

It allows you further control of modules, so you can see which appear on a page saving time when searching for modules with similar names. Also, I was able to use a joomla article on the teaser page which enabled me to isolate the teaser images to the specific article in question.

I wish I had know about this sooner!

Read the full article 0 Comments

Learning DirectoryPress

28 June 2010 Categories: General

Learning DirectoryPress

We have decided to build a Marine Directory and this has meant looking into the huge number of directory software solutions available. The main issue to begin with is cost, then which framework to use? I am confident using Joomla, Drupal and WordPress but which will provide the most functionality to meet our requirements?

I have spent the last two days creating a directory using DirectoryPress. DirectoryPress is an add on script for WordPress which aims to turn your simple blog into a directory website within minutes. At a discounted cost of $79 it provides a powerful and affordable solution. The software does seem to have some bugsĀ  and the support available is not as good as you might hope, though this may be due to how recently the product was created.

Ultimately we have decided not to use DocumentPress, though I do believe it competes well against MUCH more expensive competition. The reason being that the back end is not very intuitive. Whilst it is easy for a WordPress professional to use, it may cause untrained clients no end of problems.

Read the full article 1 Comment

And so it starts!

20 June 2010 Categories: General

And so it starts!

After studying for one year into a variety of web medias, it seems an ideal opportunity to start this blog.

Initially I taught myself HTML, CSS and the basics of design, PHP and Javascript. I then began volunteering for the Hampshire & Isle of Wight Wildlife Trust

They use the Beekeeper CMS system and provide a huge amount of services from education and conservation through to running an online shop. My role was to create pages using the CMS , add upcoming events and important information , as well as administering the online shop.

More recently I have begun contracting for Boxchilli Media. They specialise in Web Design, E-Commerce and marketing. Here I have taken on a full designer’s role and have learnt to use the Joomla content management system. We are able to design, create and host all manner of websites.

My aim over the coming years, is to grow this blog to chart my progress and to hopefully point out pitfalls and areas that are worth focussing on to anyone wishing to follow a similar path.

Read the full article 1 Comment