Client area menu customisation

Is there a way to customise the client area by removing or hiding some menu buttons on the top and left hand menus. We only need a basic function of viewing the invoice and possibly invoices to date. Thanks.

You can hide the whole menu using the following CSS:

.vMenuColumnCl {
display:none;
}

There’s no simple way to hide specific menu options, but we may be able to add some extra handles to make this possible. Which items in the menu are you looking to hide?

Hi Thanks for the quick reply.
Some other questions on customisation which hopefully is straightforward:

  1. Is ther1. e also a css to hide the whole top menu.
    1. Or we are considering keeping this but without the My Messages tab at the top. Is it possible to turn off this tab?
    1. On the Invoices tab can we turn off the advanced search button.
    1. On the Home tab can we hide the estimates section
    1. Can we change the text of the “My control Panel title at the top” and
    1. “Hello, welcome to your control panel…” text
  2. Also if we wanted to append a pdf document to an invoice prior to sending out is this possible?
    Thanks

I see the answer to 7 above ie appending files to invoices in the help section, but can you advise on how to go about customising the other items also if possible please. Thanks.

At the moment no, however if this is something you’d like to do we can add a class handle to that area so it can easily be hidden.

Yes, in Account Settings >> Design Customisation >> Client Area Customisation. Here you can add your own, or remove any existing menu tabs.

This should do the trick:

.page-clientarea-invoices .advancedSearchButton {
   display:none;
}

Right now no on both points, although again if you want to do this we can make it possible by adding some additional class handles.

No I’m afraid this is not possible. You can however upload your PDF to a public storage provider and link to the document in the invoice notes/terms.

Ok great thanks.

I’ve found how to hide the top horizontal menu with the unselect button on the client area page.
Ideally I would need to customise some more points to leave the home and invoicing buttons working on the top menu, inc the items noted above ie removing the advanced search button, and estimates from the home page etc.

One more thing we need to make it work for us please: how to remove the “query invoice” button from the invoices pages.

And i have removed some links to the horizontal menu whilst experimenting, however how to restore the default settings for this pls? ie bring back the top menu!
Thank you

.page-clientarea-salespreview  #hypQueryLink {
  display:none;
}

There is no option to auto-restore however here are the default set of tabs you can use to get it back to how it was previously.

Also can we turn off the home link when clicking on the logo image in the client area.
We’ve disabled it using the css - but clients can still get to it by clicking the logo in the top left corner.

If you go into the advanced customisation area of your account, and select ‘Client Area Header HTML’, this will allow you to edit this part of the client side.

Click ‘Import Default’ to show you the default code.

If you’re not familiar with HTML, you will need to have a look at the code for this part:

<a href="http://your-company.quickfile.co.uk" style="padding:6px;"><img alt="Company Name" id="imgLogo" src="Link to Logo" border="0" /></a>

Simply remove the anchor tags and leave just the image tag. This will completely remove the link from the logo image. So, you’ll end up with something like:

<img alt="Company Name" id="imgLogo" src="Link to Logo" border="0" />

Hope that helps!

OK thanks, that works but ive found one more link problem:
On the invoice page the back button on the bottom left corner takes clients back to the home page that we were trying to hide…
Any ideas on how to hide this (or change the link) please??

.page-clientarea-salespreview  .page-footer-block a {
    display: none;
}

This should work!

With regards to hiding elements on the page you can determine the appropriate rules to assign by using “Inspect Element” on your browser. You can then look to see what classes/ids exist and target the css accordingly.

Each page has a class in the body tag, e.g.

.page-clientarea-salespreview

So you can ensure that any changes are only going to affect a specific page by knowing the body tag class.

OK thanks think i have got this working.
A couple more points, I cannot seem to hide the checkboxes on teh invoices page, is there a way to do this i couldnt find the css ref

Also I made some amendments to the horizontal top menu a few days ago, but it is now no longer responding to any further changes even after saving - eg amend some links, or save a new template, or rename tabs etc. I cannot even change it back to the default with your links for some reason. Can you help please?
Thanks

What web browser are you using? If you’re using Google Chrome for example, you can right click the item you wish to amend, and then click ‘Inspect’. Other browsers have similar functionality too.

In this case, I right clicked the little checkbox, and it opens up the HTML for this. You’re looking for a class or ID. ID is preferred, but in some cases only a class is specified:

With classes, these are denoted with a . prefix and can be used to identify more than one element. In this example, every checkbox would share the same class.
IDs are denoted with a # prefix and can only be used to identify one element.

In this case, we have a class, so it would be: .inputActionCheckbox, and you can then just use this with the CSS editor, for example:

.inputActionCheckbox {
     display: none;
}

I will have to refer the horizontal menu to our development team to have a look at. I’ll update you as soon as I hear anything about this.

[Edit]
The reason the menu isn’t working is because it’s being overridden by the changes in the HTML section listed above. In particular, the menu is defined by this section:

<td align="Center" style="width:40px" class="darkCell white-small-bold standardBorder_Left standardBorder_Top standardBorder_Right tdMenuTab"><a href="/secure/ca/index.aspx" class="menuItemLink">Home</a></td><td style="width:5px" class="standardBorder_Bottom"></td><td align="Center" style="width:80px" class="darkCell white-small-bold standardBorder_Left standardBorder_Top standardBorder_Right tdMenuTab"><a href="/secure/ca/invoices.aspx" class="menuItemLink">Invoices</a></td><td class="standardBorder_Bottom"></td>

What you would need to do is manually insert the links. It does this to enable a greater range of customisation as it overrides other settings (such as the menu settings and even custom trading styles).

If you’re not familiar with HTML, you may wish to ask someone who deals in this area to help you achieve exactly what you’re trying to do. You’re welcome to add a post in our Marketplace category if you wish as we have quite a few users who specialise in this area.

thanks. Yes i discovered that if i delete the html customisation the top menu then works again from configuring from the design customisation (DC) settings page.

The only reason we were in the html customisation page was simply to remove the click image link in the header to the invoice page. Is there a way of doing this without messing up the way the DC setup ie top menu works? i thought we deleted the correct part from using your posting above but for some reason now it brings back a top menu configuration that is nowhere to be seen in the DC page nor wanted. Its just seems to remember a previous version of something tried out but we now dont want to not use for the moment…slightly strange??

Anyway can you identify the exact html text i am to delete to remove the link please.

I just went through the html change again from your previous post and think i have it now! Thanks

Another couple of questions on invoices:
1 Can we hide the “item” column visible on invoices
2 Change the wording of “Unit Cost”

Many thanks

This can be found under Account Settings >> Invoice Customisation, click on the Item area, and untick this box:

You may find this post useful:

There are quite a few posts in the Knowledge Base relating to customisation and adding/removing columns etc. I’d recommend taking a look through these as they cover the more common scenarios