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

/portals/PortalID/portal.css

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.

Slow the GoogleBot Crawl Rate

Internet robots such as Google’s may visit a website more frequently than the website can serve.

The frequency may be considered detrimental to the website, with the potential to cause slowness for the website’s visitors.

The crawl delay is specified in the robots.txt file.

This file is included at the root of the website. It lets you tell the Internet robots how you wish them to index your website. But, they may ignore your advice! Particularly true of malicious robots or perhaps a mis-configured new project.

The robots.txt file is used to advise, those robots which follow the standard, which directories they are permitted to traverse and the point we are interested in, the delay before the next visit.

To configure the delay in the robots.txt file add a Crawl-delay entry.

User-agent: google-bot
Crawl-delay: 60

Where the number is the number of seconds before the robot returns.

In the example the Google bot is targeted, requesting it to return after 60 seconds.

The problem with this approach is the delay before the robots.txt file is next read. It may be a few days before the file is next read, while you may be keen to slow the crawl rate sooner.

Google can be informed directly via its Webmaster tools website.

Click on Search console, top left below the Google logo. From the listed websites select the one which you wish to amend. This shows a page with current status summary graphs and a menu of options at the left.

At the top right, below your account link click on the gear icon to select Site settings.

Within the second section: Crawl rate, click on the radio button for Limit Google’s maximum crawl rate.

This expands a section to show a bar option to set the lowest and highest values, for the time delay, in seconds, between requests.

Make your selection and click on the Save button.

I think, its better to use the robots.txt file. All the robot configurations are in one place, for easy reference. No need to search for account login information to configure the settings across multiple providers. But, do remember that the file is publicly readable, if that should be of concern.

Dependant upon the urgency, you can either inform Google directly via webmaster tools or by configuring robots.txt.

Add Social Media Feeds to your WordPress Website with Feed Them Social Plugin

Feed them Social is a WordPress plugin which enables social media feeds to be displayed on your WordPress website.

Developed by SlickRemix the plugin supports feeds for:

  • Facebook
  • Twitter
  • Pinterest
  • YouTube
  • Instagram

Feeds are added by selecting the social media option from the menu and creating a shortcode for addition to the website.

As would be expecting the layout for each of the social media options is similar with a dialogue for the fetching of the token at the top. Below there are the settings particular to the feed which is being configured.

Having accepted to provide SlickRemix access to your social media its possible at a later date to revoke this permission. the method of doing this is specific to each of the social media websites.

WordPress shortcodes can be included either within the body text of a post or page, or by incorporation within the theme’s php files.

Adding Social media links

Details on adding each of the supported social media sites.

Facebook

From the left menu click on the Facebook Options link

At the top of the page click on the button “Login and get my Access Token.

This will take you to Facebook, I found an initial popup window stating that SlickRemix will receive your name and profile picture.

The next page is an option to allow SlickRemix to manage my pages. If you chose to disallow this then an access token won’t be generated.

Finally there’s a message that the access token is being received and back to the website.

Back on the website the page previously selected is shown together with its ID reference.

Click on this page reference to transfer the details into the PageId and Access token boxes above.

From the options below make your choices and click on the Save all button at the bottom.

Follow the link to the settings page to generate your shortcode.

Instagram

The Instagram layout is similar to Facebook, described above.

Click on the button to proceed.

On the Instagram website a screen is shown which confirms that Feed Them Social by SlickRemix is requesting to do the following:

  • Access your basic information: your media & profile info
  • Access public content: media & profile info of public users

Buttons are present below to either cancel or Authorise. Click on Authorise.

Note below the box there is confirmation that the apps access can be revoked at any time by clicking on revoke in the access section.

Back at the WordPress website the Instagram ID and Access token Required fields are now populated.

Make your choices from the Follow Button Options and click on Save all Changes.

Visit the Settings Page to collect your shortcode for use.

Incorporation the Shortcode

Shortcodes are used to render the feed. Its a way to tell WordPress what plugin code to incorporate, together with a number of options.

Generating Shortcode

The shortcode for each of the feeds, which have had a reference generated, is made on the settings page.

At the top of this page there is a dropdown list of the different supported feeds. Select the one which you wish to generate the shortcode for from the list.

The displayed content changes to reflect the options available.

Note if you haven’t configured the selected feed yet a link is included to its options page.

Work your way through the options and click on the button Generate shortcode at the bottom.

Using the Shortcode

Shortcodes can simply be pasted within the body text of pages and posts.

You may find having a private test page is a good way to experiment with your feed settings.

Once you are happy with the options then add the feed into the page, widget or use it within the php code used for your theme.


Warning: Remote Host Identification has Changed

Using terminal program on Apple Mac book pro I had following error when connecting to a Linux server

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
The fingerprint for the ECDSA key sent by the remote host is
SHA256:8wZ3n0MN2c1YzOdYZ01Ct+MVDm924tmfw4NUfAnMenA.
Please contact your system administrator.
Add correct host key in /Users/neil/.ssh/known_hosts to get rid of this message.
Offending ECDSA key in /Users/neil/.ssh/known_hosts:6
ECDSA host key for 192.168.1.1 has changed and you have requested strict checking.
Host key verification failed.

The server had been recently rebuilt with revised ssh server configuration.

I opened another terminal session and edited the file .ssh/known_hosts using vi.

192.168.1.1 ecdsa-sha2-nistp256 MIGeMA0GCSqGSIb3DQEBAQUAA4GMADCBiAKBgGacCUIonaql4oszZ1QFBxDxVD898cZH+UaPglM71NSad9b5MBHcTIOVEHNjSj7BBW3YMxI45fvg/He8zA94IJw1LR84zz1JwfmtEmD4VWt9pw8KRKmFKRI7X+rvsCknRJcpOHC7GQqYD4IHU6kzIqBNAfMn6YGzRo7XXhxgmwkbAgMBAAE=
192.168.1.78 ecdsa-sha2-nistp256 MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCVoNuBxLq4QKwcYhXh06PU7LQHCKSdQEbEVUzEIZS46dCjrIosp73+ulbqfUGPG4GlduKG98CzdijoFS2t+C9Kq3A48uMxdPRfhhOCutWl+fLmLY2G7WgM+/8nAB07SQhtgNeNH55TCvOlsrkaEGdsek1ZePNsJbiRRL+UCG7sJQIDAQAB
192.168.1.174 ecdsa-sha2-nistp256 MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCFzyPNE4K/g55XU2fV3vNZNv/A6EE26zB1VLmiZPGFJpqJdLsvwSFiQx0T4LOJMoCXxiCjiyexd5hQyh0s3euWBWdn25TmsNToMmRosrkbfJGnKYj12ZUTuuOIgVwfxlAroHmf7m0gl+Yx43s7eeXVRn2cnwCHziZN2E5X+RqoowIDAQAB
192.168.1.52 ecdsa-sha2-nistp256 MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCHaOo07u4NFIBQxMenPfKSjV06+77TEgaWhiyvoIpQvP0udBVbvJuOD3EpBXLNDV9Z4jeCofrqy4mJRqP08Wq/r6EFny8i34EQm/VJNzLqvNhJ76JzVaYJYmL/CSKGklHjYGktUCq4rHTcxoUlcL9uvfXO2raWsnOFgBIZJt/KzwIDAQAB

Deleting the previous entry for the server and ssh to the server once more.

ssh 192.168.1.1
The authenticity of host '192.168.1.1 (192.168.1.1)' can't be established.
ECDSA key fingerprint is SHA256:8wZ3n0MN2c1YzOdYZ01Ct+MVDm924tmfw4NUfAnMenA.
Are you sure you want to continue connecting (yes/no)?

I selected yes and was able to access

Interesting – my computer (Debian) has these entries encrypted.

HTML Frames

Here’s some old thoughts about the use of frames in HTML

I found some notes about HTML frames written some time ago.

Once upon a time long ago… frames were used regularly on websites.

Using frames we are able to divide web page into two or more areas. This can be by fixed width of percentage.

One of the main reasons for the use of frames was to provide distinct content within different areas of the page. Frames enable the website’s navigation to be shown

Often the navigation was positioned on the left of the page with the content on the right. When one of the navigation links was clicked only the content area changed.

To create our HTML page using frames we need a master page, typically index.html which will look something like:

<frameset>
<frame src="Nav_page.html">
<frame src="content_page.html">
</frameset>

In the example above the defined widths of the two frame areas are one of 150 pixels and the othereverything else.

The two other web pages referenced are created in the usual way.

Attributes of the FRAME tag are:

AttributeValuesDescription
frameborder1 or 0Determines whether frames are displayed with a border.
marginwidthAn integer valueThe height of the left and right margins in pixels.
marginheightAn integer valueThe width of the top and bottom margins in pixels.
nameA string beginning with a letterIdentifies the frame. This is relevant for JavaScript to be able to reference the frame.
noresizeWhen set it prevents the user from resizing the frame.
scrollingyes, no, autoSpecifies whether scroll bars shall be displayed. When Auto is specified the scrollbar is added if required.
srcany URLSpecifies the file to be displayed in the frame. If no file is given the frame will be left blank.

The frames approach has historically been a problem for search engines to index. Also if the visitor arrives on a content page a means of viewing the complete arrangement of navigation and content must be supplied.

Often frames will be flagged as a potential security issue. The content of a frame may be a different website and can therefore be changed to a website other than the one intended.

And today what about the use of frames today?

Frames are not supported in HTML5.

PHP Fatal error: include_path=’.:/usr/share/php:/usr/share/pear’

A fresh install and an installation of WordPress via the Debian apt package management gave the error

PHP Fatal error: include_path='.:/usr/share/php:/usr/share/pear'

On a development computer I chose to install WordPress via the package manager as opposed to creating Apache site directories.

With MySQL and Apache installed WordPress is added by executing, at the command prompt

apt-get install wordpress.

However, when I first navigated to the website at localhost/wordress/ rather than seeing the start of the me WordPress website creation sequence I had a blank white screen, the so called white screen of death!

Debug reporting can be enabled within the file wp-config.php, located in the root of the website. Here’s the 3 debug options, as disabled:

define('WP_DEBUG', false);
define('WP_DEBUG_LOG', false);
define('WP_DEBUG_DISPLAY', false);

The packaged Debian version relocates this to the directory

/etc/wordpress

Editing the file config-localhost.php I enabled debug logging setting my chosen options to true.

Still with a blank screen shown I chose to look at the Apache error log.

/var/log/apache2/error.log

using

tail -f /var/log/apache2/error.log

The last few lines of the log file are:

PHP Warning: require_once(/etc/wordpress/config-localhost.php): failed to open stream: Permission denied in /usr/share/wordpress/wp-config.php on line 19
PHP Fatal error: require_once(): Failed opening required '/etc/wordpress/config-localhost.php' (include_path='.:/usr/share/php:/usr/share/pear') in /usr/share/wordpress/wp-config.php on line 19
PHP Warning: require_once(/etc/wordpress/config-localhost.php): failed to open stream: Permission denied in /usr/share/wordpress/wp-config.php on line 19
PHP Fatal error: require_once(): Failed opening required '/etc/wordpress/config-localhost.php' (include_path='.:/usr/share/php:/usr/share/pear') in /usr/share/wordpress/wp-config.php on line 19

The error suggested that Pear was not installed.

To check to see if pear was installed at command prompt I typed pear

neil@abc:/home/neil# pear
bash: pear: command not found

I then installed pear using

apt-get install php-pear

Giving the following:

Suggested packages:
  php5-dev
The following NEW packages will be installed:
  php-pear
0 upgraded, 1 newly installed, 0 to remove and 107 not upgraded.
Need to get 264 kB of archives.
After this operation, 2,108 kB of additional disk space will be used.
Get:1 http://mirror.ox.ac.uk/debian testing/main amd64 php-pear all 5.6.16+dfsg-2 [264 kB]
Fetched 264 kB in 0s (625 kB/s)  
Selecting previously unselected package php-pear.
(Reading database ... 218176 files and directories currently installed.)
Preparing to unpack .../php-pear_5.6.16+dfsg-2_all.deb ...
Unpacking php-pear (5.6.16+dfsg-2) ...
Setting up php-pear (5.6.16+dfsg-2) ..

A restart of Apache

service apache2 reload

To my disappointment – no effect it still showed the error

Tue Dec 22 13:57:38.596887 2015] [:error] [pid 24889] [client ::1:41744] PHP Fatal error: require_once(): Failed opening required '/etc/wordpress/config-localhost.php' (include_path='.:/usr/share/php:/usr/share/pear') in /usr/share/wordpress/wp-config.php on line 19

I considered the permissions of the file in the directory /etc/wordpress, assigning to it the apache permissions

chown www-data:www-data /etc/wordpress/config-localhost.php

Once more I revisited the website at /localhost/wordpress

Success! I was now getting the WordPress installation.

Verify Database Backup

I was working with a new computer system. I had made a backup of the database. But could I rely on it?

To confirm the first run of a database backup I wanted to test/verify it was OK.

What I didn’t want to do was to restore the database over the existing one, without the assurance that I wouldn’t be losing data. Too risky!

From within the SQL Server Management Studio. Click to run New Query. I ran the following:

RESTORE VERIFYONLY FROM DISK = 'restore verifyonly from disk = 'Z:\Backup\project1.bak'

You may have to wait a while for the verification process to run.

Here’s an example output showing that the database backup is good to be used:

The backup set on file 1 is valid.

A simple command to run, with a lot of reassurance as a result.

References

RESTORE Statements
Checking to make sure a SQL Server backup is useable

A RadioButtonList in a GridView

A GridView is to include a RadioButtonList in its presentation. The options are to be populated as fixed options, not taken from a database.

The example below takes values from the DotNetNuke Lists and displays them as a radio button list.

In the presentation file there is a GridView, called gdvMembership

<asp:GridView ID="gdvMembership" runat="server"
  AllowPaging="false"
  AllowSorting="false"
  AutoGenerateColumns="false"
  GridLines="none"
  cellspacing="1"
  border="0"
>
  <Columns>
    <asp:TemplateField ItemStyle-HorizontalAlign="left" ItemStyle-Width="80%">
    <ItemTemplate>
    <asp:RadioButton ID="rbnOptions" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Text")  %>' GroupName='<%# DataBinder.Eval(Container, "DataItem.Value")  %>' Checked='<%# DataBinder.Eval(Container, "DataItem.Selected")  %>' AutoPostBack="true" OnCheckedChanged="setSelection" />
    </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

In the code behind, a subroutine is used to populate the GridView and to set the selected item.

Private Sub Registration(ByVal SeclectedValue as string)
  Dim dt as DataTable = new DataTable
  dt.Columns.Add(New DataColumn("Text"))
  dt.Columns.Add(New DataColumn("Value"))
  dt.Columns.Add(New DataColumn("Enabled"))
  Dim row as dataRowrow = dt.newRow()
  row("Text") = "I am registered with the organisation"
  row("Value") = "Registered"
  row("Enabled") = True"
  If SelectedValue Is Nothing Then
    row("Selected") = False
  ElseIf SelectedValue = "Registered" Then
    row("Selected") = True
  Else
    row("Selected") = False
  End If
  dt.Rows.Add(row)row = dt.newRow()
  gdvMembership.DataSource = dt
  gdvMembership.DataBind()
End Sub

Whilst populating the rest of the page content the above sub-routine is called with the value of the registration status.

Registration(objIApplication.Membership)

Radio buttons of a different row in a GridView cannot be grouped together. The issue is caused by each row in the GridView being given a different ident.

The radiobuttons are therefore not of the same name once the page is rendered.

<input id=”dnn_ctr485_application_gdvMembership_rbnOptions_0″ name=”dnn_ctr485_application_gdvMembership_rbnOptions_1″…>

Use the GroupName parameter.

I had considered using JQuery to change uncheck the other options when the selection is changed. However, I chose to use an auto postback and a call to a function: don’t forget to add AutoPostBack=”true”.

Protected Sub setSelection(ByVal sender As Object, ByVal e As System.EventArgs)
  For Each row As GridViewRow In gdvMembership.Rows
    Dim rb As RadioButton = TryCast(row.FindControl("rbnCUOptions"), RadioButton)
    Dim rbn As RadioButton = TryCast(sender, RadioButton)
    If Not rb Is rbn Then
      rb.Checked = False
    End If
  Next
End Sub

Adapting Menu for Touch

Before the proliferation of touch devices website menus were controlled with mouse hovers and clicks.

To view the child items associated with a particular menu item, simply hover over the item to pop up the child menu with the list of child items.

If you wanted to view the parent page, a simple click was all that was required.

Adapting menu for touch: child menu

But hovering doesn’t work with touch devices. Touching on the parent page in the menu navigates to the page, not showing the child menu.

To facilitate child menus on touch enabled devices clicking on the parent should not open that page, but rather show the list of child items.

To modify the traditional menu for touch devices the parent menu items are disabled.

If the parent page isn’t accessible how to view it?

Adapting menu for touch: child menu incorporating parent

If you need to implement the parent page move it, possibly with a variation in name into the child list. For example, the Veg page could be moved as a child below with the renamed parent Vegetables.

The parent page in the menu is there solely for structure it’s no longer a physical viewable page.

Open IceDove Email Link in IceWeasel

Links in IceDove email messages weren’t opening in IceWeasel.

How to configure IceDove link options?

I found reports on the Internet that the file ~/.mozilla-thunderbird/default/<profile>/prefs.js should be edited as follows:

user_pref("network.protocol-handler.app.http","iceweasel");
user_pref("network.protocol-handler.app.https","iceweasel")

I considered IceWeasel’s configuration, available through the about:config

To make mailto links in firefox (iceweasel) open thunderbird (idedove) automatically, type about:config in the address bar and edit (or insert if it doesn’t exist) the following key and value

network.protocol-handler.app.mailto => icedove
open-icedove-link-iin-iceweasel

There’s a pop-up window to confirm that you know what you are doing:

Changing these advanced settings can be harmful to the stability, security and performance of the application. You should only continue of you are sure of what you are doing.

I'll be careful,  I promise!

I scrolled down the list and changed the entry to IceWeasel.

This didn’t work!

I used the popup dialogue when clicked on the link

  1. From the pop-up menu, select “New”.
  2. From the next pop-up menu, select “String”.
  3. In the pop-up dialog box “Enter preference name”, enter network.protocol-handler.app.http
  4. In the pop-up dialog box “network.protocol-handler.app.http” enter /usr/bin/iceweasel

Subsequent to following the dialogue I tried returning to the preferences and the config editor.

I was only able to find the one entry for IceWeasel in my search. Closing and restarting IceDove

The settings achieved through the linked dialogue proved to be used in place of any settings selected within the preferences.