The latest issue of Web Designer boasts fifty of the best tips and techniques for leading blogging platforms, WordPress, Joomla, Drupal and Squarespace. For a taster of what can be expected here is a selection of exclusive online tips. If you love these we guranatee that the 50 Top blog tips feature in Web Designer 171 will not disappoint. Enjoy.

Wordpress

Modify post date
By default, WordPress posts are assigned the current date and time. This means that if a post is time or date sensitive, eg the author forget to post on the correct date, it can look out of place at the top of the post pile. To change the date of a post first select the post by pressing Edit. In the Publish module click Edit next to Published on:. Change the date, click OK and press Update Post.

Schedule a post
Typically, posts are published the same time as they are created. However, if needed a post can be post dated to appear at a certain time in the future. First, create a new and head to the Publish module when complete. Click the Edit link after Publish immediately, add the desired date and time and press OK. Finally, click the Schedule button to finish.

Joomla

Essential free extensions
When you install Joomla you just get just he bare bones of a CMS. The next job is to ‘pimp’ your Joomla ‘ride’ by installing extensions. Here are a few ‘must haves’ which you really must download: JCE Editor (www.joomlacontenteditor.net/) is an essential content editor, JoomlaComment (http://joomlacode.org/gf/project/joomagecomment) puts comment boxes beneath all stories (don’t forget, unlike WordPress, Joomla does not include comment functionality by default), Foobla RSS Creator (http://foobla.com/) handles all your feed needs and JoomlaStats (http://www.joomlastats.org/) handles site traffic stats. These extensions are free and will really enhance your Joomla experience, so what are you waiting for?

Uninstall old extensions
Extensions can be a cause of security holes. Take a look at the vulnerable extensions list at http://docs.joomla.org/Vulnerable_Extensions_List for a rogues gallery of evil extensions. You may wish to patch  or even uninstall potential dodgy extensions. Before you do any of this back-up your database, so why not install Akeeba Backup (www.akeebabackup.com) a free component that allows you to restore your site easily. To properly remove an extension (rather than just disabling it) select Extensions – Install / Uninstall from the menu and then select the type of extension you wish to uninstall. You have the choice of removing any non-essential component, modules, plugin, languages or template.

Squarespace

URL Shortcuts
Squarespace includes URL Shortcuts to perform URL Rewrite, 301 Redirect, and 302 Redirect. This is an incredibly handy feature if you need to move a page in an SEO friendly way, but this feature has additional uses as well. Sites like Google, eBay, and Paypal often request that you point to a /root level ownership verification file within your site. Since all files within Squarespace exist at “/storage”, you’ll need to use the URL Shortcut feature to point “/file” to “/storage/file” within your site. You can access the URL Shortcut feature within the Website Manager under “Structure”.

Optimizing Squarespace sites for Search Engines
While Squarespace sites are setup automatically to use clean URL structure for modern SEO, there are a couple of additional tweaks you can make to ensure site visibility. Make sure that you’ve enabled search engines to index your site content. Go to Website Management>Website Settings>Search/Indexing. Add a “Description” for your site, and check the boxes to allow search engines to index and archive your site. If you’re using a Journal page within your site, open the Journal configuration menu and scroll to “XML-RPC Ping Options”. Click the listed sites to enable pings for new entries automatically.

Code Injection
Squarespace includes Code Injection Points within Website Management>Website Settings>Code Injection that you can use to add new regions of code at various points in the lower level markup. These points allow for the addition of Flash header code, Google ad banners, custom navigation, etc. However, a favourite trick is also to open a <div> tag within a top level injection point like “Pre Canvas” and close the </div> within a lower level injection point like “Post Canvas”. This way, you can add additional wrappers to your site as needed.

Total CSS Control
Deep within the underbelly of Squarespace lies a dark and powerful feature that only the most seasoned of developers dare to explore. Within Style Edit Mode > Advanced you’ll find a small check box for “Complete CSS Override”. This setting removes all Squarespace Core CSS and puts you in control. For advanced users, this setting is sure to be a CSS Edit, lights out, zen in the art, romp through a cavern of mystery – with only the markup to guide you. Novice users should expect to turn back fairly quickly.

ADDING TEXT AND overlays to images was the domain of image editing software in the not-too-distant past. Users had to integrate all the necessary elements directly into the image. This worked perfectly well until any of the elements needed to be updated. The whole image would need to be recreated and replaced. Using CSS, the transparent PNG-24 file format and background image, the whole process becomes far more flexible. The first step is to create two new classes which will be applied to the two div tags that make up the technique. One of the div tags will hold the background image and a second will act as the overlay for any text.

If using Dreamweaver head to Insert>Layout Objects>Div tag and add before creating another tag to go inside the initial tag just created. Next create a new class, Format>CSS Styles>New, called holder and make sure the height and width are large enough to hold the background image. Now create another class called overlay and define the height, width and add any padding as this div will contain text. Now double-click the initial class in the CSS Panel and add the background image. Now do the same for the overlay div tag.

The background image for the overlay will need to be in the PNG-24 format with the opacity turned down to create the transparent effect. The main elements of the technique are now in place and the first job is to position the overlay so that it lines up with the background image. First add in a top margin to position the overlay. For example, if the holder tag is 500 pixels, make the top margin around 400 pixels to place the overlay near the bottom of the tag. If an image has a drop shadow the holder tag will have padding. Adjust the margins on the overlay class to perfectly place. Now add any text to the overlay and style to finish off the technique.

With the latest release of Flash Player 10 there is even more reason to take advantage of this feature. Flash Player 10 now can capture keyboard presses as well as mouse clicks when in Full Screen mode so this is perfect for sending your Flash games into full screen mode for the same fully immersive experience we’ve been able to enjoy with video.
To take advantage of this simply add a button to the stage with an instance name of ‘screen_btn’. It’s probably a good idea to label this button ‘screen toggle’ or something else suitable so the user knows what it does. Then add the code shown into your existing ActionScript. The first two lines just import the relevant classes into Flash for button events and the display. The next line connects the screenHandler function to your ‘screen_btn’ on the stage and tells it to run if the button is clicked. The screenHandler function itself is powered by an ‘if’ statement. All this does is simply check if Flash is currently in Full Screen mode. If it is then it changes the mode to normal, but if not it jumps the screen out of the browser.
The very last step is to go to File>Publish Settings and then click on the HTML tab at the top of the pop-up window. Change the template drop menu to Flash Only – Allow Full Screen, and finally click the Publish button to test. This is a quick and simple way to add full screen to any project. Technique Leave the browser behind with Full Screen mode

CODE:

import flash.display.*;
import flash.events.*;
screen_btn.addEventListener(MouseEvent.CLICK, screenHandler);
function screenHandler(e:MouseEvent):void{
if (stage.displayState== StageDisplayState.FULL_SCREEN){
stage.displayState = StageDisplayState.NORMAL
}else{
stage.displayState = StageDisplayState.FULL_SCREEN;
}
}

A footer sits at the bottom of a page ready to be read. We show you how to make sure it sticks to the bottom of the browser window.

A STICKY FOOTER effectively sticks to the bottom of a page/browser window. When the browser window is resized the footer goes with it. The method we are going to demonstrate sticks to the bottom of the page until it comes into contact with page content. Then the scrollbars are called into action and it’s back to scrolling to get to the footer. The technique is very much based on the Ryan Fait example found at http://ryanfait.com/
resources/footer-stick-to-bottom-of-page/.
First create a div tag called #wrapper (Insert>Layout>Objects>Div Tag). Place the next div tag called #push in-between the opening and closing tags of #wrapper. Now place the third div tag called #footer directly
underneath #wrapper. Now add the following In the associated CSS file:

* { margin: 0;}
html, body {height: 100%;}
Now add the following CSS to #wrapper:
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -120px;
}

The important element to note here is -120px. This is effectively the size of the footer. This can be any measurement, but it must be the same in the rest of the CSS code. Now add height: 120px; to #push and #footer. Next add a div tag to hold content , before #push, and style up #footer to finish. An alternative solution can be found at http://www.cssstickyfooter.com. Here the author uses a class instead of a push div tag. Some might say that this is a more semantic and standards-friendly alternative, but the outcome is effectively the same.

You’re probably familiar with the LoVe-HAte rule – that being the rule that your link states should be in the order link-visitedhover- active. Why? Specificity!

Ordering attribute selectors
If you’re using attribute selectors (which are supported in all makes of browsers, including IE7 and up), you may not be aware that their specificity is counted the same as for classes. This leads to an interesting conflict: p[id=”lead”] has a lower specificity than p#lead, even though both select exactly the same element in a document. Therefore, if you happen to use both selectors in your CSS, any conflicts between the two would be won by the declarations in the p#lead rule. It also means that if you have two rules applying to the same element, one using a class and the other an attribute selector, their order can matter.

Given:
ul[id=”first-list”] {list-style-type: disc;}
ul.instructions {list-style-type: square;}

… then <ul class=”instructions” id=”first-list”>

will have square bullets, not discs.

GA: I really felt that it’s too easy these days to just send in a PDF, or an email with a link to a website. As I was approaching agencies here in Sydney, an industry I really didn’t know very much about and have any contacts, I really felt it was important that I created something with a bit of impact that stands out. Being aware of what it’s like working in an agency and seeing how many unopened emails, PDFs and CVs from designers used to come in and end up lost somewhere in the creative director’s inbox made me realise that I needed to create something which would physically make them stop and look away from their screen allowing a little amount of time to introduce myself and my work. This idea really influenced the overall design and tone of the piece. I kept the cover simple, bold and personal to try and get them to take that minute to look into it a little further. The general design is like I was actually introducing myself and it was informative in terms of my details but also just how to navigate the printed piece itself. I created custom card inserts to mask the cover of the mailer to help with the impact. I think it is really important to find out the names of everyone that you are going to contact, spell them correctly and genuinely show some interest in working there. Although I predominantly used the mailer as a means of showcasing my work and skills, I had also spent a lot of time building a strong online presence through my own website and blog which the mailer referenced back too and they all sat consistently well together in look and feel.

WD: What design and/or production issues did you face?

GA: The main design problem I faced was format. I knew that I wanted to make the piece predominantly about showcasing my work so that the recipient could quickly and easily just look at work samples if they didn’t want to read all the information. Generally I feel that most designers and agencies will make a judgement on you based on the work before anything else and really just want to see that before then going back to read more about you. I decided that I wanted to create a large-format poster again for physical impact so I thought originally about sending out posters in custom poster tubes but soon realised that that would be difficult and expensive to do well. I started looking at various ways that I could fold the poster down to a more manageable, mailable size and eventually went for an A2 flat poster which folds down to a A5 booklet. This gave me the impact of the poster and also a nice sequential booklet to introduce myself. The A5 size meant it was much easier to mail and the A5 plastic sealable bags were an offthe- shelf size which helped to keep the cost down. The only other problems faced once I had the format was actually sitting down and putting the design together and selecting the work I wanted to showcase, it’s true that you are your own worst client. I must have gone through ten versions of the design before I finally settled and that was only because I was running out of time! In terms of production I wanted them to be printed litho for quality and I chose to print them on Cyclus Offset for a nice off white newsprint feel. Luckily I had a contact at a printers which was happy to do me deal on the printing which helped keep the cost down. Obviously due to printing litho I had to get far more than I needed to make it worth switching the press on and so I ended up with 250 and around 50 were sent to selected Sydney-based agencies. I will be selling the remaining 200 or so when I return to the UK in the autumn on a new shop feature on my website.

WD: What key advice would you give to any designer/agency that was thinking of using a similar method of self promoting their skills/products?

GA: It would differ whether you are a designer sending to agencies or whether it is more of a new business/marketing tool aimed at potential clients but my advice would be to create something that represents you to the best of your ability and something that you, as a designer, would be excited to find sitting on your desk. I tried to create something that I thought was in itself a good example of my design skills as well as something which would introduce and promote me and my work.

BROWSER PLUGINS ARE, to say the least, awkward. You never know just what your users have installed, or even which versions they support. We’ve all been there, with a fresh install of Firefox, suddenly finding we don’t have the right plug-in or codec to see the video that’s waiting for us on someone’s site. It’s frustrating and annoying, and sometimes it’s just easier to go somewhere else.
HTML 5 is intended to make that go away. Not only does it add video and audio tags that work just like our old friend <image>, it’s also expected to mandate browser support for key media types, including the open source Ogg formats.

<video src = “ myvideo.ogv” controls = true poster =
“myimage.jpg” width = “320” height = “240”>
<a href = “ http://www.mysite.com/mvideo.
ogv”>Download the movie</a>
</video>

Putting video (or audio) on an HTML 5 page is easy. All you need is the URI of the movie you want to display, and you’re ready to add it to a <video> tag. Unlike <image>, you can use a closing </video> tag to provide a download link or an
embedded Flash Player for users without access to an HTML 5 browser. The controls option allows you to turn the default controls on and off. There’s a JavaScript API for <video> and <audio> so you can add your own controls to a page.
There’s also support for loading an image that displays while the movie is loading or isn’t being played, using the poster option. Just provide a link to the preferred image.
One interesting option lets you use the <source> tag  to define different versions of a video or an audio file, so if a user (or browser) has a preferred format, then it will be available. You’ll need to include the MIME type of the format as part of the source definition.

A QuickTime video playing directly in a copy of Apple’s Safari browser, using the HTML 5 <video> tag

You can use any HTML editor to work with HTML 5 – just don’t
expect every new tag to be recognised

To help us compile our next cover feature on Web Designer 160, we’re asking Flash experts to contribute advanced techniques and resources.

So if you consider yourself to be an experienced user or work within professional Flash design and want to share your most treasured tips with the Web Designer community then we want to hear from you now!

Basically each tip must be between 100-150 words in length, along with any screen grabs of the technique being performed AND/OR any snippets of code being referred to. We’ll also need a print-res mugshot of each contributor plus your name and URL.

Tips must also be labelled under the following categories of ActionScripting, General Animation, Video/Multimedia, GUI Design, Games, SEO, or General Flash.

You may also supply tips referring to favourite Flash resources, books, tools etc, and you may supply multiple entries.

The best examples will be added to the feature, while all will be posted to this blog.

We would appreciate all Flash tips to be supplied to webdesigner(at)imagine(hypen)publishing(dot)co(dot)uk by Friday June 26th

Thanks for your cooperation and we look forward to involving everybody!