Welcome to Red Kite Web

Featured

Well I have finally moved to the dark side.  Had been developing my own CMS in .NET but due to writing the code in .NET 4 and the hosting I have already not supporting .NET 4 I have decided to move over to using Word Press.  This may change in the future but for not word press it is.

Any how welcome to the blog the main aim will be to publish posts on various topics on web and android development but basically will be a diary on progress on various projects that I am working on covering the problems/issues that I encounter on during the development of these projects and the methods I have employed to resolve these problems.

 

The Redesign Preperation

After reading the documentation on buddy press a new strategy has been used during the redesign of the community flats website.

Firstly I do not need to copy all the files from the buddy press default theme as I had assumed as we only need to create ones to override the default ones if the theme is created correctly.

So to start I created a new directory called theflat.  Inside this we create the style.css file which has a header this is the key into creating a theme that inherits from the default theme.  The header should look as follows:
/*
Theme Name: The Community Flat
Theme URI: http://www.redkiteweb.co.uk/index.php/category/projects/theflat/
Description: The Community Flat Theme for Buddy Press
Version: 1.0
Author: RedKiteWeb
Author URI: http://www.redkiteweb.co.uk/
Template: bp-default
Tags: buddypress, two-column, grey, dark
*/

This has the details of the theme.  A breakdown of these lines is as follows:

  1. Theme Name: The name of the theme.
  2. Theme URI: The location of the details.
  3. Description: The description of the theme.
  4. Version: The version of the theme.
  5. Author: The Author of the theme.
  6. Author URI: The location of the authors site.
  7. Template:  This detail of the header is important as this is the details of the parent template that will be used.  In the above case bp-default is the buddy press default theme.
  8. Tags: This is a list of features of the theme.  IMPORTANT if the theme is to be used as a buddy press theme the list of tags must include the tag BuddyPress.

Once this style sheet has been created we can start to change the theme itself.

First steps

The old posts have now been added to the site, along with the plugin “Category Sticky posts” this allows posts to be made features of categories.

So now the prep work has been completed I can start to make changes to the design of the site.

The first things to do will be to take a copy of the original theme and make a copy of if renaming it with a more appropriate name.

The header image will ge designed and uploaded ready for use.

In keeping with the old site there will be quite a few CSS modifications for colour changes as the old site was a dark theme we want to keep this new theme as a dark theme but the default design we are using is a light theme.

The flat project initiated

So the old site has now been backed up.  Word press installed along with the buddy press plugin.

There are still a couple of changes that need to be made first these being the restoration of previous articles into the word press site along with the upload of the images that were uploaded into the old site.

Once these tasks are completed the redesign can start to take place.

Time for a change

It seems it is time the community flat web site is updated.

This was originally a custom written .NET application by myself but I am going to move this site to a word press site with the buddy press plugin.

First things to do will be to take a backup of the current site so we do not loose any of the information or photos on the current site as some of these will need to be reused in the new design.  After backing up work can start on installing word press then the buddy press plugin.

And the the redesign can begin in earnest.

Header Designed

Right so now I have created a new header image and uploaded the image.  The image has now been applied as the header image.

The title and search bar are now overwriting part of the header image so a few fixes to the padding and margins of these elements of these and the final header changes are complete.

To fix the search bar and title positions I changed the #branding hgroup margin to margin: 0 290px; this moved the titles position over to where I wanted it.  The #site-title to margin-right: 0px; padding 24px 0 0; this removed the extra margin from the right hand side and set the top padding to space the title down the header to the correct amount.  The #site-description margin to 0 0px 3.65625em 0; to remove the extra margin from the right hand side.  And finally the #branding #searchform top and right positions to top: 24px; right: 140px; to position the search bar to the correct position from the top of the header and the correct space from the right hand side of the header.

First thoughs on the redesign

My first thoughts on the redesign are that the header takes up too much space at the top of the page.  Therefore the changes should be to reduce the height of the header.

First I will make a copy of the Theme Twenty Eleven 1.3 and create a new Theme for this site so I can swap back to the unaltered Theme if need be.

This should be achieved quite easily by modifying the css of the #branding hgroup tag to be position: absolute.  This means that the header image is pushed up to the top of the page and has the text over the top of it.  Although on doing this the search box in the header bar because it has a transparent background is not easy to see so will will need to add a background-color: white to the #branding #s.

First decisions

I guess the first thing I should think about is changing the design of this site.  For now I think I will leave the default theme but move the side bar to the right.

Guess the first thing I should do should be the header as I currently do not have a header that is relevant to this site so I guess a bit of image editing will be the first thing I should do.

After that I should think about changing the design although this may be just a case of twiddling with some of the built in settings of word press and the default theme.  But I am expecting to have to make some CSS modifications for the site to really start to look how I want it.