Add Custom CSS to DNN Website

If you wish to add some custom CSS to your DNN website the Stylesheet Editor within the Admin pages offers easy editing.

Not wishing to edit your DNN skin but wanting to amend the rendering of your DNN website?

Using the Stylesheet Editor allows for overriding of the website’s skin and the presentation of modules without directly editing each of these.

It allows all of your modifications to be brought together in one place.

Its easy to make the changes through the DNN website, no need to FTP files to the server. testing of your changes is also rapid,

Open the page Admin Site Settings page.

Add custom CSS to DNN website: admin site settings

On this page select the tab Stylesheet Editor.

Add custom CSS to DNN website: admin site settings stylesheet editor

The default content has references to many of the standard DNN classes.

Either leave these in place or check to ensure that they’re not in use and delete the them.

You can add your new overrides within the textbox. I like to add them to the bottom to better ensure that they will override the existing settings. And to make it easier to see.

Shown in the image above are some example entries for the Header tags H1 to H6.

For clarity I’ve also added a division, date and owner for the additional content.

Content wrapped with /* and */ is not actioned. From my example:

/* ########## Custom CSS ######## */

save your amendments and view the relevant pages.

The Stylesheet is saved to the file


The file is loaded late in the sequence of CSS files, after the sites skin files. Its configurations will therefore be higher in terms of priority.

Because the file is easy to edit, do ensure you have a backup copy. Anyone with admin access to the website is able to amend the settings.

How to Refresh your Browser Cache

Sometimes  the browser needs to be refreshed.

When a web site’s files, images, CSS and JavaScript, have been changed its possible for the browser not to realise the change and to continue using its older cached version.

Many times I have made a change to a client’s website, advised them that the updates are completed only for them not to see the change.

Refreshing the page view will often not update the view.

To view the changes made to the associated website files can require a forced browser cache update.

What is the Browser Cache?

Browser website cache is the local storage of website components: images, scripts and CSS rendering files.

The aim is to store a local copy of the website components such that the next time the page is visited only one or two items may need to be downloaded.

This improves the load speed of the website.

Browsers and how to reset flush their cache:

Refresh browser cache typical website timeline


The image above shows the details regards the timing for the downloading of the various components of a website.

a web a page allows a browser to

By caching elements of a website the browser saves on time regards to the download of those elements.

However, if one of these elements has been updated it may mean that the change isn’t showing.

If the browser is still using its older cached version then the page will look the same as before.

So, how to force the browser to reload it’s cached items, just as if it was the first time visiting the web page?

Whilst updating customer’s websites I sometimes find that the changes are not visible in their browser when reviewing the update.

For example if an image hasn’t changed, or as shown in the image above one of the website rendering CSS files is still the same then this file doesn’t need to be downloaded.

This means that the browser can render the page much quicker – it hasn’t had to wait for the file to be downloaded.

Its also lighter on your Internet plan.

Browser shows an old version – but my file has changed

Simply refreshing your browser view of a page may not be sufficient.

Browsers tend to like to work from their cached copy of website static files. Files such as images, script files and styling are generally considered to be static.

Refreshing the browser page will allow the server to regenerate the content, perhaps with any differences. But the underlying files will be kept.

So, how do I force the browser to refresh its cache? Reloading all of the websites files as if I was visiting the site for the first time.

Force Browser Refresh

The browser will try to limit the files which it downloads. However, his can mean that files which have been updated are not realised. Rendering n older version of the file.

This effect is most visible when an image or the CSS layout file have been updated.

This is most notable during the development phase of a website.

Listed below are a number of browsers with how to force the browser to refresh its cache. Sometimes clicking on the browser refresh or pressing the often used f5 key are just not enough

Refresh browser cache Firefox refresh

We need to tell the browser to forget anything that has previously been downloaded from the website should be forgotten and download afresh.

Researching this I found that comparable methods don’t exist across all of the browsers.


I have found with Firefox that if I follow the often stated recommendation to host down the shift key and to press the f5 key I usually open a new tab.

I have found that it is preferable to hold down the shift key and to then click on the refresh icon to the right of the address bar.

Whilst testing website I have found that server errors can be particularly irritating. Firefox will fail to get the note working content from the server, rather contributing to show the server error. This does eventually time out and function correctly indeed more.


For Safari versions 9 onwards pressing the command key and R will refresh the cache.

There is also the option to click on the reload icon (at the end of the navigation bar) whilst holding down the shift key.

Google chrome

Either CRTL + F5 or <SHIFT> + F5 will work.

This may also be done from the Settings. Having selected the settings, scroll down to the bottom of the list, expanding the section Advanced. Within Privacy and security click on the option Clear browsing data. The option we’re interested in is Cached images and files. Ensure this one is ticked, untick the remainder. click on the button CLEAR BROWSING DATA.

Internet Explorer

<CTRL> + refresh ought to suffice. But its not guaranteed. With IE the better option is to clear the cache either via the tools menu or F12 key.

You may find you need to use the tools options to properly clear the cache.

Click on the gear icon and in the popup window Internet Options within the sections Browsing History click on the Delete button. This opens a new window. Untick all items except Temporary Internet files and website files. Click on Delete.


IceWeasel is effectively Firefox. It therefore acts the same.


Opera doesn’t have the equivalent of clearing the cache for the current web page. Opera settings then select delete private data. Cache empty is for all.

Click on the menu in the top left corner. And click on Settings.

The Privacy & Settings page includes the option to Clear browsing data near the top, within the Privacy section.

Clicking on the link opens a pop-up window allowing selection of the items to clear. There’s an option to select how far back in time the selection shall affect.

Whilst not giving the option to select the current page this does give a good approximation.


From the Settings menu, select Configure Konqueror.

On the pop-up window Cache is shown in the left menu as a child item of Web Browsing. Click on this.

For me I was shown the message: This configuration section is already opened in Choqok.

I closed Choqok and tried once more.

There’s a single option, a button Clear Cache.


This is one of the <SHIFT> key plus toolbar refresh icon ones.


Click on the Vivaldi icon in the top left corner and select Tools and then Clear Private Data.

On the pop-up window select cache only and set the time to Past Hour. Click on Clear Browsing Data at the bottom of the window.


How to clear the Firefox cache

Opera Help: Cache

Midori Browser FAQs

Wikipedia: Bypass your cache

Suite CRM Change Initial Quote Number

Using the quotes and invoices within Suite CRM I wished to set an initial number.

The base number was to be a minimum of 4 or 5 digits making the quote, or invoice, number more visible. There’s also the possibility to set the two numbers as a reflection of the year.

Subsequent numbers issued will be incrementally larger.

Searching the Internet I found references to editing the database table values using SQL.

Surely there’s a better way than this! Whilst not averse to such actions I’m aware that updates can potentially over write such amendments.

I also read about changes within the studio admin section, which covers the field types, text values and the like.

Here’s the Studio general view

Suite CRM change initial quote number: Admin Studio

with the more detailed numbers view

Suite CRM change initial quote number: Admin Studio numbers view

Unhappy with both of the above two options I looked for a better solution.

So how did I set the base value for the quote number?

Lets start from the dashboard and select the admin screen.

Suite CRM change initial quote number: select Admin

In the top right hand corner hover over the encircled person icon to show the drop down menu. Select Admin.

Suite CRM change initial quote number: Admin page

On the admin page scroll down to passed the Developer tools section, which includes Studio, which we observed earlier, to the Advanced OpenAdmin. Within this section click on AOS Settings.

Suite CRM change initial quote number: AOS settings

On this page set your base quote number value and if desired one for the invoices.

The number needs to be greater than the current maximum value in the database, as its the highest value from the table which is referenced for the next value.

Don’t forget to click on Save.

Configure User Agent in FireFox

Setting the browser agent in Firefox allows the browser to pretend to be something else.

Traditionally the user agent string was changed to make the browser appear to be IE6. Without this some websites wouldn’t work.

FireFox hides the User Agent configuration in the about:config settings.

I guess is one of those less frequently configured options – why clutter and confuse the existing configuration options with an item such as this.

To set the user agent string in Firefox. Enter the configuration using about:config in the address bar.

There’s a confirmation that changing the settings can be harmful to the application and that you should only continue if you know what you are doing.

Configure FireFox user agent about:config warning

The configuration parameter to be modified is general.useragent.override. To see if its available enter useragent in the search box.

Its likely that its not listed as a configurable option.

To add it right click in the window (I placed the mouse within the white space below the listing).

On the pop-up menu select New > String

add general.useragent.override as the name of the preference.

The user agent can then be added.

You may prefer to use an Add-On to manage the User Agent. This will allow a list of agents to be maintained with easy switching. Much simpler to checkout websites than to keep returning to the about:config options.

With your FireFox browser configured to allow easy switching off the user agent you are able to test the reason of website to different browsers and bots.

Of particular interest maybe the response of one of your websites to different robots.

One of the website hacks (so called Pharma Hack) is to detect whether the visiting browser is the google-bot or a human visitor. The content of the website is then amended accordingly. If it’s the google-bot then it looks like it’s showing and referencing pharmaceutical products.

Maybe you have configured your website to block the bad robots by their user agent, for example one of the spam bots.

To test whether your website is rejecting these bad bots you can configure Firefox to appear to be one of them by setting the user agent string.

To review and check that your website is presenting itself as you would expect change the user agent in your Firefox browser and visit your website.

Export Lotus Notes Contacts

I was working recently with someone who wished to export their Lotus Notes contacts for use with either a Gmail or Apple account.

These are the steps I followed to export the contacts from Lotus Notes:

  1. Open the Contacts page in Lotus Notes.
  2. In the menu select My Contacts
  3. From the menu bar select More and then export
  4. Choose the save location and enter a file name
  5. Choose whether to export as a csv file or a vcard

Your contacts can now be imported into Gmail, iCloud or other applications.

You may find that saving the file as a vcard is more universal. Allowing for easier import some of the contacts.

Blend two Images with the GIMP

I use the Gimp to edit and produce artwork. For a project I wished to blend the edge between two images.

Whilst working on a recent slider for a website. The images I had to work with were either the wrong orientation or just not quite long enough to be used as single images.

I wanted to join a couple of images together to create a composite image, the full width of the slider. This would also allow me to convey more information on a single slider image view.

Blending two images together to get a smooth transition rather than a hard edge makes it more appealing. Even if the edge is only a few pixels it will be easier on the eye.

Using the Gimp I took two images for a slider and blended the join between the two to create a fade between them.

Here I am using two pictures from Bergen. To begin with in a new image I added the two images, one per layer, leaving the background untouched. To make this work best an overlap of the two images is required.

Blend images with the Gimp: initial layers

The layers are shown in the Layers Window: the image of the troll, the view of Bergen from Mount Fløyen and the generic background layer.

Blend images with the Gimp: layers window

In the layers window, for each of the layers, right click and select to Add Layer Mask.

Blend images with the Gimp add layer mask to layer

Ensure that the option White (full opacity) is selected

Blend images with the Gimp add layer mask

With the layer masks added again right click to view the properties, check to ensure that the check box for Edit Later Mask is ticked.
image here

Blend images with the Gimp confirm edit layer mask set

From the tools window select the blend tool. The foreground and background colours should be black and white respectively.

Blend images with the Gimp select blend tool

Between the transition of the two images drag the blend tool line, if horizontal of vertical holding down the ctrl key helps to keep it at 0, 90, 180 or 270 degrees.

Drag as far as you need to create the blended transition. The longer the line the great the overlapping transition.

Blend images with the Gimp layers blended

Link your Twitter Android app to your Twitter Account

Create a Twitter application to link your Android Twitter app with your Twitter account, enabling the posting of tweets from your Android phone or tablet.

Most of the Android Twitter apps make use of their own Twitter application by default.

Whilst this makes the configuration of the app easy, Twitter imposes a limit on the number of clients using a given application. A number of these clients have previously reached their client limit.

With your own Twitter application you are not reliant upon the configuration and maintenance of details by someone else.

Also the security keys which you use are unique to your application – much safer. And as many of the Twitter Android apps are at, or near the limit imposed by Twitter using your app allows someone else to make use of the default.

Create your own Twitter application, linking your Twitter Android app. Its easy to do and avoids any potential issues from using the default application associated with one of the Android apps.

The Twitter application provides two encrypted keys to enter in the Twitter app.

In this example I used Twidere, of coarse other apps are available.

In the Twidere app slide in from the left edge of the screen to show the configuration options.

From the settings select network, then scroll down to select default API settings.

On this page it is the consumer key and consumer secret which we shall be entering from our Twitter application.


Rather than the usual Twitter public website, we’ll start from is the development website

At the top of the page click on my apps in the navigation at the top. This goes to No doubt you have a Twitter account – sign in with the details..

Create Twitter Application: Login

After logging in the shown page has a list of your existing Twitter apps.


Click on Create New App button


Enter the relevant details. It’s worth describing your app properly in the description, in case you wonder what it is in 6 months time. Ensure that your website link contains the full reference, including the http://


Select the tab for Keys and Access tokens


The consumer key and consumer secret values and shown.

Create Twitter application: Keys and Access Token

Whilst not needed at the moment I often create the access tokens at this time. Click on the button Create my access token to populate the values of the token and token secret.

Copy the application setting values of consumer key (API key) and  consumer secret (API secret) into the Twitter Android app. In our example we are using Twidere. Click OK to save.

Create Twitter Application: Twidere Android Client API Authorisation Settings

Your Android Twitter client app should now be good to go. Return to the list of tweets and try adding a new one.

Website Screenshots

I use website screenshots to explain details, show an example of previous work or highlight aspects of a web page.

Annotating a screenshot may help to convey information regards prospective work or actions and changes made.

Screenshots may also be used to record configuration and settings, for example email account setup.

Website screenshots may be taken either from within the browser using one of the extensions available or by capturing the whole browser view using a feature of the operating system.

The screen capture facility may capture the whole of the screen, active window, or offer the selection of a party area.

Dependant upon the device and operating system which you are using there is are number of options available.

Operating System

If you wish to take a screenshot of a programming window this allows the screen capture, either full screen, or one of the open windows.

Useful for capturing configuration details of email accounts and configuration. This can then be kept for prosperity, providing future reference.

Or the screenshot of the email configuration can be passed to/from your web hosting company when reviewing email account configuration and operation.

Apple and  Android allow screnshots to be taken directly with the use of keys.

Programming based

Programs are available which enable the capture of the screen’s content.

There is likely flexibility in the area which can be captured.

I use the program Spectacle which allows a time to be set before the capture is triggered. I can then navigate to a window and perform an action, for example hovering over a selection causing a drop down menu to appear. Two seconds later and the screenshot triggers capturing the window together with the mouse selection action.

Website Screenshots: Spectacle

Browser Based

If you wish to use the browser to capture the view of the page. Search the browser’s extensions for

  • Screengrab (FireFox)
  • Awesome Screenshot App (Google Chrome)
  • Nimbus Screenshot App (Google Chrome)
  • Marqueed Screenshots (Google Chrome)

I use Screengrab on Firefox.

A browser based Screengrab allows the the capture of the browser window, or a part thereof. But it is restricted to the browser and didn’t give access to the other programs opened.

A browser based screenshot program had the familiarity across different operating systems, for example if you are using Chrome on Windows and Mac.

What is Domain Privacy?

Many website hosting companies offer Domain Privacy as an option – but what does it mean? And is it worth paying for?

If I do a query on the domain I get the following result

/home/neil# whois

Domain name:

British Broadcasting Corporation

Registrant type:
UK Corporation by Royal Charter

Registrant's address:
British Broadcasting Corporation
Broadcasting House
Portland Place
United Kingdom

Data validation:
Nominet was able to match the registrant's name and address against a 3rd party data source on 12-Jun-2014

British Broadcasting Corporation [Tag = BBC]

Relevant dates:
Registered on: before Aug-1996
Expiry date:  13-Dec-2025
Last updated:  29-Oct-2016

As can be seen within the results is the address of the domain’s registrant:

Registrant’s address:
British Broadcasting Corporation
Broadcasting House
Portland Place
United Kingdom

For a business with an office, providing this information on the Internet is acceptable. However, for an individual its possible that they may not wish to give away such details.

Domain Privacy hides the registrant’s address.

There are many tools and websites which can be used to find this information. One you may wish to try is

Further reading

Wikipedia: domain privacy

123-reg: domain privacy

1&1: Private domain registration

Fasthosts: domain names privacy

Hostgator: how to enable whois privacy

Show WooCommerce Product Categories in Admin Menu

After installing the WooCommerce plugin to a WordPress website. How to add the shop categories to the menu?

Navigating to the page Appearance > Menu I was anticipating the inclusion of additional sections associated with WooCommerce.

However, looking at the WordPress menu configuration I was seeing the plain ordinary menu options.

Show WooCommerce categories in admin menu plain

To add the additional WooCommerce menu configuration options expand the Screen Options section at the top of the screen.

Show WooCommerce categories admin menu screen options

Within the Screen Options select the additional sections which you wish to add. I chose to add Product Categories. clicking on the check box for the option adds it to the page. Once you have made your choices close the Screen Options tab.

Show WooCommerce categories in admin menu with categories

Expand the Product Categories section and select the categories which you wish to show in the menu. Add these as you have previously for pages.