2BlueSolutions Developer Blog

Took me a while to realize that my @font-face fonts weren't being imported on my Windows Phone.  I thought I was doing something wrong and then just sort of gave up after a while. Well, today, I thought I would take another stab at it thinking that maybe I packaged/converted/imported the fonts incorrectly for the WP7 OS.  Then I stumbled across this article which clearly explains the limitation of IE9 on WP7 -  http://www.ubelly.com/2011/11/the-differences-between-ie9-on-the-desktop-and-ie9-on-wp7/ Now, I was really excited to see IE9 coming to WP7 and that excitement was mainly around HTML5 support AND @font-face support.  Silly me, thinking that IE9 on the mobile device would act like the desktop version. Anyways, I suppose I could just implement image swaps for the items I want displayed as a certain font. Here is the list of supported fonts for WP7: http://msdn.microsoft.com/en-us/library/ff806365%28v=VS.95%29.aspx

As a follow up to my previous post about installing the DIBS module in Virtuemart , there is a poorly documented error you will run into when trying to use the payment module on a live site. Basically, it will complain about a missing "paytype" which is actually not what is missing.  What is missing is the "test parameter" as the error will tell you.  After spending too much time trying to fix the "missing" paytype, I tried a different method and deduced that it really was missing a test parameter. With the default setup, the DIBS payment processor will only send a "test" variable to DIBS when it is actually in testing mode.  Makes sense, right? if(DIBS_TESTMODE == "YES") { $oid = 'test-' . $db->f("order_id") . '-' . time(); $post_variables["test"] = "YES"; $post_variables["orderid"] = $oid; } else { $oid = $db->f("order_id") . '-' . time(); ...

I recently was contacted to install the DIBS payment module in Joomla's Virtuemart . It is actually a very straightforward procedure that the DIBS developers lay out nicely in their help file. First step is to download the files you need from the DIBS site: http://tech.dibs.dk/toolbox/dibs_standard_shopmodules/ ( direct download ) Scroll down to the VirtueMart plugin or choose the above direct download link. Unzip the files. Inside, you will find the "docs" folder which contains a readme file which is very well laid out. Quickly, the steps are: Upload the contents of the module folder to the root of your Joomla installation. Log in and navigate to your Virtuemart administrative page. Select List Payment Modules (under Store) and choose DIBS Credit Card from the list of available payment modules. Tick the box for " Active " to make it active. Change the payment method name to whatever you want the customer to see when they checkout. Code =...

If you want your checkout page to look like this: First, you can edit the text for you button in: /administrator/components/com_virtuemart/languages/common/english.php Search for: BUTTON_SEND_REG Whatever you put in for that value, will change the value of the button. For example, put in "Next" instead of "Send Registration" (the default value): Now, to remove the empty "Next" box as seen in the above example, it will just require a simple edit from within your Virtuemart administration page. Log into your Joomla administration page. Enter your Virtuemart administration page. Under Admin, select Manage User Fields . Find delimiter_sendregistration : Then click on the green check mark in the Published field to unpublish the field Finally, for a little bit of housekeeping, edit the following file and add some blank space before the BUTTON_SEND_REG button. /admin/components/com_virtuemart/checkout_register_form.php

I was searching for a quick slideshow plugin to use within an article in Joomla and stumbled across one called Simple Picture Slideshow . It is extremely simple to set up.  You download the plugin from their site, install it into your Joomla backend, then find it in your plugins directory.  There are few settings to play with from having the images link to other pages and buttons for controlling the slideshow.  I went with a simple approach for Ryan Gibbons Real Estate and just had a button-less image slideshow that began automatically on page load. The beauty of  Simple Picture Slideshow  is its ease of use.  It's default directory (which you can change in the plugins settings page) is set to /images/stories .  To use it in your article, you use the following syntax: {besp} sampleimages {/besp} Where sampleimages would actually be /images/stories/sampleimages .  It will load all the images in that directory and size them to the dimension...

Just a quick post listing some of the social media colours for use in your icons Facebook Blue:  #3B5998; White:  #FFFFFF; Font:   Klavika  Twitter Blue: #4099FF; White:  #FFFFFF; Font:   Pico - Alphabet LinkedIn Blue:  #0082B0; White:  #FFFFFF; Font:   Myriad Pro Bold Blogspot Orange:  #FF7419; White: #FFFFFF; Font:  Custom font (you will have to make one yourself) Tumblr Blue:  #243C54; White:  #FFFFFF; Font:   Bookman Old Style Bold Sample Icons:

Some quick tips for when you are creating a user sign up form on your site. To help make the process as least frustrating as possible for a visitor to the site, you need to simplify the forms in some very easy ways. Don't make the visitor enter their email address twice.  There is no need to make someone enter their email twice in the off chance that they will write it incorrectly.  Users will know right away when their email address is entered incorrectly. Don't obfuscate passwords.  Nothing annoys users more than entering a password and then having each letter be replaced by those black dots as they write in their password.  Think about useability when creating your form.  When entering passwords on a phone or other mobile device, it is very important that your user can see the letters they are typing in.   Keep it simple.  Don't ask questions you don't need answers to (ie...Mr./Mrs.) and make it quick and painless. The easier it is for a us...

We all know that there are many robots out there crawling our sites look for email addresses to send spam to. We also know that we need to try and hide our email addresses to make it harder on the crawling robots. This usually involves referencing an ASCII chart to get the correct hexadecimal codes for each letter and symbol in the email address and then manually typing them into your code. So, I figured someone out there must have automated the process at least and a little bit and I was pleasantly surprised to find this site: http://www.fingerlakesbmw.org/main/flobfuscate.php They offer a nice simple script where you put in your email address and they convert it for you. Cut and paste to your code and you're done.

Great video created by London Web Standards over on Vimeo called "How We'll Layout Websites in 2016". It's only a 7 minute video that you can find over on Vimeo (link to video) . Basically, it talks about 3 upcoming methods for page layouts. How We'll Layout Websites in 2016 from London Web Standards on Vimeo .

Thanks to the crafty work of Jacob Bijani over at www.border-radius.com , a lot of us web developers can breathe a sigh of relief when it comes to sorting out css curved borders across all supported browsers.  Let's face it, anything to make our lives easier is a good thing. Quickly enter your desired corner dimensions and watch the code get generated on the fly.

Ever wanted to post code to your Blogspot account, but ran into a mess regarding how Blogspot interprets your code sample?  Well, the solution is pretty straightforward with a bit of tinkering. First, you'll need to edit the HTML of your blog from the Design , Edit HTML tab in the administrative section of your Blogspot account. What you will need to do is add a class to the style section in the header called .postCode  which will look something like this: .postCode{  background:#FCFCFC none repeat scroll 0 0;  border:1px inset #012BB2;  height:150px;  margin:10px;  overflow:auto;  padding:6px;  text-align:left; } Then, whenever you right a new blog post, you need to make sure to select the Edit HTML tab next to the Compose button and put the following wrappers around the code: <pre class="postCode"></pre> Now, to actually get it to appear like that, you have to put your code through a bit of a translation by...

This post will handle condensing the shipping address and shipping method pages. If you only offer one choice of shipping to your customer, then it is pointless to present your customer with a page that allows them to select, from one option, the type of shipping they want. It’s also just nice to condense these two pages to help reduce the number of clicks between the start and the end of the purchase process. Of course, it is still worthwhile to have your customer review their shipping address and to present them with an option to change the shipping address to something different than the bill to address. Condensing these pages will present your customer with a more streamlined checkout process that will improve your customer’s interaction with your e-commerce site. The first change needs to be applied in the VirtueMart configuration page. Log into your Joomla installation’s administrator page and then go to your VirtueMart component page. From here, click on configuration...

By default, the VirtueMart checkout process will ask for more information from your customer than is actually needed by your store.  To help reduce the form-field overload  that you customer may face when trying to purchase a product from your online store, it can help to actually remove fields that are not necessary to your business.   Do you really need to know the “company", "title", or "fax number” of a customer?  If not, then this tutorial will show you how to remove those fields. Changing the following file will impact the Billing Information and the Shipping Information (Shipping Address) forms that appear during the VirtueMart checkout process. The file you will need to edit can be found here: /administrator/components/com_virtuemart/classes/ps_userfield.php Search for the function getSkipFields() By default, the skipped fields are the username, password, password check, and the check for the terms of service agreement. function getSkipField...

If your store will only be using  PayPal  as a payment handler, the customer experience can be improved by replacing the "Confirm Order" button at the end of the checkout process with an actual PayPal button. The old button doesn't convey to your customer that they will be taken to PayPal  to complete their order. All we're going to do with this post, is show how to change that "Confirm Order" button into this a Paypal button The file you want to edit is found here: \components\com_virtuemart\themes\default\templates\checkout\get_final_confirmation.tpl.php Within this file, search near the bottom for the following code: <div align="center"> <input type="submit" onclick="return( submit_order( this.form ) );" class="button" name="formSubmit" value="<?php echo $VM_LANG->_('PHPSHOP_ORDER_CONFIRM_MNU') ?>" /> </div> The button has a class called input.butto...

One quick solution to a common problem.  When running Virtuemart and using Moneris as your payment processor, you may occassionally run into the following error: A message from the processor:  API Token Mismatch: (N/A) ERROR:  FAILURE IN PROCESSING THE PAYMENT (ps_moneris) The quick and easy way to fix this is to log into http://www.eselectplus.ca with your credentials and make sure that, under “My Account -> Account Settings”, the default transaction ECI is set to SSL .  It normally defaults to another transaction type (non-electronic commerce transaction), so you need to change it to represent the type of transaction you prefer.  Whether that is an SSL transaction or not is dependent on you site.

To edit the “Add To Cart” popup that appears when you add an item to a cart in Virtuemart, there are few files that you need to know about. These are the files to know \components\com_virtuemart\themes\default\theme.js \components\com_virtuemart\js\mootools\   - contains the files for editing the appearance of the popup. To edit the appearance of the box, edit \components\com_virtuemart\js\mootools\mooPrompt.css to change the styles as well as editing the 2 images in the directory to edit how they appear as well (close box and header-background)

Twitter has now released a new Tweet button for there service. This function was previously offered by TweetMeme's Retweet button . Similar to Facebook's Like button , the new Tweet button from Twitter allows a visitor to send a Twitter message from your site. Tweet Twitter offers a page to help you construct your Tweet Button: http://twitter.com/goodies/tweetbutton On this page, you have the option of how your button will appear: The text that people will include from this Tweet can be customized The URL that you want linked to this Tweet The default language You can also recommend up to 2 people to follow for this Tweet button to recommend to the visitor When you have completed the customization, it's easy to insert the code into your site because Twitter will generate it for you.  Cutting and pasting the code into your site will complete the process and then you are up and running. That's it.  It's a very similar process to the Facebook Like...

Okay, let's begin digging a little deeper into the style code of the Agora Forum .  We're going to begin with editing the horizontal bars to help control the appearance of your forum. First, let's start with making sure you have the Firebug extension installed for Firefox.  The Firebug extension will really help shed a light on how the custom style sheet affects the horizontal bars.  Once installed, you can select the row in Firefox and see what styles are being used to control the row. The one key property you are looking for is height .  It is the height of each class that we will be changing to customize the size of the horizontal bars.  What this blog post will do is show you which classes to edit in your style sheets. Let us begin with the top horizontal bar, the main menu row of Agora Forum.  This one bar is controlled by the one class div.ag_rightend found in common.css ( /joomla/components/com_agora/style ).  Adjusting the height prop...

Most Active Users Section If you wish to remove the "Most Active Users" section of your forum, you'll need to comment out the top section of footer.tpl , which can be found in the templates directory of the Agora Forum component directory:   /components/com_agora/template/ Opening up footer.tpl , you'll find that the top section has the "Most Active Users" section surrounded by a starting and ending comment block.  To remove the "Most Active Users" from your forum, just comment out the code that is between the two comment blocks. Now, on a side note, this area is important, if you choose to keep the "Most Active Users" section, because this is one area you'll need to apply styles, if you are customizing the look of your Agora Forum.  Take note of this location and we'll come back to it in the post I make about customizing the look of your forum.

Making The Entire Cell "Clickable" The default settings for Agora Forum requires a user to click on the text of the forum/topic name to enter that forum/topic.  This isn't necessarily the most user friendly method of accessing your forums.  One way around this is to make the entire row cell click-able and then a user just needs to click anywhere on the cell.  You can see an example of this at the Prosupplements Forum . So, what one needs to do is make the cell a click-able object and the easiest way to accomplish this is to add an "onClick" event to the table cell.