Use Wordpress? Want to quickly allow visitors to share your articles with sharing/social network sites?
Then use the sexyBookmarks plugin! Installs and configures in 5 minutes, all you need to do is pick what sites you would like your articles/posts to be shared on.
Open this article in full to see the plugin in action.
Simples!
Did you know that you can link your LinkedIn profile to your blog?
You can do this by firstly adding your blog to LinkedIn, Under My Profile there is a section to add websites – you can up to 3 types of links under this section. For your blog make sure you select Blog from the dropdown (obvious really) and simply enter the URL of your blog. Secondly you then need to add the application ‘Blog Link’ to your LinkedIn applications via the left hand menu panel.
Now all your connections can see your blog posts and you can also see your connections blogs through linked in!
Simples!
Hot on the heels of ILG’s website going live, Jadex Solutions have today made The Ansel Group’s Website site. This is yet another CMS driven website using Joomla v1.5.
Ansel is currently the only nationally available, independent healthcare organisation solely dedicated to providing bespoke in-patient assessment and treatment for people with personality disorders.
With their new website Ansel have the ability to manage and update their content themselves without the need for any specialist software, all they require is access to a browser meaning that they can make changes wherever and whenever they like. This is only the first phase of deliver for the web site. In a second phase it is planned to incorporate such things as a subscribers area and members forum, along with microsites for each of their clinics.
We are pleased to announce that in conjunction with Win marketing of Loughborough, ILG’s new content managed website has gone live.
Their new website utilises Joomla 1.5 to provide full management of all the sites content. In addition it has a number of key features incorporated to meet ILG’s requirements:
The site has been built of accessible to WCAG Level AA and allow all the site content to be managed via the CMS administration control panel.
I generally use Dean Edwards IE7/IE8 Javascript patch to fix those annoying little areas in IE6/IE7 that don’t implement everything correctly in CSS. However with one of my current developments I had to remove this entirely because it clashed with the Style Sheet switcher that the client required on their site.
This left me with having to fix as much as possible in the discrete style sheets for IE6 and IE7, which didn’t actually prove particularly onerous since I have a policy of developing a site without any patches applied and then only applying them right at the end to clear up any outstanding issues with IE6 and 7 – thereby having a site that degrades gracefully for those with JS disabled. However this did leave me with 1 issue to resolve – that of drop down menus on a LI.HOVER.
Now IE6 only implements the HOVER pseudo-class on an A element, which therefore left me with implementing a small piece of JS code to reproduce the HOVER function on the LI element. What about fallback for those without JS? Well, since the site is Joomla driven and the main menu item is for a section I set the parameters such that the section page displays a list of its categories (that are the same as the drop down menu items), so those with JS disabled can still get to the category content.
<script type="text/javascript">
liHover = function() {
var oLis = document.getElementById("mmenu").childNodes[0].getElementsByTagName("li");
for (var i=0; i
oLis[i].onmouseover=function() {
this.className+=" lihover";
}
oLis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" lihover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", liHover);
</script>
This JS code is place in the HEAD element within the following code to ensure it is only run against IE browsers below IE7:
<!--[if lte IE 6]>
JS code goes here.........
<![endif]-->
I place the the menu UL’s inside a containing DIV called ‘mmenu’ and the JS code attaches a new class to each LI element contained within this DIV and an onmouseover is also attached to the LI. The LI can then be controlled via the new CSS class and the onmouseover event fires the drop down. Finally the code is triggered once the page is loaded to add the new CSS class and event to the LI’s, meaning you can add it to a menu that is being generated by automatically by Joomla, Wordpress or Drupal.
However if they have JS disabled they can’t switch styles anyway…….. which is a bit of a paradox really.
Well I’ve just completed an update to www.timstimpsonspain.com that allows Tim to take online bookings and payments (via PayPal) for the 3 apartments he has in Spain.
We have also completed a CMS (Joomla) driven website for Oak Inspirations (on behalf of Win Marketing, Loughborough), and just awaiting final profile/gallery images before making the site live.
We have been asked by Tim Stimpson to update his website to incorporate an online booking/reservation and payment system.
In Joomla if you have more than 1 menu defined you may have discovered that the Main Menu item does not remain active whilst in the sub-menu. This is not ideal from a usability perspective, since in my sites I always want to make use of signposts to show a visitor whereabouts in the site they are.
So how do you go about achieving this. Well a simple way I use is to make use of JavaScript to walk the DOM tree to see if the Sub Menu is being displayed and one of it’s items is current, and then if this is the case set the associated item in the Main Menu active by adding a new CSS class definition to it that can then be styled using CSS in the normal way. Of course if the visitor has JS disabled it degrades gracefully.
So how do we got about adding the new CSS class to the page after the page has already been loaded?
Basically the first thing to do is ensure that the sub menu is contained within a element identified by an ID – typically I use a DIV – lets call this and “submenu”. This needs to be done in the index.php for the Joomla template being used.
So once the page is loaded we need to find out if any of the list items in the “submenu” div are set as “current” (as defined by the CSS class definition) and set the corresponding main menu item to be active as well by adding some new CSS class definition to it that we can then control via CSS. This is where knowledge of the DOM comes in.
In the “submenu” div, the LI’s will be a child of the child of the DIV (by nature of the LI is contained in the UL contained in the DIV we defined in index.php. The UL and LI’s are added by the Joomla menu module for us).
So first we need to get the DOM object for the “submenu” DIV, and check to see of the ID is present (since it may not be there on all pages depending on how you’ve set it up in Joomla):
var subMenu = document.getElementById("submenu");
if (!subMenu) { skip = true; }
This Object will contain as objects all its children and their properties.
We then need to step through each of its grandchildren to see if one of them is set “current”. One might not be of course.
Once we find an current LI we then need to search through all the LI’s in the document to find the associated item in the Main Menu. Fortunately In Joomla each menu LI is given a unique ID – shown in the Menu control Panel – (X) in the example below – so we can work out which LI we’re after. So we step through every LI in the document until the correct Item class is found and then add another class name to it, which we means we can then reference it via CSS. Since this LI won’t be active it will only have 1 class assigned to it – the ID of the menu item.
if (!skip) {
for (var i=0; i < subMenu.childNodes.length; i++) {
if (subMenu.childNodes[i].id == ("current")) {
// Set the associated main menu item active
var lists = document.getElementsByTagName("li");
for (var i=0; i < lists.length; i++) {
if (lists[i].className == ("itemX")) {
lists[i].className = "menuactive " + lists[i].className;
}
}
}
}
}
The only thing left to do is wrap this up within a function statement:
function menuStyle() {
....
}
and call it once the page is loaded by including the following in the
element in the HTML (PHP) file:
<body onload="menuStyle();">
The new JS function can be specified in the HEAD of the HTML document or an external JS file.
Hope this helps someone.
Been a bit quiet recently, mainly because been busy on developing 2 Joomla based sites for a client.
Both the sites require bespoke templates (so none of the off the shelf stuff).
The first for a health care company is nearing completion for stage 1, basically the template is with the client now for sign off and they are busy inputting and editing their content. A key requirement for this site was to make it accessible as close as possible to WCAG Level AA. After submitting the site for validation at the first pass it only failed on 1 thing really, which was fairly straight forward to resolve. This was to do with using the H elements in the correct hierarchical sequence, i.e. H1 should be followed by a H2, by a H3 etc. Joomla doesn’t quite do this out of the box and sometimes misses a level out, i.e. jumping from H1 to H3. So required further customisation to the template to correct this.
The site also needs to be secure, so there is no front end access to manage the content it’s all done via the back end control panel. Course it can be easily spotted that the site is Joomla or CMS driven, and therefore the URL for the control panel is well known. So a super strong password is required. However whilst looking into this found a neat plugin that adds another layer of security to the admin screens – it suffixes the admin URL with a secret key – get the key wrong and you’re presented with a 404 Page Not Found Error. Only when you get the URL with the secret key right are you presented with the Control Panel login. It’s called JSecure and requires Joomla 1.5. I’ll be using this on all my sites now going forward.
The second site, for a small business again posed a problem in that each page alternates between text on the left, picture on the right to picture on the left, text on the right. This was easily solved by simply managing the content correctly and setting the order of each article in the relevant category. It’s so important with the Content Managed systems to get the content sorted and organised first! I strive to get everything on the page as content and keep the template for controlling how the content is presented, rather than adding the difficult parts of the content into the template, which I see done quite a bit – defeats the object really. Again the general template for this is complete and with the client for initial testing.
I still have another Joomla based site waiting in the wings for development now as well!
PS. Whilst trying to dream up ultra hard passwords, I found a website that will generate them for you The BitMill – Random Password Generator. You can set how hard you want it to be, how long, what sort of characters are used etc. etc. No more racking the brains to dream up passwords!
We are pleased to announce that as of this morning JTI Electrical and Mechanical Services Ltd website is live.
Whilst being a primarily static website key areas of the website are able to be updated easily by JTI themselves without the need to edit any of the HTML, or using a full featured content management system like Joomla. We have done this by making key parts of the site, as agreed with JTI in advance controlled by a single external XML file that JTI can edit outside of the website and upload separately.
This is in effect a half way house between a truly static site and a feature rich content managed site.
