Web 2.0 – Jumping on the Fussybus.

For our web 2.0 project we were tasked with creating a community site, something in a 2.0 style with forums, user participation,  social media links, that sort of thing. At the start of the project I was steered towards WordPress as a platform for setting up the basic database structure for this sort of thing. Looking further into WordPress I came across “Buddypress” an open source community based plugin that seemed to offer several social media options like profiles, forums and the ability for users to form groups and make friends. Rather than make a community that surrounded a particular interest or theme I decided to make one that catered towards a particular location and seeing as there’s no place like home I decided to make a small private community for people in the local area.

Getting it up and running

The first (of many) problems was getting a working install of WordPress up and running on a remote server. I decided to use UK cheap hosts for hosting and registered the domain http://www.fussybus.co.uk (a local slang term for someone who is overly opinionated or picky). Reading up on the Buddypress install I found that software installs of WordPress via softaculous or similar could cause problems further down the line so I had to use the famous 5 minute manual install. This required me to create a database manually via C-Panel and create a user profile with permissions to access it. As someone with absolutely no experience with either PHP/MySQL or WordPress I had a few teething problems, creating a user with permissions for folders other than the root install or putting the wrong information into the custom WP-config file, leading to some 404 page cannot be found issues before I worked it out. Additionally for Buddypress to work the type of permalinks that WordPress uses to tag pages had to be changed BEFORE Buddypress was installed from the default to something pretty like $postname. If you don’t do this you end up with blank pages on anything other than the index.

Next up was the Buddypress install, Buddypress comes with several new page templates and a default theme and also supports its own forums. I read up and found that a lot of people were suggesting BB-press as a more powerful forums plugin so decided to use that. This lead to some conflicts however between the slugs being used for the two plugins, so I had to go away and find out what the hell a slug was and what it had to do with my forums. Which was pretty hand in the long run for working out how WordPress references different pages.

Novice that I am I actually messed this up quite a few times leading to repeated installs of both platforms (which I guess was good practice) and finally ended up omitting the Buddypress forums altogether on install and just creating the “forums” page separately after installing BB-Press. After this I had to create a forum index, this actually took an entire afternoon just simply because I had no idea what a shortcode was…doh. With my shaky knowledge of how WordPress works, how to install any of the plugins or link them to my homepage I just assumed I had done something wrong while installing and re-installed the whole set-up something like 10 times trying to find out what I had done wrong. Then I found out that a foum index page is not actually made when you install BB-press and that you have to…

  1. Install the plugin.
  2. Delete the original “Forums” page.
  3. Make a new page called “Forums” (so its referenced by the same slug)
  4. Insert the shorcode “[bbp-forum-index]”

Easy when you know how, awkward when you are a beginner like me.

Making it pretty.

With the default Buddypress theme installed you end up with something that looks pretty much like this:

As you can see there’s already quite a lot of stuff going on with support for user avatars, comments, user logins, groups and all that. Now came the task of making the site unique and creating my own theme. My first idea was to just try and look at the CSS and sort of reverse engineer the site. Which fell apart really quickly once I tried to find out how to re-size the header. I tried all sorts of things in the CSS only to find that none of them affected the dimensions in any way, this was because all that was being controlled by the header.php file. Not knowing anything about PHP, how the site was constructed and how different PHP files were being called to construct the page this called for quite a lot of backtracking and research to get even a small understanding of what I had to do to make any meaningful style changes to my site. I tried installing a few other themes and looking at their construction but a lot of the time they were even more complicated than the default and more confusing to edit. So sticking with the default, I managed to get the header to change size, but then immediately ran into problems with cross browser styling when trying to move and resize the navigation. Probably not a problem for experienced coders but for a novice like me a bit of an uphill struggle.

At college we had been shown a theme making program called “Lubith” www.lubith.com that allows users to construct a WordPress theme using a visual editor based on the twenty ten theme. I decided that it might be possible to use this program as a means to create a basic theme in conjunction with a plugin called “Buddypress Template Pack” a sort of automated walkthrough for transferring the Buddypress page templates across to a  Wordpress theme. I had no idea if this would work and there was a lot of trial and error, seeing as at the time I still had no idea what a page template was. Still Lubith allows you to  create a basic layout and do some styling of buttons, text and backgrounds really quickly so I thought it might fit the bill. I created a header graphic at around 960 x 250 px:

And added 1px 30 percent opacity white PNG backgrounds for the content div’s. I added rounded corners to just about everything and styled the navigation using web 2.0 “glass” gradients created with illustrator at low opacity and placed over different coloured backgrounds for the different button states. I also added some inner glow to the div’s using white to transparent gradients created with CSS3 box shadow. I also created a background in Photoshop that looped vertically using the clone tool and the liberal use of Gaussian blur and some paper textures set to multiply at low opacity.

The first part of the template pack process is automated, from the WordPress back-end you can just click to get the page templates transferred to your theme, after this my site looked like this.

So it’s pretty obvious I had a few problems, what with the sidebar dropping down and the footer widget area not actually being inside the footer and all that. This is where the second part of the template pack process comes in. You have to then go through the page templates for the entire theme and make sure the main HTML structure matches that of Buddypress, there’s about 12 or so of these, what I eventually discovered is that Buddypress had a class called container that wraps everything, and my Lubith theme didn’t, a pretty simple if repetitive fix. For the footer it was as simple as moving a closing tag in the footer.php file.

Now that I knew how to get a basic site up and looking ok I decided to go back to square one and re-design the entire site. Because lets face it, that background is like a default desktop from windows and that footer graphic looks like something from a bathroom showroom, plus those links are ugly…

Fussybus 2.0

For the second Fussybus theme I chose a simpler textured background, more in keeping with a web 2.0 style and less likely to cause problems with different sized displays. I re-designed the header to have a sort of multicoloured letterpress effect on a transparent background to avoid the sort of “banner” header look of the first site.

The white transparent content area backgrounds were kept from the first site and the nav bar and footer sections re-designed with transparent black 1px PNG backgrounds and CSS3 letterpress styling to match the header. The H2 and H3 text was similarly given a letterpress CSS text shadow and re-coloured to integrate with the theme.

To further enhance the user experience several plugins were added such as “buddypress like” to allow users to highlight preferred content. “Buddypress activity plus” that allows users to embed and post images and video, a site-wide chat option and “Buddypress gallery” a photo sharing plugin.

To make the site private I used two Buddypress plugins, “Private buddypress” and “Invite anyone”. Private Buddypress allows you to make either sections or the entirety of a site unavailable to users who are not logged in and allows you to control the URL that these visitors are redirected to. Invite anyone adds the functionality for existing members to sent email invites to friends that take them to the registration and profile setup pages (both of which can be excluded from private buddypress.

I chose to redirect logged out viewers to the WordPress login page. Which I then styled using another plugin – “custom login” making a background for the page and changing the font and text colours.

The backgrounds were made deliberately oversized to accommodate larger displays while keeping the content central for smaller ones.

Widgets to add further user options were added to the sidebar and footer, showing the avatars of current users online, the most active members, recent forum activity as well as recent wall postings. Additional links for social media sites were added to the footer and the invite anyone widget given prominence in the sidebar to encourage user registration.

Although the template pack had done a pretty good job of creating a layout there was still a lot of tidying up to do especially as further plugins were added. The Activity plus form needed a lot of further styling to reduce its vertical dimensions, the user avatars generated by the buddypress plugin itself needed attention to reduce their size. The placement of the main content area and sidebar was adjusted, placement of widgets in the footer adjusted, margins and padding across the site were changed. These changes were made to a child .css file related to my specific theme and a bp.css file related to the template pack.

One of the main changes I made was to the home page of the site. Originally the home page was set up very much like a normal WordPress blog page, with comments, a page heading in H1 ect. I really wanted the home page to be an attractive landing page for new users, advertising content and providing links to the rest of the site. To this end I created a new static home page, hid it from the main navigation using the “Exclude from navigation” plugin and added a new layout several columns and an image slider. I then created several advertisements to cycle outlining the idea of the site as a “local” social community.

These were made with illustrator using multiple gradients applied over each other with a multiply blending mode, a very fine grain added and some drop shadow and inner shadow for the text and main images. The images themselves were either created in photoshop or sourced from creative commons sites (thanks everystockphoto.com).

For the columns at the bottom of the page I made several more, smaller, headers using the image styles saved from the original in illustrator and made some new graphic icons to accompany the text.

Fussybus mobile.

When originally planning the Buddypress site a plugin was available called Buddypress mobile. This application detected the type of browser being used to view the website and changed the theme to a mobile friendly version whenever a mobile browser was detected. Unfortunately by the time it came to creating the mobile version of the site a Buddypress update had made the plugin unusable. The default Buddypress theme has some responsive design built in but this was removed by integrating the Lubith theme with the template pack.

My solution was to utilise another plugin called “WordPress theme switcher” this detects the user agent being used to display the page and switches the theme to one of your choice. I then used the “Frisco” theme that is built on the default Buddypress theme and keeps its responsive design and set it to only be shown when being viewed on a mobile device. There isn’t really a lot of room on a mobile for a lot of styling so then just went in and changed the backgrounds, colours and changed the header to a smaller version of the main site header to provide some continuity between the mobile and main themes. I don’t have a smart phone myself but I found a very useful add on for firefox called “User agent switcher” that mimics different devices within the firefox browser. Hijacking frisco’s responsive design worked pretty well but created the additional problem of resizing both embedded content and visual page elements like the homepage slider. Research into the problem revealed a few plugins that helped, firstly there was the “fluid images” and “fitvids” plugins that remove the static content sizes of embedded content and resize these elements in response to browser window size, then there was a slider called “orbit-slider” that resizes also. With these I could ensure that all embedded content should properly display no matter the device used for viewing the site.

Why not have a gander over at www.fussybus.co.uk


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s