Archive for the ‘Website Tips and Tricks’ Category

Our Studio Blog has Moved

January 3, 2014

The Tinstar Graphic Design and Studio Blog has moved – we’ve brought it back under the wing of our main website. Come by any time.

How to view Google cache information for your website

August 30, 2013

In order to find out the last time your website was indexed by Google, you need to view the cache information. This used to be easily accessed from the SERPs (Search Engine Results Pages) but now you need to use a more direct method.

Copy the following:

webcache.googleusercontent.com/search?q=cache:

Add your website address to the end of it:

tinstar.co.uk

Resulting in:

webcache.googleusercontent.com/search?q=cache:www.tinstar.co.uk

HTML Entities for Triangles

July 10, 2013

I’m always having to look these codes up – so where better than our own blog? The HTML codes for pointy triangles are:

For HTML Entities
◄ = ◄
► = ►
▼ = ▼
▲ = ▲

Thanks to StackOverflow

NMS Formmail Spam Blocker

November 20, 2012

Having replaced all our client forms with the more secure NMS Formmail, there are ongoing issues with ‘spambots’. We’ve all experienced their relentless irritation. Some feckless idiot wastes their life creating programs to trawl the internet for HTML forms. It then fills them in with whatever worthless junk it’s peddling and moves onto the next.

In this respect, success online is a double-edged sword. The more successful your website is, the more of these scripts track you down; and the more spam you get in your in-box.

There are a couple of ways to stop spam like this. One is to use the usability-killer ‘captcha’ graphics. This is the unreadable graphic we find at the end of forms that we have to spend a few seconds of our lives attempting to translate. We then have to do it again because we got it wrong the first time.

Enter solution 2. This works with NMS Formmail – the more secure perl script that the London Perl Mongers developed from the highly insecure Formmail created by the teenager Matt Wright in 1997. This simple solution combines a single CSS entry with a little customised script added to the nms_formmail.pl script.

In brief, all that needs to be done is to add an additional text input field to your form. Give it a name and class of something like ‘Surname’ (or anything that is not already being used by your form). Create a .Surname {} CSS class and set visibility to ‘none’. Then add the following code to the # USER CUSTOMISATION SECTION of the nms_formmail.pl script:

# USER CUSTOMISATION SECTION
# --------------------------
# Place any custom code here

use CGI;
sub spam {
my $q = new CGI;
my $spamcheck = $q->param('Surname') || '';
if ($spamcheck ne '') {
print "Location: http://www.farfaraway.com\n\n";
exit;
}
}
spam();

Then comment out (#) the ‘use CGI;’ line:

# use CGI;
use POSIX qw(locale_h strftime);
use CGI::NMS::Charset;

Now if a spambot completes the form (including the one invisible to humans) then they are sent to http://www.farfaraway.com – or anywhere you want to send them. Anywhere, in fact, other than your submission script. Humans, on the other hand, will not complete the additional field because they can’t see it – and will successfully submit the form. Result.

This information was discovered on the following website (where a more comprehensive explanation can be found):

which, in turn, got the supporting code from:

How to make a child DIV the same height as its parent DIV

September 21, 2012

This one is strictly for designer geeks! Every time I come across this problem I have to scour the internet to find an answer. Having found it once again, I am now inserting it into my blog to ensure that I don’t lose it again!

If you want to make a child DIV box appear to be 100% of the height of its parent (without having to fill it with content), here is the CSS code that will achieve the desired result:

.parent {
overflow: hidden;
position: relative;
}

.child {
height: 100%;
position: absolute;
}

Source

Adding Page Content to a Different Page in WordPress

March 22, 2012

With thanks to this post, this snippit of code (when added to a template) will allow you to create page content (or several pages) that can be inserted into another page, thus making any content management a little easier to cope with by a client. For example, instead of editing one big page with a variety of content (and risking damaging the layout), you can just edit single blocks of text that will automatically appear on your designated page.

<?php // Create second WordPress loop $page_content = new WP_Query( 'pagename=page-slug' ); while( $page_content->have_posts() ) : $page_content->the_post(); // Your content output goes here echo '<h2>'; the_title(); echo '</h2>'; the_content(); endwhile; // Don't forget to reset the post data! wp_reset_postdata(); ?>

If permalinks are set to default, pagename=page-slug becomes page_id=8 (substitute ‘8’ for the actualy page ID number).

Save YouTube Videos to Your Hard Drive on a Mac

March 9, 2012

If you have a Mac and you want to download YouTube videos to your hard drive (as we recently had to do for a client), here’s how.

METHOD 1

You need to download the VLC video player in order for this to work.

Step 1 – Copy the URL of Video you want to download from YouTube (select the website address at the top of Safari and copy the whole thing).

Step 2 – Open the VLC program. Select FILE/ADVANCED OPEN FILE… from the menu. Click ‘Network’ and paste the address into the URL field. Click Open.

Step 3 – Select WINDOW/MEDIA INFORMATION… A window will open up with ‘Location’ at the bottom containing the online address of the video. Select and copy this address.

Step 4 – Go back to Safari and open a new window. Paste the address into the Safari address bar. Select WINDOW/DOWNLOADS and you should see the last thing on the list in the downloads window is a file called ‘videoplayback’. Click the little magnifying glass to the right of the file to locate it on your hard drive. It would be a good idea to rename the videoplayback file to the name of the video so you know what you’re looking at when you play it back later.

Step 5 – Drag the file from the downloads folder over the VLC video player window and you should now be able to watch the video offline…

METHOD 2

In Safari, go to the video you want to watch in YouTube. Whilst it is playing, select WINDOW/ACTIVITY. Look down the list of items displayed under the name of the page you’re on. There should be one much bigger than the rest (in terms of file size). Double click this one and a file called videoplayback.flv should appear in your downloads window. Once it has downloaded it you’ll be able to play it back offline (assuming you have a Flash player available). VLC player will also play Flash videos so you could just open it in there.

Add Identifying CSS Class to WordPress Caption Boxes

February 23, 2012

It’s been a source of some irritation up to now that WordPress caption containers have been somewhat unwieldy when it comes to styling. I really wanted them to behave differently depending on what size image they contained, and whilst the images have identifying hooks (like size-large & size-medium etc) the caption containers just displayed wp-caption and wp-caption-text (other than the dynamically generated individual image identifier).

What I had to do in the end was ‘hack the core’ and make a very slight adjustment to the includes/media.php file as follows:

I changed this line (approximately line 745):

return ‘<div ‘ . $id . ‘class=”wp-caption ‘ . esc_attr($align) . ‘” style=”width: ‘ . (10 + (int) $width) . ‘px”>’

to this:

return ‘<div ‘ . $id . ‘class=”wp-caption ‘ . ‘imagesize’.$width . ‘ ‘ . esc_attr($align) . ‘” style=”width: auto”>’

This achieved two things. First it removed the automated additional 10px width added to the box (taking the image width and adding 10 pixels). Secondly it added a CSS class after the wp-caption entry. This becomes imagesizexxx. The xxx becomes whatever the image width is. That way you can specify exactly how you want the caption box to behave depending on what width image it contains.

Problem using the WordPress App to edit a self-hosted blog

February 20, 2012

If you want to edit your WordPress self-hosted blog using the iPhone or iPad App, you may come across an error message that reads: “http/1.1 405 Method Not Allowed”. The reason for this is that the file in the root of a WordPress blog that smart devices access for editing purposes: xmlrpc.php is often used by hackers to access a website and cause malicious damage. For this reason Web Hosts take a flamethrower approach by blocking all access to the file.

I ran across this issue whilst trying to add a blog to an iPad version of the App. The blog is running on WordPress 3.3.1 and I managed to solve the problem by following these steps:

  1. Rename the xmlrpc.php file via FTP (found in website root) to xmlrpc_whatever.php
  2. Through WordPress Dashboard, click on Plugins / Add New and search for Rename XMLRPC
  3. Install Rename XMLRPC plugin but don’t activate it
  4. Find Rename XMLRPC plugin in list and click ‘edit’
  5. Locate the line that reads:
    $renamed_xml_rpc_filename = ‘xmlrpc2.php’; //CHANGE THIS pointing to the renamed file
  6. Change the filename xmlrpc2.php to xmlrpc_whatever.php and click Update File
  7. Activate the plugin
  8. In the WordPress Dashboard, go to Settings / Writing
  9. Near the bottom of the page find and tick the checkbox: Enable the WordPress, Movable Type, MetaWeblog and Blogger XML-RPC publishing protocols.
  10. From your device WordPress App, add a self-hosted WordPress blog and make sure the address is: http://www.yourwebsite.com/xmlrpc_whatever.php

This should now add the blog without further error.

CSS3menu.com Menu Drops Down Behind Flash Element – Four Fixes

December 6, 2011

In an effort to improve the Google crawl rate, loading time and general SEO good practice on a number of our clients’ websites, we began to replace some of the older Javascript menus with CSS3 versions.

In order to speed up the coding process I searched around to see if I could find a CSS ‘menu creator’ which could do the donkey work, and which would create CSS that I could subsequently edit. Thus I came across css3menu.com which seemed to tick the boxes.

I bought a license and went to work. Initially I was a little disappointed that there wasn’t much control over the features, such as drop shadows etc. There only seemed to be an option to select a pre-designed template. If any further editing were required, it was clear that I’d have to do it myself.

What it is really good at though is offering the ability to construct the menu structure quickly and easily. You can also set basic settings such as menu width and submenu fading; although the latter became a thorn in my side…

Once I’d created my first menu I brought it into Dreamweaver to see how it worked within the website, and to ensure that none of the Flash elements were affected. Unfortunately they were. For at least an hour I struggled to get the menu to work in (surprisingly) Safari. All other browsers (except IE6) worked fine – but in Safari the menu was hiding behind the Flash element underneath.

Normally if a dropdown menu disappears behind a Flash element there are a number of possible fixes.

Fix 1.
Adjust the z-index value of the menu DIV to be higher than that of the DIV containing the Flash object.

Fix 2.
Add the following code parameter to the OBJECT tag of the Flash item:
<param name=”wmode” value=”transparent”>

Add the following code parameter to the EMBED tag:
wmode=”transparent”

Fix 3.
If Fix 2 doesn’t work try adding the following code parameter to the OBJECT tag of the Flash item:
<param name=”wmode” value=”opaque”>

Add the following code parameter to the EMBED tag:
wmode=”opaque”

Normally these fixes would help, but in the bizarre case of the CSS3Menu.com menu, it did not. The menu appeared above the Flash item in Firefox, (Windows & Mac), IE7 and 8 and even Opera… but not Safari.

Fix 4.
After pulling my hair out for a while it occurred to me that I had turned off the ‘Open with fade’ option under the submenu tab; but the submenus were still fading in. I found the piece of code in the generated CSS:

ul#css3menu1 li>ul{
opacity:0;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:opacity 0.5s;}

…and deleted it. The CSS generator had simply ignored my request to remove it from the menu. After doing this, all was well and menu worked perfectly.

One other slight annoyance though… if I entered an ‘&’ character in a menu item, it messed up the code and produced this in the source code:

&amp;amp;

Easily fixed though – I just had to go through with a search and replace with:

&amp;

CSS3Menu.com Verdict

A handy way to familiarise yourself with CSS dropdown menus and a fast way to create the bones of a nicely compliant dropdown menu. There are a few glitches as detailed above, and a very poor help section, but overall I think that the time I’ll save will be well worth the money.

If you want a menu to work in IE6, this one is not for you – although I compromised by including the following script in place of the menu (only to appear in IE6):

<!–[if IE 6 ]>
<span style=”text-align:center;”>In order to correctly view the navigation on this site, please upgrade your browser from Internet Explorer 6 to the <a href=”http://windows.microsoft.com/en-US/internet-explorer/products/ie/home”>latest version</a>. Other browser options include <a href=”http://www.mozilla.org/en-US/firefox/new/”>Firefox</a&gt;, <a href=”https://www.google.com/chrome”>Chrome</a&gt; and <a href=”http://www.apple.com/safari/”>Safari</a&gt;. Alternatively, please navigate our site via our <a href=”http://www.yoursite.co.uk/sitemap.html”>Sitemap</a&gt;. Thank you.</span>
<![endif]–>