Drew Jones - Freelance Website Designer in Fleet, Hampshire, GU51 » Configuration

Creating Bootstrap, for WordPress – Part 1

andij — Sat, 27 Aug 2011 12:31:00 +0000

So here’s what happened.

Downloaded WordPress 3.2.1 from http://wordpress.org/download/ and extracted this in /Users/andij/Projects/wp-bootstrap/httpdocs/
Gave it a url of wp-bootstrap.com (set 127.0.0.1 wp-bootstrap.com in my hosts file and then setup the vhost accordingly) as this url will be the final destination of the sample theme.
Created a new database in mySQL called wp-bootstrap.
Visited my new local development environment of wp-bootstrap.com and followed the config steps. All is well : )
Copied the ‘twentyeleven’ theme, renamed it as ‘bootstrap’ then switched to it.
Took a look at http://wordpress.org/extend/themes/upload/ to see what’s involved in creating a proper WordPress theme.
Here http://codex.wordpress.org/Theme_Unit_Test there’s a list of things to do to setup the blog to enable comprehensive testing.

After importing the test-data.xml and adjusting the WordPress settings accordingly including the the Long and Short menus I decided to add an html comment to the top of each of the php files in the bootstrap theme . I did this to make it a little easier to pinpoint which file to edit from viewing the source. In Firebug. (Select the HTML menu flyout and choose ‘Show Comments’)

Add the bootstrap hotlink to the hosted stylesheet:
link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.min.css"

Starting point

For now, I’m going to leave the twentyeleven.css in place give me a helping hand (kinda like the feeling of walking hand in hand through a park in the autumn with a new love). I will however remove the reset css from the top of this file.

I will start at the top of the homepage and see what I fancy changing first.

Taking the menu from underneath the banner and placing it at the top and inheriting the bootstrap styles seems to be a good starting point.

Moving the search into the topbar which meant removing some default twentyeleven functionality which changed the position of the search if there’s the Display Text enabled or not.

Including #masthead from the docs.css from Bootstrap to emulate the same design made the look of the entire header and nav pretty sweet.

If you’re looking at this blog at the end of August 2011 then this is likely to be what you’re seeing right now.

Bootstrap, from Twitter for WordPress

andij — Mon, 22 Aug 2011 22:17:45 +0000

Many times I’ve attempted to stream-line my development processes in a variety of different ways, using 960gs, Eric Mayer’s reset.css, HTML5 Boilerplate, to mention only a few. One of my favourite time-savers is to create an ‘interface template’ this template usually takes the form of a single page with every UI element that I’m likely to need to build the website. This helps to ensure that all components ‘play nice’ with each other.

During this process I often find myself using the same markup with the same class names, for example my pagination nearly always ends up exactly the same HTML and CSS with different styles. After a while I noticed a number of tricks and techniques were also being repeated. This included CSS to style buttons exactly the same if the markup used was an anchor, button or input. Then a number of styles to make the button appear disabled, negative, positive and neutral, then I’d usually include classes to make them large, medium and small.

Think in your mind that dreamy type of music to set the scene….

“Wouldn’t it be great if these techniques were available to implement at the beginning of a project with a way of modifying them to suit the design of the website I’m building them for.”

While this is still a distant “I may get round to doing something one day” thought. Along comes Bootstrap from Twitter. A set of tools put together by @mdo and @fat (from Twitter) which takes this concept by the short and curlies and provides a full set of amazingness, especially if the things I describe above are familiar to you.

A grid system, typography, lists, tables, forms, buttons, tabs, pagination, page messages, modals, tool-tips, popovers are all included, which is so amazingly comprehensive I am overwhelmed!

Wait, there’s more! ‘Really?’ I hear you say. No, there’s actually Less. Combining all this Bootstrap awesome with the power of Less is nothing short of genius. It would have been great without it but so so so much better as part of the deployment. You can get really funky with mixins and all that jazz.

As you can see, my blog is a bit of a shambles, with no styling of any note. It’s all because I like to tinker with the source code of my themes. I enjoy dipping into the world of WordPress every now and then as it feels more of a hobby than the java that I’m exposed to on a daily basis.

My intention is to implement Bootstrap from Twitter into a WordPress theme as it simply feels like the right thing to do, then make it available for download. Watch this space… Please get in contact (or comment on this post) if you have the same intentions and would like to help out and keep up the motivation to get something released pretty soon.

Don’t panic!

andij — Tue, 23 Nov 2010 16:36:45 +0000

My website will not always look like this!

I’m currently knee deep into constructing and developing my WordPress theme in HTML5, CSS3 spiced up with a bunch of @media queries.

As I described in my previous post, I’m experimenting with a number of new technologies. I have started to build this framework for a WordPress theme which will showcase the power of CSS3 @media queries. So, while you’re here, scale your browser to see the different @media queries in action, and why not take a peek using your smartphone, or if you have one, your iPad. When you’re there, give it a twist and see what it looks like in portrait and landscape.

Funky EH! Right, I’m off to do a little more coding before going to visit my nephew, who’s celebrating his first birthday.

Experimenting – mwaaa haaha

andij — Thu, 11 Nov 2010 16:28:35 +0000

Recently I’ve taken to thinking along the lines of many other web designers and developers who are embracing the new technologies. Ranging from the funkiest mobile devices and latest browser technologies.

Using a raft of the latest tech plenty of testing and experimentation has been creeping it’s way into my daily routine. Armed with a laptop with two external screens, a couple of ‘standard (single screen)’ laptops and PCs accompanied with a small handful of smartphones and a tablet:

Lenovo T500 – 1680×1050 – Windows 7
- Dell P2210H 1080×1920 (portrait)
- Dell P2210H 1920×1080 (landscape)
Toshiba Tecra – 1024×768 – Ubuntu 10.04
Dell Optiplex GX520 – 1280×1024 – Windows XP
Apple iPad – 1024×768 – iOS 3.2.2
Apple iPhone 3G – 320×480 – iOS 3.1.3
HTC Desire HD – 480×800 – Andriod 2.2

These tools of the trade allow me to see my projects on many different devices, so, as a result I’m going to be using this blog as a testing area for a ground-up build of a wordpress blog incorporating a bunch of ideas. Many of which may fail, so if it’s spannered at any time you’ll know why.

So, first up is Elliot Jay Stocks‘ Starkers WordPress theme, this awesome bad-boy of a theme is right up my street as a web designer, it provides me with the bare-bones ‘naked’ theme for me to apply a bespoke design from scratch.

Couple that with the baddass HTML5 Boilerplate code, giving me access to the most top-notch tricks to get a full-on HTML5 website started off on the right foot.

Then….. An even awesomer revelation!! Aaron T. Grogg has got his shizzle out and performed an amalgamation of Starkers and Boilerplate in the form of a WordPress theme called Boilerplate: Starkers WordPress theme!.

I can hardly believe my eyes.. So much help and assistance out there on the interweb these days.. – love you guys -

THEN…. (Yup, it’s not over yet…) I scoot on over to Less Framework 3 and shave the CSS from here with all it’s @media queries. Providing me with a foundation for tailoring the theme to a number of different width layouts. I strip out the reset stuff as that exists in the Boilerplate theme by default. Rock on over to WordPress.org Child Themes and use this info to create myself a child theme of Boilerplate.

As a result, I end up with this wonderful baseline of a theme, all ready and waiting for me to apply my limited knowledge to. I’m certain that I’ll learn plenty from this process and expect to be able to apply this new found wealth to my lucky customers.

So, far, so good.. I’ll now evolve this theme steadily as I learn how to utilise all this wonderment.

Problems accessing admin after upgrading to Magento 1.3.0

andij — Thu, 16 Apr 2009 10:58:13 +0000

Having received an email from the Magento Team the other week bigging-up the latest release of Magento and encouraging me to upgrade as soon as I could, I dutifully upgraded the Mage_Core_Modules to 1.3.0. This appeared to go without a hitch and after I made a couple of adjustments in the admin and tested the fronend I was happy that it was a successful upgrade.

The following day I attempted to login to the Magento admin area only to be presented with a 404 error! Geez, what a pain.

After doing a bit of forum bashing I found the solution I was after:-

http://www.magentocommerce.com/boards/viewthread/37202/P30/#t121336

For those with the same problem as mine… (can’t login after upgrade, and don’t have ssh capabilities,) I have found a workaround. It worked for me, but I can’t guarantee it will work for you, so proceed at your own risk. I am not the most tech-saavy guy, I just figured it out by looking at the error.

1.)The first thing to do is download the entire magento 1.3 package. Unzip it, and go into Magento->app->code->core->Mage->Adminhtml->Model->Url.php Grab the Url.php file.

2.)Go to your server, and into your directory where you have magento installed. go to app->code->core->Mage->Adminhtml->Model and replace the Url.php file.

3. Clear the cache in your browser and try logging in again.

4. At this point, if you were able to get in, I suggest that you go to magento connect and properly upgrade. Worked for me. I hope it works for you.

After following these steps I was able to login without a problem. -phew-

Then, to top it off the dropdown menus were not working in the admin area! Checking Firebug I found this was due to the javascripts 404-ing. Another dose of forum searching it was apparent that this was a common problem (I had experienced it before myself) the /js folder and contents had the wrong permissions following the upgrade.

I opened FireFTP logged into the site and changed the permissions on the /js folder and all it’s contents to 755. This has sorted that problem, so I’m happy now.

All in all it looks like these problems I encountered after the upgrade are now sorted, let’s hope that’s the last of them and the next upgrade will go smoother.

sfImageTransformPlugin – released

andij — Wed, 15 Oct 2008 19:34:46 +0000

Stuart Lowes has released sfImageTransformPlugin 0.1.0 for Symfony. This plugin is for manipulating images using the GD or ImageMagick libraries.

A simple to use and flexible image manipulation symfony plugin. The plugin allows you to perform “transforms” on an image. A transform maybe simple like a resizing or mirroring or more complex like overlays and pixelizing. The transforms can be chained together or applied individually. New transforms can be simple created by extending the sfImageTranform abstract class.

Download

http://plugins.symfony-project.org/sfImageTransformPlugin

Plugin page

http://www.symfony-project.org/plugins/sfImageTransformPlugin

Examples

Starting with the original image:-

Here is an example of a transform that:-

scales ‘logo.png’ by 50%

public function executeDemo1()
{
 $img = new sfImage(sfConfig::get('sf_upload_dir') . DIRECTORY_SEPARATOR . 'logo.png', 'image/png');
 $response = $this->getResponse();
 $response->setContentType($img->getMIMEType());

 $img->scale(0.5);

 $response->setContent($img);

 return sfView::NONE;
}

Result:-

Here is an example of a transform that:-

flood fill’s ‘logo.png’ at ‘x100,y170′ with #000000
scales by 50%
rotate by 120%
draw a rectancle of 5 pixels around edge and colour it #00FF00
write the text “bathcamp 2008″ at ‘x10,y10′ 10px Verdana coloured #FF9900

public function executeDemo5()
{
 $img = new sfImage(sfConfig::get('sf_upload_dir') . DIRECTORY_SEPARATOR . 'logo.png', 'image/png');
 $response = $this->getResponse();
 $response->setContentType($img->getMIMEType());

 $img->fill(100,170)->scale(0.5)->rotate(120)->rectangle(1, 1, $img->getWidth() - 1, $img->getHeight() - 5, 5, '#00FF00')->text('bathcamp 2008', 10, 10, 10, 'Verdana', '#FF9900');

 $response->setContent($img);

 return sfView::NONE;
}

Result

Stunami has provided a collection of transforms for the GD and ImageMagick libraries.

SKY Satellite and Terrestrial Television Structured Cable Distribution System (CAT5e)

andij — Sun, 07 Sep 2008 08:12:07 +0000

Marathon Oil CAT5e TV Distribution

Brief

To relocate the satellite and terrestrial television distribution system from the 4th floor Capital House onto the 3rd floor server room.

To employ a system to distribute the 12 television channels through the structured cabling. With individual channel selection using infrared remote control.

Solution

The Scion Technologies PRO 1000 16-channel video and audio distribution switch was chosen.

SKY digiboxes were retained to produce the seven satellite channels.

Stavekirk’s XChannel Pro television tuners were used to produce the terrestrial television channels.

Implementation

The existing television distribution equipment was removed and relocated in a 27U rack with the inclusion of suitable cable and power management.

Rack Diagram

Schematic Diagram

Cross Patch Reference Table

Date	Location	Data Outlet	Scion Tech	Remote	Room
09/02/04	Trading room	240	#1	Hitachi	3/41
09/02/04	Russell Wall	099	#2	WinTV	3/41
09/02/04	John Bradley	103	#3	Sony	3/40
09/02/04	Reception 50”	195	#4	None	Reception
09/02/04	Reception 46″	196	#5	None	Reception

Back of rack

Television and SKY digiboxes

SKY digiboxes, XChannel Pro’s and Scion Technologies PRO 1000

XChannel Pro TV Tuners and Aerial Distribution

Scion Technologies PRO 1000 and Phillips PAS7508E Satellite Multiplexer

Front of rack

Television and SKY digiboxes

SKY digiboxes

SKY digibox, Stavekirk’s XChannel Pro IR Front Panel, Scion Technologies PRO 1000 and cable management

Stop the annoying 'Camera Connected' dialogue when connecting iPhone to Windows XP

andij — Sun, 31 Aug 2008 09:02:33 +0000

Every time I dock my iPhone on Windows XP I get a popup asking me if I’d like to launch an application. Well you know what? All I wanna do is stand it in it’s dock and allow it to charge.

So, to get round this pain in the arse problem follow these simple steps:-

Ensure that your iPhone is connected
Open ‘My Computer’
Right Click on the ‘Apple iPhone’ icon
Select Properties
Pick the Events tab
Choose ‘Take no action’
Click ‘OK’

Now when you dock your iPhone the popup will not annoy you.

Sync iPhone with Google Calendar

andij — Tue, 12 Aug 2008 15:20:31 +0000

I’ve tried and tried to find an application that will sync my Google Calendar with my iPhone calendar effortlessly without the need for cables, invoking an application, using iTunes or Outlook.

My requirements are simple:-

Sync Google Calendar with my iPhone Calendar

In practice this seemed to allude me, I did find a third party application through my Jailbroken app list but this required me to run the app on my iPhone and request the synchronisation by clicking a button. I can’t for the life of me remember what the app was called but it did 90% of what I was after.

Bring on http://www.nuevasync.com/ ! This web based service managed to get me, my iPhone and my Google Calendar all synched up with a minimum of effort.

The only reservation that I have at this time is that it appears that I can only sync with my iGoogle account and not my Google Apps for andij.com account, for now with this product being in it’s infancy I am more than happy to accept this minor inconvenience.

Check out this post in the Apple Discussions http://discussions.apple.com/thread.jspa?messageID=7854548 David Boreham (owner of Nuevasync).

Setup local installation of Magento 1.0.19870 WampServer

andij — Fri, 16 May 2008 07:39:22 +0000

Prerequisites:-
WampServer2 installation http://andij.com/2008/05/15/installing-and-configuring-wampserver2/

Now to install Magento http://www.magentocommerce.com/ Including the Sample Data pack.

Note: Ensure to install the Sample Data pack before performing the installation of Magento itself.

Download both the ‘Sample Data’ pack and ‘Magento’, save these somewhere, decide where you want your new ecommerce shop to be installed, I’m going to install it here: http://www.project.dev/magento/

Unpack magento-1.0.19870.zip into D:\websites\project\htdocs seeing as the zip file contains the \magento\ folder, the path you’ll end up with is D:\websites\project\htdocs\magento

Unpack magento-sample-data-1.0.19870.zip into D:\websites\project\htdocs this will create a folder called D:\websites\project\htdocs\magento-sample-data-1.0.19870

Now is a good time to create your MySQL database, to do this open http://localhost/ where you should see the WampServer homepage, click ‘phpmyadmin’. Simply create a database by putting your database name ‘magento_sample’ (I decided to call it this so that I can create another called ‘magento_live’ for the real shop data) into the ‘Create new database’ field, leave all the defaults and click ‘Create’, you’ll notice the database name appear in the left column.

Installing Sample Data Archive for Magento 1.0.19870

Click ‘magento_sample’ in the left column then click the ‘Import’ tab at the top.

Browse for the sample data file, located D:\websites\project\htdocs\magento-sample-data-1.0.19870\magento_sample_data_for_1.0.19870.sql. Leave the defaults and click ‘Go’ at the bottom right. You’ll now be importing the sample data and it’ll take a little while. Once complete there’ll be a long list of database tables in the left column.

Configure WampServer Apache modules and PHP extensions

Before installing Magento ensure you complete the following:-

Click on the WampServer icon in the system tray

‘Apache’ -> ‘Apache Modules’ tick ‘rewrite_module’
‘PHP’ -> ‘PHP Extensions’ tick ‘php_curl’
‘PHP’ -> ‘PHP Extensions’ tick ‘php_mcrypt’

Now browse to http://www.project.dev/magento/ you should now see the first page of the Magento installation procedure.

Follow the installation procedure, changing the location, time zone, currency to your requirements. When you’re presented with the database configuration page, simply enter ‘magento_sample’ into the database field and proceed. (this is assuming that your MySQL user is ‘root’ and your password is blank).

Let me know how it goes.