Below is one of the most recent design ideas that we came up with for Posh and Cosy’s new website. The idea was to create a stylish feminine and professional looking design to appeal to its ever growing client base (p.s as you can see its not quite finished).
Click on the image to see a larger version.
Today we launched the all new website for the new Falcon Ridge development, a unique development of 15 contemporary lodges at the old Dobwalls Adventure Park site.
The lodge features include:
Falcon Ridge is an exclusive and unique development of 15 luxury holiday homes, marrying beautiful quality and contemporary styling with a truly wonderful and natural setting. Offering contemporary living in a magnificent location, each home at Falcon Ridge is nestled within its own landscaped and spacious plot each with its own wonderful outlook – a truly perfect environment in which to relax, unwind and breathe.
The two bedroom homes at Falcon Ridge reflect the wonderfully natural setting in which they exist. Extensively built from timber harvested from sustainable forests – still the most beautiful building material available - before being blended with contemporary styling and state of the art appliances.
Click here to launch the website
lodges for sale, holiday lodges for sale, residential holiday homes for sale, holiday lodges for sale cornwall, beach holiday lodges for sale
Anyone who works with css knows the great potential and flexibility that it has given designers, enabling us to create beautifully designed and well coded websites. By taking advantage of simple css shortcuts (e.g a line of code relating to one property) you will be able to reap the benefits of time saving and effective code, not only helping you create, but also eliminate any issues that might arise and also make updating much faster.
A common assumption by newbie cssers is to specify each individual property line by line (this is by all means not wrong, but it is however a longwinded way of writing your css). Below in the next set of examples i will try to explain some of the basic methods for shortening your css.
Inefficient code
#selector {
margin-top:25px;
margin-right:0px;
margin-bottom:25px;
margin-left:0px;
}
Efficient code
#selector{
margin:25px 10px 25px 10px;
}
As you can see we have manage to shorten the css styling from 6 lines to only 3. The way this works is by setting the properties in order: Top, Right, Bottom and then Left.
Similarly to simplify your code further you could use the following for the padding attribute:
Even more eficient code
#selector{
margin:25px 10px;
}
This works by setting the top and bottom margin to 25px and the left and right margin to 10px;
If the all of the attributes are the same (e.g top, right, bottom and left) you can simplify your code once again:
#selector{
margin:40px;
}
The example above shows an example where a 40px margin is required on the top, right, bottom and left of your div.
This method isn’t just used for the margin attribute it can also be used for things such as padding and the same principle can be carried into things such as font, background, border etc. Below i will show some example of long winded css compared to shorthand css.
Example 1
#selector {
font-weight: bold;
font-family: verdana;
font-size: 115%;
}
Example 1 in shorthand
#selector{
font: bold 115% verdana;
}
Example 2
#selector {
background-color:#003366;
background-image:url(images/background.gif);
background-position:top;
background-repeat:no-repeat;
}
Example 2 in shorthand
#selector{
background:#003366 url(images/background.gif) top no-repeat;
}
Example 3
#selector {
border-weight:1px;
border-style:solid;
border-color:#ffcc00;
}
Example 3 in shorthand
#selector{
border:1px solid #ffcc00;
}
As you can see the above examples show a clear demonstration of how to code more efficiently.
Another common mistake that i often see when editing other peoples work is the constant use of font this, font that, and its used on nearly every div, or element of the xhtml document.
For example
#mydiv{
font-family:Arial, Helvetica, sans-serif;
font-size:62.5%;
font-weight:bold;
}
.mytextarea{
font-family:Arial, Helvetica, sans-serif;
font-size:62.5%;
font-weight:bold;
}
By utilising the body tag correctly you can save your self a lot of hassle and extra code.
Simply start by setting everything in the body tag like below:
body{
font:bold 62.5% Arial, Helvetica, sans-serif;
colour:#000;
}
Additionally if you know that you want everything to have the same font, whether it be an input element or just a standard div, make use of the star hack:
*{font-family:Arial, Helvetica, sans-serif;}
To find out more regarding the star hack click here
Cubcart Skins
http://www.cartdesigns.net/
50 beautiful css designs
http://www.smashingmagazine.com/2006/12/19/50-beautiful-css-based-web-designs-in-2006/
Nice Blog
http://creativebits.org/taxonomy/adobephotoshop?from=50
Mega Proxy
https://www.megaproxy.com/freesurf/
Popup
http://www.kirupa.com/developer/flash8/centered_popup_window2.htm
HTML characters
http://www.w3.org/MarkUp/html-spec/html-spec_13.html
Highslide
http://vikjavev.no/highslide/#examples
CSS TRICKS
http://css-tricks.com/the-different-techniques-for-applying-the-png-hack/
Brushes
http://www.bittbox.com/illustrator/28-free-illustrator-brushes-for-making-swooshes-and-swirls/
If you have ever wanted to exclude posts from your homepage on wordpress keep reading…..
Excluding posts on the index page of the blog was one of those things that i knew was possible but never really got around to actually doing it!
I thought i would share the solution to the problem as i managed to find a quick and easy way of excluding the posts.
Step 1
Locate the index.php file in your current active theme. This is usually situated in the ‘wp-content/themes/’ folder of your server. Once you have located this folder pick your current theme and look inside to find the index.php file. You will then need to download this file and open in your default editor.
Step 2
Once you’ve managed to open the file do a search for the following line of code:
<?php while (have_posts()) : the_post(); ?>
You will then need to insert the following code so you have something that looks like this:
<?php while (have_posts()) : the_post(); ?>
<?php if (in_category('79')) continue; ?>
Step 3
Notice that the category 79 has been used in this example.
To find the id of the category that you want to exclude from the homepage simply login to your admin page and head over to the manage > categories section. Once there simply mouse over the category name that you wish to exclude and notice in the url there will be an id number (this normally displayed to the bottom of your browser).
Extra Steps
If you want to exclude multiple categories simply duplicate the same line of code as shown above changing the id number. See the example below:
<?php while (have_posts()) : the_post(); ?>
<?php if (in_category('79')) continue; ?>
<?php if (in_category('29')) continue; ?>
<?php if (in_category('30')) continue; ?>
<?php if (in_category('12')) continue; ?>
This is its as simple as that!
Using the php include(); statment can be a handy way to speed up your development time , making it easier to amend or add features to a set template or snippet of code.
I have uploaded a zip file with an example of a few include statements. This can be found at the bottom of this post.
<?php include("includes/filename.php"); ?>
Take a look at the attached example and see how you can use the php include function to speed up your development time.
Unless your machine is set up to allow php files to run locally you will need to upload it to your server to test.
So at last the new website design has been implimented! Out with the old design, in with a much a more robust framework, gallery and blog. Clean XHTML and CSS all round, and what i believe to be a much nicer designed site. It’s taken about 20 designs, 3 version builds, 120 days, ive lost count how many hours but the website is now live.
The website has many new features, from a user perspective and mine. Tackling pngs was one of the most challenging aspects of the design, making the transparency work across multiplue browsers, new and old caused a few issues but nothing that couldnt be sorted.Just a few of the sites new features:
If you have any comments id love to hear them.
Changing the right click menu in flash files is relitivley simple. Using the code below and placing it on the root of your document you can add a new right click menu to your published files. This disables the existing zoom in, zoom out ect and enables you to attach functions to the buttons, whether it be launching a new web page or changing the colour of the movie clip document.
Paste the following code onto the root of your flash document, directly onto a blank frame, publish your movie, Job done!
//define any functions to included on a menu item
function launchsite1(){
getURL("http://www.minimalistics.co.uk", _blank);
}
function launchsite2(){
getURL("http://www.minimalistics.co.uk/contact.php", _blank);
}
////Declare a new menu item
newmenu = new ContextMenu();//Hide the built in flash menu
newmenu.hideBuiltInItems();//define your new menu items
item1 = new ContextMenuItem("My Home Page", launchsite1);
item2 = new ContextMenuItem("Another Web Page", launchsite2);
newmenu.customItems.push(item1);
newmenu.customItems.push(item2);//Build New Menu
_root.menu = newmenu;
You can change add or remove any of the items above to suit your requirements.
Friday saw the launch of the all new http://www.kitchensbydezine.co.uk website.
Back in January we were approached by a fellow designer to create a series of flash header bars to be positioned on the new website. The idea was to bring the images to life creating a movie like appearance.
We also helped out with search engine optimisation of the website. The company offer bespoke kitchen design in devon and already we see them coming up top for search phrases such as Modbury kitchens, Modbury kitchens Devon and we’re on the push to get them at the top for kitchen designers in plymouth and kitchen designers in devon.
So far in only a week we have seen the site take a huge number of hits proving that our methods of design, coding and development work!
Personalise your site by creating your very own icon, removing the standard browser icon such as the I.E or Firefox logo. This will change the icon not only on the browser tabs but when a user adds your site to their favourites.
Step 1 - Design your icon
Simply design and image that you want to use (standard is 16 x 16 px).
Step 2 - Convert your image to a .ico file
Once you have created this icon simply convert this to an icon. There are a number of ways to do this. Download/Purchase software to create .ico files alternatively visit http://www.html-kit.com/favicon/ and create your own free icon by simply uploading your image and downloading.
Step 3 - Upload your logo
Once this has been done and you will need to put your favourite icon in the root of your website. e.g. www.mysite.com/favicon.ico make sure you keep the file name as “favicon.ico”.
Step 4 - Add the following code
In your webpage document simply add the following code anywhere within the <head>…..></head> tags.
<link rel="shortcut icon" href="favicon.ico" mce_href="favicon.ico" />
or if you need it to work on a number of pages within folders simply link to the file direct.
<link rel="shortcut icon" href="http://www.minimalistics.co.uk/favicon.ico" mce_href="http://www.minimalistics.co.uk/favicon.ico" />And its as simple as that!
