Topline Tennis needed a revamp of its Joomla site to something that's responsive and more modern looking.
New Design and Host, 2021
Sometime in 2021 the business owner decided to get a website redesign along with new hosting with more space for emails. They were used to the unlimited storage space from the previous host Go Daddy. There were frequent emails of quota overruns from my hosting with Ventra IP, and these won't be missed.
There's a slightly updated logo and a less busy look. The coach photos are gone, removing the need to update the frequent staff changes. The rest of the content is mostly the same. The user must scroll down quite a bit to learn what programs are offered by Topline Tennis which I think is a backward step. Plus, they don't line up giving the panel a messy look. My photo of the new court at Research Tennis Club is on the new website.
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 like the one on the website of Courtney Prince. Plus, the free version fetches Instagram feed images but not ones from Facebook.
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 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.
Related Posts
