Topline Tennis

Topline Tennis needed a revamp of it’s Joomla site to something that’s responsive and more modern looking.

Optimising for Facebook and Instagram, November 2018

For marketing purposes it was decided to promote Topline Tennis on Facebook more and use Instagram as well. The coaches do a wonderful job getting images of kids having fun playing and learning tennis.

The site redo includes icons so users can go to Facebook and Instagram directly plus icons at the bottom of the page. A Facebook feed is just above the footer, but I think an Instagram feed would have looked better, as for Peak Cycles.

Peak Cycles’ Instagram feed. Showing each photo with a text overlay.

The feed is done by Custom Facebook Feed Pro Personal and there are many short-code options that can be set. The text was placed over the image using some Javascript:

< script type = "text/javascript" >

// Place post text over the post image. Needs to be delayed as the element needs time
// to be written.
// CSS must be inline as this element doesn't exist when CSS from external sources is
// applied.

function cff_custom_js($) {
var $ = jQuery;
setTimeout(function(){
$('.cff-photo').each(function(){
$(this).find('.cff-photo-overlay').append( '<p style="padding:5px;overflow:hidden;color:#fff;text-shadow:0 0px 10px #000;font-size:16px;cff-photo-text">' + $(this).find('img').attr('alt').substring(0,500) + '</p>' );
});
}, 550);
}

</script>

The developers at Smash Balloon were very helpful in getting this to work. I was frustrated with it as I didn’t realise that the element the code was trying to change didn’t exist when it ran, hence the delay being done with setTimeout.

Later the client decided it looked better without it, but it was good to see how versatile this plug-in can be.


Joomla! to WordPress, June 2017

The coach’s page showing a good use of Visual Composer’s Grid Editor.

The existing Topline Tennis website uses Joomla which seems to be losing ground compared to WordPress with its many advantages. And it was getting harder to maintain. WordPress does images more easily and is easier to keep up to date. By default it will automatically update the core software itself (although I prefer to turn it off).

Stock Images

A rare job where stock images were supplied and they are excellent ones provided by Head, a world renowned manufacturer of tennis and other sporting equipment. I was a bit concerned that they may not look good after stretching them the full page width for the top slide show but the results are fine.

DHVC Forms

The DHVC Form plug-in is excellent for creating forms that look great and work well. Forms are easily created using a drag and drop technique and they look great and work well. Both the contact form and the enrolment form were created using DHVC Form. Unfortunate it’s difficult to add custom code to them.

Fixed Menu

Fixing the menu at the top of the page makes the site easier to navigate, especially if the page the user still has access to the menu to go elsewhere. No matter how far down the user scrolls the menu will always be at the top of the page.

Fixed Menu with Ultimatum

To achieve this with Ultimatum Theme in the edit layout screen add the class “nav-menu-fixed” (a standard Bootstrap class) to the wrapper of the row containing the menu.

Add the following to your CSS file:

/*menu*/
.navbar-fixed-top {
background-color: rgba(0, 0, 0,0.8);
}
.logged-in .navbar-fixed-top {
top: 32px;
}

The background colour is set to a transparent black (or use any colour you like) to make the menu easy to read against the page.

The logged-in class is set so that when a user is logged in the menu is put below the administration one.

The site can be viewed at toplinetennis.com.

Leave a Reply